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() { //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; } var dt = weekday[d.getDay()] + ' ' + m + '/' + dy + '/' + d.getFullYear() + ' ' + h + ':' + d.getMinutes() + ' ' + a; YAHOO.util.Dom.get('datetime').innerHTML = dt; YAHOO.util.Dom.get('calDateStr').innerHTML = m + '/' + dy + '/' + d.getFullYear(); 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', 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="' + 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; }, 1000); }; 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(); } }, 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); }); //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.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('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.

(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, 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'); })();

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.