12/11/2010

AlloyUI Tutorial Part 2 : Explaining Hello World and digging deeper

Part 1   Part 2   Part 3   Useful Links   Useful Literature

To really fully understand what happened in Part 1, you need to understand what AlloyUI is.
AlloyUI is built on top of YUI3 (http://developer.yahoo.com/yui/3/) and provides a lot of Widgets to be used in your web applications / portlets. Well ... not only Widgets, but Widgets provide a covenient way to see results very fast.

If you want to know what to do to get the AlloyUI examples to run, you need to understand how Widgets in YUI3 work. The guys at yahoo! have a pretty good page set up which explains the object model and functions all widgets need to use and implement. Please take a look at http://developer.yahoo.com/yui/3/widget/.

By the way : I just found out, that the guys at Liferay also have some absolutely fantastic blogs about AlloyUI that go into another direction then my step - by - step tutorial here. If you want to take a technical dive into AlloyUI, look here: http://www.liferay.com/de/web/nathan.cavanaugh/blog/-/blogs/4717591/maximized

So - what did we do in Part 1 ?
We first created a div and gave it a name. Thats all - nothing but an anchor that we use in our javascript statements. Then we started writing some mysterious AlloyUI code. Let´s review it step by step:

AUI().use('aui-autocomplete', function(A)


What´s this ? We declare that we want to use the AUI function "aui-autocomplete" and register a callback (our function). We now have access to all functions and classes the autocomplete package provides. The "A" allows us to access the autocomplete functions. If we wanted to use more than one package, we could have specified it like this:


AUI().use('packag1', 'package2', function(A)




var people = [


       ['Uncle Bob','Car Repairing'],
       ['Dad','Finance'],
       ['Mum','Cooking'],
       ['Maria','Information Technology']
    ];


This is nothing but POJS (Plain old JavaScript) : A two - dimensional array holding the information we want to proceed.  

var auto  = new A.AutoComplete(

Here we create a new auto complete object and pass parameters to it.We assign it to our div by using the contentBox parameter and render it upon page load. The behaviour of the auto complete widget is controlled by its parameters.

xyz.render();


Render displays the widget - because we didn´t implement restrictions, the widget is displaye upon page load.



So - that´s the end of Part 2 of the tutorial.
You now know how to use Widgets, how to create a callback and how to display widgets.



If you liked this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.