Wiki

Alloy UI Forms (aui)

Tags: development forms alloy ui liferay v6.0

The Alloy UI Forms are a great tool to help developers build very nice forms really fast. Alloy is included in Liferay v6.0+.

These are some of the advantages of using these forms:

Nice styling of the forms for a better usability
Unified styling: all the forms look the same and are controlled in one place
Dynamic Attributes: any attribute that can be used for an html tag can also be used for an aui tag. For example, you can use onClick, onChange, onSubmit, title... in any aui:form, aui:select, aui:input and it will work the same as if you use it an a plain form, select or input.

Tags #

These are the tags that can be used in aui forms and some of their attributes. They all support dynamic attributes, which means that you can add any additional attribute and it will be used. For example, if you add the attribute onFocus to a aui:button, the <button> will have this onFocus attribute.

Form #

Atributes #

action: The same action as in the html form tag, but the url is automatically escaped (and encoded...etc). If you don't want the action url to be automatically escaped, you should set escapedXml to false.
escapeXml: True by default. Set it to false if you don't want the action url of your form to be automatically escaped. Note: Does not work in current alloy 0.1a
cssClass: custom classes for additional styling (the attribute class will be ignored)
inlineLabel: set this attribute to true if you want all your labels in the form to be inline with the form fields name: the name of the form

Example #

	<aui:form action="<%= editEntryURL %>" method="post" name="fm" onSubmit='<%= renderResponse.getNamespace() + "saveEntry(false); return false;" %>'>

Fieldset #

You should have all your fields grouped at least under one fieldset. It is a good practice to separate different areas with different fieldsets.

Atributes #

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 column="true">

Button #

Atributes #

cssClass: custom classes for additional styling (the attribute class will be ignored)
disabled. Set this to true to disable clicking on the button.
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)
type: by default the type is button, but it can be set to submit, cancel or image.
name: It will be used for the id of the button.
value: The message that the button will display. If empty, it will be save for submit type buttons and cancel for cancel type buttons.
onClick: javascript code to be executed when clicking on the button. If this attribute starts with http://, the button will take you to that page when the user clicks on it.

Example #

	<aui:button name="cancelButton" type="button" value="cancel" last="true" />

Button Row #

Atributes #

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

Example #

	<aui:button-row>
		<aui:button name="saveButton" type="submit" value="save"  />

		<aui:button name="cancelButton" type="button" value="cancel" />
	</aui:button-row>

Model Context #

Used to set an object that will be accessed from fields in the form.

Atributes #

bean: The object that will be accessed
model: The class of the bean. Class model hints are saved in portal-model-hint.xml located in the META-INF.

Example #

	<aui:model-context bean="<%= entry %>" model="<%= BlogsEntry.class %>" />

Input #

Atributes #

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.textarea Will display a multiline input fieldpasswordcheckboxassetCategories to for display categories (see liferay-ui:asset-categories-selector) assetTags Used to display tags (see liferay-ui:asset-tags-selector)timeZone Used to display the time zones (see liferay-ui:input-time-zone)empty Leave the type empty if you want it to be automatically obtained from the bean and the field.

If you set a type, then the value won't be obtained from the bean.

suffix: Message to display at the right of the input field. prefix: Message to display at the left of the input field

The field can be prepopulated accesing an object set withe the model Context tag or with these attributes (the type attribute must be blank and it will be automatically obtained later from the bean). The field of the bean accessed will be the name attribute.

bean: An object that will be accesed to the get value for this element model: The class of the bean object

Example #

	<aui:model-context bean="<%= entry %>" model="<%= BlogsEntry.class %>" />
	
	<aui:input name="title"  />
	<aui:input name="displayDate" value="<%= displayDate %>" />
	<aui:input name="tags" type="assetTags" />

Examples about the label attribute #

	<aui:input name="titleNormal" /> 
	In this situation the label will be title-normal 
	
	<aui:input name="titleNormal" label="another-title" />
	In this situation the label will be another-title 
	
	<aui:input name="titleNormal" label="" /> 
	In this situation there won't be label

Select #

Atributes #

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="asset-selection" name="selectionStyle" onchange="<%= renderResponse.getNamespace() + "chooseSelectionStyle();" %>">
		<aui:option selected="<%= selectionStyle.equals("dynamic") %>" value="dynamic"><liferay-ui:message key="dynamic" /></aui:option>
		<aui:option selected="<%= selectionStyle.equals("manual") %>" value="manual"><liferay-ui:message key="manual" /></aui:option>
	</aui:select>

Option #

Atributes #

cssClass: custom classes for additional styling (the attribute class will be ignored)
label: The label to show for the option (automatically translated).
value: The value of the option. If this field is empty, then, the label will be used as the value too.
selected: set this to true if this option should appear as selected in the select form.

Example #

	<aui:option selected="<%= selectionStyle.equals("manual") %>" value="manual"><liferay-ui:message key="manual" /></aui:option>
	These 4 expressions are equivalent:
	<option value="one"><liferay-ui:message key="one"><option> 
	<aui:option value="one"><liferay-ui:message key="one"><aui:option> 
	<option label="one" value="one" /> 
	<option label="one" />

Link (a) #

Atributes #

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 href="[[http://www.liferay.com|http://www.liferay.com]]" target="blank">Liferay</aui:a>
	<aui:a href="[[http://www.liferay.com|http://www.liferay.com]]" label="liferay" target="blank" />

Field Wrapper #

Used to wrap any other element in a form (radio elements, custom elements...)

Atributes #

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="permissions">
		<liferay-ui:input-permissions modelName="<%= BlogsEntry.class.getName() %>" />
	</aui:field-wrapper>

Legend #

The legend element is created using the attribute title in aui:fieldset.

#

Layout #

Used to wrap columns (avoiding tables)

Atributes #

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

Column #

Used to create columns without using tables

Atributes #

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 (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)

Example #

	<aui:layout>
		<aui:column columnWidth="25" first="true">
			...
		</aui:column>
		
		<aui:column columnWidth="75" last="true">
			...
		</aui:column>
	</aui:layout>

Other Examples #

Textarea #

Textarea elements can be done using aui:input

Example #

	<aui:input type="textarea" name="comments" />

Radio #

The radio element can be done using aui:field-wrapper and aui:input

Example #

	<aui:field-wrapper name="gender">
		<aui:input inlineLabel="right" name="gender" type="radio" value="1" label="male" />
		<aui:input checked="<%= true %>" inlineLabel="right" name="gender" type="radio" value="2" label="female"  />
	</aui:field-wrapper>

More #

Alloy UI Forms is a set of taglibs build on top of the Alloy UI JavaScript+CSS framework. For more information about the framework visit: http://www.alloyui.com

0 Attachments

99432 Views

Average (8 Votes)

Comments

Showing 35 Comments

Jonas Yuan

8/5/09 6:30 AM

Very good feature. Thanks.

Eduardo Lundgren

8/7/09 9:47 AM

Muito bom Julito!

Marcelo Ruiz Camauër

10/13/09 6:40 AM

Is there a project page for Alloy UI? A description of it?

Bavithra Rajendran

11/18/09 3:48 AM

Very informative! Thanks for sharing

Blake Von Haden

12/4/09 6:24 AM

There is the site http://www.alloyui.com but it's links for the About, FAQ, and Download are broken. Where do you find the downloads for the AlloyUI?

Sampsa Sohlman

12/14/09 4:37 AM

Source code can be found from

http://svn.liferay.com/repos/public/alloy/trunk/

Oleg Derid

2/12/10 1:05 PM

yep, indeed guys why the site is non functional emoticon

Faisal K

2/15/10 10:14 AM

Looks like liferay is going to use this aui tags in all the portlet, what do you think it will be part of 5.3 or later,

What about Liferay's old liferay-ui tags.

any way wonderful job.
Many cheers for Alloy Team.

Jignesh Vachhani

2/18/10 11:08 AM

really very good features

Peter Monroe

2/18/10 11:29 AM

I have a couple of questions about Alloy UI

1) What does IceFaces do that Alloy UI cannot?

2) What is the learning curve for Alloy UI?

3) What are the disadvantages of adopting Alloy UI?

wasim shaikh

2/18/10 10:31 PM

very good features, like it.

Babu Janarthanan

3/2/10 1:06 AM

Very good feature....

Jeremy Unruh

3/16/10 9:55 AM

Really good job! I've been using it on trunk. I have a couple questions/bugs which I didn't see a forum thread for alloy for.

When extending the create_account jsp the following is happening using the aui tags with the extra fields.

1. When submit is clicked the new fields are not keeping the value if there is an error. The backing bean is getting the value fine but the fields are cleared. I tried using the model context and standard.

2. How do I do advance linkage between AUI form components. For example, toggling a checkbox will hide some form elements?

3. When adding more than 1 checkboxs to the same fieldset with or without different names, the first checkbox is checked others are not checked. If I set checked=false on each one the first one still is checked on load.

Sven Ehlert

3/17/10 10:16 AM

Is there a bug tracker for Alloy? The escapeXml parameter in the "aui:form" tag doesn't seem to work, at least not when using "<portlet:actionUrl/>" as an "action" parameter.

Tejas Kanani

3/26/10 1:24 AM

Really cool feature. Liked it...
It gives liferay a jazzy UI.

Alexey Kakunin

5/29/10 7:47 AM

I think biggest problem of Alloy - totally missed documentation - I did not found anything except this wiki - for example, how to handle these components in javascript (in case we do not have jQuery in Liferay6 now)
It looks a little bit strange - develop own UI framework in case there are already many frameworks exist

Raffaele asd

7/20/10 8:38 AM

Did you know?

<aui:model-context bean="<%= article %>" model="<%= JournalArticle.class %>" /> generate an "stack overflow" error on internet explorer...

any solutions?

Dave Weitzel

8/31/10 12:36 PM

Can someone explain how the <aui:input /> tag can be used to display dates within custom jsps?
I have tried creating a Calendar object even cloning an existing date that is shown within the jsp.
jsp code snippet:

Calendar regDate = (Calendar)startDate.clone();
<aui:input name="regDate" value="<%= regDate %>" />

(from portlet/calendar/edit_event.jsp)
I can display as s string both startDate and regDate and both are identical but I don't see any user fields for the regDate field.

What files do I have to extend? I thought the whole AUI library was meant to make life easy?
FYI the output of String.valueOf(regDate)is:

java.util.GregorianCalendar[time=1285875031706,areFieldsSet=true,areAllFieldsSet=true,lenient=true,zone=sun.util.calendar.ZoneInfo[id="UTC",offset=0,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2010,MONTH=8,WEEK_OF_YEAR=40,WEEK_OF_MONTH=5,DAY_OF_MONTH=30,DAY_OF_YEAR=273,DAY_OF_WEEK=5,DAY_OF_WEEK_IN_MONTH=5,AM_PM=1,HOUR=7,HOUR_OF_DAY=19,MINUTE=30,SECOND=31,MILLISECOND=706,ZONE_OFFSET=0,DST_OFFSET=0]

Ashish Gupta

12/7/10 7:48 AM

Good set of features but doesn't work with IE6.
So Liferay 6 has multiple issues on IE6. e.g. the "Sign-in" button on Sign In portlet doesn't show, the "I Agree" and "I Disagree" buttons don't show either.

Jignesh Vachhani

12/13/10 5:24 AM

Hi All,

Anybody knows how can we set header in A.UI.request call?
I am getting below error when i am making ajax call:

18:51:07,812 ERROR [UploadServletRequestImpl:101] org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8
org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8
at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:885)
at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:349)
at org.apache.commo

Mai Toan

12/14/10 1:39 AM

Sorry for question stupid. But I'm create new button:
<aui:button-row>
<aui:button name="saveButton" type="submit" value="save" ></aui:button>
<aui:button name="cancelButton" type="button" value="cancel"></aui:button>
</aui:button-row>
But when deploy the web browser not appear. What should I import?

Sean McGinnis

12/20/10 7:06 AM

add the following taglib and you shout be ready to roll:
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

Sean McGinnis

12/20/10 7:07 AM

Sorry take that back, add this taglib instead:

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

Amruta Borkar

1/2/11 10:39 PM

Hi Sean, when I tried to import the taglib you just mentioned, I'm getting this error : Can not find the tag library descriptor for "http://liferay.com/tld/aui".
What should I do?

Vasily N. Kharitonov

2/25/11 6:11 AM

How to upload files, with aui without page reload?

Rahul Pande

3/9/11 5:03 AM

Really Nice Post. Very Informative.

Diego Andres Garcia

3/30/11 12:20 PM

I think the same, I have to include jQuery in my web site after not being able to understand Alloy

Prakash Khanchandani

4/7/11 6:03 AM

Nice features.

But why not have a thorough documentation of the Alloy JSP Tag Library like we have for say JSTL and JSP tags!

Thanks for the Wiki article though

Muhammad Asif

9/28/11 9:16 AM

Can anyone help me in putting the radio buttons in a single row. I am unable to do that using the <aui:input type="radio" /> tags. Please help. Thanks in advance.

Le Ca

11/23/11 2:23 AM

Hello! Please bare with me since I'm new to liferay. Can someone help me how to get the value of tags and categories? I've tried using the code below but it doesn't work. Thanks in advance.

Snippet is from jsp.
<aui:input name="tags" type="assetTags" />
<aui:input name="categories" type="assetCategories" />

Snippet is from main.js
var tags = instance.getByName(form, 'tags');
alert("Tags : "+tags.val());
var cat = instance.getByName(form, 'categories');
alert("Categories : "+cat.val());

Robert Hall

1/11/12 9:58 AM

I'm looking for concrete examples of using the bean and listType attributes of the select Alloy UI tag..not finding much out there..

Danial Mustofa Habibi

1/21/12 11:46 PM

Hi All...maybe this is stupid question
hi There I know it's silly questions.and i'm a newbie ,,but still I need to ask about this...how i can create horizontal radio button ,so it show in one line??as I try <aui:field-wrapper name="gender">
<aui:input inlineLabel="right" name="KTP" type="radio" value="1" label="male" />
<aui:input checked="<%= true %>" inlineLabel="right" name="gender" type="radio" value="2" label="passport" />
</aui:field-wrap[/code]
and
[code]<aui:column>
<aui:input name="KTP" type="radio" value="ktp"></aui:input>
<aui:input name="Passport" type="radio" value=""></aui:input>
</aui:column>
it still showing every radio button on new line..
and how to enable/disable or show any form using radio button?for example if someone click KTP, only KTP form/field will be shown?or the passport field/form will disabled?

Thank's any help would be really appreciated,

Regards

Danial

Pulla Reddy

2/22/12 5:43 AM

Very Nice

Pulla Reddy

2/22/12 5:44 AM

Do one thing favour for me.
How can i add a image into a specific place in the portlet?
Anybody suggest me any idea?

Ashish Renapurkar

3/2/12 9:48 PM

Very good information.

Thanks for it .

Wiki

Alloy UI Forms (aui)

Table of Contents [-]

Tags #

Form #

Atributes #

Example #

Fieldset #

Atributes #

Example #

Button #

Atributes #

Example #

Button Row #

Atributes #

Example #

Model Context #

Atributes #

Example #

Input #

Atributes #

Example #

Examples about the label attribute #

Select #

Atributes #

Example #

Option #

Atributes #

Example #

Link (a) #

Atributes #

Example #

Field Wrapper #

Atributes #

Example #

Legend #

#

Layout #

Atributes #

Column #

Atributes #

Example #

Other Examples #

Textarea #

Example #

Radio #

Example #

More #

Showing 35 Comments