Aim of this Article:
Liferay AUI Taglib provides various tag for faster UI development. This article explains the different liferay alloy ui tags and its uses.
In the left these are the available aui tags which are ready to use in our code. Most widely used tags are
aui:form
aui:input
aui:button
aui:model-context
Form Tag(aui:form):
As the name itself indicates this tag is used to create the form. For example
<aui:form name="fm" action="some-url" method="post" cssClass="" onSubmit=""> </aui:form>
Attributes:
- action: Its the same action tag that we use in html form tag
- name: The name of the form
- method: In most cases its GET or POST
- cssClass: Define your css class some where and use the class in this attribute
- onSubmit: Call some javascript method while submitting the form
- useNamespace: By default its true. If you put false namespace of the portlet wont be appended in the form fields name.
- portletNamespace: Define your own namespace. While you define your own namespace then auto namespace will not be applied to the fields name
aui:input tag:
Look the below code
<aui:form name="fm"> <!-- By default inlineLabel is false --> <aui:input name="firstName"/> <aui:input name="middleName"/> <aui:input name="lastName"/> <!-- inlineLabel is true --> <!-- used label attribute --> <aui:input name="age" label="Age" inlineLabel="true"/> <!-- Use of prefix and suffix --> <aui:input name="contact" label="" prefix="contact"/> <aui:input name="email" label="" suffix="email"/> </aui:form>
Output
aui:layout and aui:column:
aui:layout: Used to wrap columns (avoiding tables)
Attributes:cssClass: custom classes for additional styling
- aui:column:Used to create columns without using tables
- Attributes: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
- first: set this to true if this is the first element in the form
- last: set this to true if this is the last element in the form
<aui:form name="fm"> <!-- Use of aui:layout --> <!-- Use of aui:column --> <aui:layout> <aui:column columnWidth="25" first="true"> <aui:input name="firstName"/> <aui:input name="middleName"/> <aui:input name="lastName"/> </aui:column> <aui:column columnWidth="5"> </aui:column> <aui:column columnWidth="70" last="true"> <aui:input name="age"/> <aui:input name="email"/> <aui:input name="contact"/> </aui:column> </aui:layout> </aui:form>
Output
aui:field-wrapper
Used to wrap any other element in a form (radio elements, custom elements…). Below is the sample code
<aui:field-wrapper name="firstSection" helpMessage="First Section is mandatory" label="First Section"> <aui:input name="firstName"/> <aui:input name="middleName"/> <aui:input name="lastName"/> </aui:field-wrapper> <aui:field-wrapper name="secondSection" helpMessage="Enter all the fields" label="Second Section"> <aui:input name="age"/> <aui:input name="email"/> <aui:input name="contact"/> </aui:field-wrapper>
Output
aui:button and aui:button-row:
<aui:form name="fm"> <aui:field-wrapper name="firstSection" helpMessage="First Section is mandatory" label="First Section"> <aui:input name="firstName"/> <aui:input name="middleName"/> <aui:input name="lastName"/> </aui:field-wrapper> <aui:button-row> <aui:button name="saveButton" type="submit" value="save" /> <aui:button name="cancelButton" type="button" value="cancel" /> </aui:button-row> </aui:form>
aui: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.
<aui:model-context bean="<%= user %>" model="<%= User.class %>" />
Note: To use those Liferay Alloy UI tag you must have below taglib in your portlet
<%@ taglib uri=”http://liferay.com/tld/aui” prefix=”aui” %>
http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Alloy+UI+Forms+%28aui%29