Introduction:
AUI is Java Script library have rich number of
function so we can use this in web application. Instead of writing legacy java
script AUI brings us many function to application simple by using some syntax
based code.
This is similar to jQuery and AUI is another Java
script library which is used in liferay portal.
This library is inherited from YUI java script which
is from yahoo. AUI also have some syntax like jQuery simple we can use it our
applications.
In Liferay AUI have inbuilt java scrip and as soon
as portal load then minimum required AUI script will be loaded in the page.
AUI have on demand java script loading so that
whenever we need specific functionality they we can load.
The following is AUI Introduction Article Please go
through it
In any HTML page we have many elements and its Child
elements and each element we can represent as tag. So we have different html
tags and each tag has many attributes and each attribute have its own meaning.
HTML Document Object Model had tree structure as
follows
The following is simple HTML table tree
Each html page we can represent as Documents object
and document object have many elements and each element is a tag.
How
does java script will read HTML documents?
In java scrip each document we can represent as
document so that we can start with
document object and java script will traversing over the document object and
each element will be identify by ID or Name attributes or other selectors.
Example:
<p
id=”elementId”>this is p tag</p>
var
pObject=document.getElementById(“elementId”)
var
pObject=document.getElementByTag(“p”)
|
Now we will see the comparison between legacy java
script and AUI script
Legacy Java Script
<p
id=”elementId”>this is p tag</p>
<script>
var
pObject=document.getElementById(“elementId”)
<script>
|
AUI Script
<p
id=”elementId”>this is p tag</p>
<aui:script>
var A=new AUI();
var
pObject= A.one(“#elementId”)
<aui:script>
|
In the AUI we will referenced document object as A. if we want read or find any element
then we need start with A variable.
Here AUI is already predefined Java Script Library
if we want use AUI then we need to load AUI java script source in page.
Example as follows
<script
src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<p
id=”elementId”>this is p tag</p>
<script>
var A=new AUI();
var
pObject= A.one(“#elementId”)
<script>
|
Note:
The above
thing we need do for other applications not in liferay.
Liferay
AUI Java Script:
In the liferay portal we need not load AUI script in
the page (jsp Page) because liferay already load minimum required AUI script
when portal is ready.
In liferay we can simple us as follows
<p
id=”elementId”>this is p tag</p>
<script>
var A=new AUI();
var
pObject= A.one(“#elementId”)
<script>
|
Liferay have AUI tag library one of the tag is
<aui:script/> and this script tag we will use for load java
script in the page as follows
<aui:script>
var A=new AUI();
var
pObject= A.one(“#elementId”)
<aui:script>
|
Note:
When we use AUI tags we need add aui tag library in JSP
page.
<%@
taglib uri="http://liferay.com/tld/aui" prefix="aui"
%>
|
AUI is module based java script library and it will
be categorize in different modules. Based on our requirement we load that java
script.
Loading
AUI Java Script Modules
We have two ways to load AUI scrip in page
- <aui:script/> tag
- AUI use Function
<aui:script/>
tag:
<aui:scipt/> tag is one of the tag from liferay AUI tag library this tag has one of the attribute
called “use” . We need to specify the required AUI Java Script Modules in use
attribute values
Example:
<aui:script
use="aui-node,aui-io-request">
//here
we need write aui script
</aui:script>
|
We have many AUI Modules and following are some of
example modules
aui-base, aui-node, aui-io-request, aui-datepicker, aui-form
|
AUI
use Function
We can also use AUI use function load AUI scrip
modules.
Example:
AUI().use('aui-calendar','datatype-date-format',
'aui-base', function(A) {
});
|
Referencing
Document in AUI
We can refer document object in AUI using A variable
as follows.
Case:
1
<aui:script
use="aui-node,aui-base">
var
A=new AUI();
</aui:script>
|
Case:
2
If we use AUI use method then we need not create any
new object default it will be available
<aui:script>
AUI().use('aui-base',function(A){
alert(A);
});
</aui:script>
OR
<script>
AUI().use('aui-base',function(A){
alert(A);
});
</script>
|
Select
HTML Elements in AUI script
We can select the html elements in AUI with different
ways we will call these things as selectors .selectors are part of element it
will uses to select the html elements in java script i.e. is AUI script and each element we can find with selectors.
We
have following Selectors
- Id selector
- CSS class Selector
- Tag Selector
- Attribute Selector
Note:
Apart form
that we can find in different ways above are important selectors.
Id
selector:
Id selector is one the attribute for any html
element. We can use id attribute for html elements and this is id is unique in
the document.
In AUI we will use # before Id to find element from AUI script.
Example:
Select Input element with Id with portlet name space
<aui:input
name="Name" id="Name"
value=""></aui:input>
<aui:script>
AUI().use('aui-base',function(A){
var
inputObject=A.one("#<portlet:namespace/>Name");
});
</aui:script>
|
Note:
When we use AUI input tag in liferay the name and id
are automatically appended with <portlet:namespace/> so when we access element in AUI we need to
use <portlet:namespace/>
Select Element with Id without portlet name space
Input element find with Id with portlet name space
<input
name="Name" id="Name" value=""></input>
<aui:script>
AUI().use('aui-base',function(A){
var inputObject=A.one("#Name");
});
</aui:script>
|
Manfully specify <portlet:namespace/> for html
input
<input
name="<portlet:namespace/>Name" id="<portlet:namespace/>Name"
value=""></input>
<aui:script>
AUI().use('aui-base',function(A){
var
inputObject=A.one("#<portlet:namespace/>Name");
});
</aui:script>
|
CSS
class Selector
We will use CSS class names in AUI script to
identify elements.
When we use CSS class in AUI script we need use dot
(.) before name.
Example:
<p
class=”ptag”> this is paragraph</p>
<aui:script>
AUI().use('aui-base',function(A){
var paragraphObject=A.one(".ptag ");
});
</aui:script>
|
Note:
When we use
CSS class there may be find many elements with that class when we use A.one()
then it will give first finding object in the document.
The following is fining all elements which have particular
class
Example:
<p
class=”ptag”> this is paragraph000</p>
<p
class=”ptag”> this is paragraph1111</p>
<p
class=”ptag”> this is paragraph2222</p>
<aui:script>
AUI().use('aui-base',function(A){
var paragraphObjectArray=A.all(".ptag ");
});
</aui:script>
|
We need to first make sure that you want one object
or all objects when you select element with class selector.
A.one()
will always give one object even it find many objects that is first finding
object.
A.all()
will give you array of objects which found for given selectors.
Note:
Generally for ID selector we will use A.one(--) and for CSS class selector we
will use A.all().
Tag
Selector
We will use tag name for select element and here we
can find many elements for tag name let’s say we may have many paragraph tag
for one html document.
If we use A.all() we can get all p elements and if we use A.one() then
we can get only one that is first fining element.
Example:
All P Elements we can get as Array of objects when
we use A.all (“p”)
<p
class=”ptag”> this is paragraph000</p>
<p
class=”ptag”> this is paragraph1111</p>
<p
class=”ptag”> this is paragraph2222</p>
<aui:script>
AUI().use('aui-base',function(A){
var paragraphObjectArray=A.all("p");
});
</aui:script>
|
We can get first P element when we use A.one(“p”)
<p>
this is paragraph000</p>
<p>
this is paragraph1111</p>
<p>
this is paragraph2222</p>
<aui:script>
AUI().use('aui-base',function(A){
var paragraphObject=A.one("p");
});
</aui:script>
|
Note:
Depends on
our expected result we need choose A.one()
or A.all()
Attribute
Selector
We can find elements with attribute value. We may
have many tags and each tag may have attributes so we will use attributes to
find values
Example in the documents we want finds all input
elements with type text nothing but all text box elements.
<aui:input
type="text" name="firstName" id="firstName"
value=""></aui:input>
<aui:input
type="text" name="lastName" id="lastName"
value=""></aui:input>
<aui:input
type="text" name="mddileName" id="middleName"
value=""></aui:input>
<aui:script>
AUI().use('aui-base',function(A){
var allInputTextElementsArray=A.all('input[type=text]');
});
</aui:script>
|
Similarly
All
input Check Boxes
A.all('input[type=checkbox]');
|
Well we understand finding elements with selectors
and some selectors will give us more elements and some selectors will give one
element. Now we will see the getting the attribute values of each elements.
Get
Attribute Values for elements
var
attributeValue= A.one("#elementId").get(“AttributeName”);
|
Example:
Get the value of Input Text Box
<aui:input
type="text" name=" Name " id=" Name "
value=""></aui:input>
<aui:script>
AUI().use('aui-base',function(A){
var
inputObject=A.one("#<portlet:namespace/>Name");
var
inputTextBoxValue= inputObject.get(“value”);
});
</aui:script>
OR
<aui:input
type="text" name=" Name " id=" Name "
value=""></aui:input>
<aui:script>
AUI().use('aui-base',function(A){
var inputTextBoxValue = A.one("#<portlet:namespace/>Name").get(“value”);
});
</aui:script>
|
This is the way we can get any attribute values
If we select one element we can read but if we find
many elements how should we read all elements
We have AUI
each method like for we will use this each method to read all elements
AUI
each
A.all('.foo').each(function(object)
{
alert(object.get("attributeName"));
}
|
Now find all Input Text Box elements and its values
<aui:input
type="text" name="firstName" id="firstName"
value=""></aui:input>
<aui:input
type="text" name="lastName" id="lastName"
value=""></aui:input>
<aui:input
type="text" name="mddileName" id="middleName"
value=""></aui:input>
<aui:script>
AUI().use('aui-base',function(A){
A.all('input[type=text]').each(function(object)
{
alert(object.get("value"));
});
});
</aui:script>
|
Read all P tags and its Text
<p
class=”ptag”> this is paragraph000</p>
<p
class=”ptag”> this is paragraph1111</p>
<p
class=”ptag”> this is paragraph2222</p>
<aui:script>
AUI().use('aui-base',function(A){
var paragraphObjectArray=A.all("p");
paragraphObjectArray.
each(function(object) {
alert(object.get("text"));
});
});
</aui:script>
|
Iterate Array using AUI each
A.Array.each([1,
2, 3], function(value, index){
});
|
Examples:
<aui:script>
AUI().use('aui-base',function(A){
A.Array.each([1,
2, 3], fn(value, index){
alert(value);
alert(index));
});
});
</aui:script>
OR
<aui:script>
AUI().use('aui-base',function(A){
var array=[1, 2, 3]
A.Array.each(array,fn(value,
index){
alert(value);
alert(index));
});
});
</aui:script>
|
AUI
Events:
In java script we have many events for each element.
We will see how events are bind for elements.
Click Event in AUI
<aui:button
name="clickMe" id="clickMe" value="Click
Me"></aui:button>
<aui:script>
AUI().use('aui-base',
function(A){
A.one("#<portlet:namespace/>
clickMe").on('click',function(){
alert("This click Event from
AUI");
});
});
</aui:script>
|
Multiple Events for Single Element
<aui:input
name="Name" id="Name"
value=""></aui:input>
<aui:script>
AUI().use('aui-base',
function(A){
A.one("#<portlet:namespace/>Name").on(['click',
'focus', 'blur','keyup','keydown'],function(){
alert("Hi you have performed Multiple
Events for Name Text Box and Thank You");
})
});
</aui:script>
|
Examples:
On Change Event for Select Element
<aui:select
name="country" id="country" label="Select Your
Country">
<aui:option
value="India" label="India"></aui:option>
<aui:option
value="Hong Kong" label="Hong
Kong"></aui:option>
<aui:option
value="US" label="US"></aui:option>
</aui:select>
<aui:script>
A.one("#<portlet:namespace/>country").on('change',function(){
alert("Hi you have performed On change
Event and Thank You");
})
</aui:script>
|
Similarly
//
click even for click me button
A.one("#<portlet:namespace/>ClickMe").on('click',function(){
alert("Hi you have performed Click
Event and Thank You");
})
//
on change event for country select box
A.one("#<portlet:namespace/>country").on('change',function(){
alert("Hi you have performed On change
Event and Thank You");
})
//Mouse
over Event
A.one("#MouseOverMousOut").on('mouseover',function(){
alert("Hi you have performed Mouse Over
Event and Thank You");
})
//Mouse
Out Event
A.one("#MouseOverMousOut").on('mouseout',function(){
alert("Hi you have performed Mouse Out
Event and Thank You");
})
//configres
multiple events for Name Text Box
A.one("#<portlet:namespace/>Name").on(['click',
'focus', 'blur','keyup','keydown'],function(){
alert("Hi you have performed Multiple
Events for Name Text Box and Thank You");
})
|
AUI
Example Code Snippets
Select all elements which are only form
elements
<aui:script>
AUI().use('aui-base',function(A){
var
allFormInputElementsArray=A.all('input,textarea,select,button')
allFormInputElementsArray.each(function(object)
{
alert(object.get("value"));
});
});
</aui:script>
|
Find ALL Checked Check Boxes
A.all('input[type=checkbox][checked]')
|
Find check box is checked or not
var
isCheked= A.one('#checkBoxId').get('checked')
|
Get first div element with specific css class
A.one('div.myDiv')
|
Select all DIV elements with specific
class
A.all('div.myDiv')
Here
.myDive is class name for Div element
|
Hide and Block Div
A.one('div.foo').hide();
A.one('div.foo').show();
|
Insert HTML data to Element
A.one('div.foo').setHTML(“<p>this
is meera</p>”)
OR
A.one('div.foo').set(“innerHTML”,“<p>this
is meera</p>”);
|
Iterate
all div and get Text
var
arrayOfDivs = A.all('div.divClasName');
var
lenght=arrayOfDivs.size();
arrayOfDivs.each(function(object)
{
alert(object.get("text"));
});
OR
for(var
i=0;i<arrayOfDivs.size();i++){
var
divObject=arrayOfDivs[i];
var
divText=divObject.get("text");
alert(divText);
}
|
Crete Element in AUI and Set Attributes
<aui:script>
AUI().use('aui-base','aui-node',function(A){
var
divElement=A.Node.create('<div/>');
divElement.set("id","myDIvID");
divElement.setStyle('display',
'block');
divElement.addClass('myDivClass')
});
});
</aui:script>
|
Similarly
A.Node.create('<table/>')
A.Node.create('<input/>')
A.Node.create('<p/>')
A.Node.create('<li/>')
A.Node.create('<td/>')
|
CSS
classes and Styles
Add and Remove CSS classes to element
A.one("#elementID").addClass('myclass')
A.one("#elementID").removeClass('myclass')
|
Related
Articles:
Author
Posts
0 comments :
Post a Comment