Practical Prototype and script.aculo.us Andrew Dupont Practical Prototype and script.aculo.us Copyright © 2008 by Andrew Dupont All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-919-8 ISBN-10 (pbk): 1-59059-919-5 ISBN-13 (electronic): 978-1-4302-0502-9 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Lead Editors: Clay Andres, Tony Campbell, Jason Gilmore, Chris Mills Technical Reviewer: Aaron Gustafson Editorial Board: Clay Andres, Steve Anglin, Ewan Buckingham, Tony Campbell, Gary Cornell, JonathanGennick, Matthew Moodie, Joseph Ottinger, Jeffrey Pepper, Frank Pohlmann, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager: Beth Christmas CopyEditor:Damon Larson Associate Production Director: Kari Brooks-Copony Production Editor: Laura Esterman Compositor:Linda Weidemann, Wolf Creek Press Proofreader: Erin Poe Indexer: Broccoli Information Management Artist: April Milne Cover Designer: Kurt Krames Manufacturing Director: Tom Debolski Distributed to the book trade worldwide bySpringer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected],or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected],or visit http://www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our SpecialBulk Sales–eBook Licensing web page at http://www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every pre- caution has been taken in the preparation of this work, neither the author(s) nor Apress shall haveany liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http://www.apress.com. Contents at a Glance About the Author .................................................................xiii About the Technical Reviewer ......................................................xv Acknowledgments ...............................................................xvii Introduction .....................................................................xix PART 1 ■ ■ ■ Prototype ■CHAPTER 1 What You Should Know About Prototype,JavaScript, and the DOM ...................................................3 ■CHAPTER 2 Prototype Basics ..............................................17 ■CHAPTER 3 Collections (Or,Never Write a for Loop Again) ..................31 ■CHAPTER 4 Ajax:Advanced Client/Server Communication ..................49 ■CHAPTER 5 Events ........................................................91 ■CHAPTER 6 Working with the DOM........................................113 ■CHAPTER 7 Advanced JavaScript:Functional Programming and Class-Based OOP.........................................139 ■CHAPTER 8 Other Helpful Things:Useful Methods on Built-Ins .............167 PART 2 ■ ■ ■ script.aculo.us ■CHAPTER 9 What You Should Know About DHTML and script.aculo.us......193 ■CHAPTER 10 Introduction to script.aculo.us Effects.........................215 ■CHAPTER 11 Enabling Draggables,Droppables,and Sortables ..............257 ■CHAPTER 12 Advanced Controls:Autocompleters,In-Place Editors, and Sliders...................................................277 ■CHAPTER 13 Prototype As a Platform.......................................297 ■INDEX .......................................................................315 iii Contents About the Author .................................................................xiii About the Technical Reviewer ......................................................xv Acknowledgments ...............................................................xvii Introduction .....................................................................xix PART 1 ■ ■ ■ Prototype ■CHAPTER 1 What You Should Know About Prototype, JavaScript, and the DOM....................................3 About JavaScript.................................................3 Everything Is an Object.......................................4 About the DOM...................................................8 It’s Hard to Write Multiplatform JavaScript......................8 It’s Hard to Debug Multiplatform JavaScript.....................9 About This Book..................................................9 Firefox Is Used for Nearly All Examples.........................9 First Theory,Then Practice ..................................10 About Prototype.................................................10 Prototype’sPhilosophy......................................10 Prototype’s Purpose and Scope ..............................11 Prototype’sWeb Site........................................11 Contributing to Prototype....................................11 Getting Started with Prototype................................12 Summary ......................................................16 v vi ■CONTENTS ■CHAPTER 2 Prototype Basics............................................17 Getting Started..................................................17 The $ Function..................................................18 $Can Take Either Strings or Nodes...........................19 $Can Take Multiple Arguments ..............................19 $Enhances DOM Nodes with Useful Stuff......................20 Object.extend:Painless Object Merging............................21 $A:Coercing Collections into Arrays ...............................24 The arguments Variable.....................................25 DOM NodeLists.............................................25 $$:Complex Node Queries .......................................26 Summary.......................................................29 ■CHAPTER 3 Collections (Or, Never Write a for Loop Again)............31 The Traditional for Loop..........................................31 Functional Programming .........................................32 Prototype’sEnumerable Object....................................34 Using Enumerable#each.....................................34 Finding Needles in Haystacks:detect,select,reject,and partition .....35 Using Enumerable#detect ...................................35 Using Enumerable#select....................................36 Using Enumerable#reject....................................36 Using Enumerable#partition..................................36 Sorting Collections:min,max,and sortBy ..........................36 Using Enumerable#min and #max ............................37 Using Enumerable#sortBy ...................................37 Advanced Enumeration:map,inject,invoke,and pluck...............38 Using Enumerable#map and Enumerable#inject................38 Using Enumerable#pluck and Enumerable#invoke..............40 Other Collections That Use Enumerable ............................41 Hash......................................................41 ObjectRange...............................................45 Turning Collections into Arrays...............................46 Using Enumerable in Your Own Collections ....................46 Summary ......................................................48 ■CONTENTS vii ■CHAPTER 4 Ajax: Advanced Client/Server Communication............49 Ajax Rocks .....................................................49 Ajax Sucks .....................................................50 Prototype’s Ajax Object...........................................50 Ajax.Request...............................................52 Ajax.Updater...............................................56 Ajax.PeriodicalUpdater ......................................60 Controlling the Polling.......................................60 Advanced Examples:Working with Dynamic Content.................62 Example 1:The Breakfast Log................................62 Example 2:Fantasy Football .................................74 Summary.......................................................89 ■CHAPTER 5 Events........................................................91 State of the Browser (Or,How We Got Here) ........................91 Pre-DOM,Part 1............................................91 Pre-DOM,Part 2............................................92 Events:The Crash Course ........................................94 Using Event#stopPropagation,Event#preventDefault, and Event#stop..........................................99 AFurther Example.........................................101 Events and Forms..............................................102 Client-Side Validation ......................................102 Cleaning It Up.............................................107 Custom Events.................................................108 The First Custom Event.....................................109 Broadcasting Scores.......................................109 Listening for Scores........................................110 Summary......................................................111 ■CHAPTER 6 Working with the DOM.....................................113 About the DOM API.............................................113 Node Genealogy................................................113 viii ■CONTENTS Prototype’s DOM Extensions.....................................115 Modifying.................................................115 Traversing and Collecting...................................128 Creating Nodes............................................132 Putting It Together..............................................135 Summary......................................................137 ■CHAPTER 7 Advanced JavaScript: Functional Programming and Class-Based OOP......................................139 Object-Oriented JavaScript Programming with Prototype............139 Why OOP?................................................139 Remedial OOP:Namespacing ...............................141 Advanced OOP:Using Classes...............................142 Usage:DOM Behavior Pattern...............................148 Functional Programming ........................................158 Functions Can Have Their Own Methods......................159 Using Function#curry ......................................159 Using Function#delay and Function#defer ....................161 Using Function#bind.......................................164 Summary......................................................165 ■CHAPTER 8 Other Helpful Things: Useful Methods on Built-Ins......167 Using String Methods...........................................167 String Utility Methods ......................................167 The Template Class and String Interpolation ..................176 Using JSON....................................................180 What Does JSON Look Like?................................180 Why JSON?...............................................181 Serializing with Object.toJSON ..............................181 Unserializing with String#evalJSON..........................182 Overriding the Default Serialization ..........................183 Using Object Methods...........................................184 Type Sniffing with Object.isX................................184 ■CONTENTS ix Using Array Methods............................................188 The reverse and clear Methods..............................188 The uniq and without Methods ..............................189 Summary......................................................189 PART 2 ■ ■ ■ script.aculo.us ■CHAPTER 9 What You Should Know About DHTML and script.aculo.us .............................................193 Introducing the CSS Box Model...................................193 Visualizing with Block-Level Elements........................194 Formatting Blocks with Inline Elements.......................195 Thinking Outside the Box:Margins,Padding,and Borders ......196 DHTML Properties.........................................198 CSS Positioning (Static,Absolute,and Relative)................199 Positioning with Offset Properties............................208 Introducing script.aculo.us.......................................208 Similarities to Prototype....................................208 The script.aculo.us Web Site................................209 Contributing to script.aculo.us...............................209 Getting Started with script.aculo.us...............................209 Loading script.aculo.us on a Page ...........................210 Summary......................................................213 ■CHAPTER 10 Introduction to script.aculo.us Effects ...................215 What Are Effects? ..............................................215 Why Effects?...................................................215 When Effects Are Good.....................................216 The Basics of Effects ...........................................217 script.aculo.us Effects ..........................................220 Using Effect.Morph ........................................221 Other Core Effects.........................................228 Introduction to Combination Effects..........................236 Effects Are Asynchronous...................................240 x ■CONTENTS Putting It All Together...........................................244 Writing the Markup ........................................244 Adding Styles.............................................247 Bringing in Help...........................................248 Bells and Whistles.........................................249 Summary......................................................255 ■CHAPTER 11 Enabling Draggables, Droppables, and Sortables .......257 Exploring Draggables ...........................................257 Making Draggables........................................260 Other Draggable Options ...................................262 Exploring Droppables ...........................................264 Making Droppables........................................264 Using Callbacks for Droppables .............................265 Drag-and-Drop:Useful or Tedious?..........................269 Exploring Sortables.............................................270 Making Sortables..........................................270 Sortable Options...........................................272 Summary......................................................275 ■CHAPTER 12 Advanced Controls: Autocompleters, In-Place Editors, and Sliders..............................277 Adding Autocomplete Functionality ...............................277 When to Use Autocompleter.................................277 Use Case:Suggesting Players...............................278 Adding In-Place Editing Functionality..............................287 Using Ajax.InPlaceEditor....................................288 Adding Sliders .................................................293 Creating a Slider ..........................................293 Summary .....................................................296