Minor refinements, grammar, etc.

Author:vwheeler
Date:2014-04-29T16:06:25.000000Z


git-svn-id: https://svn.eiffel.com/eiffel-org/trunk@1343 abb3cda0-5349-4a8f-a601-0c33ac3a8c38
This commit is contained in:
vwheeler
2014-04-29 16:06:25 +00:00
parent 620ffbeb0d
commit 12eadbedf2

View File

@@ -1,48 +1,60 @@
[[Property:title|Widgets]]
[[Property:weight|2]]
[[Property:uuid|595bb73e-146a-ea19-221f-40f3415aad34]]
==What is a Widget?==
==What Is a Widget?==
A Widget is the fundamental building block of your applications GUI, components such as Windows, Buttons and Labels are examples of such. The widget set of EiffelVision 2 provides you with the flexibility to easily create powerful graphical applications. All widgets in EiffelVision 2 inherit from [[ref:/libraries/vision2/reference/ev_widget_chart| EV_WIDGET]] and the features provided in <eiffel>EV_WIDGET</eiffel> may be called on any widget.
A Widget is the fundamental building block of your application's GUI. Components such as Windows, Buttons, Text fields, Check Boxes, List Boxes and layout Containers are examples of widgets. The widget set in EiffelVision 2 provides you with the flexibility to easily create powerful graphical applications. All widgets in EiffelVision 2 inherit from [[ref:/libraries/vision2/reference/ev_widget_chart| EV_WIDGET]], thus the features provided in <eiffel>EV_WIDGET</eiffel> may be called on any widget.
==Variations of Widget==
==Variations of Widgets==
Within EiffelVision 2, widgets have been classified into three different groups:
* [[Primitives|Primitives]] -- These are elements of the user interface that are mainly responsible for interaction with the user, such as an [[ref:/libraries/vision2/reference/ev_button_chart|EV_BUTTON]] .
* [[Containers|Containers]] -- These are used to contain other widgets and position them in a certain way, such as an [[ref:/libraries/vision2/reference/ev_vertical_box_chart| EV_VERTICAL_BOX ]] that stacks its children one by one vertically.
* [[EiffelVision Dialogs|Dialogs]] -- These are pop up dialog windows used for interacting with the user for tasks such as opening a file (EV_FILE_OPEN_DIALOG) or displaying a message (EV_MESSAGE_DIALOG). You may construct your own dialogs by inheriting EV_DIALOG.
==How do I create a widget?==
* [[Primitives|Primitives]] — These are elements of the user interface that are mainly responsible for interaction with the user, such as an [[ref:/libraries/vision2/reference/ev_button_chart|EV_BUTTON]].
* [[Containers|Containers]] — These are used to contain other widgets and position them in a certain way, such as an [[ref:/libraries/vision2/reference/ev_vertical_box_chart| EV_VERTICAL_BOX ]] that stacks its child widgets one by one vertically.
* [[EiffelVision Dialogs|Dialogs]] — These are pop up dialog boxes used for interacting with the user for tasks such as opening a file (EV_FILE_OPEN_DIALOG) or displaying a message (EV_MESSAGE_DIALOG). You may also construct your own dialog boxes by inheriting from EV_DIALOG.
==How Do I Create a Widget?==
All widgets in EiffelVision 2 are based around the default_create mechanism in Eiffel. This means that all that needs to be done to create a widget is to declare a reference to a type (such as [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] ) and then call create on that reference. An example of this is as follows.
<code>
a_button: EV_BUTTON
create a_button
my_button: EV_BUTTON
create my_button
</code>
Along with the default creation, EiffelVision 2 also includes a few convenience creation functions. Examples of this are make_with_text for all widgets that may have text associated with them (those that inherit from [[ref:libraries/vision2/reference/ev_textable_chart| EV_TEXTABLE]] ), this saves a call to set_text upon default creation of the textable widget.
Along with the default creation, EiffelVision 2 also includes a few additional creation features for convenience. An example of this is <code>make_with_text</code> for all widgets that may have text associated with them (those that inherit from [[ref:libraries/vision2/reference/ev_textable_chart| EV_TEXTABLE]] ), this saves a call to set_text upon default creation of the textable widget. Thus:
<code>
create a_button.make_with_text ("Click Me")
create my_button.make_with_text ("Click Me")
</code>
This would be in place of
would replace
<code>
create a_button
a_button.set_text ("Click Me")
create my_button
my_button.set_text ("Click Me")
</code>
{{note|When a widget is created no extra initialization has to be performed. '''The only exception is with windows, for which it is necessary to call <code> show </code> in order for the windows to be displayed on screen'''. }}
{{note|When a widget is created, no extra initialization has to be performed. '''The only exception is with windows, for which it is necessary to call <code>show</code> in order for the windows to be displayed on screen'''. This permits widgets to be added to a window while it is still invisible, and then when made visible with <code>show</code>, the window and all its visible widgets are displayed at once.}}
==Sizing==
As [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] is of type [[ref:libraries/vision2/reference/ev_widget_chart|EV_WIDGET]] , the following facilities are provided for setting the minimum size: set_minimum_width, set_minimum_height and set_minimum_size.
Since [[ref:libraries/vision2/reference/ev_primitive_chart|EV_PRIMITIVE]] inherits from type [[ref:libraries/vision2/reference/ev_widget_chart|EV_WIDGET]], the following facilities are provided for setting the minimum size: <code>set_minimum_width</code>, <code>set_minimum_height</code> and <code>set_minimum_size</code>.
The minimum size of a widget is the smallest possible size that it can possibly be inside its parent container. If an [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] was created and set with a minimum_size of width/height (100, 100), if this button was inserted in to an [[ref:libraries/vision2/reference/ev_horizontal_box_chart| EV_HORIZONTAL_BOX]] , then the box's size could never be below (100, 100) or it would break the minimum size of the button. '''The size of a container must always be greater or equal to the minimum sizes of its children.'''
The minimum size of a widget is the smallest possible size that it can be inside its parent container. If an [[ref:libraries/vision2/reference/ev_button_chart|EV_BUTTON]] was created and set with a minimum_size of width/height (100, 100), if this button was inserted in to an [[ref:libraries/vision2/reference/ev_horizontal_box_chart| EV_HORIZONTAL_BOX]], then the box's size could never be below (100, 100) or it would violate the minimum size of the button. '''The size of a container must always be greater or equal to the minimum sizes of its children.'''
{{note|In EiffelVision 2, there is no way to set the current size of the primitive. The current size is dependent on the size of the parent or the minimum_size. }}
==Now what do I do?==
Now that you can create a widget, you will need to actually make it usable to your intended user. This will usually involve these three steps. <br/>
* Setting [[Properties| properties]] for the widget such as color and the minimum size that a widget can possibly be in its parent container.
* Making the widget respond to user [[Events| events]] via the use of agents and action sequences.
* Placing the widget inside a [[Containers| container]] widget (either a window or a child of a window) so it can be shown on screen.
==Now What Do I Do?==
Now that you can create a widget, you will need to actually make it usable to your intended user. This will usually involve these three steps. <br/>
* Setting [[Properties| properties]] for the widget such as color and minimum size.
* Making the widget respond to user [[Events| events]] via the use of agents and action sequences.
* Placing the widget inside a [[Containers| container]] widget (either a window or a child of a window) so it can be shown on the screen.