Working With Liferay AUI Java Script Part-I

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

http://www.liferaysavvy.com/2014/02/introduction-to-aui-java-script-in.html

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

1. <aui:script/> tag
2. 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

1. Id selector
2. CSS class Selector
3. Tag Selector
4. 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:

http://www.liferaysavvy.com/2014/02/introduction-to-aui-java-script-in.html

Author

MeeraPrince

Liferay Top Contributor Award Winner

http://www.liferaysavvy.com

Share on Google Plus

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.