Alloy UI Tags

The Alloy UI Forms are a great tool to help developers build very nice forms really fast. Alloy is included in Liferay v6.0+.

These are some of the advantages of using these forms:

    Nice styling of the forms for a better usability

    Unified styling: all the forms look the same and are controlled in one place

    Dynamic Attributes: any attribute that can be used for an html tag can also be used for an aui tag. For example, you can use onClick, onChange, onSubmit, title... in any aui:form, aui:select, aui:input and it will work the same as if you use it an a plain form, select or input.

Tags 

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)

    title: text which describes the group of elements inside the fieldset. (It creates the legend for the fieldset)

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.

Atributes

    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: texthidden When the type is hidden, the value is automatically escaped.textarea Will display a multiline input fieldpasswordcheckboxassetCategories 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.liferay.com|http://www.liferay.com]]" target="blank">Liferay</aui:a>

                <aui:a href="[[http://www.liferay.com|http://www.liferay.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 #

The legend element is created using the attribute title in 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>

Other Examples #

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>

Source Code from  :http://www.liferay.com/community/wiki/-/wiki/Main/Alloy+UI+Forms+%28aui%29#section-Alloy+UI+Forms+%28aui%29-Fieldset