YUI 3 Cookbook: Writing Maintainable Applications

by Evan Goer

Overview

Solve a wide range of problems in your web application quickly and efficiently with the Yahoo! User Interface Library (YUI). With this definitive, getting-started guide to version 3 of the popular open source JavaScript library, you’ll learn how to address many of the most common and challenging problems that web development presents.

YUI 3 Cookbook introduces specific implementation patterns in the library, demonstrating granular solutions for everything from simple page effects to sophisticated web apps. Experienced users will learn how to create modules that load on demand; generate beautiful documentation; and write powerful and flexible Widgets, Models, and Views.

• Build YUI applications anywhere, from desktop browsers to touch-enabled mobile phones and backend Node.js environments
• Learn how YUI scales with your code base, keeping it modular and organized
• Apply animations, drag-and-drop, and other fully cross-browser UI effects with just a few lines of code
• Understand YUI-powered DOM scripting, event management, and data transport
• Debug, profile, and unit test your JavaScript application
• Get a technical introduction to YUI, including module architecture, sandboxing, and component loading
• Build custom modules with YUI and publish them to the YUI Gallery

"I was surprised to find out how much I didn't know until reading this book. There really isn't a better resource for learning or updating your YUI skills."

- Nicholas C. Zakas, Author and YUI Contributor

Product Details

ISBN-13:	9781449304195
Publisher:	O'Reilly Media, Incorporated
Publication date:	06/14/2012
Pages:	430
Product dimensions:	6.90(w) x 9.10(h) x 0.80(d)

About the Author

Evan Goer is a Senior Technical Writer at Yahoo! in Sunnyvale, CA, where he works for an engineering team that develops Yahoo's internal deployment infrastructure. He also works closely with the YUI core engineering team. Before that, Evan worked for startups and corporate behemoths alike, documenting everything from how to speed up applications on big iron Sun hardware to how to treat cancer patients with electron beam radiation therapy.

Evan is a Sunnyvale native and holds a Bachelor's of Science in Physics from Harvey Mudd College. He is on an eternal quest for the perfect documentation format and build system.

Table of Contents

Preface; YUI 2 Versus YUI 3; Who This Book Is For; Resources and Community; Conventions Used in This Book; Using Code Examples; Safari® Books Online; How to Contact Us; Acknowledgments; Chapter 1: Loading Modules; 1.1 Loading Rollups and Modules; 1.2 Loading SimpleYUI; 1.3 Identifying and Loading Individual Modules; 1.4 Loading a Different Default Skin; 1.5 Loading Gallery Modules; 1.6 Loading a YUI 2 Widget; 1.7 Loading Locally Hosted Builds; 1.8 Creating Your Own Modules; 1.9 Creating a Module with Dependencies; 1.10 Creating Truly Reusable Modules; 1.11 Defining Groups of Custom Modules; 1.12 Reusing a YUI Configuration; 1.13 Defining Your Own Rollups; 1.14 Loading jQuery as a YUI Module; 1.15 Loading Modules Based on Browser Capabilities; 1.16 Monkeypatching YUI; 1.17 Loading Modules on Demand; 1.18 Enabling Predictive Module Loading on User Interaction; 1.19 Binding a YUI Instance to an iframe; 1.20 Implementing Static Loading; Chapter 2: DOM Manipulation; 2.1 Getting Element References; 2.2 Manipulating CSS Classes; 2.3 Getting and Setting DOM Properties; 2.4 Changing an Element’s Inner Content; 2.5 Working with Element Collections; 2.6 Creating New Elements; 2.7 Adding Custom Methods to Nodes; 2.8 Adding Custom Properties to Nodes; Chapter 3: UI Effects and Interactions; 3.1 Hiding an Element; 3.2 Fading an Element; 3.3 Moving an Element; 3.4 Creating a Series of Transitions; 3.5 Defining Your Own Canned Transitions; 3.6 Creating an Infinite Scroll Effect; 3.7 Dragging an Element; 3.8 Creating a Resizable Node; 3.9 Implementing a Reorderable Drag-and-Drop Table; Chapter 4: Events; 4.1 Responding to Mouseovers, Clicks, and Other User Actions; 4.2 Responding to Element and Page Lifecycle Events; 4.3 Controlling Event Propagation and Bubbling; 4.4 Preventing Default Behavior; 4.5 Delegating Events; 4.6 Firing and Capturing Custom Events; 4.7 Driving Applications with Custom Events; 4.8 Using Object Methods as Event Handlers; 4.9 Detaching Event Subscriptions; 4.10 Controlling the Order of Event Handler Execution; 4.11 Creating Synthetic DOM Events; 4.12 Responding to a Method Call with Another Method; Chapter 5: Ajax; 5.1 Fetching and Displaying XHR Data; 5.2 Handling Errors During Data Transport; 5.3 Loading Content Directly into a Node; 5.4 Submitting Form Data with XHR; 5.5 Uploading a File with XHR; 5.6 Getting JSON Data Using Script Nodes (JSONP); 5.7 Fetching and Displaying Data with YQL; 5.8 Scraping HTML with YQL; 5.9 Querying Data Using DataSource; 5.10 Normalizing DataSource Responses with a DataSchema; Chapter 6: CSS; 6.1 Normalizing Browser Style Inconsistencies; 6.2 Rebuilding Uniform Base Styles; 6.3 Applying Consistent Fonts; 6.4 Laying Out Content with Grids; 6.5 Using Grids for Responsive Design; 6.6 Creating Consistent Buttons; Chapter 7: Infrastructure; 7.1 Managing State with Attributes; 7.2 Creating Base Components with Y.extend(); 7.3 Creating Base Components with Y.Base.create(); 7.4 Creating a Basic Widget; 7.5 Creating a Widget That Uses Progressive Enhancement; 7.6 Rendering Remote Data with a Widget; 7.7 Creating a Simple Plugin; 7.8 Creating a Plugin That Alters Host Behavior; 7.9 Bundling CSS with a Widget as a CSS Module; 7.10 Bundling CSS with a Widget as a Skin; 7.11 Representing Data with a Model; 7.12 Persisting Model Data with a Sync Layer; 7.13 Managing Models with a Syncing ModelList; 7.14 Rendering HTML with a View; 7.15 Rendering a Model with a View; 7.16 Rendering a ModelList with a View; 7.17 Saving State Changes in the URL; 7.18 Defining and Executing Routes; Chapter 8: Using Widgets; 8.1 Instantiating, Rendering, and Configuring Widgets; 8.2 Creating an Overlay; 8.3 Aligning and Centering an Overlay; 8.4 Making an Overlay Draggable; 8.5 Creating a Simple, Styled Information Panel; 8.6 Creating a Modal Dialog or Form; 8.7 Creating a Tooltip from an Overlay; 8.8 Creating a Lightbox from an Overlay; 8.9 Creating a Slider; 8.10 Creating a Tabview; 8.11 Creating a Basic DataTable; 8.12 Formatting a DataTable’s Appearance; 8.13 Displaying a Remote JSON DataSource in a DataTable; 8.14 Plotting Data in a Chart; 8.15 Choosing Dates with a Calendar; 8.16 Defining Calendar Rules; 8.17 Creating a Basic AutoComplete; 8.18 Highlighting and Filtering AutoComplete Results; 8.19 Using AutoComplete with Remote Data; 8.20 Customizing the AutoComplete Result List; Chapter 9: Utilities; 9.1 Determining a Variable’s Type; 9.2 Iterating Over Arrays and Objects; 9.3 Filtering an Array; 9.4 Merging Objects; 9.5 Composing and Inheriting from Other Objects; 9.6 Automatically Caching Function Call Results; 9.7 Templating with Simple String Substitution; 9.8 Formatting Numbers; 9.9 Formatting Dates; 9.10 Parsing Arbitrary XML; 9.11 Converting Color Values; 9.12 Managing History and the Back Button; 9.13 Escaping User Input; 9.14 Assigning Special Behavior to a Checkbox Group; 9.15 Implementing Easy Keyboard Actions and Navigation; 9.16 Reliably Detecting Input Field Changes; 9.17 Managing and Validating Forms; Chapter 10: Server-Side YUI; 10.1 Installing and Running YUI on the Server; 10.2 Loading Modules Synchronously on the Server; 10.3 Using YUI on the Command Line; 10.4 Calling YQL on the Server; 10.5 Using the YUI REPL; 10.6 Constructing and Serving a Page with YUI, YQL, and Handlebars; Chapter 11: Universal Access; 11.1 Preventing the Flash of Unstyled Content; 11.2 Adding ARIA to Form Error Messages; 11.3 Building a Widget with ARIA; 11.4 Retrofitting a Widget with an ARIA Plugin; 11.5 Defining Translated Strings; 11.6 Internationalizing a Widget; Chapter 12: Professional Tools; 12.1 Enabling Debug Logging; 12.2 Rendering Debug Log Output in the Page; 12.3 Writing Unit Tests; 12.4 Organizing Unit Tests into Suites; 12.5 Testing Event Handlers by Simulating Events; 12.6 Mocking Objects; 12.7 Testing Asynchronously Using wait(); 12.8 Collecting and Posting Test Results; 12.9 Precommit Testing in Multiple Browsers; 12.10 Testing on Mobile Devices; 12.11 Testing Server-Side JavaScript; 12.12 Minifying Your Code; 12.13 Documenting Your Code; Colophon;