[[Property:title|Widgets]]
[[Property:weight|2]]
[[Property:uuid|595bb73e-146a-ea19-221f-40f3415aad34]]
==What Is a 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 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 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>
            my_button: EV_BUTTON
            create my_button 
</code>

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 my_button.make_with_text ("Click Me")
</code>

would replace
<code>
            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'''. 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==

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 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 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.