Liferay Alloy UI

liferay alloy ui

 

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.

 Liferay Alloy UI

 

 

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 input
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 panel

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 wrapper

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 button

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

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

About The Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
%d