Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

Web Development with Yahoo User Interface & AJAX

( Duration: 3 Days )

The Web Development with Yahoo User Interface (YUI 3) and AJAX training 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.

By attending Web Development with Yahoo User Interface (YUI 3) and AJAX workshop, delegates will learn to:

  • 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

  • Basic knowledge of web development
  • Basic knowledge of HTML and JavaScript

This Web Development with Yahoo User Interface (YUI 3) and AJAX class is intended for:

  • Architects
  • Designers
  • Developers
  • Web 2.0 Developers

COURSE AGENDA

1

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
  • Writing event handlers
2

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
3

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
4

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
  • 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
5

YUI Utilities

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

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
  • 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
7

YUI and CSS

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

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
  • Putting It All Together
9

YUI AJAX Controls

  • The IO Class
  • Working with IO
  • The Config Object
  • Callback Functions
  • 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
10

JSON and Related Controls

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

Custom YUI widgets

  • The Widget Class
  • 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

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X