« Back

Introduction, Alloy UI and YUI3 console

General Blogs February 16, 2011 By Erik Andersson

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'

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.

Threaded Replies Author Date
Hey Erik, nice post! I look forward to yours... James Falkner February 16, 2011 12:30 PM
hey Erik, Glad to see you here sharing your... Thiago Leão Moreira February 16, 2011 3:27 PM
Hey Erik, Thanks for sharing your expertise... Jeffrey Handa February 17, 2011 1:20 AM
Any examples you have, AlloyUI Treeview... Manikandan S February 17, 2011 3:54 AM
Hi Mani, I don't have any working examples of... Erik Andersson February 17, 2011 11:54 AM
Nice post, hope your expertise certainly helps... Nagendra Kumar Busam May 25, 2011 10:54 PM
Hi, Nice post. I, however, can't get any YUI3... jsd jsd August 30, 2011 10:31 PM
Hi Erik , i have a question that i want to use... Linh Le June 26, 2013 9:02 PM

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!
Posted on 2/16/11 12:30 PM.
hey Erik,

Glad to see you here sharing your knowledgement with all!

Um abraço
Posted on 2/16/11 3:27 PM.
Hey Erik,

Thanks for sharing your expertise with the community. I look forward to more posts!
Posted on 2/17/11 1:20 AM.
Any examples you have, AlloyUI Treeview functions connecting up to database and business class?
Posted on 2/17/11 3:54 AM.
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.
Posted on 2/17/11 11:54 AM in reply to Mani kandan.
Nice post, hope your expertise certainly helps community users
Posted on 5/25/11 10:54 PM.
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.
Posted on 8/30/11 10:31 PM.
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;

Posted on 6/26/13 9:02 PM in reply to jsd jsd.