You are previewing YUI 2.8 Learning the Library.
O'Reilly logo
YUI 2.8 Learning the Library

Book Description

Develop your next-generation web applications with the YUI JavaScript development library

  • Improve your coding and productivity with the YUI Library

  • Gain a thorough understanding of the YUI tools

  • Learn from detailed examples for common tasks

  • In Detail

    The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.

    YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.

    You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code.

    In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.

    The authors take the reader from beginner to advanced-level YUI usage and understanding.

    The beginner to advanced-level guide for understanding the YUI library

    Table of Contents

    1. YUI 2.8 Learning the Library
      1. YUI 2.8 Learning the Library
      2. Credits
      3. About the Authors
      4. About the Reviewers
      5. 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
      6. 1. Getting Started with YUI
        1. What is the YUI?
          1. Who is it for and who will it benefit the most?
          2. Why the Yahoo! User Interface Library?
          3. Graded browser support
        2. What comes with the YUI?
          1. The library topography
          2. The core files
          3. The Utilities
          4. The Controls
          5. The CSS Tools
            1. The developer tools
          6. The library's structure
          7. What else does Yahoo! provide?
          8. Are there any licensing restrictions?
        3. Installing the YUI
          1. Creating an offline library repository
        4. Using the library files in your own web pages
        5. Code placement
        6. Perfect date selection with the Calendar Control
          1. The basic Calendar class
          2. The CalendarGroup class
        7. Implementing a Calendar
          1. The initial HTML page
          2. Highly eventful
          3. The DateMath class
        8. Summary
      7. 2. Creating Consistency with the CSS Tools
        1. Tools of the trade
        2. Element normalization with reset.css
          1. Element rules
        3. First base
        4. Tidying up text with fonts.css
        5. Layout pages with ease using grids.css
          1. Setting up your page structure
          2. The basic building blocks of your pages
          3. Grid nesting
        6. A word on Sam
        7. Summary
      8. 3. DOM Manipulation and Event Handling
        1. Working with the DOM
          1. DOM concepts
        2. Common DOM scripting techniques
          1. Common DOM methods
          2. Further reading
          3. DOM—the old way
          4. DOM—the YUI way
        3. DOM manipulation in YUI
          1. Many DOMs make light work
          2. The Dom class
          3. Using the Dom class
          4. The Region class
          5. Additional useful Dom methods
          6. Other classes
        4. The Selector Utility
        5. Listening for Events the easy (YUI) way
        6. Event models
          1. Old-styled events
        7. YUI event capturing
          1. Evolving event handlers
          2. Reacting when appropriate
        8. A look at the Event Utility
          1. Listeners
          2. Event delegation
          3. Other plugins
        9. Custom events
          1. The evolution of Custom Events
          2. EventProvider
          3. Custom event basics
        10. The Element Utility
          1. Subclassing from Element
          2. Adding custom methods and properties
          3. Using AttributeProvider
        11. Summary
      9. 4. Calling Back Home
        1. Introduction to Connection Manager
        2. The XMLHttpRequest object interface
        3. A closer look at the response object
        4. The Callback object
        5. Basic communication
          1. Sending forms
          2. Posting
        6. Yahoo Query Language (YQL)
          1. Overcoming the XDS restriction
          2. Working with XML
          3. Processing a JSON reply
          4. Using JSONP with the Get utility
          5. Loading library components via Get
        7. Summary
      10. 5. Animation, the Browser History Manager, and Cookies
        1. Introducing the Animation Utility
          1. The class structure of the Animation Utility
          2. The Animation constructor
          3. Animation's attributes
          4. Custom Animation events
          5. The subclasses
          6. Additional classes
        2. Using Animation to create an Accordion Widget
            1. Listening to the end of the Animation
            2. The CSS for Accordion
            3. Using Element
          1. Dealing with motion
        3. Restoring the browser's expected functionality
          1. The BHM class
          2. Using BHM
          3. The BHM script
        4. Cookies
        5. Summary
      11. 6. Content Containers and Tabs
        1. Meet the YUI Container family
          1. Module
          2. Overlay
          3. Panel
          4. Tooltip
          5. Dialog
          6. SimpleDialog
          7. Container Effects
          8. OverlayManager
        2. Creating a Panel
        3. Before we go on
        4. Working with Dialogs
        5. An "Are you sure?" SimpleDialog
        6. Easy Tooltips
        7. The YUI TabView Control
          1. TabView classes
          2. Class members
        8. Adding tabs
          1. The underlying markup
          2. The JavaScript needed by TabView
        9. Summary
      12. 7. Menus
        1. Common navigation structures
        2. Instant menus—just add water (or a Menu Control)
        3. The Menu classes
          1. Menu subclasses
          2. The MenuItem class
          3. MenuItem subclasses
        4. Creating a basic navigation menu
          1. The initial HTML page
          2. The underlying menu markup
            1. Formatting options
          3. Creating the Menu object
        5. Using the ContextMenu
          1. ContextMenu scripting
          2. Wiring up the backend
        6. The application-style MenuBar
        7. Summary
      13. 8. Buttons and Trees
        1. Why use the YUI Button family?
        2. Meet the Button Control
          1. YAHOO.widget.Button
          2. YAHOO.widget.ButtonGroup
        3. Using the Button Control
          1. Creating the YUI Button objects
        4. Using the Split Button type
          1. Getting started
          2. Scripting the Split Button
        5. Tree-like structures with the TreeView Control
        6. Planting the seed
          1. An assortment of nodes
            1. Reading from markup
          2. TreeView members
          3. Tree nodes
          4. Custom information
          5. Dynamic loading
          6. Highlighting
        7. Summary
      14. 9. DataSource and AutoComplete
        1. Tabular data sources
          1. DataSource classes
            1. HTML table
            2. Simple array
            3. Complex array
            4. FunctionDataSource
            5. Remote DataSource with text
            6. Remote DataSource with JSON
            7. Remote DataSource with XML
            8. News reader examples
            9. Meta information
          2. Massaging unruly data
        2. Look ahead with the AutoComplete Control
          1. AutoComplete Constructor
        3. Implementing AutoComplete
        4. Summary
      15. 10. DataTable
        1. DataTable dependencies
        2. DataTable classes
        3. Creating a DataTable
          1. Cell formatting
          2. Responding to DataTable events
          3. More column properties and methods
          4. Column sorting
          5. Cell editing
            1. Server-side updating
          6. DataTable methods
          7. Paging
          8. Server-side sorting and paging
          9. Selection and highlighting
          10. More DataTable configuration attributes
          11. ScrollingDataTable
        4. Summary
      16. 11. Rich Text Editor
        1. The two editors
        2. A simple e-mail editor
          1. Filtering the data
          2. More validation
          3. Improving the looks
          4. Changing the toolbar
          5. Adding a new toolbar button
          6. Adding CSS styles
          7. Changing the available fonts
        3. Summary
      17. 12. Drag-and-Drop with the YUI
        1. Dynamic drag-and-drop without the hassle
        2. DragDrop classes
          1. Design considerations
          2. Allowing your visitors to drag-and-drop
          3. The constructor
          4. Target practice
          5. Get a handle on things
          6. The drag-and-drop manager
          7. Interaction modes
          8. Constraints
          9. Responding to DragDrop events
        3. Implementing drag-and-drop
          1. Scripting DragDrop
          2. Creating a draggable product item
        4. Visual selection with the slider control
          1. The constructor and factory methods
          2. Class of two
        5. A very simple slider
          1. Getting started
          2. Adding the CSS
          3. Adding the JavaScript
        6. The Resize utility
        7. The Layout Manager
        8. Summary
      18. 13. Everyday Tools
        1. Lint-free code
        2. The Logger
          1. The purpose of the—debug Library files
          2. How the Logger can help you
        3. Debugging
        4. Watching bits go by
        5. Seeking performance
          1. YSlow
          2. YUI Compressor
          3. Images and Sprites
          4. YUI Profiler
        6. YUI Testing
          1. Testing in multiple platforms
          2. API Docs
        7. Summary