Introduction to AUI Java Script in Liferay

Objective:

Use AUI java script in liferay development.

What is AUI (Alloy UI)?

Alloy UI is java scrip library winch contains many java script function we can use this for fast implementation of application.

Generally in each application we need to write more java script in web application and some time we need to write same code in multiple times, to avoid this people came up with java script libraries we will use some kind of syntax so that it will bring more functionality to that application.

We can say simple as less writing more work

In any web application java scrip is basic requirement so for this instead of using legacy JavaScript people came up some set of methods/function placed in single place. Whenever we need any functionality simple we use that source file in web application we will use some java script syntax notation to apply real functionality in application

What are most popular java scrip libraries in market?

We have many java script libraries in market like jQuery, AUI, YUI, ExtJs, Dojo and Prototype.

How are these libraries working?

Each java script libraries have many legacy java script code but that code have been abstracted and they will give some syntax notation we will simple use those syntax to apply functionality to application. Each java script has its own syntax style.

How these are finally will work in our application?

In our application we just call source JavaScript of file in our application using <script/> tag then we will use syntax notation that given by java script libraries implementations.

What is basic principle they have used in their implementation?

Java script library implementers use the Module/Plugin. They have made it libraries as pieces so that based on usage they have divided libraries as module or Plugin. The basic and minimum common functionality they have placed in core source file so that whenever we want use then we need minimum core module/Plugin.

Can we implement our own module/Plugin?

Yes we can implement our own Module/Plugin with their specification and syntaxes and we will use core functionality to implement our module or Plugin.

How can we load required Module/Plugin?

We can load Module or Plugin using <script/> or they have given some syntax notation to load required modules. The script in different module or Plugin and they packaged into different source files.

The following screen shows you AUI modules and which are used in Liferay Portal

Which model AUI follows?

AUI will follows modular based implementation so that we will load required module at run time using some syntax and this is called on demand java script load.

What is use of on demand java script loading?

On demand java script avoid unnecessary loading of java script in page so that page loading will be fast. Generally whenever we use <script/> all java script files will be loaded as soon as page is loaded. But in that page we may use few java script even though all java scrip already loaded to avoid this we will use on demand java script which help us loading required java scrip at run time.

Note:

Here we need to load minimum core functionality first that will be loaded by liferay portal default.

What is relation between AUI and Liferay?

AUI is a java scrip library which follows module based java script implementation. Liferay have used AUI java scrip for entire liferay portal so that they have implemented as many modules. Liferay also have custom modules these are enhanced from AUI script these modules used in only in liferay

Note:

 We can use AUI java script in any web application not only in liferay.

What is advantage of use AUI in Liferay?

If we use AUI in liferay then we can use all libraries and other liferay specific functionality directly in liferay development and we have many liferay AUI tags so that we can simple use in Liferay development. Liferay have many AUI components and java script libraries in liferay.

What is source for AUI implementation?

AUI inherited from YUI java script which came from Yahoo

Way of using AUI in any Web application

We need place following script tag in any html page or jsp page so that we can use AUI java script.

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>

Note:

AUI java script has many components so for look and feel we need call css too

<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Finally if we want use AUI script and its components then do as follows in any html page or JSP page of your web application.

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script> <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Use AUI in Liferay Development

To use AUI java script and its components in Liferay we need to do as follows in JSP pages

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> <aui:script> //Start writing AUI script here <aui:script>

Loading AUI Script

We will use two ways to load AUI script

Using <script> tag and its use attribute

<aui:script use="'aui-io-request,aui-base"> <aui:script>

Using AUI ().use(--) Function

AUI().use('aui-base','aui-io-request', function(A){ // write all AUI scrip here then it will be loaded when page is loaded });

Note:

In AUI we will reference object as A in every where this like a document object in legacy java script.

We can load many AUI modules based on usage and each module separated by comma separator

The following are example module AUI have many modules.

AUI Modules

aui-audio, aui-base, aui-io, aui-datepicker, aui-node

The following screen shows AUI modules

Example:

When we want to get values of text box then we have to do as follows

<aui:script use="aui-base"> var A = AUI(); var inputValue=A.one('#inputTextBoxId').get('value'); <aui:script>

OR

<aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#inputTextBoxId').get('value'); }); <aui:script>

We have AUI components in Liferay so that we can use AUI html input components as follows

We need to add AUI tag libraries in JSP page then we can use AUI components and each tag prefix with aui as like <aui:xxx>

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> <aui:input name="articleId" type="text" value="" />

When we use above above ‘aui’ tag then input name attribute will be appended with portlet name space

<aui:input name="articleId" type="text" value="" /> Is same as <input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" />

When we access any element in AUI we will use different assessors those are mostly ID or class name

Note:

For ID we will use # and for class we will use dot (.)

Example:

<aui:input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script> Note: We already know aui input tag appended with portlet name space.

Simple HTML input accessing using AUI with ID

<input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#articleId).get('value'); }); <aui:script> Note:  The above is for simple html text box value accessing from AUI script.

The following is simple html input with portlet name space

<input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script>

AUI input tag and its equal tag in normal html

<aui:input name="articleId" type="text" value="" /> Equals to <input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" /> Equals to <input name="_2_articleId" id=”="_2_articleId” type="text" value="" />

Note:

In the above _2_ is a portlet name space after paged rendered in the browser.

If we use AUI HTML components then we have to use <portlet:namespace/>  in AUI scrip to access the element

Example:

<aui:input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script>

If we use simple html input then we no need to add portlet name space in AUI script

<input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#articleId).get('value'); }); <aui:script>

If we add manually portlet name space for normal html input then we need to use same in AUI script

<input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script>

Note:

In every where we will use A is reference AUI Script variable it is nothing but document object in legacy java script

Legacy Java Script

Case:1 <input name="articleId" type="text" value="" /> <script> var inputValue=document.getElemenetById("artcileId").value; <script> Case:2 <aui:input name="articleId" type="text" value="" /> <script> var inputValue=document.getElemenetById("<portlet:namespace/>artcileId").value; <script> Case:3 <input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" /> <script> var inputValue=document.getElemenetById("<portlet:namespace/>artcileId").value; <script>

AUI Java Script

Case:1 <input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#articleId).get('value'); }); <aui:script> Case:2 <aui:input name="articleId" type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script> Case:3 <input name="<portlet:namespace/>articleId" id=”<portlet:namespace/> articleId” type="text" value="" /> <aui:script> AUI().use('aui-base','aui-io-request', function(A){ var inputValue=A.one('#<portlet:namespace/>articleId).get('value'); }); <aui:script>

Author

MeeraPrince

Liferay Top Contributor Award Winner

http://www.liferaysavvy.com