YUI Library Home

YUI Library Examples: Layout Manager: Complex Application

Layout Manager: 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.

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

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

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.

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.

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.

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.

editor.js

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

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.

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.

Copyright © 2010 Yahoo! Inc. All rights reserved.

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