www.wrox.com $49.99 USA $59.99 CANADA Wrox Professional guides are planned and written by working programmers to meet the real-world needs of programmers, developers, and IT professionals. Focused and relevant, they address the issues technology professionals face every day. They provide examples, practical solutions, and expert education in new technologies, all designed to help programmers do a better job. Recommended Computer Book Categories Web Development JavaScript ISBN: 978-0-470-38459-6 As the needs and demands of developers have evolved over the years, so has JavaScript, which boasts a track record of delivering high-performing and exceptionally impressive web-user experiences. This flexible, dynamic programming language is increasingly used for serious development on the web, and several of its tools and projects are being shared in the form of libraries and frameworks. Packed with coverage of many of the most popular JavaScript frameworks, this authoritative guide examines how these frameworks can present unique and varying approaches to a variety of problems in web development—each of which has its own pros and cons. This unparalleled team of authors has assembled some of the most active and popular JavaScript frameworks available and they walk you through common web development tasks addressed by each framework, while also examining how the framework approaches a particular set of tasks. In addition, practical examples and clear explanations demonstrate the many aspects of contemporary web development and exactly what the selection of JavaScript frameworks has to offer so that you can get up and running quickly. What you will learn from this book ● The Prototype framework: handling cross-browser events, manipulating common data functions, simplifying AJAX and dynamic data, and more ● Yahoo! User Interface (YUI) library: using animation and drag and drop, building user interfaces with widgets, working with YUI CSS tools, and more ● Ext JS framework: talking with the server, using dataviews and grids, dealing with form controls and validation, and more ● The Dojo framework: manipulating the DOM, composing animators, deploying and expanding Dojo, and more ● The MooTools framework: enhancing development with MooTools, building user interfaces and using animation, and more Who this book is for This book is for web developers who are eager to explore the benefits of JavaScript frameworks. A working knowledge of HTML, CSS, and JavaScript is required. Orchard Pehlivanian Koon Jones spine=1.734" Updates, source code, and Wrox technical support at www.wrox.com Leslie M. Orchard, Ara Pehlivanian, Scott Koon, Harley Jones Professional Professional JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools Professional Wrox Programmer to Programmer TM Wrox Programmer to Programmer TM spine=1.734" Get more out of WROX.com Programmer to Programmer ™ Interact Take an active role online by participating in our P2P forums Wrox Online Library Hundreds of our books are available online through Books24x7.com Wrox Blox Download short informational pieces and code to keep you up to date and out of trouble! Chapters on Demand Purchase individual book chapters in pdf format Join the Community Sign up for our free monthly newsletter at newsletter.wrox.com Browse Ready for more Wrox? We have books and e-books available on .NET, SQL Server, Java, XML, Visual Basic, C#/ C++, and much more! Contact Us. We always like to get feedback from our readers. Have a book idea? Need community support? Let us know by e-mailing wrox-partnerwithus@wrox.com Professional JavaScript® Frameworks Introduction xxv Part I: Prototype 1 Chapter 1: Extending and Enhancing DOM Elements 3 Chapter 2: Handling Cross-Browser Events 23 Chapter 3: Simplifying AJAX and Dynamic Data 33 Chapter 4: Working with Forms 43 Chapter 5: Manipulating Common Data Structures and Functions 53 Chapter 6: Extending Prototype 71 Part II: Yahoo! User Interface Library 89 Chapter 7: Traversing and Manipulating the DOM with YUI 93 Chapter 8: Handling Cross-Browser Events 113 Chapter 9: Using Animation and Drag and Drop 147 Chapter 10: Simplifying AJAX and Dynamic Loading 173 Chapter 11: Building User Interfaces with Widgets (Part I) 189 Chapter 12: Building User Interfaces with Widgets (Part II) 225 Chapter 13: Enhancing Development with the YUI Core 269 Chapter 14: Dealing with Data, Tables, and Charts 291 Chapter 15: Working with YUI CSS Tools 317 Chapter 16: Building and Deploying 329 Part III: Ext JS 335 Chapter 17: Architecture and Library Conventions 337 Chapter 18: Elements, DomHelper, and Templates 351 Continued ffirs.indd iffirs.indd i 7/22/09 10:05:31 AM7/22/09 10:05:31 AM Chapter 19: Components, Layouts, and Windows 373 Chapter 20: Handling Data and Talking with the Server 395 Chapter 21: DataViews and Grids 415 Chapter 22: Form Controls, Validation, and a Whole Lot More 431 Part IV: Dojo 451 Chapter 23: Enhancing Development with Dojo Core 453 Chapter 24: Manipulating the Dom 473 Chapter 25: Handling Events 499 Chapter 26: Composing Animations 525 Chapter 27: Working with Ajax and Dynamic Data 547 Chapter 28: Building User Interfaces with Widgets 595 Chapter 29: Building and Deploying Dojo 655 Chapter 30: Expanding Dojo 663 Part V: MooTools 689 Chapter 31: Enhancing Development with MooTools 691 Chapter 32: Manipulating the Dom and Handling Events 725 Chapter 33: Simplifying Ajax and Handling Dynamic Data 763 Chapter 34: Building User Interfaces and Using Animation 787 Index 835 ffirs.indd iiffirs.indd ii 7/22/09 10:05:32 AM7/22/09 10:05:32 AM Professional JavaScript® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools Leslie Michael Orchard Ara Pehlivanian Scott Koon Harley Jones Wiley Publishing, Inc. ffirs.indd iiiffirs.indd iii 7/22/09 10:05:32 AM7/22/09 10:05:32 AM Professional JavaScript® Frameworks: Prototype, YUI, Ext JS, Dojo and MooTools Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2009 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN: 978-0-470-38459-6 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www .wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make. Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read. For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Control Number: 2009932978 Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Wrox Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. JavaScript is a registered trademark of Sun Microsystems, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. ffirs.indd ivffirs.indd iv 7/22/09 10:05:32 AM7/22/09 10:05:32 AM Many thanks go to my wife, Alexandra, who somehow put up with me over the last few years’ adventures — of which writing a book was the least stressful, relatively speaking. —Leslie Michael Orchard For my wife, Krista, my daughter Emma, and the new one who’s on the way! Thanks for your love and support. I couldn’t have done this without you! —Ara Pehlivanian I want to thank Kim, Amelia, and Naomi for putting up with all the late nights banging away on the laptop and I dedicate my work on this book to them. —Scott Koon To Marlene, Carolyn, Houston, and my mom. —Harley Jones ffirs.indd vffirs.indd v 7/22/09 10:05:33 AM7/22/09 10:05:33 AM Credits Acquisitions Editor Scott Meyers Development Editor Kenyon Brown Technical Editors Scott Koon Michael Galloway Dave Bouwman Joel Tulloch Alexei Gorkov Production Editor Daniel Scribner Copy Editor Mildred Sanchez Editorial Manager Mary Beth Wakefield Production Manager Tim Tate Vice President and Executive Group Publisher Richard Swadley Vice President and Executive Publisher Barry Pruett Associate Publisher Jim Minatel Project Coordinator, Cover Lynsey Stanford Proofreader Scott Klemp, Word One Kyle Schlesinger, Word One Indexer Ron Strauss ffirs.indd viffirs.indd vi 7/22/09 10:05:33 AM7/22/09 10:05:33 AM About the Authors Leslie Michael Orchard is a tinkerer, writer, and serial enthusiast from the Detroit area. He shares his home with a lovely wife, two spotted Ocicats, and a pair of dwarf bunnies. On rare occasions when spare time is found, he shares and documents odd bits of code and other interests at a web site called 0xDECAFBAD (http://decafbad.com). Ara Pehlivanian has been working on the Web since 1997. He’s been a freelancer, a webmaster, and most recently, a front-end architect and practice lead for Nurun, a global interactive communications agency. Ara’s experience comes from having worked on every aspect of web development throughout his career, but he’s now following his passion for web standards-based front-end development. When he isn’t teaching about best practices or writing code professionally, he’s maintaining his personal site at http://arapehlivanian.com/. Scott Koon has been a professional software developer for over 13 years. He spent the majority of his time in college working with a legacy, undocumented symbolic language (DNA), resulting in a degree in biochemistry. He’s been writing JavaScript since it was called LiveScript and remembers when Netscape had a big purple “N” in the upper right-hand corner. He maintains a blog at http://lazycoder.com and has been active in the weblogging community for about 10 years. He is often on Twitter at http:// www.twitter.com/lazycoder and has contributed to the development of a WPF .NET Twitter client called Witty. He also cohosts a podcast called Herding Code (http://www.herdingcode.com) that deals with a wide variety of issues in technology. He lives in Seattle, Washington, with his wife and two daughters, adrift in a sea of pink princesses and other girly things. Harley Jones is currently a lead technical consultant for Perficient, Inc (NASDAQ: PRFT). He graduated from Oglethorpe University in Atlanta, Georgia with an English literature degree but has been programming since he was 10 years old. He has been developing software professionally for more than 10 years and literally consumes programming languages. He actively supports and mentors almost anyone serious in learning modern programming techniques. When not programming, he can be found molding his children into evil scientists. Harley can be reached at harley.333@gmail.com. ffirs.indd viiffirs.indd vii 7/22/09 10:05:33 AM7/22/09 10:05:33 AM Acknowledgments From Leslie Michael Orchard: This book owes its existence to the Dojo and MooTools communities themselves for the wealth of open source code and resources made available to the Web, as well as answers to random late night questions on IRC. From Ara Pehlivanian: Thanks to the entire YUI team for writing such a great library. In particular, I want to thank Eric Miraglia, Dav Glass, Nate Koechley, Douglas Crockford, and Todd Kloots for answering my questions and helping me get my brain wrapped around certain issues. I also want to thank the hardworking folks at Wrox for their patience and dedication to putting together a quality product. From Scott Koon: Thanks to the editors of my chapters for all their help and guidance. Without them, you’d need the Rosetta Stone to read my writing. I also want to thank Brendan Eich for creating this small but powerful language, all of the browser vendors for making JavaScript the most used programming language in the world, and Douglas Crockford for illuminating just how powerful JavaScript is and where there be dragons in JavaScript. From Harley Jones: Thanks to Ryan Duclos for putting my name in the hat, Jim Minatel for getting the ball rolling, and definitely Kenyon Brown and Scott Meyers for pushing that ball through to the finish. I also want to thank Jack Slocum and Aaron Conran for an awesomely powerful library. And I thank Michael LeComte, Nickolay Platonov, Jozef Sakalos, Nigel White, and the entire Ext community (way too many to list here) for being a sounding board for any and all ideas. ffirs.indd viiiffirs.indd viii 7/22/09 10:05:33 AM7/22/09 10:05:33 AM [...]... Manipulation 351 Ext. Element Ext. Element Methods 352 355 DOM Traversal Ext. DomQuery Ext. DomQuery methods 360 360 361 xv Contents DOM Manipulation 363 Ext. DomHelper Ext. Template Ext. XTemplate 363 365 368 CSS Manipulation 369 Ext. util.CSS Summary Chapter 19: Components, Layouts, and Windows The Ext JS Component System Ext. Component Ext. ComponentMgr Ext. BoxComponent Ext. Container The Ext JS Component Life... 327 329 329 331 332 Contents When and Where to Run It Summary 333 334 Part III: Ext JS Chapter 17: Architecture and Library Conventions When to Use Ext JS How to Use Ext JS Stylistic Conventions Ext JS s Object-Oriented Design 337 337 338 339 340 Ext. namespace Ext. override Ext. extend and Constructor Conventions Ext. apply Ext. applyIf 340 341 342 343 343 Utility Functions to Take Over the World 344 Function.createCallback... Panels and Windows 391 Ext. Panel Ext. Window Ext. WindowGroup Ext. WindowMgr 391 392 393 393 Summary xvi 393 Contents Chapter 20: Handling Data and Talking with the Server Getting the Data Ext. data.DataProxy Ext. data.HttpProxy Ext. data.MemoryProxy Ext. data.ScriptTagProxy 395 396 396 396 400 401 Remodeling the Data 402 Ext. data.Record Ext. data.DataReader 402 404 Storing the Data Locally 408 Ext. data.Store Ext. data.Record... Validation, and a Whole Lot More Introduction to the Form Controls Ext. form.Label Ext. form.Field Ext. form.TextField Ext. form.FormPanel & Ext. form.BasicForm Other Form Controls Ext. form.NumberField 408 412 413 413 414 415 415 418 421 422 423 426 427 427 427 428 428 429 429 431 431 432 433 434 435 437 437 xvii Contents Ext. form.TextArea Ext. form.TriggerField Ext. form.DateField Ext. form.ComboBox Ext. form.TimeField... JavaScript Frameworks: Prototype, YUI, Ext JS, Dojo and MooTools offers an examination of some of the top JavaScript (JS) frameworks that are available, with practical examples and explanations of what each does best Over the past few years, there’s been a small renaissance in JavaScript as a language A variety of projects have sprung up to build reusable JS libraries and frameworks — and at this point,... P2P and Wrox books To read the FAQs, click the FAQ link on any P2P page xxvii Part I Prototype Chapter 1: Extending and Enhancing DOM Elements Chapter 2: Handling Cross-Browser Events Chapter 3: Simplifying AJAX and Dynamic Data Chapter 4: Working with Forms Chapter 5: Manipulating Common Data Structures and Functions Chapter 6: Extending Prototype Part I: Prototype Prototype was one of the first JavaScript. .. automatically extended by Prototype and can be used immediately untitled redText { color: red;} Here is my div ... 347 Ext JS s Event-Based Design 347 Ext. util.Observable.addEvents Ext. util.Observable.addListener/.on Ext. util.Observable.removeListener/.un Ext. util.Observable.fireEvent Ext. util.Observable.hasListener Ext. util.Observable.purgeListeners Ext. util.Observable.relayEvents Ext. util.Observable.suspendEvents/.resumeEvents Ext. util.Observable.capture/.releaseCapture Summary Chapter 18: Elements, DomHelper, and. .. Ext. Container The Ext JS Component Life Cycle Initialization Rendering Destruction Ext. Viewport Ext. Container Layouts Ext. layout.ContainerLayout Ext. layout.BorderLayout Ext. layout.ColumnLayout Ext. layout.TableLayout Ext. layout.AnchorLayout Ext. layout.AbsoluteLayout Ext. layout.FormLayout Ext. layout.FitLayout Ext. layout.Accordion Ext. layout.CardLayout Creating Your Own Custom Layouts 369 371 373 374 374 374... Summary Chapter 27: Working with AJAX and Dynamic Data Making Simple Web Requests Making Simple Requests and Handling Responses Using a Single Handler for Both Error and Success Handling Web Responses with Deferreds Registering Handlers for Success and Error Responses Registering Error and Success Handlers in One Call Registering a Single Handler for both Error and Success Working with Response Formats . MooTools JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools Professional Wrox Programmer to Programmer TM Wrox Programmer. code, and Wrox technical support at www .wrox. com Leslie M. Orchard, Ara Pehlivanian, Scott Koon, Harley Jones Professional Professional JavaScript ® Frameworks Prototype, YUI, Ext JS, Dojo and MooTools JavaScript ® . AM Contents xv When and Where to Run It 333 Summary 334 Part III: Ext JS Chapter 17: Architecture and Library Conventions 337 When to Use Ext JS 337 How to Use Ext JS 338 Stylistic Conventions 339 Ext JS s