22 September, 2011

Alloy UI Elements

September 22, 2011    


These are the tags that can be used in aui forms and some of their attributes. They all support dynamic attributes, which means that you can add any additional attribute and it will be used. For example, if you add the attribute onFocus to a aui:button, the <button> will have this onFocus attribute.

Form

Atributes:

  • action: The same action as in the html form tag, but the url is automatically escaped (and encoded...etc). If you don't want the action url to be automatically escaped, you should set escapedXml to false.
  • escapeXml: True by default. Set it to false if you don't want the action url of your form to be automatically escaped. Note: Does not work in current alloy 0.1a
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • inlineLabel: set this attribute to true if you want all your labels in the form to be inline with the form fields
  • name: the name of the form
Example:<aui:form action="<%= editEntryURL %>" method="post" name="fm" onSubmit='<%= renderResponse.getNamespace() + "saveEntry(false); return false;" %>'>

Fieldset

You should have all your fields grouped at least under one fieldset. It is a good practice to separate different areas with different fieldsets.
Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • column: set this attribute to true if you want this fieldset to be displayed as a column instead of as a row. (this allows you to have a form with several columns)
Example:
<aui:fieldset column="true"> }}}

Button

Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • disabled. Set this to true to disable clicking on the button.
  • first: set this to true if this is the first element in the form (for css styling)
  • last: set this to true if this is the last element in the form (for css styling)
  • type: by default the type is button, but it can be set to submit, cancel or image.
  • name: It will be used for the id of the button.
  • value: The message that the button will display. If empty, it will be save for submit type buttons and cancel for cancel type buttons.
  • onClick: javascript code to be executed when clicking on the button. If this attribute starts with http://, the button will take you to that page when the user clicks on it.
Example:
<aui:button name="cancelButton" type="button" value="cancel" last="true" />}}}

Button Row 

Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
Example:
<aui:button-row> <aui:button name="saveButton" type="submit" value="save" /> <aui:button name="cancelButton" type="button" value="cancel" /> </aui:button-row> }}}

Model Context

Used to set an object that will be accessed from fields in the form.
Attributes:
  • bean: The object that will be accessed
  • model: The class of the bean. Class model hints are saved in portal-model-hint.xml located in the META-INF.Example:<aui:model-context bean="<%= entry %>" model="<%= BlogsEntry.class %>" />

Input

Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • disabled. Set this to true to disable the input field.
  • first: set this to true if this is the first element in the form (for css styling)
  • last: set this to true if this is the last element in the form (for css styling)
  • helpMessage: message to display when the user hovers a question mark icon next to the field label
  • name: name of the field
  • id: id of the field. (If empty, it will be the same as the name)
  • label: Label to display (automatically translated). If this attribute is used and the value is an empty String, then no label will be shown. If the attribute is not used, the label is obtained from the name (automaticalle formatted from ThisIsAName to this-is-a-name).
  • inlineField: set this to true if you want this field to be inline with the next element
  • inlineLabel: set this to left if you want this field to be inline with the label and the label at the left of the input or right if you want the field to be inline with the label but at the right of the input.
  • checked: Set this to true if your element must be checked by default (only enabled when type=radio)
  • type: the type of input element. These are some of the values that type could have:
    • text hidden. When the type is hidden, the value is automatically escaped.
    • password checkbox
    • assetCategories. to for display categories (see liferay-ui:asset-categories-selector) assetTags. Used to display tags (see liferay-ui:asset-tags-selector)
    • timeZone. Used to display the time zones (see liferay-ui:input-time-zone) empty Leave the type empty if you want it to be automatically obtained from the bean and the field. If you set a type, then the value won't be obtained from the bean.
  • suffix: Message to display at the right of the input field.
  • prefix: Message to display at the left of the input field
The field can be prepopulated accesing an object set withe the model Context tag or with these attributes (the type attribute must be blank and it will be automatically obtained later from the bean). The field of the bean accessed will be the name attribute.
  • bean: An object that will be accesed to the get value for this element
  • model: The class of the bean object
Example:
<aui:model-context bean="<%= entry %>" model="<%= BlogsEntry.class %>" /> <aui:input name="title" /> <aui:input name="displayDate" value="<%= displayDate %>" /> <aui:input name="tags" type="assetTags" /> }}} 
Examples about the label attribute:
<aui:input name="titleNormal" /> In this situation the label will be title-normal <aui:input name="titleNormal" label="another-title" /> In this situation the label will be another-title
<aui:input name="titleNormal" label="" /> In this situation there won't be label }}}

Select

Atributes:
  • bean: An object that will be accessed. (Only valid when using listType)
  • listType: The name of the ListType (can be obtained from ListTypeImpl.java). Using this attribute will automatically generate all the options and mark the option from the bean as selected (the bean can be obtained from the model context)
  • showEmptyOption. Displays an empty option as the first option of the select.
  • disabled. Set this to true to disable the selector.
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • first: set this to true if this is the first element in the form (for css styling)
  • last: set this to true if this is the last element in the form (for css styling)
  • helpMessage: message to display when the user hovers a question mark icon next to the field label
  • name: name of the field
  • id: id of the field. (If empty, it will be the same as the name)
  • label: Label to display (automatically translated). If this attribute is used and the value is an empty String, then no label will be shown. If the attribute is not used, the label is obtained from the name (automaticalle formatted from ThisIsAName to this-is-a-name).
  • inlineField: set this to true if you want this field to be inline with the next element
  • inlineLabel: set this to left if you want this field to be inline with the label and the label at the left of the selector or right if you want the field to be inline with the label but at the right of the selector.
  • suffix: Message to display at the right of the selector.Example:<aui:select label="asset-selection" name="selectionStyle" onchange="<%= renderResponse.getNamespace() + "chooseSelectionStyle();" %>"> <aui:option selected="<%= selectionStyle.equals("dynamic") %>" value="dynamic"><liferay-ui:message key="dynamic" /></aui:option> <aui:option selected="<%= selectionStyle.equals("manual") %>" value="manual"><liferay-ui:message key="manual" /></aui:option></aui:select>

Option

Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • label: The label to show for the option (automatically translated).
  • value: The value of the option. If this field is empty, then, the label will be used as the value too.
  • selected: set this to true if this option should appear as selected in the select form Example:<aui:option selected="<%= selectionStyle.equals("manual") %>" value="manual"><liferay-ui:message key="manual" /></aui:option>These 4 expressions are equivalent:<option value="one"><liferay-ui:message key="one"><option> <aui:option value="one"><liferay-ui:message key="one"><aui:option> <option label="one" value="one" /> <option label="one" />

Link (a)

Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • href: the url of the link
  • label: the content of the <a> element (automatically translated).
Example:
<aui:a href="http://www.liferaycms.blogspot.com.com" target="blank">Liferay Blog</aui:a> <aui:a href="http://www.liferaycms.blogspot.com" label="liferay" target="blank" /> }}}

Field Wrapper

Used to wrap any other element in a form (radio elements, custom elements...)
Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • first: set this to true if this is the first element in the form (for css styling)
  • last: set this to true if this is the last element in the form (for css styling)
  • helpMessage: message to display when the user hovers a question mark icon next to the field label
  • name: name of the field
  • label: Label to display (automatically translated). If this attribute is used and the value is an empty String, then no label will be shown. If the attribute is not used, the label is obtained from the name (automaticalle formatted from ThisIsAName to this-is-a-name).
  • inlineField: set this to true if you want this field to be inline with the next element
  • inlineLabel: set this to left if you want this field to be inline with the label and the label at the left of the field or right if you want the field to be inline with the label but at the right of the field.
Example:
<aui:field-wrapper name="permissions"> <liferay-ui:input-permissions modelName="<%= BlogsEntry.class.getName() %>" /> </aui:field-wrapper> }}}

Legend

Used to show a title in fieldsets.
Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • label: Label to display. (automatically translated)
Example:
<aui:fieldset> <aui:legend value="personal-details" /> .... </aui:fieldset> }}}

Layout

Used to wrap columns (avoiding tables)
Atributes:
  • cssClass: custom classes for additional styling (the attribute class will be ignored)

Column

Used to create columns without using tables
Atributes:
  • columnWidth: This will be the width of the column. It must be a percentage value. Valid values: 10, 15, 20, 25, 28, 30, 33, 35, 40, 45, 50, 55, 60, 62, 65, 66, 70, 75, 80, 85, 90, 95
  • cssClass: custom classes for additional styling (the attribute class will be ignored)
  • first: set this to true if this is the first element in the form (for css styling)
  • last: set this to true if this is the last element in the form (for css styling)
Example:
<aui:layout> <aui:column columnWidth="25" first="true"> ... </aui:column> <aui:column columnWidth="75" last="true"> ... </aui:column> </aui:layout> }}}

Textarea

Textarea elements can be done using aui:input 
Example:
<aui:input type="textarea" name="comments" /> }}}

Radio

The radio element can be done using aui:field-wrapper and aui:input 
Example:
<aui:field-wrapper name="gender"> <aui:input inlineLabel="right" name="gender" type="radio" value="1" label="male" /> <aui:input checked="<%= true %>" inlineLabel="right" name="gender" type="radio" value="2" label="female" /> </aui:field-wrapper> }}}

Popular Posts

Featured Post

Liferay 7.3 compatibility matrix

Compatibility Matrix Liferay's general policy is to test Liferay Portal CE against newer major releases of operating systems, open s...