• Liferay Alloy UI

    Posted on September 28, 2014 by Hamidul Islam in Liferay.

    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: 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

    Post Tagged with , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close