Alloy

Whats Alloy?
 Ans:

Alloy is a UI meta framework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.  This framework is built on the top of YUI3.It supports HTML5 as well as CSS3. Its a separate project of Liferay. To know more about Alloy visit http://alloy.liferay.com. 

To do some sample examples lets download alloy from here . The link will download a file alloy-1.0.1.zip which indicates that 1.0.1 is the current version of alloy. Unzip the file in your local drive. The unzipped folder looks  like the following

You can explore various demos of Aolloy inside the demos folder. Lets do some examples using alloy javascript library. aui.js is the alloy javascript libray that's available under build\aui folder.We will create Alloy_practice folder where we will copy the aui.js file inside it. You can do as your own way. Now create a sample html file inside Alloy_practice include aui.js file as bellow


<script src="aui.js" type="text/javascript"></script>

Now we are ready to explore Alloy javascript library.

Alloy Ready Function:
If you know jQuery then probably you know the use of ready function.In alloy its of the following form

AUI().ready(function(A) {


});

When the DOM is ready or in simple language when the whole HTML is loaded  the above function will be called. So the good practice is to keep your code inside the ready function. We can give alert inside the  ready function to check how does it work.


AUI().ready(function(A) {
    alert(A);
});

So when the function will be called you will get the instance of Alloy which will be assigned to the variable 'A' and you should get an alert message of the contents of 'A' variable. Letter we can use this A variable to access various functions of Alloy Library.

Alloy Module:
There are many modules available in Alloy. So what does it mean? The answer is very simple. Its a single unit of work which can be used for specific task, purpose. If you want to add auto complete functionality by jQuery then probably you will download plugin for it and add it in your jsp or html page.But the alloy framework is something different. This kind functionality is already available with Alloy and just we need to use it as same import statement in java. Some of the modules in Alloy are

aui-autocomplete
aui-calendar
aui-color-picker
etc...
To know more about Alloy modules click here.
So how to use Alloy module? Its very simple..........


AUI().ready('aui-autocomplete',function(A) {


});

The above will load Auto Complete module. Is not it simple? We can load multiple modules as bellow.......


AUI().ready('aui-autocomplete','aui-calendar',function(A) {


});

We can add number of modules as many as required. Just remember that function(A) should always be in the last.

Get element by id and name in Alloy:
I believe that you know at least javascript. I am sure that you used get element by id or by name.This is very simple in Alloy.Lets see the bellow code

<input type="text" id="mytext" value="xyz"/>

To get the value of the above text box we can write the following code

AUI().ready(function(A) {
    var inputValue = A.one('#mytext').get('value');
});

Here we are using A.one() since there are only one element with the id mytext. Otherwise we can use A.all() for multiple occurrence of an element. #mytext represents element with id mytext and get('value') gives the value of the text box.Similarly for the bellow element

<input type="text" name="mytext" value="xyz"/>  

We can extract the value of the text box as bellow

AUI().ready(function(A) {
    var inputValue = A.one('input[name=mytext]').get('value');
 });