www.it-ebooks.info www.it-ebooks.info YUI 3 Cookbook Evan Goer Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info YUI 3 Cookbook by Evan Goer Copyright © 2012 Yahoo! Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Editor: Mary Treseler Production Editor: Kristen Borg Copyeditor: Rachel Monaghan Proofreader: Kiel Van Horn Indexer: BIM Indexing Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Robert Romano June 2012: First Edition. Revision History for the First Edition: 2012-05-22 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449304195 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. YUI 3 Cookbook, the image of a spotted cuscus, and related trade dress are trade- marks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. ISBN: 978-1-449-30419-5 [LSI] 1337722088 www.it-ebooks.info Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix 1. Loading Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.1 Loading Rollups and Modules 4 1.2 Loading SimpleYUI 6 1.3 Identifying and Loading Individual Modules 8 1.4 Loading a Different Default Skin 10 1.5 Loading Gallery Modules 11 1.6 Loading a YUI 2 Widget 13 1.7 Loading Locally Hosted Builds 14 1.8 Creating Your Own Modules 17 1.9 Creating a Module with Dependencies 19 1.10 Creating Truly Reusable Modules 22 1.11 Defining Groups of Custom Modules 24 1.12 Reusing a YUI Configuration 27 1.13 Defining Your Own Rollups 30 1.14 Loading jQuery as a YUI Module 31 1.15 Loading Modules Based on Browser Capabilities 34 1.16 Monkeypatching YUI 38 1.17 Loading Modules on Demand 39 1.18 Enabling Predictive Module Loading on User Interaction 42 1.19 Binding a YUI Instance to an iframe 45 1.20 Implementing Static Loading 48 2. DOM Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 2.1 Getting Element References 52 2.2 Manipulating CSS Classes 55 2.3 Getting and Setting DOM Properties 57 2.4 Changing an Element’s Inner Content 59 2.5 Working with Element Collections 60 2.6 Creating New Elements 62 iii www.it-ebooks.info 2.7 Adding Custom Methods to Nodes 64 2.8 Adding Custom Properties to Nodes 66 3. UI Effects and Interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 3.1 Hiding an Element 70 3.2 Fading an Element 71 3.3 Moving an Element 74 3.4 Creating a Series of Transitions 76 3.5 Defining Your Own Canned Transitions 77 3.6 Creating an Infinite Scroll Effect 80 3.7 Dragging an Element 81 3.8 Creating a Resizable Node 84 3.9 Implementing a Reorderable Drag-and-Drop Table 86 4. Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 4.1 Responding to Mouseovers, Clicks, and Other User Actions 93 4.2 Responding to Element and Page Lifecycle Events 95 4.3 Controlling Event Propagation and Bubbling 97 4.4 Preventing Default Behavior 99 4.5 Delegating Events 100 4.6 Firing and Capturing Custom Events 102 4.7 Driving Applications with Custom Events 104 4.8 Using Object Methods as Event Handlers 109 4.9 Detaching Event Subscriptions 112 4.10 Controlling the Order of Event Handler Execution 113 4.11 Creating Synthetic DOM Events 116 4.12 Responding to a Method Call with Another Method 118 5. Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 5.1 Fetching and Displaying XHR Data 122 5.2 Handling Errors During Data Transport 126 5.3 Loading Content Directly into a Node 129 5.4 Submitting Form Data with XHR 132 5.5 Uploading a File with XHR 134 5.6 Getting JSON Data Using Script Nodes (JSONP) 135 5.7 Fetching and Displaying Data with YQL 138 5.8 Scraping HTML with YQL 140 5.9 Querying Data Using DataSource 142 5.10 Normalizing DataSource Responses with a DataSchema 146 6. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 6.1 Normalizing Browser Style Inconsistencies 150 6.2 Rebuilding Uniform Base Styles 151 iv | Table of Contents www.it-ebooks.info 6.3 Applying Consistent Fonts 152 6.4 Laying Out Content with Grids 154 6.5 Using Grids for Responsive Design 157 6.6 Creating Consistent Buttons 159 7. Infrastructure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 7.1 Managing State with Attributes 163 7.2 Creating Base Components with Y.extend() 167 7.3 Creating Base Components with Y.Base.create() 170 7.4 Creating a Basic Widget 173 7.5 Creating a Widget That Uses Progressive Enhancement 178 7.6 Rendering Remote Data with a Widget 182 7.7 Creating a Simple Plugin 185 7.8 Creating a Plugin That Alters Host Behavior 187 7.9 Bundling CSS with a Widget as a CSS Module 189 7.10 Bundling CSS with a Widget as a Skin 191 7.11 Representing Data with a Model 194 7.12 Persisting Model Data with a Sync Layer 196 7.13 Managing Models with a Syncing ModelList 201 7.14 Rendering HTML with a View 204 7.15 Rendering a Model with a View 207 7.16 Rendering a ModelList with a View 210 7.17 Saving State Changes in the URL 213 7.18 Defining and Executing Routes 216 8. Using Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 8.1 Instantiating, Rendering, and Configuring Widgets 223 8.2 Creating an Overlay 225 8.3 Aligning and Centering an Overlay 229 8.4 Making an Overlay Draggable 231 8.5 Creating a Simple, Styled Information Panel 232 8.6 Creating a Modal Dialog or Form 234 8.7 Creating a Tooltip from an Overlay 236 8.8 Creating a Lightbox from an Overlay 239 8.9 Creating a Slider 244 8.10 Creating a Tabview 247 8.11 Creating a Basic DataTable 250 8.12 Formatting a DataTable’s Appearance 251 8.13 Displaying a Remote JSON DataSource in a DataTable 254 8.14 Plotting Data in a Chart 255 8.15 Choosing Dates with a Calendar 257 8.16 Defining Calendar Rules 260 8.17 Creating a Basic AutoComplete 262 Table of Contents | v www.it-ebooks.info 8.18 Highlighting and Filtering AutoComplete Results 265 8.19 Using AutoComplete with Remote Data 270 8.20 Customizing the AutoComplete Result List 273 9. Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 9.1 Determining a Variable’s Type 278 9.2 Iterating Over Arrays and Objects 280 9.3 Filtering an Array 283 9.4 Merging Objects 284 9.5 Composing and Inheriting from Other Objects 285 9.6 Automatically Caching Function Call Results 288 9.7 Templating with Simple String Substitution 289 9.8 Formatting Numbers 291 9.9 Formatting Dates 292 9.10 Parsing Arbitrary XML 293 9.11 Converting Color Values 294 9.12 Managing History and the Back Button 295 9.13 Escaping User Input 299 9.14 Assigning Special Behavior to a Checkbox Group 300 9.15 Implementing Easy Keyboard Actions and Navigation 303 9.16 Reliably Detecting Input Field Changes 304 9.17 Managing and Validating Forms 305 10. Server-Side YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 10.1 Installing and Running YUI on the Server 310 10.2 Loading Modules Synchronously on the Server 312 10.3 Using YUI on the Command Line 313 10.4 Calling YQL on the Server 316 10.5 Using the YUI REPL 317 10.6 Constructing and Serving a Page with YUI, YQL, and Handlebars 320 11. Universal Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 11.1 Preventing the Flash of Unstyled Content 324 11.2 Adding ARIA to Form Error Messages 327 11.3 Building a Widget with ARIA 329 11.4 Retrofitting a Widget with an ARIA Plugin 332 11.5 Defining Translated Strings 335 11.6 Internationalizing a Widget 337 12. Professional Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 12.1 Enabling Debug Logging 345 12.2 Rendering Debug Log Output in the Page 348 12.3 Writing Unit Tests 352 vi | Table of Contents www.it-ebooks.info 12.4 Organizing Unit Tests into Suites 356 12.5 Testing Event Handlers by Simulating Events 359 12.6 Mocking Objects 362 12.7 Testing Asynchronously Using wait() 366 12.8 Collecting and Posting Test Results 370 12.9 Precommit Testing in Multiple Browsers 374 12.10 Testing on Mobile Devices 377 12.11 Testing Server-Side JavaScript 379 12.12 Minifying Your Code 381 12.13 Documenting Your Code 386 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Table of Contents | vii www.it-ebooks.info www.it-ebooks.info [...]... HTML5 document that is some variation of Example P-1: Example P-1 YUI 3 Cookbook boilerplate YUI 3 Cookbook boilerplate YUI( ).use('node-base', function (Y) { Y.one('#demo').setHTML('This is the YUI 3 Cookbook Boilerplate.'); }); The boilerplate is terse in... Also The YUI gallery; Luke Smith’s To Relative Time gallery module; the tutorial “Contribute Code to the YUI Gallery” 1.6 Loading a YUI 2 Widget Problem You want to use one of your favorite widgets from YUI 2, but it hasn’t been ported over to YUI 3 yet Solution Load the widget as a YUI 3 module using its YUI 2in3 wrappers, as shown in Example 1-7 Example 1-7 Loading a YUI 2 TreeView in YUI 3 YUI( ).use( 'yui2 -treeview', function (Y) { var YAHOO = Y .YUI2 , tree = new YAHOO.widget.TreeView('demo', [ { label: 'hats', children: [ { label: 'bowler' }, { label: 'fedora' } ] }, { label: 'gloves' } ]); 1.6 Loading a YUI 2 Widget | 13 www.it-ebooks.info... Discussion With YUI 2in3, core YUI 2 widgets such as ImageCropper, ColorPicker, and Progress Bar are represented as first-class YUI 3 modules Any YUI 2 widget you load this way attaches to the Y object as Y .YUI2 To make this look more like classic YUI 2–style code, you can rename Y .YUI2 to YAHOO, as shown in Example 1-7 Although you may freely intermix YUI 3 code with YUI 2 wrapped modules,... projects under the YUI umbrella, available for forking and contribution #yui IRC on freenode.net YUI s official IRC channel, with many core YUI team members and prolific YUI community members available to answer questions Alternatively, try the YUI library forums The forums are often more useful for YUI 2 questions @yuilibrary and @yuirelay @yuilibrary is YUI s official Twitter account @yuirelay is a Twitter... greatest (and final!) version of YUI 2, use: YUI( { 'yui2 ': '2.9.0', '2in3': '4' }).use( 'yui2 -treeview', function (Y) { }); The 2in3 property configures the version of the YUI 2in3 wrapper to use, which must be at version 4 to load version 2.9.0 See Also YUI 2in3 project source; YUI 2 TreeView documentation 1.7 Loading Locally Hosted Builds Problem You want to load YUI from your own servers instead... all YUI skin styles are scoped within a class name of yui3 skin-skinname This means that to actually apply the night skin once it has loaded on the page, you must add the class yui3 -skin-night to the or to a containing Example 1-5 Changing YUI s default skin Changing YUI' s default skin ... SimpleYUI on the page automatically instantiates a global Y instance that provides access to the YUI API Example 1-2 Loading SimpleYUI Loading SimpleYUI Y.one('#demo').setHTML('This message brought to you by SimpleYUI.'); Discussion SimpleYUI... as Y.AutoComplete The disadvantage of YUI 3 s approach is that at first glance, it looks profoundly weird The advantages of YUI 3 s approach are: • YUI can decouple loading into registration and execution phases YUI. add() registers code as modules with the YUI global object, to be loaded on demand YUI( ).use() provides access to those modules in a safe sandbox • YUI can load modules synchronously or . . . . . 30 9 10.1 Installing and Running YUI on the Server 31 0 10.2 Loading Modules Synchronously on the Server 31 2 10 .3 Using YUI on the Command Line 31 3 10.4 Calling YQL on the Server 31 6 10.5 Using. Reusing a YUI Configuration 27 1. 13 Defining Your Own Rollups 30 1.14 Loading jQuery as a YUI Module 31 1.15 Loading Modules Based on Browser Capabilities 34 1.16 Monkeypatching YUI 38 1.17 Loading. . . 32 3 11.1 Preventing the Flash of Unstyled Content 32 4 11.2 Adding ARIA to Form Error Messages 32 7 11 .3 Building a Widget with ARIA 32 9 11.4 Retrofitting a Widget with an ARIA Plugin 33 2 11.5