You are previewing Yahoo! User Interface 2.x Cookbook.
O'Reilly logo
Yahoo! User Interface 2.x Cookbook

Book Description

Over 70 simple incredibly effective recipes for taking control of Yahoo! User Interface Library like a Pro

  • Easily develop feature-rich internet applications to interact with the user using various built-in components of YUI library

  • Simple and powerful recipes explaining how to use and implement YUI 2.x components

  • Gain a thorough understanding of the YUI tools

  • Plenty of example code to help you improve your coding and productivity with the YUI Library

  • Hands-on solutions that takes a practical approach to recipes

In Detail

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. Although you can create stylish Internet applications by modifying its default components, even advanced users find it challenging to create impressive feature-rich Internet applications using YUI.

This book will help you learn how to use YUI 2.x to build richer, more interactive web applications that impress clients and wow your friends. It has recipes explaining over twenty-five YUI components, showing how to use them, and how to configure them to meet your needs. Each covered component will have extractable code samples that showcase the common ways that the component is used.

The book starts by explaining the core features of YUI 2.x, the utilities that the rest of the library depends on and that will make your life easier. It then explains how to build UI components and make AJAX requests using the YUI framework. Each recipe will cover the most common ways to use a component, how to configure it, and then explain any other features that may be available. We wrap things up by looking at some of the recent beta components and explain how to use them, and how they may be useful on your web application.

For each of the recipes, there is an introductory example, then more advanced examples, followed by an explanation of how the component works and what YUI is doing. For more experienced developers, most recipes also include additional discussion of the solution, explaining to further customize and enhance the component.

This practical book, packed with easy-to-follow recipes, will help you create modern rich internet applications using the most powerful components of Yahoo! User Interface Library (YUI)

Table of Contents

  1. Yahoo! User Interface 2.x Cookbook
    1. Yahoo! User Interface 2.x Cookbook
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    7. 1. USING YUI 2.x
      1. Introduction
      2. Fetching the latest version of YUI 2.x
        1. How to do it...
        2. How it works...
        3. There's more...
          1. More on YDN dependencies
        4. See also
      3. Letting YDN manage YUI dependencies dynamically
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      4. Configuring the YUILoader component
        1. How to do it...
        2. How it works...
        3. There's more...
          1. More on callback function signatures
      5. Letting YUI manage My Script dependencies
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Importing JavaScript and CSS with the Get component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Browser issues with multiple CSS imports
      7. Configuring the Get component
        1. How to do it...
        2. How it works...
      8. Building namespaces
        1. How to do it...
        2. How it works...
        3. There's more...
      9. Including YUI CSS
        1. How to do it...
        2. How it works...
        3. There's more...
      10. Evaluating object types, the YUI way
        1. How to do it...
        2. How it works...
        3. There's more...
          1. More on function detection in IE
      11. Using hasOwnProperty to fix for...in loops
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      12. Extending JavaScript objects, the YUI way
        1. How to do it...
        2. How it works...
        3. There's more...
      13. Augmenting objects using YUI
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      14. Detecting client browser and platforms
        1. How to do it...
        2. How it works...
        3. There's more...
          1. Graded browser support
          2. More on mobile detection
          3. More on Caja
      15. Using the Cookie component
        1. How to do it...
        2. How it works...
        3. There's more...
      16. Using the JSON package
        1. How to do it...
        2. How it works...
        3. There's more...
          1. More on parsing options
    8. 2. Using DOM and Selector Components
      1. Introduction
      2. Searching the document
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      3. Searching for element children and siblings
        1. How to do it...
        2. How it works...
        3. There's more...
      4. Searching for element ancestors
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See Also
      5. Working with HTML classes
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Modifying element styles and HTML attributes
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Element positions and sizes
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See Also
      8. Using and comparing regions
        1. How to do it...
        2. How it works...
        3. There's more...
      9. Using advanced DOM functions
        1. How to do it...
        2. How it works...
        3. There's more...
      10. Using Selector to search the DOM
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See Also
      11. Using CSS 2 and 3 Selectors with YUI
        1. How to do it...
        2. How it works...
        3. There's more...
      12. Filtering and testing nodes using selector
        1. How to do it...
        2. How it works...
    9. 3. Using Event Component
      1. Introduction
      2. Using YUI to attach JavaScript event listeners
        1. How to do it...
        2. How it works...
        3. There's more...
          1. More on YAHOO.util.Event.addListener
        4. See also
      3. Event normalization functions
        1. How to do it...
        2. How it works...
        3. See also
      4. Removing event listeners
        1. How to do it...
        2. How it works...
        3. There's more...
      5. Listening for key events
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Using special YUI only events
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Using YUI helper event functions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Using custom events
        1. How to do it...
        2. How it works...
        3. There's more...
          1. Instantiation function arguments
          2. Subscribe function
          3. Subscriber callback functions
        4. See also
      9. The simple way to add custom events to classes
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
    10. 4. Using Connection Component
      1. Introduction
      2. Making your first AJAX request
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Exploring the callback object properties
        1. How to do it...
        2. How it works...
        3. See also
      4. Exploring the response object properties
        1. How to do it...
        2. How it works...
        3. There's more...
      5. Handling event callback functions
        1. How to do it...
        2. How it works...
        3. See also
      6. Subscribing to connection events globally
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Uploading files using Connection Manager
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      8. Making cross-domain AJAX requests
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Other useful Connection Manager static function
        1. How to do it...
        2. How it works...
      10. Putting it all together
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    11. 5. Using DataSource Component
      1. Introduction
      2. Simple examples of each DataSource type
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. ScriptNodeDataSource special requirements
          2. The DataSource callback object
          3. The DataSource callback function signature
        5. See also
      3. Using the JavaScript array response type
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Understanding the responseSchema
          2. Using data parsers
      4. Using the JSON response type
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Understanding the JSON response schema
        4. There's more...
      5. Using the XML ResponseType
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Using the XML response schema
        4. There's more...
        5. See also
      6. Using the text response type
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Understanding the text response schema
        4. There's more...
      7. Using the HTML table response type
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Understanding the HTML response schema
        4. There's more...
      8. Exploring advanced DataSource features
        1. Getting ready
        2. How to do it...
        3. How it works...
    12. 6. Using Logger and YUI Test Components
      1. Introduction
      2. Writing your first log statement
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Define a custom log level
      3. Exploring the Logger component
        1. How to do it...
        2. How it works...
      4. Configuring and using the LogReader class
        1. Getting ready
        2. How it's done...
        3. How it works...
        4. There's more...
          1. Customizing the output using entryFormat
          2. Customizing the output by overriding formatMsg
        5. See also
      5. Using the LogWriter component
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Writing your first test case
        1. Getting ready
        2. How it's done...
        3. How it works...
        4. There's more...
          1. Ignoring tests
          2. Intentional errors
          3. Testing the YAHOO.lang.trim function
        5. See also
      7. How to use assertions
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Simulating user actions in your tests
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Using TestSuite to manage TestCases
        1. How to do it...
        2. How it works...
        3. See also
      10. Using TestRunner to run tests
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    13. 7. Using Element and Button Components
      1. Introduction
      2. Creating your first element object
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Subscribing to events on element objects
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Using AttributeProvider to attributes for classes
        1. How to do it...
        2. How it works...
      5. Manipulating the DOM using element objects
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Creating your first button object
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There more...
          1. Known issues
        5. See also
      7. Using ButtonGroups to control related buttons
        1. How to do it...
        2. How it works...
        3. See also
      8. Using events with button and ButtonGroup objects
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    14. 8. Using Menu Component
      1. Introduction
      2. Creating your first Menu object
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Grouping related MenuItems
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Adding Submenus to your Menus
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      5. Traversing a Menu instance
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Adding help text to your MenuItems
        1. How to do it...
        2. How it works...
      7. Configuring Menu and MenuItem instances
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also...
      8. Subscribing to events on Menu objects
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      9. Using the ContextMenu Menu object
        1. How to do it...
        2. How it works...
        3. There's more...
      10. Using the MenuBar Menu object
        1. How to do it...
        2. How it works...
      11. Controlling a Menu using a Button object
        1. How to do it...
        2. How it works...
        3. See also
    15. 9. Using Animation Component
      1. Introduction
      2. Creating your first animation
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Exploring the animation attributes
        1. How to do it...
        2. How it works....
      4. Using and writing easing functions
        1. How to do it...
        2. How it works...
      5. Subscribing to animation events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Animating colors
        1. How to do it...
        2. How it works...
      7. Animating with motion
        1. How to do it...
        2. How it works...
      8. Animating an element's scroll offset
        1. How to do it...
        2. How it works...
    16. 10. Using Drag and Drop Component
      1. Introduction
      2. Creating your first Drag and Drop element
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Configuring and using Drag and Drop manager
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      4. Handling Drag and Drop events between DD and DDTarget objects
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Limiting Drag and Drop interactions by grouping instances
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Constraining drag elements within a region
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Using drag handles
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Limiting the drag element regions for dragging
        1. Getting ready
        2. How to do it...
        3. How it works...
    17. 11. Using Container Component
      1. Introduction
      2. Using Module, the foundation for all containers
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Exploring Overlay, a foundation for all positioned containers
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Creating a JavaScript driven tooltip
        1. Getting ready...
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Exploring the Panel infrastructure
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Showing on-demand forms with dialog
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Replacing browser dialogs with SimpleDialog
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Adding animation effects to your containers
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
    18. 12. Using DataTable Component
      1. Introduction
      2. Creating a simple DataTable
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Defining DataTable columns
        1. How to do it...
        2. How it works...
      4. Custom cell formatting
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Manipulating columns and rows
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Sorting your DataTable
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's More...
      7. Paginating your DataTable
        1. Getting started
        2. How to do it...
        3. How it works...
      8. Scrolling your DataTable
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Selecting rows, columns, and cells
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Unselecting all columns
          2. Skinning the selected cells
      10. Inline cell editing
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      11. Retrieving remote data for DataTable
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    19. 13. Using TreeView Component
      1. Introduction
      2. Creating a simple TreeView
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Defining node definitions
        1. How to do it...
        2. How it works...
        3. There's more...
      4. Navigating and searching the tree
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Adding and removing nodes
        1. Getting ready
        2. How it works...
        3. How it works...
      6. Animating TreeView expand and collapse
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Editing the content of a node
        1. Getting ready
        2. How it works...
        3. How it works...
        4. See also
      8. Handling TreeView events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      9. Working with dynamic data
        1. Getting ready
        2. How do to it...
        3. How it works...
      10. Creating custom node types
        1. Getting ready
        2. How to do it...
    20. 14. Other Useful Components
      1. Introduction
      2. Using the Autocomplete component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Formatting Autocomplete results
          2. Data matching algorithms with LocalDataSource
      3. Using the Calendar component
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Using the History component
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Using the Resize component
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Using the Slider component
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Using the TabView component
        1. Getting ready
        2. How to do it...
        3. How it works...
    21. 15. Some Interesting Beta Components
      1. Introduction
      2. Using the SWF component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Using the SWFStore component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Using the Storage component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Using the StyleSheet component
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Using the Charts component
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Using the Uploader component
        1. Getting ready
        2. How to do it...
        3. How it works...