Today we going to start how to implement a simple Yahoo User Interface (YUI) 3.0 frameworks. YUI 3 is basically a little bit different way to code, compare to 2.7.

YUI 3 is still under beta version, therefore, most of the modules and functions are not available. You have to use those functions/modules provided by YUI 2.7. The YUI 2.7 code is solid and firm can be used in YUI 3.0 or the future next newer version.

Before we start, first of all, we go to the website to download the whole frameworks: http://yuilibrary.com/downloads/#yui3.

After downloaded, let’s get started!

1. In your code you should add this line to enable the YUI frameworks:

This file contains YUI class, with its constructor and core functions, which is to performs most basic functions.

2. YUI 3.0 code is more neat, and compact, compare to YUI 2.7. For instance, when you want to use some certain modules from library, you just code this format:

YUI().use(”[-- MODULE NAME(S) --]“, function(Y) {}, which the module names are actually the folder names found in YUI root files. For example:
YUI().use(dd-drop’, ‘node’, ‘io’, function(Y) {start code here}; you can implement classes & functions in drop, node & io modules. The function “use” is actually from its core library.

3. To create new object/instance:
var A = new Y.(module class)({ properties });

4. In YUI, to create your function definition, you can code like this:
var functionA = function (e){ your code is here };

When you want to call the function definition:
Y.on(”click”, functionA);

Note that, actually Y.on can be work more arguments than it show as above.
Y.on([-event name-], [-function-], [-element(s)-], [-object-], [-argument-])

5. YUI provides easier solution for us to get attributes value. For example when we want to get the element’s ID, we usually use getElementById(). In YUI, Y.Node.get(’#ID name’); ( make sure you add the Node modules in YUI().use() ). Of course, getElementById still can implement in YUI library. There are a few ways we can do for get function:
(a) obj.get(’node’).setStyles({ opacity: ‘1′});
(b) Y.Node.get(’#IDName’).get(”your attribute like name, value etc”)