YUI 3 is now available as preview release.In this post,I am just sharing some personal notes I took while understanding the very basics of new version of this framework : 

•      The YUI Global Object 

1. Download YUI 3 and include yui-min to start working with YUI global  

           <script type="text/javascript" src=../../build/yui/yui-min.js" ></script>

        or, go to YUI Dependency Configurator, and leverage Yahoo’s infrastructure and bandwidth.Also,helps you to select which files you should include for the modules you need.
 

 I am starting with example given in YUI website :

<style>
    #demo {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        background-color: #8DD5E7;
        text-align: center;
    }
</style>

<div id="demo"></div>

<script>

YUI({combine: true, timeout: 10000}).use("node",function(Y) {
var node = Y.get(’#demo’);
Y.log(’Found node.. Setting style’);
node.setStyle(’backgroundColor’, ‘#D00050′);
node.set(’innerHTML’, ‘<strong>Changed!</strong>’);
});
</script>

Explanation :

        Looking at 

            YUI({combine: true, timeout: 10000}).use("node",function(Y) {

• YUI namespace is used instead of Yahoo namespace as in version 2.
• combine: true is a boolean parameter which basically utilizes the YUI combo service to join the dependency js files in order to reduce the number of http connections.
• timeout is number of milliseconds before a timeout occurs when dynamically loading nodes. if not set, there is no timeout
• Use method allows you to choose the modules that you want loaded into your YUI instance.One cool thing is "You can pick and choose what you need, you don’t have to load everything that was included on the page".
• We are including node module here.If we want to include all modules available, we can use star(*)(more details in green block )
• Then,we are passing function as a last argument.This function will execute after YUI instance loads all the modules specified.
• There is one argument passed in this function which is the YUI instance we’ll be working with.

 
      Now,looking inside the function 

var node = Y.get(’#demo’);
Y.log(’Found node.. Setting style’);
node.setStyle(’backgroundColor’, ‘#D00050′);
node.set(’innerHTML’, ‘<strong>Changed!</strong>’);

• One way to get a Node instance is using YUI instance’s(Y in our case) get method.
• If the ‘debug’ global setting is true,then a log message(’Found node…’) will be dispatched through  ‘yui:log’ event.In order to see these messages in browser console,you have to  set ‘useConsole’ config to true.
• Line 3 in this block,we are just changing the background color of the node using setStyle passing backgroundcolor attribute with its value.
• And then we are changing the innerHTML using some text(changed)

Click here to see this example in your browser.

Now,I want to change the text inside this box based on some event(say onClick) from "changed" to "somebody clicked me".For that ,add the following code ..

onClick = function(e) {
    var node = e.currentTarget;
    var html = ‘Somebody clicked me !!’;
    node.set(’innerHTML’, html);

node.setStyle(’backgroundColor’, ‘#FFFFFF’);
    };

    node.on(’click’, onClick);
 

• Let’s start with the last line.The node.on / node.attach method links a DOM event handler( on is just an allias of attach method).The first parameter is the type of DOM event to listen for(click in our case) and second parameter is the handler to call when the event fires.In our case,the handler is onClick.
• Now,lets look at the function definition.currentTarget is the property of  Event.Facade class.It basically references the node for the element that the event is attached to.
• After that,set method sets the value of the HTMLelement bound to this node.innerHTML is the attribute and its value is defined in html variable passed.

The output of this code will be something like this when you click on that box(I have changed the block width)

 var helloWorld = function(e) {
        Y.log("helloWorld function firing.", "info", "example");
        alert("Hello World!");
    }

    Y.on("click", helloWorld, "#demo");

• Here,we are showing alert box in another way..
• We are using on method of YUI global namespace object.The method takes event type(click),function to execute(helloworld) and element to attach to(#demo).

This covers the basics of YUI global object with hint of working with node and event in the above example. In part 2,I will be covering utilties – animation,drag-drop and cookies etc.

 

• YUI 3 Home Page – http://developer.yahoo.com/yui/3/
  
• YUI 3 API reference – http://developer.yahoo.com/yui/3/api/

 

 

 

P.S. I have been trying to solve daily "real" issues which educators face while integrating technology in their curriculum. Click one of the icons on the right sidebar to join the growing community of educators reading this blog by RSS or by email...