3/14/2011

AlloyUI Tutorial Part 3 : Basic AUI Controls

Part 1   Part 2   Part 3   Useful Links   Useful Literature


This is the third part in a line oftutorials for AlloyUI. This time we will step back a bit and take a look on how to use basic Alloy UI components to build a standard JSP page - for Liferay 6.


A normal AUI page consists of all the elements you would normally expect to see on a JSP page: A form, some input fields and a submit button. Here is an example in AlloyUI:


Import the AUI Taglib:


<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>

Then create an action URL for the form you are using


<portlet:actionURL var="myUrl">
</portlet:actionURL>


This URL will be used to bind the form to the actual portlet instance (The portlet class).

Now create the form:

<aui:form action="<%= myUrl%>" name="fm">

inside the form, create some input fields:


<aui:input type="text" name="name"></aui:input>
<aui:input type="password" name="pwd"></aui:input>


This will generate a standard name / password dialog with standard styling.


Next, add a submit button and we are done:

<aui:button type="submit"></aui:button>

That´s basically all, and it should render something like this:


If you want to have the full working portlet, you can download it here:


http://rapidshare.com/files/452502717/AUITest-portlet.zip


That´s the basic UI control tutorial ... next time we will build more complicated GUIs ... promised !




If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)


If you have any questions, feel free to leave a comment.