<md-content layout="column" layout-align="center stretch" class="content">
  <ul class="breadcrumb">
    <li><a href="#/documentation/2.0.2">2.0.2</a> <span class="divider">/</span></li>
    <li><a href="#/documentation/2.0.2/language/overview">Language</a></li>
  </ul>
		<h2 id="Group">Group</h2>
		<h3 id="description">Description</h3>
		<p>The group is a reusable part of the user interface that can be shared between multiple 
			<a href="#/documentation/2.0.2/language/page">pages</a>. It can contain various widgets with their validation rules and a specific layout.
		</p>
		<h3 id="properties">Properties</h3>
		<ul>
			<li>identifier: The identifier of the group is used to identify the group.</li>
			<li>labelExpression: The label expression is used to compute the label of the group. This expression must return a string.</li>
			<li>domainClass: The domain class is used to ensure that this group will only be displayed if the current context of the page, computed from the semantic candidate expression of the page containing the group, matches the domain class.</li>
			<li>semanticCandidateExpression: The semantic candidate expression is used to compute the current context of the group in a similar fashion as the semantic candidate expression of the page. This expression must return one object or a collection of objects to be used as the new context of the group. More information are available below in order to create multiple groups from one definition.</li>
			<li>preconditionExpression: The precondition expression is used to determine if the group should be created. This expression must return a boolean.</li>
			<li>controls: The list of all 
				<a href="#/documentation/2.0.2/language/widgets">widgets</a> and 
				<a href="#/documentation/2.0.2/language/container">container</a> used in this group.
			</li>
			<li>semanticValidationRules: The validation rules of the group. For more details regarding the validation in EEF, have a look at the documentation of the 
				<a href="#/documentation/2.0.2/language/validation">validation</a>.
			</li>
			<li>propertyValidationRules: The validation rules of the 
				<a href="#/documentation/2.0.2/language/widgets">widgets</a> of the group. For more details regarding the validation in EEF, have a look at the documentation of the 
				<a href="#/documentation/2.0.2/language/validation">validation</a>.
			</li>
			<li>style: The style of the group is used to modify the appearance of the group in the user interface.</li>
			<li>conditionalStyles: The conditional styles is the list of all the alternate appearance that can be used when a specific condition is fulfilled.</li>
			<li>actions: The list of the Toolbar Actions used to create buttons in the toolbar of the page. Those actions can contain a tooltipExpression wich should return a string used as the tooltip, an actionExpression executed when the user will click on the button and an imageExpression used to configure the appearance of the button. The imageExpression must return a string with the following structure PROJECT_NAME/IMAGE_PATH, for example: org.eclipse.sample/icons/Icon.gif</li>
		</ul>
		<h3 id="variables">Variables</h3>
		<p>The semantic candidate expression will have access to two different variables, 
			<code>self</code> computed from the semantic candidate expression of the page and 
			<code>input</code> the input of the view. Using those variables, the semantic candidate expression of the group will compute a new value which will be available under the name 
			<code>self</code> for all the other expressions in the group. If you have used another value for the semantic candidate expression of the group than the one available in the containing page, you will not be able to access directly the value of 
			<code>self</code> of the page. you may be able to compute it back from the value of 
			<code>self</code> of your group. If you do not have any semantic candidate expression specified, it will reuse the value of 
			<code>self</code> of the containing page, just like the page did with the value of 
			<code>self</code> from the view.
		</p>
		<p>The label expression, the precondition expression, the controls, the styles and the validation rules will all have access to the value of 
			<code>self</code> computed from the semantic candidate expression of the group and 
			<code>input</code>, the input of the view. 
		</p>
		<h3 id="multiplegroupsfromonedefinition">Create multiple groups from one definition</h3>
		<p>In a similar fashion to what can be done in the page, a single definition of a group can create multiple groups in the user interface. For that, you just have to use a semantic candidate expression which will return a collection. For additional details regarding this mechanism, have a look at the documentation of the 
			<a href="#/documentation/2.0.2/language/page">page</a>.
		</p>
		<h3 id="style">Styles and conditional styles</h3>
		<p>Another aspect of the influence of Eclipse Sirius over EEF is the introduction of styling. Styles allow you to customize the appearance of an element of the user interface, here the groups, easily. An EEF group style contains the following properties:</p>
		<ul>
			<li>backgroundColorExpression: The background color expression is used to compute the background color of the group. 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>foregroundColorExpression: The foreground color expression is used to compute the color of the label of the group. 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>fontNameExpression: The font name expression is used to compute the name of the font used by the label of the group. This expression must return a string with the name of a font.</li>
			<li>fontSizeExpression: The font size expression is used to compute the size of the font of the label of the group. This expression must return an integer.</li>
			<li>barStyle: The style of the bar of the group. This style can be either the regular title bar, a short title bar or no title bar at all.</li>
			<li>toggleStyle: The style of toggle for the group. This can be either twistie, tree node or nothing at all.</li>
			<li>expandedByDefault: Indicates if the group should be expanded or collapsed by default.</li>
		</ul>
		<p>On top of regular group style, you have access to conditional styles. A conditional style is a style requiring a precondition in order to be applied. For example, a red style that should only be applied if you have an issue in your data. All those expressions have access to the variables 
			<code>self</code>, computed by the semantic candidate expression of the group, and 
			<code>input</code>, the input of the view. 
		</p>
</md-content>