Introduction, Alloy UI and YUI3 console

Hi all, thanks for stopping by my blog here at Liferay. This being my first post, I'll start by introducing myself to those who yet doesn't know me. My name is Erik Andersson and I'm a co-founder and UI-lead at Monator, which is a Liferay Service Partner and Training Partner in Sweden.

Being responsible for UI-development at Monator, my blog will naturally be focused on UI development with Liferay. Especially, I will aim to write about Liferay's awesome new UI framework Alloy UI (AUI). Hope I can help shed some light into how stuff works in AUI, and give you some tips on how to get started and gain speed on working with the framework.

I know Alloy can be a tough ride to start, but the more you dig into Alloy (and YUI3 of course), the more you see its beauty and power. Promise. With that said, if you guys have any area that you find interesting or in need of more explanation, please leave a comment and I'll try to cover that in a post (given that I feel that I have something to contribute on the topic =)).

I'll end this first post with a tip on how to activate logging with the YUI console. As you all know, debugging and javascript usually don't go very well together. On Firefox we have at least Firebug which is an eternal blessing for us frontend developers. Other browsers have come some way and also have plugins similar to Firebug. Even IE can be debugged with the Developer Tools. Safe to say, however, you often want more.

Enter the YUI console. Now some of you might ask, what does he mean with YUI, wasn't this blog to be about Alloy? Well AUI is a wrapper for YUI3. This means that all the modules, widgets, plugins that are included in YUI3 can be used in AUI (and thereby Liferay). And YUI3 has this useful module called Console. How can you use it? It's as simple as including the console in the AUI dependency list when initiating your AUI sandbox. Now the console module will load and we can create a console:

AUI().ready('aui-base', 'console', function(A) {
    new A.Console({
        height: '250px',
        newestOnTop: false,
        style: 'block',
        visible: true,
        width: '600px'
    }).render();
});


Now we created a global console, which we can use to log stuff in our javascript code. For those familiar with Firebug's console.log, the equivalent for the console (with AUI) would be:

A.log('This is my log message.');

You can read more about the console module at the official YUI3 documentation page. If you want your console to be more stylish (like the examples on the YUI3 documentation), include the console-core.css stylesheet which can be found in the yui3 library.

That's it for now, hope that you'll stop by soon again.

Blogs
Hey Erik, nice post! I look forward to yours (and others) contributions - we are working on setting up blogging for the general community so others can share their wisdom and expertise as you have done. Keep it up!
Any examples you have, AlloyUI Treeview functions connecting up to database and business class?
Hi Mani, I don't have any working examples of this yet, but maybe I could put together such an example. The basic component you would use is the TreeNodeIO class (http://alloy.liferay.com/deploy/api/TreeNodeIO.html) and load the data as JSON with a ResourceURL.
Hi,
Nice post. I, however, can't get any YUI3 code to work in Liferay 6.1. Any hints? I'm trying to use the node-menunav module and it's just not running.
Hi Erik ,
i have a question that i want to use build-in of alloy ui 1.7 in liferay 6.1.1;; but i want to copy library into tomcat server instead using "<script src="http://cdn.alloyui.com/2.0.0pr5/aui/aui-min.js"></script>";;
can you show me how do i do it;; because after i copy and paste all lib in allou 1.7.0;;
my liferay is still run well with something that is exist in version 1.5 but i try some new features in version 1.7;; that is not run;;

can you show me the way to resolve it; or give me an explaination about it;


Thanks!