Getting StartED with Dojo

341 Pages·2010·7.89 MB·English

Getting StartED
with Dojo

Kyle D. Hayes
GETTING STARTED WITH DOJO
Copyright © 2009 by Kyle D. Hayes
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-4302-2521-8
ISBN-13 (electronic): 978-1-4302-2522-5
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.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected],
or visit www.springeronline.com.
For information on translations, please e-mail [email protected], or visit 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 Special
Bulk 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 precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any 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.

Credits
President and Publisher: Coordinating Editor:
Paul Manning Kelly Moritz
Lead Editor: Copy Editor:
Matthew Moodie Kim Wimpsett
Technical Reviewer: Compositors:
Peter Higgins MacPS, LLC
Editorial Board: Indexers:
Clay Andres, Steve Anglin, Mark Beckner, BIM Indexing & Proofreading Services
Ewan Buckingham, Gary Cornell, Jonathan Gennick,
Artist:
Jonathan Hassell, Michelle Lowman, Matthew Moodie, April Milne
Duncan Parkes, Jeffrey Pepper, Frank Pohlmann,
Douglas Pundick, Ben Renow-Clarke, Cover Designer:
Kurt Krames
Dominic Shakeshaft, Matt Wade, Tom Welsh
ii
To my beautiful wife, Jenn—for without
her boundless love and inspiration,
I would cease to follow my dreams.
Contents at a Glance
Contents at a Glance ....................................................................iv
Contents ....................................................................................v
About the Author.........................................................................xi
About the Technical Reviewer .......................................................xii
Acknowledgments...................................................................... xiii
Introduction..............................................................................xiv
(cid:2)
Chapter 1: JavaScript Fundamentals..................................................1
(cid:2)
Chapter 2: Digging Deeper ............................................................29
(cid:2)
Chapter 3: Enhancing with Dojo .....................................................49
(cid:2)
Chapter 4: Dojo DOM Basics...........................................................87
(cid:2)
Chapter 5: Managing User Interaction with Dojo............................... 119
(cid:2)
Chapter 6: Make It Rich.............................................................. 141
(cid:2)
Chapter 7: Dynamic Data............................................................ 171
(cid:2)
Chapter 8: Widgets ................................................................... 193
(cid:2)
Chapter 9: Where to Go from Here................................................ 233
(cid:2)
Appendix A: Setting Up a Local Web Server..................................... 265
(cid:2)
Appendix B: Dojo Base Quick Reference......................................... 281
Appendix C: Plug-ins.................................................................. 289
Index..................................................................................... 317

iv
Contents
(cid:2)
Contents at a Glance ..................................................................iv
(cid:2)
Contents ..................................................................................v
(cid:2)
About the Author.......................................................................xi
(cid:2)
About the Technical Reviewer .....................................................xii
(cid:2)
Acknowledgments....................................................................xiii
(cid:2)
Introduction........................................................................... xiv
(cid:2)
Chapter 1: JavaScript Fundamentals............................................... 1
(cid:2)
How does JavaScript fit in with HTML? .........................................2
(cid:2)
The DOM ..................................................................................3
(cid:2)
The script tag............................................................................4
(cid:2)
In the head...............................................................................4
(cid:2)
In the body ...............................................................................6
(cid:2)
Inline in an element.....................................................................7
(cid:2)
Altering elements .......................................................................7
(cid:2)
How do you create variables and strings?......................................9
(cid:2)
Declaring variables.....................................................................10
(cid:2)
String concatenation...................................................................14
(cid:2)
How do you perform arithmetic? ..............................................15
(cid:2)
How do you read a method signature?........................................17
(cid:2)
How do you write a function?..................................................18
(cid:2)
Declaring functions.....................................................................19
(cid:2)
Passing data to functions..............................................................21
(cid:2)
How do you control the flow?..................................................22
(cid:2)
What is an array, and why is it so important? ...............................24
(cid:2)
How do you create an array?...................................................25
(cid:2)
Adding elements to an array..........................................................25
(cid:2)
How do you loop through array elements?...................................26
(cid:2)
For loops.................................................................................26
(cid:2)
Summary...........................................................................27
(cid:2)
Digging Deeper.........................................................................29
(cid:2)
Manipulating the DOM...........................................................29
(cid:2)
How do you get a reference to a node on the DOM?..............................30
(cid:2)
How do you change the style of a DOM element?.................................35
(cid:2)
How do you change the HTML content of an element?...........................40
v
(cid:2)
Events..............................................................................44
(cid:2)
What is a JavaScript event?...........................................................44
(cid:2)
How do you attach an event listener?...............................................45
(cid:2)
Summary...........................................................................47
(cid:2)
Enhancing with Dojo..................................................................49
(cid:2)
What makes a good JavaScript toolkit?.......................................49
(cid:2)
What is a JavaScript toolkit?..........................................................49
(cid:2)
What are some popular JavaScript toolkits? .......................................50
(cid:2)
What comprises a JavaScript toolkit? ...............................................50
(cid:2)
What is Dojo? .....................................................................55
(cid:2)
Developing to a pattern...............................................................56
(cid:2)
Keeping it simple.......................................................................57
(cid:2)
Why should I use Dojo over other libraries?........................................59
(cid:2)
Installing and configuring Dojo.................................................59
(cid:2)
How do you install Dojo?..............................................................59
(cid:2)
How do you configure Dojo for your website? .....................................61
(cid:2)
How do I write my first bit of Dojo?.................................................62
(cid:2)
Getting help.......................................................................66
(cid:2)
How do you debug Dojo and JavaScript?............................................66
(cid:2)
If I get stuck, where can you find help?.............................................84
(cid:2)
Summary...........................................................................85
(cid:2)
Dojo DOM Basics.......................................................................87
(cid:2)
How do you get an element by its ID?.........................................87
(cid:2)
Getting reference to a node..........................................................90
(cid:2)
Checking whether a node exists .....................................................90
(cid:2)
How do you get an element using a CSS selector? ..........................90
(cid:2)
CSS3 Selectors ..........................................................................91
(cid:2)
NodeList..................................................................................94
(cid:2)
dojo.query().............................................................................94
(cid:2)
Chaining..................................................................................99
(cid:2)
How do you loop through a NodeList or an array?...........................99
(cid:2)
dojo.forEach ..........................................................................100
(cid:2)
How do you filter an array of elements? ....................................102
(cid:2)
The importance of a data model...................................................102
(cid:2)
dojo.filter() ...........................................................................104
(cid:2)
How do you create an element? ..............................................107
(cid:2)
Positions ...............................................................................108
(cid:2)
dojo.create()..........................................................................110
vi
(cid:2)
How do you move elements around in the DOM?...........................111
(cid:2)
How do you set the attributes of an element? .............................112
(cid:2)
How do you get and set the style of an element?..........................114
(cid:2)
Computed style.......................................................................114
(cid:2)
Getting the style of an element....................................................114
(cid:2)
Setting the style of an element....................................................115
(cid:2)
Styling many elements...............................................................116
(cid:2)
Summary..........................................................................116
(cid:2)
Managing User Interaction with Dojo............................................ 119
(cid:2)
How do you listen for an event with Dojo?..................................119
(cid:2)
Connecting to DOM events..........................................................120
(cid:2)
Listening for keyboard events......................................................127
(cid:2)
Listening to page events ............................................................130
(cid:2)
Please stop listening to me!........................................................132
(cid:2)
What is the Dojo event object?...............................................133
(cid:2)
How do you listen for an event from multiple elements?.................134
(cid:2)
Taking it one step further...........................................................135
(cid:2)
Topical Events...................................................................136
(cid:2)
dojo.subscribe()......................................................................137
(cid:2)
dojo.publish().........................................................................138
(cid:2)
dojo.unsubscribe() ...................................................................139
(cid:2)
Summary..........................................................................140
(cid:2)
Make It Rich .......................................................................... 141
(cid:2)
What is a Dojo animation?.....................................................142
(cid:2)
Using the dojo.Animation class ....................................................142
(cid:2)
Built-in animations..............................................................144
(cid:2)
Fading in and out.....................................................................144
(cid:2)
Sliding..................................................................................147
(cid:2)
Wipes...................................................................................149
(cid:2)
Adding Ease............................................................................151
(cid:2)
How do you animate certain properties of an element?..................155
(cid:2)
How can I play more than one animation at a time? ......................159
(cid:2)
dojo.fx.combine()....................................................................160
(cid:2)
How do I execute other functions during phases of an animation?......161
(cid:2)
dojo.Animation callbacks ...........................................................161
(cid:2)
How do you create simple drag-and-drop functionality?..................165
(cid:2)
What can you do with drag-and-drop functionality?............................165
(cid:2)
Setup...................................................................................166
vii
(cid:2)
The simplest form of drag and drop...............................................167
(cid:2)
List reordering........................................................................168
(cid:2)
Summary..........................................................................170
(cid:2)
Dynamic Data ........................................................................ 171
(cid:2)
What is Ajax anyway?...........................................................171
(cid:2)
Pros of Ajax ...........................................................................173
(cid:2)
Cons of Ajax...........................................................................173
(cid:2)
How do you load external data? ..............................................174
(cid:2)
Using dojo.xhrGet() to load external data .......................................176
(cid:2)
How do you submit a form using Ajax? ......................................184
(cid:2)
Using dojo.xhrPost() to submit a form............................................186
(cid:2)
Making your code reusable..........................................................189
(cid:2)
How do you stay search engine friendly?....................................189
(cid:2)
What is progressive enhancement?................................................189
(cid:2)
What about search engines?........................................................191
(cid:2)
Summary..........................................................................191
(cid:2)
Widgets................................................................................ 193
(cid:2)
How does Dijit promote code reusability?...................................193
(cid:2)
Accessibility...........................................................................194
(cid:2)
International support................................................................195
(cid:2)
How do widgets get implemented?...........................................195
(cid:2)
Using HTML markup..................................................................196
(cid:2)
Using JavaScript......................................................................199
(cid:2)
Pros and cons .........................................................................200
(cid:2)
How do you create powerful forms?..........................................200
(cid:2)
Standard Dijit form controls........................................................207
(cid:2)
dijit.form.Form.......................................................................208
(cid:2)
Form validation.......................................................................210
(cid:2)
What are widget themes?......................................................216
(cid:2)
Where do I find the theme assets?.................................................216
(cid:2)
Using themes..........................................................................217
(cid:2)
Creating your own theme...........................................................218
(cid:2)
How do you lay out widgets and other elements?..........................218
(cid:2)
Using dijit.layout.TabContainer....................................................219
(cid:2)
Using dijit.layout.BorderContainer................................................223
(cid:2)
Summary..........................................................................231
(cid:2)
Where to Go from Here............................................................ 233
(cid:2)
How do I optimize my JavaScript code? .....................................233
viii
(cid:2)
JavaScript minification..............................................................234
(cid:2)
Minifying a JavaScript file with ShrinkSafe.......................................236
(cid:2)
Dojo build system ....................................................................237
(cid:2)
Creating your own classes .....................................................239
(cid:2)
Prototype-based programming.....................................................239
(cid:2)
dojo.delcare...........................................................................241
(cid:2)
Extending Dijit widgets..............................................................242
(cid:2)
DojoX..............................................................................250
(cid:2)
Adobe AIR ........................................................................251
(cid:2)
Getting started .......................................................................252
(cid:2)
Creating a desktop project .........................................................253
(cid:2)
Example AIR + Dojo applications...................................................256
(cid:2)
Server-side frameworks........................................................260
(cid:2)
Zend PHP framework ................................................................260
(cid:2)
Django Python framework...........................................................260
(cid:2)
Third-Party Extensions .........................................................261
(cid:2)
Plugd ...................................................................................261
(cid:2)
Dair.....................................................................................262
(cid:2)
Dojango................................................................................262
(cid:2)
Summary..........................................................................263
(cid:2)
Setting Up a Local Web Server ................................................... 265
(cid:2)
MAMP on Mac OS X ..............................................................265
(cid:2)
Installation ............................................................................266
(cid:2)
Starting the server ...................................................................268
(cid:2)
Serving pages and files ..............................................................270
(cid:2)
XAMPP on Windows .............................................................272
(cid:2)
Installation ............................................................................272
(cid:2)
Starting the server ...................................................................275
(cid:2)
Serving pages and files ..............................................................278
(cid:2)
Dojo Base Quick Reference ....................................................... 281
(cid:2)
Document Life Cycle............................................................281
(cid:2)
DOM Manipulation...............................................................281
(cid:2)
DOM Attributes ..................................................................282
(cid:2)
Language Helpers ...............................................................282
(cid:2)
Arrays .............................................................................282
(cid:2)
Event System.....................................................................283
(cid:2)
Nodelist Events..................................................................283
(cid:2)
Effects ............................................................................283
ix