Yahoo User Interface (YUI) Library Master

YUI or Yahoo User Interface Library is today's most popular JavaScript library for creating modular, scalable, and fast applications for desktop browsers, mobile devices and servers. YUI's highly lightweight core and extra modular architecture helps it in becoming more and more robust library of JavaScript.

YUI Master Course offered by ADMEC Multimedia Institute is a unique course where web designers and UI developers get in-depth knowledge of Yahoo User Interface (YUI) library. If you have seen some websites like Google Maps, Yahoo Mail, etc then you might have noticed that those sites have responding and dynamic page refreshing capabilities. As we said already people love this for its widespread usability whether it is a mobile phone, a desktop and even on a server it's a hit everywhere.

YUI can do basic DOM manipulation to the extremely complex application with an ease. It is a world class JavaScript library for all whether it is a novices or an application developer. YUI provides a convenient, concise, and intuitive API which is very lightweight and very fast, along with a planned infrastructure and a complete suite of tools to help you to code like a professional. YUI is the best option when you want to put simple effects along with engineering maintainable and well planned web applications.

Prerequisites to Join this Course

Candidates should have strong working knowledge of JavaScript. Knowledge of any other JavaScript libraries like jQuery, MooTools, Dojo etc would be an added advantage. They should be familiar with latest documents markup standards like HTML5, CSS3, and XML.

Learning Outcomes

Introduction to YUI

• Introduction to YUI

• Why YUI?

Loading Modules and YUI Seed File

• Loading Rollups and Modules

• How to Load a SimpleYUI

• Identifying and Loading Individual Modules

• Loading a Different Default Skin

• Loading Gallery Modules and YUI 2 Widget

• Loading Locally Hosted Builds

• Developing Your Own Reusable Modules with Dependencies

• Defining Groups of Custom Modules

• Reusing a YUI Configuration

• Defining Your Own Rollups

• Enabling Predictive Module Loading on User Interaction

• Implementing Static Loading

DOM Manipulation using YUI

• Element References and Uses

• CSS Classes Manipulation

• Getting and Setting DOM Properties

• Changing an Element's Inner Content

• Working with Element Collections

• Creating New Elements

• Adding Custom Methods and Properties to Nodes

Using UI Effects, Animations, and Interactions

• Hiding, Fading, and Moving an Element

• Creating a Series of Transitions

• Defining Your Own Custom Transitions

• Creating an Infinite Scroll Effect in YUI

• How to Drag an Element in YUI

• Creating a Resizable Node

• Implementing a Re-orderable Drag-and-Drop Table

Events in YUI

• Responding User Actions

• Responding to Element and Page Lifecycle Events

• Controlling Event Propagation and Bubbling

• Preventing Default Behavior

• Delegating Events

• Firing and Capturing Custom Events

• Driving Applications with Custom Events

• Using Object Methods as Event Handlers

• Detaching Event Subscriptions

• Controlling the Order of Event Handler Execution

• Creating Synthetic DOM Events

• Responding to a Method Call with Another Method

AJAX Functions in YUI

• Fetching and Displaying XHR Data

• Handling Errors During Data Transport

• Loading Content Directly into a Node

• Submitting Form Data with XHR

• Uploading a File with XHR

• Getting JSON Data Using Script Nodes (JSONP)

CSS and YUI

• Normalizing Browser Style Inconsistencies

• Rebuilding Uniform Base Styles

• Applying Consistent Fonts

• Laying Out Content with Grids

• Using Grids for Responsive Design

• Creating Consistent Buttons

Infrastructure- Extending YUI

• Managing State with Attributes

• Creating Base Components with Y.extend()

• Creating Base Components with Y.Base.create()

• Creating a Basic Widget

• Creating a Widget That Uses Progressive Enhancement

• Rendering Remote Data with a Widget

• Creating a Simple Plugin

• Creating a Plugin That Alters Host Behavior

• Bundling CSS with a Widget as a CSS Module

• Bundling CSS with a Widget as a Skin

• Representing Data with a Model

• Persisting Model Data with a Sync Layer

• Managing Models with a Syncing ModelList

• Rendering HTML with a View

• Rendering a Model with a View

• Rendering a ModelList with a View

• Saving State Changes in the URL

• Defining and Executing Routes

Using YUI Widgets

• Instantiating, Rendering, and Configuring Widgets

• Creating an Overlay

• Aligning and Centering an Overlay

• Making an Overlay Draggable

• Creating a Simple, Styled Information Panel

• Creating a Modal Dialog or Form

• Creating a Tooltip from an Overlay

• Creating a Lightbox from an Overlay

• Creating a Slider

• Creating a Tabview

• Creating a Basic DataTable

• Formatting a DataTable's Appearance

• Displaying a Remote JSON DataSource in a DataTable

• Plotting Data in a Chart

• Choosing Dates with a Calendar

• Defining Calendar Rules

• Creating a Basic AutoComplete

• Highlighting and Filtering AutoComplete Results

• Using AutoComplete with Remote Data

• Customizing the AutoComplete Result List

Other Utilities in YUI

• Determining a Variable's Type

• Iterating Over Arrays and Objects

• Filtering an Array

• Merging Objects

• Composing and Inheriting from Other Objects

• Automatically Caching Function Call Results

• Templating with Simple String Substitution

• Formatting Numbers

• Formatting Dates

• Parsing Arbitrary XML

• Converting Color Values

• Managing History and the Back Button

• Escaping User Input

• Assigning Special Behavior to a Checkbox Group

• Implementing Easy Keyboard Actions and Navigation

• Reliably Detecting Input Field Changes

• Managing and Validating Forms

Professional Tools

• Enabling and Rendering Debug Log

• Writing Unit Tests

• Organizing Unit Tests into Suites

• Testing Event Handlers by Simulating Events

• Mocking Objects

• Testing Asynchronously Using wait()

• Collecting and Posting Test Results

• Pre-commit Testing in Multiple Browsers

• Testing on Mobile Devices

• Testing Server-Side JavaScript

• Minifying Your Code

• Documenting Your Code

YUI Exercises and Projects

You will be given opportunity to work on Real World Applications as:

• Form Validation

• UI Development

• Navigation Development

• JavaScript Games

• AJAX Based Applications - Image Galleries, Websites etc

• Slideshows

• Image Galleries

• Fancy Pop-up Windows

• Theme Changer with Cookies

• Dynamic Forms using DOM Function in YUI

Minimum System Requirement

• Internet Explorer 7 or higher

• Firefox 3 or higher with the Firebug, DOM Inspector, and Developer plug-ins installed