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
Posts
