Web Development with Yahoo User Interface (Yui 3) and Ajax

HOME > COURSE CATALOG > OPEN SOURCE > JAVASCRIPT > WEB DEVELOPMENT WITH YAHOO USER INTERFACE (YUI 3) AND AJAX

Web Development with Yahoo User Interface (YUI 3) and AJAX

DURATION 3 Days

COURSE WDAJ-165-DE

AVAILABLE FORMATS Classroom Training, Online Training

Course Description

Overview This course discusses web development techniques using the Yahoo User Interface (YUI 3). It covers the necessary frameworks and tools that allow web developers to simplify client side scripting tasks in dealing with complex coding challenges.

This course covers the essential YUI controls and event handling mechanisms as well as AJAX based web development and JSON techniques. The hands-on labs and coding examples provide a foundation for using the YUI library in web page development.

Objectives

Upon completion of the course, students will be able to:

10/2/2021 1 of 8 12:03:11 AM Describe the YUI library structure and foundation controls Understand the Document Object Model (DOM) Utilize YUI controls in web page development Use complex YUI components such as Containers and Menus Write event handlers to deal with YUI events Understand the AJAX structure and uses Utilize the YUI controls related to AJAX Understand the JSON structure and uses Utilize the JSON and Data Handling YUI controls

Audience

Architects Designers Developers Web 2.0 Developers

Prerequisites

Basic knowledge of web development Basic knowledge of HTML and JavaScript

Topics

JavaScript Review

What is JavaScript? JavaScript and Web Development How JavaScript works JavaScript data types JavaScript literals Variables Dialog boxes Operators Null and undefined Functions Function class Function literals Scoping Events

10/2/2021 2 of 8 12:03:11 AM Writing event handlers

DOM Overview

Objects in JavaScript DOM Overview The Document object Navigating the DOM Nodes Node Types DOM Manipulation Style object in the DOM Computed styles Creating new nodes Tree loading

Introduction to Yahoo User Interface (YUI)

What is YUI? Why use YUI? YUI Features YUI2 vs. YUI3 Downloading YUI API Documentation YUI Compressor YUI doc Browser support Browser characteristics Browser grades Current Browser Grading

Core YUI Components

YUI 3 Seed File YUI3 global object Namespaces Static Inclusion vs. Dynamic Loading YUI.Lang Type Checking YUI Component Infrastructure The 'use' Method

10/2/2021 3 of 8 12:03:11 AM YUI 3 Nodes YUI 3 Event Module Basic Events Listening to Many Objects Attaching Events to a Node YUI 3 Global Events Using YUI 3 Events YUI 3 DOM manipulation The NodeList Class DOM Element Appearance HTML Element Positioning Getting and Setting Styles Working With The Viewport YUI Module Names

YUI Utilities

Library Utilities Get Utility Animation Utility Cookies Utility Drag and Drop Utility Resize Utility IO Utility

YUI Controls

UI Widgets Overlay Control Overlay Content Using Overlay to Create Tooltips Form Widgets Panel Control Panel as a Dialog Media Widgets DataTable Utility TabView Utility AutoComplete Utility Date/Time Widgets

10/2/2021 4 of 8 12:03:11 AM Calendar Control Navigation Widgets Menu Control Submenus Horizontal Menu Bars Dynamic Menus Event Handling Context Menus General Utilities Event Control Resizing, Dragging, and Dropping Queue Scrollview Control

YUI and CSS

YUI and CSS overview CSS Reset Applying CSS Reset CSS Fonts CSS Grids Nested Grids CSS Base

Introduction to AJAX

Architecture of AJAX The AJAX Model Browsers and AJAX The AJAX Advantage AJAX Disadvantages Essential AJAX Technologies Real World AJAX Examples Potential Uses of AJAX Understanding the XmlHttpRequest object The open() Method The send() Method Understanding GET and POST XMLHttpRequest Object Properties

10/2/2021 5 of 8 12:03:11 AM A Simple Example Putting It All Together

YUI AJAX Controls

The IO Class Working with IO The Config Object Callback Functions Simple AJAX Example Using Form Data Form Data in Dialogs Browser History Management Understanding Browser History History Adapters Adding Data to History Other API Methods History Events Migrating from YUI 2

JSON and Related Controls

What is JSON? JSON vs. XML The JSON - XML Debate XML/JSON Example JSON Basics JSON Example AJAX - JSON Example JSONP YUI 3 JSON Utility Filtering/Modifying Parse Values DataSource utility Using Datasource.Local Other Datasource Types Configuring the Datasource Schema

Custom YUI widgets

The Widget Class

10/2/2021 6 of 8 12:03:11 AM Widget Attributes Widget Lifecycle The renderer Method The render Method UI Events Plugins and Extensions CSS Considerations Hiding Markup Creating a Custom Widget Using Base.create Custom Widget Example Define the Prototype Properties Prototype Properties: Leaf Prototype Properties: ListBox Define the Static Properties Static Properties: Leaf Static Properties: ListBox Define the New Widget Class Create Class: Leaf Create Class: ListBox Custom YUI 3 Modules Defining a Custom Module Using a Custom Module

Related Courses

ICEFaces for AJAX Development WDAJ-115-DE 4 Days Classroom Training, Online Training Price: 2,460.00 EUR

10/2/2021 7 of 8 12:03:11 AM AJAX for Java Developers WDAJ-110-DE 4 Days Classroom Training, Online Training Price: 2,460.00 EUR

10/2/2021 8 of 8 12:03:11 AM