YUI Library Examples: Layout Manager: Complex Application

Note: There is a unresolved performance issue with this example on pre-Intel Macs running the latest Opera browser.

Getting Started

This example contains a few YUI Utilities and Controls as well as the use of a few Yahoo! Services. Here is the complete list of items used:

YUI Utilities:

YUI Controls:

Yahoo! Tools/Services:

Design

This example was designed to be used with the YUILoader and Get Utilities. Each important piece of the puzzle is created and stored in a separate Javasript file. Here are the links to the actual source files (listed in order of operation):

main.js - Main app logic
tabview.js - Creates the main tabview instance.
- news.js - Fetchs the news feeds
- inbox.js - Contains the DataTable's logic
buttons.js - Contains the button logic
- editor.js - Contains the Editor's logic
calendar.js - Contains the Calendar logic
logger.js - Contains the Logger logic

main.js

This file uses YUILoader to load: reset-fonts-grids, utilities, tabview, selector, resize and layout. Once they have loaded, it creates the main page layout. In it's render listener it loads tabview.js and button.js

//Call loader the first time
    var loader = new YAHOO.util.YUILoader({
        base: 'http://yui.yahooapis.com/2.9.0/build/',
        //Get these modules
        require: ['reset-fonts-grids', 'utilities', 'logger', 'button', 'container', 'tabview', 'selector', 'resize', 'layout'],
        rollup: true,
        onSuccess: function() {
            //Use the DD shim on all DD objects
            YAHOO.util.DDM.useShim = true;
            //Load the global CSS file.
            YAHOO.log('Main files loaded..', 'info', 'main.js');
            YAHOO.util.Get.css('assets/css/example1.css');

YAHOO.log('Create the first layout on the page', 'info', 'main.js');
            YAHOO.example.app.layout = new YAHOO.widget.Layout({
                minWidth: 1000,
                units: [
                    { position: 'top', height: 45, resize: false, body: 'top1' },
                    { position: 'right', width: 300, body: '', header: 'Logger Console', collapse: true },
                    { position: 'left', width: 190, resize: true, body: 'left1', gutter: '0 5 0 5px', minWidth: 190 },
                    { position: 'center', gutter: '0 5px 0 2' }
                ]
            });
            //On resize, resize the left and right column content
            YAHOO.example.app.layout.on('resize', function() {
                var l = this.getUnitByPosition('left');
                var th = l.get('height') - YAHOO.util.Dom.get('folder_top').offsetHeight;
                var h = th - 4; //Borders around the 2 areas
                h = h - 9; //Padding between the 2 parts
                YAHOO.util.Dom.setStyle('folder_list', 'height', h + 'px');
            }, YAHOO.example.app.layout, true);
            //On render, load tabview.js and button.js
            YAHOO.example.app.layout.on('render', function() {
                window.setTimeout(function() {
                    YAHOO.util.Get.script('assets/js/logger.js');
                    YAHOO.util.Get.script('assets/js/tabview.js'); 
                    YAHOO.util.Get.script('assets/js/buttons.js');
                    YAHOO.util.Get.script('assets/js/calendar.js');
                }, 0);
                YAHOO.example.app.layout.getUnitByPosition('right').collapse();
                setTimeout(function() {
                    YAHOO.util.Dom.setStyle(document.body, 'visibility', 'visible');
                    YAHOO.example.app.layout.resize();
                }, 1000);
            });
            //Render the layout
            YAHOO.example.app.layout.render();
            //Setup the click listeners on the folder list
            YAHOO.util.Event.on('folder_list', 'click', function(ev) {
                var tar = YAHOO.util.Event.getTarget(ev);
                if (tar.tagName.toLowerCase() != 'a') {
                    tar = null;
                }
                //Make sure we are a link in the list's 
                if (tar && YAHOO.util.Selector.test(tar, '#folder_list ul li a')) {
                    //if the href is a '#' then select the proper tab and change it's label
                    if (tar && tar.getAttribute('href', 2) == '#') {
                        YAHOO.util.Dom.removeClass(YAHOO.util.Selector.query('#folder_list li'), 'selected');
                        var feedName = tar.parentNode.className;
                        YAHOO.util.Dom.addClass(tar.parentNode, 'selected');
                        YAHOO.util.Event.stopEvent(ev);
                        var title = tar.innerHTML;
                        var t = YAHOO.example.app.tabView.get('tabs');
                        for (var i = 0; i < t.length; i++) {
                            if (t[i].get('id') == 'inboxView') {
                                t[i].set('label', title);
                                var u = false;
                                if (feedName.indexOf('-') != -1) {
                                    u = 'http:/'+'/rss.groups.yahoo.com/group/' + feedName + '/rss';
                                }
                                if (feedName.indexOf('inbox') != -1) {
                                    u = 'http:/'+'/rss.groups.yahoo.com/group/ydn-javascript/rss';
                                }
                                YAHOO.example.app.getFeed(u);
                                YAHOO.example.app.tabView.set('activeTab', t[i]);
                            }
                        }
                    }
                }
            });
            
            //Create a SimpleDialog used to mimic an OS dialog
            var panel = new YAHOO.widget.SimpleDialog('alert', {
                fixedcenter: true,
                visible: false,
                modal: true,
                width: '300px',
                constraintoviewport: true, 
                icon: YAHOO.widget.SimpleDialog.ICON_WARN,
                buttons: [
                    { text: 'OK', handler: function() {
                        panel.hide();
                    }, isDefault: true }
                ]
            });
            //Set the header
            panel.setHeader('Alert');
            //Give the body something to render with
            panel.setBody('Notta');
            //Render the Dialog to the body
            panel.render(document.body);

//Create a namepaced alert method
            YAHOO.example.app.alert = function(str) {
                YAHOO.log('Firing panel setBody with string: ' + str, 'info', 'main.js');
                //Set the body to the string passed
                panel.setBody(str);
                //Set an icon
                panel.cfg.setProperty('icon', YAHOO.widget.SimpleDialog.ICON_WARN);
                //Bring the dialog to the top
                panel.bringToTop();
                //Show it
                panel.show();
            };

YAHOO.example.app.alert('This is not a new product from Yahoo! or YUI, just a demonstration of how YUI components can work in concert in the context of a more complex application.');
        }
    });
    loader.insert();
})();

tabview.js

This file creates the main TabView used for the center unit. It also creates the welcome screen and uses Get to load the news.js file. If the Inbox tab is selected, it will use Get to load the inbox.js.

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        Sel = YAHOO.util.Selector;
        YAHOO.log('tabview.js loaded', 'info', 'tabview.js');
        //Set the time on the home screen
        YAHOO.example.app.setTime = function() {
            var d = new Date();
            var weekday = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            var h = d.getHours(), a = 'am';
            if (h >= 12) {
                a = 'pm';
                if (h > 12) {
                    h = (h - 12);
                }
            }

var dy = d.getDate();
            if (dy < 10) {
                dy = '0' + dy;
            }

var m = (d.getMonth() + 1);
            if (m < 10) {
                m = '0' + m;
            }

}));
        YAHOO.example.app.tabView.on('activeTabChange', function(ev) {
            //Tabs have changed
            if (ev.newValue.get('id') == 'inboxView') {
                //inbox tab was selected
                if (!YAHOO.example.app.inboxLoaded && !YAHOO.example.app.inboxLoading) {
                    YAHOO.log('Fetching the inbox.js file..', 'info', 'tabview.js');
                    YAHOO.log('Inbox is not loaded yet, use Get to fetch it', 'info', 'tabview.js');
                    YAHOO.log('Adding loading class to tabview', 'info', 'tabview.js');
                    YAHOO.example.app.getFeed();
                }
            }
            //Is an editor present?
            if (YAHOO.example.app.editor) {
                if (ev.newValue.get('id') == 'composeView') {
                    YAHOO.log('Showing the ediitor', 'info', 'tabview.js');
                    YAHOO.example.app.editor.show();
                    YAHOO.example.app.editor.set('disabled', false);
                } else {
                    YAHOO.log('Hiding the editor', 'info', 'tabview.js');
                    YAHOO.example.app.editor.hide();
                    YAHOO.example.app.editor.set('disabled', true);
                }
            }
            //Resize to fit the new content
            YAHOO.example.app.layout.resize();
        });
        //Add the tabview to the center unit of the main layout
        var el = YAHOO.example.app.layout.getUnitByPosition('center').get('wrap');
        YAHOO.example.app.tabView.appendTo(el);

//resize the TabView
        YAHOO.example.app.resizeTabView();
        //Set the time on the home screen
        YAHOO.example.app.setTime();
        //Setup the interval to update the time
        setInterval(YAHOO.example.app.setTime, 60000);

YAHOO.log('Fetch the news feed', 'info', 'tabview.js');
        YAHOO.util.Get.script('assets/js/news.js');

//When inboxView is available, update the height..
        Event.onAvailable('inboxView', function() {
            var t = YAHOO.example.app.tabView.get('tabs');
            for (var i = 0; i < t.length; i++) {
                if (t[i].get('id') == 'inboxView') {
                    var el = t[i].get('contentEl');
                    el.id = 'inboxHolder';
                    YAHOO.log('Setting the height of the TabViews content parent', 'info', 'tabview.js');
                    Dom.setStyle(el, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
                    
                }
            }

});

})();

news.js

This file makes several calls to Yahoo! Pipes with the Get utility in order to fetch the 4 news feeds for the home screen.

YAHOO.log('Add the close button to the tab', 'info', 'news.js');
                        Event.on(tab.get('labelEl').getElementsByTagName('span')[0], 'click', function(ev) {
                            Event.stopEvent(ev);
                            YAHOO.log('Close the news tab', 'info', 'news.js');
                            YAHOO.example.app.tabView.set('activeTab', YAHOO.example.app.tabView.get('tabs')[0]);
                            YAHOO.example.app.tabView.removeTab(tab);
                            Dom.get('newsSlider').parentNode.removeChild(Dom.get('newsSlider'));
                        });
                        YAHOO.log('Add the tab to the tabView', 'info', 'news.js');
                        YAHOO.example.app.tabView.addTab(tab);
                    }
                    YAHOO.log('Set the content of the tab to the string news', 'info', 'news.js');
                    tab.set('content', '<div class="newsFeeds">' + news + '</div>');
                }
            });
        };

YAHOO.log('Create the tabview for the home screen', 'info', 'news.js');
        YAHOO.example.app.homeTabView = new YAHOO.widget.TabView('news');
        window.setTimeout(function() {
            YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=topstories&_render=json&_callback=YAHOO.example.app.getTopNews'); 
        }, 0);

})();

inbox.js

This file uses YUILoader to fetch the DataTable and SimpleEditor (for the toolbar) modules to display the inbox. It also makes a call to a Yahoo! Pipe to gather the data to be populated by the DataTable.

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        layout2 = null,
        dataTable = null,
        emails = {
            account:"jenny@yahoo.com",
            currStorage: 10,
            maxStorage: 200,
            messages: []
        },
        magicNum = 345;

YAHOO.log('inbox.js file is loaded..', 'info', 'inbox.js');
        var prettySize = function(size) {
            var gb = 1024 * 1024 * 1024, mb = 1024 * 1024, mysize;
            if (size > gb) {
                mysize = Math.round(size / gb) + " GB";
            } else if (size > mb) {
                mysize = Math.round(size / mb) + " MB";
            } else if ( size >= 1024 ) {
                mysize = Math.round(size / 1024) + " Kb";
            } else {
                mysize = size + " b";
            }
            return mysize;
        };

//Create the DT, setting scrollable to true and setting the height
            YAHOO.widget.DataTable.MSG_EMPTY = 'This folder contains no messages';

dataTable = new YAHOO.widget.DataTable("standard",
                    myColumnDefs, myDataSource, { scrollable: true, height: dtH + 'px', width: w + 'px' });
            
            
            // Subscribe to events for row selection
            dataTable.subscribe("rowMouseoverEvent", dataTable.onEventHighlightRow);
            dataTable.subscribe("rowMouseoutEvent", dataTable.onEventUnhighlightRow);
            dataTable.subscribe("rowClickEvent", dataTable.onEventSelectRow);
            dataTable.subscribe("rowSelectEvent", function() {
                YAHOO.log('A row is selected, lets update the preview pane below the the data from the recordset', 'info', 'inbox.js');
                var data = this.getRecordSet().getRecord(this.getSelectedRows()[0])._oData;
                var unit = YAHOO.widget.LayoutUnit.getLayoutUnitById('center2');
                unit.set('header', 'Subject: ' + data.Subject + '<br>From: ' + data.From + '<br>To: ' + data.To);
                unit.set('body', '<p>' + data.Body + '<p><p><a href="%20+%20data.Link%20+%20" target="_blank">See the full thread here.</a></p>');
            }, dataTable, true);

YAHOO.example.app.dt = dataTable;
            YAHOO.example.app.inboxLoaded = true;
        };
        
        YAHOO.example.app.reloadData = function(empty) {
            if (empty === false) {
                var d = {
                    value: {
                        items: []
                    }
                };
                YAHOO.example.app.inboxDataReady(d);
            } else {
                YAHOO.log('Getting data from: ' + YAHOO.example.app.feedURL, 'info', 'inbox.js');
                YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=kFM9h0vT3BGxGXVs8ivLAg&_render=json&_callback=YAHOO.example.app.inboxDataReady&feed=' + YAHOO.example.app.feedURL);
            }
        };

//Pipes callback
        YAHOO.example.app.inboxDataReady = function(d) {
            YAHOO.log('Data returned from the Yahoo! Pipes callback', 'info', 'inbox.js');
            var items = d.value.items;
            emails.messages = [];
            //Create the JS Array that we will feed to the DT 
            for (var i = 0; i < items.length; i++) {
                emails.messages[emails.messages.length] = {
                    To: 'YUI User',
                    From: items[i]['dc:creator'],
                    Subject: items[i]['y:title'],
                    Date: new Date(items[i]['y:published'].year, (parseInt(items[i]['y:published'].month, 10) - 1),items[i]['y:published'].day),
                    Body: items[i].description,
                    Link: items[i].link,
                    Size: prettySize((items[i].description.length * 1024))
                };
            }
            setTimeout(function() {
                //init the datatable
                if (!YAHOO.example.app.inboxLoaded) {
                    initDataTable(layout2.getSizes().top.h, layout2.getSizes().top.w);
                } else {
                    dataTable.getRecordSet().replaceRecords(emails.messages);
                    dataTable.render();
                }
                //Setup some sizes
                layout2.getUnitByPosition('top')._setWidth(Dom.get('standard'), layout2.getSizes().top.w);
                layout2.getUnitByPosition('top')._setHeight(Dom.get('standard'), layout2.getSizes().top.h);
                YAHOO.log('Remove the loading class (icon) from the tabview..', 'info', 'inbox.js');
                YAHOO.util.Dom.removeClass(YAHOO.example.app.tabView._tabParent, 'loading');
                YAHOO.example.app.inboxLoading = false;
            }, 1000);
        };

YAHOO.log('Using loader to fetch datatable and editor (for the toolbar)', 'info', 'inbox.js');
        var loader = new YAHOO.util.YUILoader({
            base: 'http://yui.yahooapis.com/2.9.0/build/',
            require: ['datatable', 'editor'],
            ignore: ['containercore'],
            onSuccess: function() {
                YAHOO.log('Inject some HTML for the content of this layout.', 'info', 'inbox.js');
                var d = document.createElement('div');
                d.innerHTML = '<div id="top2"><div id="inboxToolbar"></div><div id="standard"></div></div><div id="center2"><div class="yui-layout-bd"><div id="preview"><p><strong>Got your eye on one of those messages up there?</strong></p><p>To view your message down here in this handy Reading pane, just click on it.</p></div></div></div>';
                document.body.appendChild(d);
                YAHOO.log('Creating a second Layout for the inbox and preview pane', 'info', 'inbox.js');
                layout2 = new YAHOO.widget.Layout('inboxHolder', {
                    parent: YAHOO.example.app.layout,
                    units: [
                        { position: 'top', height: '300px', maxHeight: 700, resize: true, id: 'top2', gutter: '0 0 15 0' },
                        { position: 'center', id: 'center2', gutter: '0 0 1 0', scroll: true }
                    ]
                });
                //before the resize, update the parent with the proper height
                layout2.on('beforeResize', function() {
                    Dom.setStyle('inboxHolder', 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height'));
                });
                //On resize, resize the table and set the custom width on the Subject Column
                layout2.on('resize', function() {
                    if (dataTable) {
                        this.getUnitByPosition('top')._setWidth(Dom.get('standard'), this.getSizes().top.w);
                        this.getUnitByPosition('top')._setWidth(Dom.get('yui-dt0-table'), this.getSizes().top.w);
                        dataTable.set('height', (this.getSizes().top.h - 27 - YAHOO.example.app.inboxToolbarHeight) + 'px');
                        dataTable.set('width', (this.getSizes().top.w) + 'px');
                        dataTable.setColumnWidth(dataTable.getColumn('Subject'), (this.getSizes().top.w - magicNum));
                        dataTable._syncColWidths();
                    }
                }, layout2, true);
                layout2.on('render', function() {
                    YAHOO.log('On render create the inbox Toolbar', 'info', 'inbox.js');
                    YAHOO.example.app.inboxToolbar = new YAHOO.widget.Toolbar('inboxToolbar', {
                        buttons: [
                            { id: 'tb_delete', type: 'push', label: 'Delete', value: 'delete'},
                            { type: 'separator' },
                            { id: 'tb_reply', type: 'push', label: 'Reply', value: 'reply' },
                            { id: 'tb_forward', type: 'push', label: 'Forward', value: 'forward' },
                            { type: 'separator' },
                            { id: 'tb_spam', type: 'push', label: 'Spam', value: 'spam' },
                            { type: 'separator' },
                            { id: 'tb_move', type: 'push', label: 'Move', value: 'move' },
                            { id: 'tb_print', type: 'push', label: 'Print', value: 'print' }
                        ]
                    });
                    //Show an alert message with the button they clicked
                    YAHOO.example.app.inboxToolbar.on('buttonClick', function(ev) {
                        var data = dataTable.getRecordSet().getRecord(dataTable.getSelectedRows()[0])._oData;
                        YAHOO.example.app.alert(ev.button.label + ': ' + data.Subject);
                    });
                    //Grab it's height for later use
                    YAHOO.example.app.inboxToolbarHeight = Dom.get('inboxToolbar').clientHeight + 3;
                    
                    window.setTimeout(function() {
                        YAHOO.log('Using get to call the Yahoo! Pipe for the inbox feed', 'info', 'inbox.js');
                        YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=kFM9h0vT3BGxGXVs8ivLAg&_render=json&_callback=YAHOO.example.app.inboxDataReady&feed=' + YAHOO.example.app.feedURL);
                    }, 0);
                }, layout2, true);
                layout2.render();
                YAHOO.example.app.layout2 = layout2;
            }
        });
        //Have loader insert only the JS files.
        loader.insert({}, 'js');
})();

buttons.js

This file handles the 3 main buttons on the screen: Check Mail, New Message and Search Web. It also handles the click for the New Message button which calls Get to load the editor.js file.

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

YAHOO.log('buttons.js loaded', 'info', 'button.js');
    //Create this loader instance and ask for the Button module
    var loader = new YAHOO.util.YUILoader({
        base: 'http://yui.yahooapis.com/2.9.0/build/',
        require: ['button'],
        ignore: ['containercore'],
        onSuccess: function() {
            YAHOO.log('Create the search button', 'info', 'button.js');
            var searchButton = new YAHOO.widget.Button('search');
            searchButton.on('click', function() {
                var q = Dom.get('query').value;
                if (q !== 'Search the Web..') {
                    window.open('http:/'+'/search.yahoo.com/search?p=' + q);
                }
            });
            YAHOO.log('Create the Check Mail button', 'info', 'button.js');
            var b1 = new YAHOO.widget.Button({
                label: 'Check Mail',
                id: 'checkButton',
                container: Dom.get('check_buttons')
            });
            //inject a span for the icon
            var icon = document.createElement('span');
            icon.className = 'icon';
            b1.appendChild(icon);
            b1.on('click', function() {
                var t = YAHOO.example.app.tabView.get('tabs');
                for (var i = 0; i < t.length; i++) {
                    if (t[i].get('id') == 'inboxView') {
                        YAHOO.example.app.tabView.set('activeTab', t[i]);
                    }
                }
            });
            YAHOO.log('Create the New Message button', 'info', 'button.js');
            var b2 = new YAHOO.widget.Button({
                label: 'New',
                id: 'newButton',
                title: 'New Message',
                container: Dom.get('check_buttons')
            });
            //inject a span for the icon
            var icon2 = document.createElement('span');
            icon2.className = 'icon';
            b2.appendChild(icon2);
            //Setup the click listener for the new message button
            b2.on('click', function() {
                if (!YAHOO.example.app.editor) {
                    YAHOO.log('No editor present, add the tab', 'info', 'button.js');
                    var cTab = new YAHOO.widget.Tab({
                        label: '<span class="close"></span><span class="icon"></span>New Message',
                        id: 'composeView',
                        active: true,
                        contentEl: Dom.get('composeViewEl')
                    });
                    //Add the close button to the tab
                    Event.on(cTab.get('labelEl').getElementsByTagName('span')[0], 'click', function(ev) {
                        YAHOO.log('Closing the Editor tab and destroying the Editor instance', 'info', 'button.js');
                        Event.stopEvent(ev);
                        YAHOO.example.app.tabView.set('activeTab', YAHOO.example.app.tabView.get('tabs')[0]);
                        var cel = Dom.get('composeViewEl');
                        YAHOO.example.app.destroyEditor();
                        YAHOO.example.app.tabView.removeTab(cTab);
                        document.body.appendChild(cel);

});
                    YAHOO.example.app.tabView.addTab(cTab);
                    YAHOO.log('Load the Editor', 'info', 'button.js');
                    window.setTimeout(function() {
                        var transactionObj = YAHOO.util.Get.script('assets/js/editor.js', { autopurge: true });
                    }, 0);
                } else {
                    YAHOO.log('If there is an editor, then activate the proper tab', 'info', 'button.js');
                    var t = YAHOO.example.app.tabView.get('tabs');
                    for (var i = 0; i < t.length; i++) {
                        if (t[i].get('id') == 'composeView') {
                            YAHOO.example.app.tabView.set('activeTab', t[i]);
                        }
                    }
                }
            });
            YAHOO.log('Add some functionality to the search box', 'info', 'button.js');
            Event.on('query', 'click', function() {
                this.value = '';
            });
            Event.on('query', 'blur', function() {
                if (this.value === '') {
                    this.value = 'Search the Web..';
                }
            });
        }
    });
    //Call insert, only choosing the JS files, so the skin doesn't over write my custom css
    loader.insert({}, 'js');
})();

editor.js

This file loads an Editor instance for use in the New Message tab.

//On resize and start resize handlers
            YAHOO.example.app.layout.on('resize', editorResize);
            //Method to destroy the editor.
            YAHOO.example.app.destroyEditor = function() {
                YAHOO.log('Destroying the Editor instance and HTML', 'info', 'editor.js');
                YAHOO.example.app.layout.unsubscribe('resize', editorResize);
                YAHOO.example.app.editor = null;
            };

YAHOO.log('Setup the AutoComplete for the To Field', 'info', 'editor.js');
            //Build some fake data..
            var team = [
                'Dav',
                'Thomas',
                'Eric',
                'Matt',
                'Adam',
                'Lucas',
                'Nate',
                'Jenny',
                'Satyen',
                'Todd',
                'George'
            ], data = [];

for (var i = 0; i < team.length; i++) {
                for (var s = 0; s < 5; s++) {
                    data[data.length] = team[i] + ' (' + s + ') [' + team[i].toLowerCase() + '@yui.com]';
                }
            }
            // Instantiate JS Array DataSource
            var oACDS2 = new YAHOO.widget.DS_JSArray(data);
            YAHOO.log('Instantiate AutoComplete', 'info', 'editor.js');
            var oAutoComp = new YAHOO.widget.AutoComplete('composeTo','autoTo', oACDS2);
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
            oAutoComp.typeAhead = true;
            oAutoComp.useIFrame = true;
        }
    });
    //Have loader only insert the js files..
    loader.insert({}, 'js');
})();

calendar.js

This file loads a Calendar instance and sets up the animation for showing and hiding via the calendar box in the lower left corner.

logger.js

This file loads a Logger instance and places it in the right unit.

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

//Create this loader instance and ask for the Button module
    var loader = new YAHOO.util.YUILoader({
        base: 'http://yui.yahooapis.com/2.9.0/build/',
        require: ['logger'],
        onSuccess: function() {
            var r = YAHOO.example.app.layout.getUnitByPosition('right'),
            w = r.getSizes().body.w,
            h = r.getSizes().body.h;

var logger = new YAHOO.widget.LogReader(r.body, {
                logReaderEnabled: true,
                draggable: false,
                newestOnTop: true,
                height: h + 'px',
                width: w + 'px'
            });

r.on('collapse', function() {
                logger.pause();
            });
            r.on('expand', function() {
                logger.resume();
            });

YAHOO.example.app.layout.on('resize', function() {
                var r = YAHOO.example.app.layout.getUnitByPosition('right'),
                w = r.getSizes().body.w,
                h = r.getSizes().body.h;
                Dom.setStyle(YAHOO.util.Selector.query('div.yui-log-bd', r.body), 'height', h + 'px');
            });
        }
    });
    //Call insert, only choosing the JS files, so the skin doesn't over write my custom css
    loader.insert({}, 'js');
})();

Layout Manager Examples:

More Layout Manager Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.