Getting StartED with Dojo (eBook)

Kyle Hayes is a programmer and Web UI designer/developer for The Walt Disney Company, Disney Interactive Media Group.

Contents at a Glance 5
Table of contents 6
About the Author 12
About the Technical Reviewer 13
Acknowledgments 14
Introduction 15
Chapter 1 JavaScript Fundamentals 16
How does JavaScript fit in with HTML? 17
The DOM 18
The script tag 19
In the head 19
In the body 21
Inline in an element 22
Altering elements 22
How do you create variables and strings? 24
Declaring variables 25
Reserved JavaScript keywords 26
Assignment operator 28
Strings 28
Numbers 28
Booleans 29
String concatenation 29
How do you perform arithmetic? 30
How do you read a method signature? 32
How do you write a function? 33
Declaring functions 34
Passing data to functions 36
How do you control the flow? 37
What is an array, and why is it so important? 39
How do you create an array? 40
Adding elements to an array 40
How do you loop through arrayel ements? 41
For loops 41
Summary 42
Chapter 2 Digging Deeper 44
Manipulating the DOM 44
How do you get a reference to a node on the DOM? 45
By ID 46
By children nodes 47
By tag name 48
How do you change the style of a DOM element? 50
Using the className property 54
How do you change the HTML content of an element? 55
Events 59
What is a JavaScript event? 59
How do you attach an event listener? 60
Summary 62
Chapter 3 Enhancing with Dojo 63
What makes a good JavaScript toolkit? 63
What is a JavaScript toolkit? 63
What are some popular JavaScript toolkits? 64
What comprises a JavaScript toolkit? 64
CSS selector engine 65
DOM manipulation 66
Cross-browser compatibility 66
Ajax 67
Animations and effects 68
Attaching and listening to events 68
Which one? 69
What is Dojo? 69
Developing to a pattern 70
Keeping it simple 71
Base 72
Core 72
Dijit 72
DojoX 73
Why should I use Dojo over other libraries? 73
Installing and configuring Dojo 73
How do you install Dojo? 73
How do you configure Dojo for your website? 75
How do I write my first bit of Dojo? 76
Getting help 80
How do you debug Dojo and JavaScript? 80
Firebug 81
Starting Firebug 81
Inspecting HTML code 82
Altering the page in real time 84
Using the Firebug Console tab 86
JavaScript debugging with Firebug 90
Setting breakpoints 90
Stepping through code 94
Firebug Lite 98
If I get stuck, where can you find help? 98
Summary 99
Chapter 4 Dojo DOM Basics 100
How do you get an element by its ID? 100
Getting reference to a node 103
Checking whether a node exists 103
How do you get an element using a CSS selector? 103
CSS3 Selectors 104
NodeList 107
dojo.query() 107
Chaining 112
How do you loop through a NodeList or an array? 112
dojo.forEach 113
Callback functions 114
How do you filter an array of elements? 115
The importance of a data model 115
dojo.filter() 117
How do you create an element? 120
Positions 121
dojo.create() 123
How do you move elements around in the DOM? 124
How do you set the attributes of an element? 125
How do you get and set the style of an element? 127
Computed style 127
Getting the style of an element 127
Setting the style of an element 128
Styling many elements 129
Summary 129
Chapter 5 Managing User Interaction with Dojo 131
How do you listen for an event with Dojo? 131
Connecting to DOM events 132
Listening for keyboard events 139
Listening to page events 142
Please stop listening to me! 144
What is the Dojo event object? 145
How do you listen for an event from multiple elements? 146
Taking it one step further 147
Topical Events 148
dojo.subscribe() 149
dojo.publish() 150
dojo.unsubscribe() 151
Summary 152
Chapter 6 Make It Rich 153
What is a Dojo animation? 154
Using the dojo.Animation class 154
Built-in animations 156
Fading in and out 156
Sliding 159
Wipes 161
Adding Ease 163
dojo.fx.easing 164
How do you animate certain properties of an element? 167
How can I play more than one animation at a time? 171
dojo.fx.combine() 172
How do I execute other functions during phases of an animation? 173
dojo.Animation callbacks 173
Registering a callback during creation 176
Registering a callback using dojo.connect 177
How do you create simple drag-and dropfunctionality? 177
What can you do with drag-and-drop functionality? 177
Setup 178
The simplest form of drag and drop 179
List reordering 180
Summary 182
Chapter 7 Dynamic Data 183
What is Ajax anyway? 183
Pros of Ajax 185
Cons of Ajax 185
How do you load external data? 186
Using dojo.xhrGet() to load external data 188
Load callback 191
Error callback 194
How do you submit a form using Ajax? 196
Using dojo.xhrPost() to submit a form 198
Making your code reusable 201
How do you stay search engine friendly? 201
What is progressive enhancement? 201
Content 202
Presentation 202
Client-side scripting 202
What about search engines? 203
Summary 203
Chapter 8 Widgets 204
How does Dijit promote code reusability? 204
Accessibility 205
International support 206
How do widgets get implemented? 206
Using HTML markup 207
The Dojo parser 208
Using JavaScript 210
Pros and cons 211
How do you create powerful forms? 211
Standard Dijit form controls 218
dijit.form.Form 219
Scoped script tags 220
Form validation 221
Single element validation 222
Full form validation 224
Validating with regex 224
What are widget themes? 227
Where do I find the theme assets? 227
Using themes 228
Import the theme CSS file 228
Apply the class name 228
Creating your own theme 229
How do you lay out widgets and other elements? 229
Using dijit.layout.TabContainer 230
Using dijit.layout.BorderContainer 234
Refactoring your layout 240
Summary 242
Chapter 9 Where to Go from Here 244
How do I optimize my JavaScript code? 244
JavaScript minification 245
Minifying a JavaScript file with ShrinkSafe 247
Online 247
Locally 247
Dojo build system 248
Profiles 248
Cross-domain support 249
Creating your own classes 250
Prototype-based programming 250
dojo.delcare 252
Extending Dijit widgets 253
DojoX 261
Adobe AIR 262
Getting started 263
Creating a desktop project 264
Example AIR + Dojo applications 267
Dojo Toolbox 267
Queued 268
Server-side frameworks 271
Zend PHP framework 271
Django Python framework 271
Third-Party Extensions 272
Plugd 272
Dair 273
Dojango 273
Summary 274
Appendix A Setting Up a Local Web Server 275
MAMP on Mac OS X 275
Installation 276
Starting the server 278
Serving pages and files 280
XAMPP on Windows 282
Installation 282
Starting the server 285
Serving pages and files 288
Appendix B Dojo Base Quick Reference 291
Document Life Cycle 291
DOM Manipulation 291
DOM Attributes 292
Language Helpers 292
Arrays 292
Event System 293
Nodelist Events 293
Effects 293
Package System 294
Objects OO (Object-oriented) 294
Ajax 294
JSON 294
Styles 295
Colors 295
Sniffing 295
Advanced Scope 295
djConfig 296
Miscellaneous 296
Key Constants 296
Appendix C Plug-ins 298
What is a plug-in? 299
What is a NodeList? 300
NodeList as an array 301
Iterating with a NodeList 302
What else does NodeList provide? 303
Single-node equivalent functions 304
DOM-style functions 304
A brief history of this 306
Using dojo.hitch() 307
Preserving this 307
The secret of chaining 309
What is a prototype? 311
Starting simple 313
What is a closure? 316
How does this apply to plug-ins? 318
Functions as plug-ins? 320
More adapter functions 323
Index 326