Alloy Tag Examples

   
   
AUI HYPERLINK EXAMPLE
=======================

Attributes
    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 cssClass="test" href="http://www.cignex.com" id="googleId" label="CIGNEX" ></aui:a>

   
AUI INPUT TAG EXAMPLE
=======================

Attributes

    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

Example :
---------
    <aui:input inlineLabel="left" inlineField="true" label="Edu. Details : "  name="education" type="textarea"></aui:input>


 

 AUI BUTTON & BUTTON ROW EXAMPLE
 ================================
 Attributes

    cssClass: custom classes for additional styling (the attribute class will be ignored)

Example :
---------
 <aui:button-row>
    <aui:button name="saveButton" type="submit" value="save" onClick="javascript:alert('Save?')" />
    <aui:button name="cancelButton" type="button" value="cancel" onClick="javascript:alert('Cancel?')" />
</aui:button-row>

   
   
AUI SELECT EXAPLE
=================

Attributes

    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="Country" name="selectionStyle">
            <aui:option selected="india" value="india">India</aui:option>
            <aui:option selected="us" value="us">US</aui:option>
            <aui:option selected="uk" value="uk">UK</aui:option>
    </aui:select>


   
AUI FIELDWRAPPER EXAMPLE
==========================
Used to wrap any other element in a form (radio elements, custom elements...)
Attributes 

    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="gender">
            <aui:input checked="true" inlineLabel="right" name="gender" type="radio" value="1" label="male" />
            <aui:input inlineLabel="right" name="gender" type="radio" value="2" label="female" />
    </aui:field-wrapper>
       
AUI FIELD SET EXAMPLE
======================
You should have all your fields grouped at least under one fieldset. It is a good practice to separate different areas with different fieldsets.
       
Attributes

    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>
            
             <aui:input type="checkbox" name="liferay" label="Liferay" value="" > </aui:input>
             <aui:input type="checkbox" name="alfresco" label="Alfresco" value="" > </aui:input>
             <aui:input type="checkbox" name="drupal" label="Drupal" value="" > </aui:input>           
        </aui:fieldset>

AUI Panel Example
=================
<aui:column columnWidth="50" last="true">
        <aui:panel collapsible="true" id="educationdetails" label="Education Details">
            <aui:input inlineLabel="left" inlineField="true" label="Edu. Details : "  name="education" type="textarea"></aui:input>
            <aui:a cssClass="test" href="http://www.cignex.com" id="googleId" label="CIGNEX" ></aui:a>
        </aui:panel>
        <aui:panel collapsible="true" id="experiencedetails" label="Experience Details">
            <aui:input   inlineField="true" label="Exp. Details : "  name="experience" type="textarea"></aui:input>
            <aui:a cssClass="test" href="http://liferaycms.blogspot.com" id="liferayId" label="Liferay Experience" target="_blank"></aui:a>
        </aui:panel>
    </aui:column>

       

       
AUI LAYOUT EXAMPLE
===================

Used to wrap columns (avoiding tables)

Attributes 

    cssClass: custom classes for additional styling (the attribute class will be ignored)
Example :
---------
<aui:layout>

Used to create columns without using tables
    <aui:column columnWidth="50" first="true" >
        <aui:input  inlineField="true" label="First Name : " name="firstName"></aui:input>
        <aui:input  inlineField="true" label="Last Name : " name="lastName"></aui:input>
        <aui:input  inlineField="true" label="Date of Birth: "  name="birthDate"></aui:input>
        <aui:field-wrapper name="gender">
            <aui:input checked="true" inlineLabel="right" name="gender" type="radio" value="1" label="male" />
            <aui:input inlineLabel="right" name="gender" type="radio" value="2" label="female" />
        </aui:field-wrapper>
        
        <aui:select label="Country" name="selectionStyle">
            <aui:option selected="india" value="india">
                India
            </aui:option>
            <aui:option selected="us" value="us">
                US
            </aui:option>
            <aui:option selected="uk" value="uk">
                UK
            </aui:option>
        </aui:select>
        


        <aui:fieldset>
            
             <aui:input type="checkbox" name="liferay" label="Liferay" value="" > </aui:input>
             <aui:input type="checkbox" name="alfresco" label="Alfresco" value="" > </aui:input>
             <aui:input type="checkbox" name="drupal" label="Drupal" value="" > </aui:input>           
        </aui:fieldset>
    </aui:column>
    
    <aui:column columnWidth="50" last="true">
        <aui:panel collapsible="true" id="educationdetails" label="Education Details" >
            <aui:input inlineLabel="left" inlineField="true" label="Edu. Details : "  name="education" type="textarea"></aui:input>
            <aui:a cssClass="test" href="http://www.cignex.com" id="googleId" label="CIGNEX" ></aui:a>
        </aui:panel>
        <aui:panel collapsible="true" id="experiencedetails" label="Experience Details">
            <aui:input   inlineField="true" label="Exp. Details : "  name="experience" type="textarea"></aui:input>
            <aui:a cssClass="test" href="http://liferaycms.blogspot.com" id="liferayId" label="Liferay Experience" target="_blank"></aui:a>
        </aui:panel>
    </aui:column>
</aui:layout>


Contributed by Liferay.com