<md-content layout="column" layout-align="center stretch" class="content">
  <ul class="breadcrumb">
    <li><a href="#/documentation/1.7.1">1.7.1</a> <span class="divider">/</span></li>
    <li><a href="#/documentation/1.7.1/language/overview">Language</a></li>
  </ul>
		<h2 id="Widgets">Widgets</h2>
		<h3 id="description">Description</h3>
		<p>A 
			<a href="#/documentation/1.7.1/language/group">group</a> or a 
			<a href="#/documentation/1.7.1/language/container">container</a> can contain various widgets available in order to build your user interface:
		</p>
		<ul>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/text">Text</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/checkbox">Checkbox</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/radio">Radio</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/select">Select</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/label">Label</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/reference">Reference</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/list">Reference</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/hyperlink">Hyperlink</a>
			</li>
			<li>
				<a href="#/documentation/1.7.1/language/widgets/button">Button</a>
			</li>
		</ul>
		<h3 id="commonproperties">Common properties</h3>
		<p>All the widgets in EEF share the following set of properties:</p>
		<ul>
			<li>identifier: The identifier is used to identify the widget, this property is used if you want to customize programmatically the behavior of your widget.</li>
			<li>labelExpression: The label expression is used to compute the label of the widget. This expression must return a string.</li>
			<li>helpExpression: The help expression is used to compute the help tooltip. This expression must return a string.</li>
			<li>isEnabledExpression: This expression is used to determine if the widget should be enabled or disabled. This expression must return a boolean.</li>
			<li>propertyValidationRules: The validation rule that the widget should use. Those validation rules will be contained in the group containing the widget but referenced here. For more details regarding the validation in EEF, have a look at the documentation of the 
				<a href="#/documentation/1.7.1/language/validation">validation</a>.
			</li>
		</ul>
		<h3 id="style">Styles and conditional styles</h3>
		<p>Just like the 
			<a href="#/documentation/1.7.1/language/group">groups</a>, most of the widgets have support for styling with dedicated style and conditional styles. The style of most widgets extends the EEFWidgetStyle. This style contains a set of properties for all the widget styles including:
		</p>
		<ul>
			<li>labelBackgroundColorExpression: This expression will determine the color of the background of the label. This expression must return a string with a hexadecimal-based color, for example 
				<code>#FFFFFF</code>, or a rgb-based one, for example 
				<code>rgb(30,30,30)</code>.
			</li>
			<li>labelForegroundColorExpression: This expression is used to compute the foreground color of the label. This expression must return a string with a hexadecimal-based color, for example 
				<code>#FFFFFF</code>, or a rgb-based one, for example 
				<code>rgb(30,30,30)</code>.
			</li>
			<li>labelFontNameExpression: This expression is used to compute the name of the font of the label. This expression must return a string with the name of a font.</li>
			<li>labelFontSizeExpression: This expression is used to compute the size of the font of the label. This expression must return an integer.</li>
			<li>labelFontStyleExpression: This expression is used to compute the style (bold, italic, strikeout, underline) of the font of the label. This expression must return a string with the style options wanted among 
				<code>strike_through</code>, 
				<code>bold</code>, 
				<code>italic</code> and 
				<code>underline</code>. For example, to set a bold and italic style for the label, you could use 
				<code>aql:'bold italic'</code>.
			</li>
		</ul>
		<h3 id="customwidgets">Custom Widgets</h3>
		<p>You also have the ability to use the custom widget definition in order to provide a &#171;low cost&#187; integration for a custom widget. This custom widget description contains the common properties of all the widgets but it also contains the following properties:</p>
		<ul>
			<li>customExpressions: This property will contain all the custom expressions. A custom expression contains both an identifier and an expression. The return type of the expression of the custom expression object has to be determined with the documentation of the custom widget. Some of those expression may need a specific return type while others may not even need a return value at all.</li>
			<li>style: The style of the custom widget.</li>
			<li>conditionalStyles: The conditional styles of the custom widget.</li>
		</ul>
		<p>Imagine that you want to create a color picker, in order to let your specifier use the color picker you will need two pieces of information from him: &#171;what is the value of the color picker?&#187; and &#171;what happens when a new value is selected?&#187;. In order to achieve this, you just need create programmatically the definition of your custom widget and tell the specifier who will need to use it to create a custom widget with the kind of identifier that you are expecting and then to specify the proper customExpressions. In this example, to set the value of the color picker widget, your code may be expecting a custom expression with the identifier &#171;valueExpression&#187; and an expression like 
			<code>aql:self.colorValue</code>. In order to update the value of the color, your code may be expecting a custom expression with the identifier &#171;editExpression&#187; and an expression like 
			<code>aql:self.updateColor(newValue)</code>.
		</p>
		<p>With the concept of custom widget in the language, you only have to create the code which will handle the widget, you don&#8217;t have to contribute to the EEF language to add your new widget. To contribute the code used to create and handle your custom widget, have a look at the 
			<a href="#/documentation/1.7.1/developerguide/extensionpoints">extension points</a> documentation.
		</p>
		<h3 id="replacedefaultwidgets">Replace Default Widgets</h3>
		<p>EEF provides some APIs in order to let developers modify or replace the behavior of existing widget. Have a look at the 
			<a href="#/documentation/1.7.1/developerguide/extensionpoints">extension points</a> documentation for additional details. 
		</p>
</md-content>