Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Layout Manager (beta): Complex Application

# Layout Manager (beta): Complex Application

An advanced application using several YUI Utilities and Controls. This example shows a layout similar to the new Yahoo! Mail look and feel. 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.

View example in new window.

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:

- YAHOO
- Dom
- Event
- Animation
- Selector
- Get
- YUI Loader

YUI Controls:

- AutoComplete
- Button
- Calendar
- DataTable
- Editor
- Layout Manager
- Logger
- Menu
- SimpleDialog
- Slider
- TabView
- Tooltip

Yahoo! Tools/Services:

- Yahoo! Pipes
- Yahoo! Weather Feed
- Yahoo! News RSS Feeds
- RSS Feed from YDN-Javascript Group
- RSS Feed from YDN-Patterns Group
- RSS Feed from YDN-Delicious Group
- RSS Feed from YDN-Mail Group
- RSS Feed from YWS-Maps Group
- RSS Feed from YWS-Flickr Group
- RSS Feed from YWS-Events Group

## 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`

(function() { YAHOO.example.app = { inboxLoaded: false, inboxLoading: false, feedURL: 'http:/'+'/rss.groups.yahoo.com/group/ydn-javascript/rss?count=50', getFeed: function(u) { if (!YAHOO.example.app.inboxLoading) { var reload = true; YAHOO.example.app.inboxLoading = true; if (u) { if (YAHOO.example.app.feedURL === (u + '?count=50')) { reload = false; } YAHOO.example.app.feedURL = u + '?count=50'; } YAHOO.util.Dom.addClass(YAHOO.example.app.tabView._tabParent, 'loading'); if (!YAHOO.example.app.inboxLoaded) { var transactionObj = YAHOO.util.Get.script('assets/js/inbox.js', { autopurge: true }); } else { if (reload) { YAHOO.example.app.reloadData(u); } else { YAHOO.util.Dom.removeClass(YAHOO.example.app.tabView._tabParent, 'loading'); YAHOO.example.app.inboxLoading = false; } } } } }; //Call loader the first time var loader = new YAHOO.util.YUILoader({ base: '../../build/', //Get these modules require: ['reset-fonts-grids', 'utilities', 'logger', 'button', 'container', 'tabview', 'selector', 'resize', 'layout'], rollup: true, onSuccess: function() { //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.util.Dom.setStyle(document.body, 'visibility', 'visible'); setTimeout(function() { 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; } var dt = weekday[d.getDay()] + ' ' + m + '/' + dy + '/' + d.getFullYear() + ' ' + h + ':' + d.getMinutes() + ' ' + a; YAHOO.util.Dom.get('datetime').innerHTML = dt; YAHOO.log('Setting the time/date string to: ' + dt, 'info', 'tabview.js'); }; //Method to Resize the tabview YAHOO.example.app.resizeTabView = function() { var ul = YAHOO.example.app.tabView._tabParent.offsetHeight; Dom.setStyle(YAHOO.example.app.tabView._contentParent, 'height', ((YAHOO.example.app.layout.getSizes().center.h - ul) - 2) + 'px'); }; //Listen for the layout resize and call the method YAHOO.example.app.layout.on('resize', YAHOO.example.app.resizeTabView); //Create the tabView YAHOO.log('Creating the main TabView instance', 'info', 'tabview.js'); YAHOO.example.app.tabView = new YAHOO.widget.TabView(); //Create the Home tab YAHOO.example.app.tabView.addTab( new YAHOO.widget.Tab({ //Inject a span for the icon label: '<span></span>Home', id: 'homeView', content: '<div id="welcomeWrapper"><h2>Welcome to the home screen</h2><span id="datetime"></span><div id="weather"><span><em></em><strong>Sunnyvale, CA</strong></span></div></div><div id="news" class="yui-navset"><ul class="yui-nav"><li class="selected" id="newsTop"><a href="#tab1"><em>Top Stories</em></a></li><li id="newsWorld"><a href="#tab2"><em>World</em></a></li><li id="newsEnt"><a href="#tab3"><em>Entertainment</em></a></li><li id="newsSports"><a href="#tab4"><em>Sports</em></a></li></ul><div class="yui-content"><div></div><div></div><div></div><div></div></div></div>', active: true })); //Create the Inbox tab YAHOO.example.app.tabView.addTab( new YAHOO.widget.Tab({ //Inject a span for the icon label: '<span></span>Inbox', id: 'inboxView', content: '' })); 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.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Sel = YAHOO.util.Selector, tt = null, pdata = {}; YAHOO.log('news.js file loaded..', 'info', 'news.js'); //Callback from the Pipes data call YAHOO.example.app.getWeather = function(r) { //Sometimes pipes fails.. if (r && r.value && r.value.items && r.value.items.length) { YAHOO.log('Inside weather callback from Pipes data', 'info', 'news.js'); var data = r.value.items[1].content; var img = data[0].content.substring(10); img = img.substring(0, (img.length - 3)); Sel.query('#weather em', '', true).innerHTML = data[2].content; //Tempurature Dom.setStyle('weather', 'background-image', 'url( ' + img + ' )'); var url = data[8].content; url = url.substring(url.indexOf('http')); url = url.substring(0, url.indexOf('">')); YAHOO.log('Creating the Weather tooltip', 'info', 'news.js'); var tt = new YAHOO.widget.Tooltip('weatherTooltip', { context: 'weather', text: r.value.items[0].content + '<br><strong>Forecast:</strong><br>' + data[5].content + '<br>' + data[6].content }); Event.on('weather', 'click', function() { window.open(url); }); } else { //Attempt to fetch it again window.setTimeout(function() { YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=cnZFI_rR3BGvnn8h8ivLAg&_render=json&_callback=YAHOO.example.app.getWeather'); }, 5000); } }; YAHOO.log('Get the weather data from Pipes..', 'info', 'news.js'); YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=cnZFI_rR3BGvnn8h8ivLAg&_render=json&_callback=YAHOO.example.app.getWeather'); //Generic Filter Method var _filter = function(r, type) { pdata[type] = []; var data = r.value.items, str = ''; pdata[type][0] = data[0]; for (var i = 1; i < data.length; i++) { pdata[type][i] = data[i]; if (i <= 8) { str += '<li><a href="' + data[i].link + '" target="_blank" class="' + type + '_' + i + '">' + data[i].title + '</a></li>'; } } str = '<ul>' + str + '</ul>'; var d = data[0].description.replace('</a>', '<h3><a href="' + data[0].link + '">' + data[0].title + '</a></h3>'); str = d + str; str += '<p><a href="#' + type + '" class="moreNews">Click here for more news...</a></p>'; return str; }; YAHOO.example.app.getWorldNews = function(r) { YAHOO.log('Fetch the World News', 'info', 'news.js'); var str = _filter(r, 'world'); YAHOO.example.app.homeTabView.get('tabs')[1].set('content', str); }; YAHOO.example.app.getEntNews = function(r) { YAHOO.log('Fetch the Entertainment News', 'info', 'news.js'); var str = _filter(r, 'ent'); YAHOO.example.app.homeTabView.get('tabs')[2].set('content', str); }; YAHOO.example.app.getSportsNews = function(r) { YAHOO.log('Fetch the Sports News', 'info', 'news.js'); var str = _filter(r, 'sports'); YAHOO.example.app.homeTabView.get('tabs')[3].set('content', str); }; YAHOO.example.app.getTopNews = function(r) { YAHOO.log('Fetch the Top News', 'info', 'news.js'); var str = _filter(r, 'top'); YAHOO.example.app.homeTabView.get('tabs')[0].set('content', str); //Now that the Top news is loaded, load the other news in a timeout.. window.setTimeout(function() { YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=world&_render=json&_callback=YAHOO.example.app.getWorldNews'); YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=entertainment&_render=json&_callback=YAHOO.example.app.getEntNews'); YAHOO.util.Get.script('http:/'+'/pipes.yahoo.com/pipes/pipe.run?_id=VE3fZVjT3BG0lA1gjtzu1g&newsfeed=sports&_render=json&_callback=YAHOO.example.app.getSportsNews'); }, 0); YAHOO.log('Create a dynamic tooltip on the news articles', 'info', 'news.js'); tt = new YAHOO.widget.Tooltip('newsTip', { context: Sel.query('#news .yui-content'), text: 'Test', width: '300px', showDelay: 500, hideDelay: 500 }); //Listen for the contextMouseOverEvent tt.contextMouseOverEvent.subscribe(function(cev, ev) { //Get the target of the mouseover event var tar = Event.getTarget(ev[1]); //It needs to be an A tag if (tar && tar.tagName && (tar.tagName.toLowerCase() == 'a')) { //Does it have a className if (tar.className) { //Split the className on the _ (data placed above) var tmp = tar.className.split('_'); //Get the data from the pdata object if (tmp.length != 2) { return false; } var d = pdata[tmp[0]][tmp[1]]; if (d) { //It exists, parse it and set the Tooltip's text property with the descrition of the news article var data = d.description.replace('</a>', '</a><h3>' + d.title + '</h3>'); tt.cfg.setProperty('text', data); } else { //Failed don't show the TT return false; } } else { //Failed don't show the TT return false; } } else { //Failed don't show the TT return false; } }); Event.on('news', 'click', function(ev) { var tar = Event.getTarget(ev); //Did we click on an a inside #news with the className of moreNews if (Sel.test(tar, '#news a.moreNews')) { YAHOO.log('You clicked on a More News link', 'info', 'news.js'); Event.stopEvent(ev); //Get the news type var type = tar.getAttribute('href', 2).split('#')[1]; //get all of the tabs var t = YAHOO.example.app.tabView.get('tabs'); var tab = null; for (var i = 0; i < t.length; i++) { if (t[i].get('id') == 'newsView') { YAHOO.log('We found an existing newsView tab', 'info', 'news.js'); //setup a reference and change it to the active tab tab = t[i]; YAHOO.example.app.tabView.set('activeTab', tab); } } //get the data from the pdata array (above) var data = pdata[type], news = ''; //Loop through it and create the news string for (var n = 0; n < data.length; n++) { news += '<div class="feedData">' + data[n].description.replace('</a>', '<h3><a href="' + data[n].link + '">' + data[n].title + '</a></h3>') + '</div>'; } if (!tab) { YAHOO.log('News Tab doesn\'t exist, create it', 'info', 'news.js'); var nt = document.createElement('div'); nt.id = 'newsEl'; YAHOO.example.app.tabView._contentParent.appendChild(nt); tab = new YAHOO.widget.Tab({ label: '<span class="close"></span>News Reader', id: 'newsView', content: '', contentEl: nt, active: true }); Dom.setStyle(nt, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height')); YAHOO.example.app.layout.on('resize', function() { Dom.setStyle(nt, 'height', Dom.getStyle(YAHOO.example.app.tabView._contentParent, 'height')); }); YAHOO.log('Use YUILoader to fetch slider', 'info', 'news.js'); var loader = new YAHOO.util.YUILoader({ base: '../../build/', require: ['slider'], onSuccess: function() { //Setup our default article size and font size var s = 500, f = 93; //Create the slider wrapper var d = document.createElement('div'); d.id = 'newsSlider'; //Inject the Slider HTML d.innerHTML = '<h3>Adjust font and article size</h3><div id="slider-bg" tabindex="-1" title="Adjust font and article size"><div id="slider-thumb"><img src="assets/css/thumb-n.gif"></div></div>'; //Give the Slider a little UI update when mousing over it.. Event.on(d, 'mouseover', function() { Dom.addClass(this, 'over'); }); Event.on(d, 'mouseout', function() { Dom.removeClass(this, 'over'); }); //Append the wrapper to the TabView's content parent YAHOO.example.app.tabView._contentParent.appendChild(d); YAHOO.log('Create the slider', 'info', 'news.js'); var slider = YAHOO.widget.Slider.getHorizSlider('slider-bg', 'slider-thumb', 0, 200); slider.subscribe('change', function(o) { //On change we will change the width and the font-size of the newsFeed div Dom.setStyle(Sel.query('.newsFeeds'), 'font-size', (f + (o / 3)) + '%'); Dom.setStyle(Sel.query('.newsFeeds'), 'width', (s + (o * 2)) + 'px'); }); //Hook into the tabView activeTabChange event to hide the slider when it is not being used. YAHOO.example.app.tabView.on('activeTabChange', function(ev) { //Tabs have changed if (ev.newValue.get('id') == 'newsView') { YAHOO.log('Show slider', 'info', 'news.js'); Dom.setStyle(d, 'display', 'block'); } else { YAHOO.log('Hide Slider', 'info', 'news.js'); Dom.setStyle(d, 'display', 'none'); } }); } }); //Inject the scripts loader.insert({}, 'js'); 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; }; var initDataTable = function(h, w) { YAHOO.log('Creating the DataTable', 'info', 'inbox.js'); //Create the Column Definitions var myColumnDefs = [ {key:'', formatter:YAHOO.widget.DataTable.formatCheckbox, width: 10 }, // use the built-in checkbox formatter {key:"From", sortable:true, width: 125 }, {key:"Subject", sortable:true, width: (w - magicNum) }, {key:"Date",formatter:YAHOO.widget.DataTable.formatDate, sortable:true, width: 50 }, {key:"Size", sortable: false, width: 35 } ]; //Create the datasource var myDataSource = new YAHOO.util.DataSource(emails); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: 'messages', fields: ["Date","To","From","Subject",'Size', 'Link', 'Body'] }; //Give the DT a custom Height var dtH = (h - 27 - YAHOO.example.app.inboxToolbarHeight); //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' }); // 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="' + data.Link + '" 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; }, 0); }; YAHOO.log('Using loader to fetch datatable and editor (for the toolbar)', 'info', 'inbox.js'); var loader = new YAHOO.util.YUILoader({ base: '../../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(); dataTable._syncScrollPadding(); } }, 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: '../../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.

(function() { YAHOO.log('editor.js file loaded', 'info', 'editor.js'); YAHOO.log('Inject some HTML for the Compose Window', 'info', 'editor.js'); YAHOO.util.Dom.get('composeViewEl').innerHTML = '<div id="composeBarWrap"><div id="composeBar"></div><div id="composeAddr"><span><label>To:</label><input type="text" id="composeTo"></span><span><label>Subject:</label><input type="text"></span></div></div><text'+'area id="compose"></text'+'area><div id="autoTo"></div>'; //Use loader to load the Editor var loader = new YAHOO.util.YUILoader({ base: '../../build/', require: ['autocomplete', 'editor'], ignore: ['containercore'], onSuccess: function() { YAHOO.log('Create a Toolbar above the To/From Fields', 'info', 'editor.js'); YAHOO.example.app.composeToolbar = new YAHOO.widget.Toolbar('composeBar', { buttons: [ { id: 'tb_delete', type: 'push', label: 'Send', value: 'send'}, { id: 'tb_reply', type: 'push', label: 'Attach', value: 'attach' }, { id: 'tb_forward', type: 'push', label: 'Save Draft', value: 'savedraft' }, { id: 'tb_forward', type: 'push', label: 'Spelling', value: 'spelling' }, { id: 'tb_forward', type: 'push', label: 'Cancel', value: 'cancel' } ] }); //Show an alert message with the button they clicked YAHOO.example.app.composeToolbar.on('buttonClick', function(ev) { YAHOO.example.app.alert('You clicked: ' + ev.button.label); }); //Editor startResize method - Disables the editor so we can drga over it. var editorStartResize = function() { YAHOO.example.app.editor.set('disabled', true); }; //Custom editor resize method var editorResize = function() { var h = YAHOO.util.Dom.get('composeViewEl').parentNode.clientHeight - (YAHOO.util.Dom.get('composeBarWrap').clientHeight); var th = YAHOO.example.app.editor.toolbar.get('element').clientHeight; var newH = (h - th); YAHOO.example.app.editor.set('height', newH + 'px'); YAHOO.example.app.editor.set('width', YAHOO.example.app.layout.getSizes().center.w + 'px'); YAHOO.example.app.editor.set('disabled', false); }; YAHOO.log('Create the Editor', 'info', 'editor.js'); var editor = new YAHOO.widget.Editor('compose', { width: (YAHOO.example.app.layout.getUnitByPosition('center').getSizes().body.w - 2) + 'px' }); editor.on('afterRender', function() { YAHOO.log('The editor is loaded, resize the editor to fit the layout', 'info', 'editor.js'); var h = YAHOO.util.Dom.get('composeViewEl').parentNode.clientHeight - (YAHOO.util.Dom.get('composeBarWrap').clientHeight); var th = this.toolbar.get('element').clientHeight; var newH = (h - th); this.set('height', newH + 'px'); }, editor, true); //Turn off the titlebar editor._defaultToolbar.titlebar = false; YAHOO.log('Render the editor', 'info', 'editor.js'); editor.render(); YAHOO.example.app.editor = editor; //On resize and start resize handlers YAHOO.example.app.layout.on('startResize', editorStartResize); 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('startResize', editorStartResize); 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.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; YAHOO.log('calendar.js file loaded..', 'info', 'calendar.js'); //Create this loader instance and ask for the Calendar module var loader = new YAHOO.util.YUILoader({ base: '../../build/', require: ['calendar'], onSuccess: function() { //Set a flag to show if the calendar is open or not YAHOO.example.app.calOpen = false; YAHOO.log('Create the new calendar', 'info', 'calendar.js'); YAHOO.example.app.calendar = new YAHOO.widget.Calendar('cal'); YAHOO.example.app.calendar.selectEvent.subscribe(function(ev, args) { var d = args[0][0]; YAHOO.example.app.alert('You selected this date: ' + d[1] + '/' + d[2] + '/' + d[0]); }); YAHOO.example.app.calendar.render(); //Method to toggle the animation of the calendar on and off YAHOO.example.app.toggleCal = function() { YAHOO.log('Toggle the calendar popup window', 'info', 'calendar.js'); //set the initial height to the offsetHeight of the calendar element var attr = { height: { to: Dom.get('cal').offsetHeight } }; //If it's open, set the height to 0 if (YAHOO.example.app.calOpen) { attr.height.to = 0; } //setup the animation instance var anim = new YAHOO.util.Anim('calContainer', attr); anim.animate(); //Toggle the flag YAHOO.example.app.calOpen = !YAHOO.example.app.calOpen; }; //Handle the click event on the cal box at the bottom Event.on('calBox', 'click', function(ev) { Event.stopEvent(ev); YAHOO.example.app.toggleCal(); }); YAHOO.log('Hijack the calendar link and make it toggle the calendar', 'info', 'calendar.js'); var c = YAHOO.util.Selector.query('#folder_list li.calendar a')[0]; if (c) { Event.on(c, 'click', function(ev) { Event.stopEvent(ev); YAHOO.example.app.toggleCal(); }); } } }); //Call insert, only choosing the JS files, so the skin doesn't over write my custom css loader.insert({}, 'js'); })();

## 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: '../../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, footerEnabled: false, newestOnTop: true, height: h + 'px', width: w + 'px' }); 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 (beta) Examples:

- Full Page Layout
- Layout inside a resizable Panel
- Using a Layout with Grids CSS
- Nesting a layout
- Simple Application
- Complex Application
- Skinning a Layout

### More Layout Manager (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings