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.