Organizing Content with AlloyUI Rows and Columns

Say goodbye to sleepless nights tossing, turning, and worrying about the potentially daunting task of arranging content in your portlets! It doesn’t have to be complicated. AlloyUI’s aui:col and aui:row tags simplify organizing portlet content. This tutorial shows you how to use these tags in your portlet JSPs.

Here’s how to add rows and columns of content to your portlet:

  1. Create or edit the JSP file in which you want to organize content.

  2. Reference the AlloyUI taglib aui by adding the following directive:

    <%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
    
  3. Add an aui:row tag for each row of content you want. For example, the tags below create placeholders for two rows of content:

    <aui:row>
    
    </aui:row>
    <aui:row>
    
    </aui:row>
    
  4. Insert and configure aui:col tags between each row’s starting and ending aui:row tags. You can define each column’s width using a width or span attribute. The width attribute takes precedence over the span attribute if they’re both specified in a column.

    The width value represents a percentage of the row’s width. A span value represents the number of parts a column uses, out of the twelve parts in which the containing row is divided. For example, <aui:col span="4"> specifies a column to use 4/12, or 1/3, of the row’s width.

Rows and columns are easy to use. As an example, here are a couple rows of columns that demonstrate setting column widths using width and span attributes:

<aui:row>
    <aui:col span="4">
       <p>
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
       eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris 
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
       nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
       sunt in culpa qui officia deserunt mollit anim id est laborum."

       Section 1.10.32 of "de Finibus Bonorum et Malorum", written by 
       Cicero in 45 BC

       "Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
       accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
       quae ab illo inventore veritatis et quasi architecto beatae 
       vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
       voluptas sit aspernatur aut odit aut fugit, sed quia"
       </p>
    </aui:col>
    <aui:col width="33">
       <p>
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
       eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris 
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
       nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
       sunt in culpa qui officia deserunt mollit anim id est laborum."

       Section 1.10.32 of "de Finibus Bonorum et Malorum", written by 
       Cicero in 45 BC

       "Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
       accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
       quae ab illo inventore veritatis et quasi architecto beatae 
       vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
       voluptas sit aspernatur aut odit aut fugit, sed quia"
       </p>
    </aui:col>
    <aui:col span="4">
       <p>
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
       eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris 
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
       nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
       sunt in culpa qui officia deserunt mollit anim id est laborum."

       Section 1.10.32 of "de Finibus Bonorum et Malorum", written by 
       Cicero in 45 BC

       "Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
       accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
       quae ab illo inventore veritatis et quasi architecto beatae 
       vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
       voluptas sit aspernatur aut odit aut fugit, sed quia"
       </p>
    </aui:col>
</aui:row>
<aui:row>
    <aui:col span="4">
       <aui:input type="textarea" name="comments" label="Comments"/>
       <aui:button value="Submit"/>
    </aui:col>
    <aui:col span="8">
       <p>
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
       eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
       enim ad minim veniam, quis nostrud exercitation ullamco laboris 
       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
       in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
       nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
       sunt in culpa qui officia deserunt mollit anim id est laborum."

       Section 1.10.32 of "de Finibus Bonorum et Malorum", written by 
       Cicero in 45 BC

       "Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
       accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
       quae ab illo inventore veritatis et quasi architecto beatae 
       vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
       voluptas sit aspernatur aut odit aut fugit, sed quia"
       </p>
    </aui:col>
</aui:row>

In the above example, the portlet’s first row has three columns of equivalent width. The second row’s first column uses 1/3 of the row’s width and its second column uses the remaining 2/3 of the row’s width.

columns-01.png

Figure 1: Here’s what the example’s rows and columns look like.

There you have it! Now you know how to organize your portlet’s content using AlloyUI rows and columns.

Related Topics

Liferay UI Taglibs

Themes and Layout Templates

Application Display Templates

Customizing Liferay Portal

0 (0 Votes)
Using the AlloyUI Form Validator in a Portlet Previous