Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 488 trang
THÔNG TIN TÀI LIỆU
Cấu trúc
Dojo: The Definitive Guide
Table of Contents
Foreword
Preface
Why Dojo?
What’s in This Book
What’s Not in This Book
Open Source Software Is Fluid
About You
Development Tools
Essential Working Knowledge
Closures
Context
Anonymous functions
Conventions Used in This Book
Style Conventions
Using Code Examples
Safari® Books Online
We’d Like to Hear from You
Acknowledgments
Part I
Toolkit Overview
Overview of Dojo’s Architecture
Base
Core
Dijit
DojoX
Util
Prepping for Development
Getting Dojo
Downloading an official release
Downloading from Subversion
AOL’s CDN
Debugging with Firebug
Browser Security Settings for Running Dojo Locally
Lightweight Server Responses
Terminology
Bootstrapping
dojo.addOnLoad
Configuration with djConfig
Exploring Dojo with Firebug
Exploring Base
dojo.byId
dojo.connect
Exploring Dijit
Summary
Language and Browser Utilities
Looking Up DOM Nodes
Type Checking
Duck Typing
String Utilities
Array Processing
Finding Locations of Elements
Testing Elements for a Condition
Iterating Over Elements
Transforming Elements
String-As-Function Style Arguments
Managing Source Code with Modules
Motivation for Managing the Mayhem
Custom Module Example Over XDomain
Fibonacci Example with Local Toolkit Installation
Building a Magic Genie Example Module
JavaScript Object Utilities
Mixins
Extending Object Prototypes
Cloning Objects
Manipulating Object Context
Partially Applying Parameters
Hitching an Object to a Specific Context
Delegation and Inheritance
DOM Utilities
Ancestry
Selectability
Styling Nodes
Manipulating Attributes
Placing Nodes
The Box Model
Browser Utilities
Cookies
Back Button Handling
Summary
Event Listeners and Pub/Sub Communication
Event and Keyboard Normalization
Mouse and Keyboard Event Normalization
Standardized Key Codes
Event Listeners
Event Propagation
Leveraging Closures with dojo.connect
One-time connections
Setting up connections within a loop
Connecting in Markup
Publish/Subscribe Communication
Summary
AJAX and Server Communication
Quick Overview of AJAX
JSON
AJAX Made Easy
XHR Examples
General Purpose XMLHttpRequest Calls
Hitching Up Callbacks
Deferreds
Deferred Examples Via CherryPy
Using Deferreds returned from XHR functions
Injecting Deferreds into XHR functions
Custom canceller
DeferredList
Form and HTTP Utilities
Cross-Site Scripting with JSONP
JSONP Primer
Core IO
Using JSONP with Dojo
Connecting to a Flickr data source
Getting back JavaScript from a JSONP call
IFRAME Transports
File downloads with IFRAMEs
Form submissions with IFRAMEs
Non-HTML response types
Manually creating a hidden IFRAME
JSON Remote Procedure Calls
JSON RPC Example
OpenAjax Hub
Summary
Node Manipulation
Query: One Size Fits All
Warm Up
State Tracking Example
The long, brittle way
The short, robust way
NodeList
Array-Like Methods
Chaining NodeList results
String-as-Function style Arguments
Enhanced filtering
Style
Placement
DOM Event Shortcuts
Animation
Creating NodeList Extensions
Behavior
Summary
Internationalization (i18n)
Introduction
Internationalizing a Module
Layout on Disk
Defining String Tables
Putting It All Together
Use build tools for snappy performance
Dates, Numbers, and Currency
Dates
Numbers
Currency
Summary
Drag-and-Drop
Dragging
Simple Moveables
Drag Events
Z-Indexing
Constrained Moveables
Dropping
Pure Targets
Custom Avatars
Drop Events
Scripting Droppables
Summary
Animation and Special Effects
Animation
Simple Fades
Animating Arbitrary CSS Properties
Programatically Controlling Animations
Core fx
Sliding
Wiping
Chaining and Combining
Toggling
Animation + Drag-and-Drop = Fun!
Colors
Creating and Blending Colors
Named Color Values Available Via Base
Additional Color Values Available Via Core
Summary
Data Abstraction
Shifting the Data Paradigm
Data API Overview
The APIs
The Read API
The Identity API
The Write API
The Notification API
Core Implementations of Data APIs
ItemFileReadStore
Hierarchical JSON and JSON with references
ItemFileReadStore walkthrough
Querying child items
ItemFileWriteStore
Serializing and Deserializing Custom Data Types
Implicit type-mapping
Custom type maps
Summary
Simulated Classes and Inheritance
JavaScript Is Not Java
One Problem, Many Solutions
Typical JavaScript Inheritance
Mixin Pattern
Delegation Pattern
Simulating Classes with Dojo
The Basic Class Creation Pattern
A Single Inheritance Example
A common gotcha with prototype-based inheritance
Calling an inherited method
Multiply Inheriting with Mixins
Multiple Inheritance Oddities
Summary
Part II
Dijit Overview
Motivation for Dijit
Low Coupling, High Cohesion
Accessibility (a11y)
Common a11y Issues
WAI-ARIA
Dijit for Designers
Themes
Nodes Versus Dijits, DOM Events Versus Dijit Methods
The Parser
Parsing a Widget When the Page Loads
Manually Parsing a Widget
Demystifying the Parser
Hands-on Dijit with NumberSpinner
Creating from Markup
Programmatic Creation
Lots of Niceties
Defining Methods in Markup
Overview of Stock Dijits
Form Dijits
Layout Dijits
Application Dijits
Dijit API Drive-By
Summary
Dijit Anatomy and Lifecycle
Dijit Anatomy
Web Development Review
Dijits to the Rescue
Dijit Lifecycle Methods
The _Widget Lifecycle
Lifecycle methods
Essential properties
Mixing in _Templated
Lifecycle methods
Essential properties
Your First Dijit: HelloWorld
HelloWorld Dijit (Take 1: Bare Bones)
HTML page
CSS
Template
JavaScript
HelloWorld Dijit (Take 2: Modifying The Template)
HelloWorld Dijit (Take 3: Interning the Template)
HelloWord Dijit (Take 4: Passing in Parameters)
HelloWorld Dijit (Take 5: Associating Events with Dijits)
Parent-Child Relationships with _Container and _Contained
Rapidly Prototyping Widgets in Markup
Summary
Form Widgets
Drive-By Form Review
Form Dijits
TextBox Variations
TextBox
ValidationTextBox
MappedTextBox and RangeBoundTextBox
TimeTextBox and DateTextBox
Commonalities between DateTextBox and TimeTextBox
Serializing data to the server
Don’t forget about inherited properties
NumberTextBox
NumberSpinner
CurrencyTextBox
ComboBox
FilteringSelect
MultiSelect
Textarea Variations
Textarea
SimpleTextarea
Button Variations
Button
ToggleButton
CheckBox
RadioButton
DropDownButton
ComboButton
Slider
HorizontalSlider
VerticalSlider
Form
HTML Form Tag Synopsis
Form
Summary
Layout Widgets
Layout Dijit Commonalities
Programmatic Creation
Keyboard Support
ContentPane
BorderContainer
StackContainer
Procrastination (a.k.a. Lazy Loading) May Yield Better Performance
TabContainer
AccordionContainer
Rendering and Visibility Considerations
Summary
Application Widgets
Tooltip
Dialog Widgets
Dialog
TooltipDialog
ProgressBar
ColorPalette
Toolbar
Menu
TitlePane
InlineEditBox
Tree
Simple Tree
Simple Forest
Responding to Click Events
Tree-Related APIs
Drag-and-Drop with the Tree
Drag-and-droppable Tree example
Editor
Editor Architecture
Editor Plug-Ins
Summary
Build Tools, Testing, and Production Considerations
Building
Running a Build
Build Profiles
Setting up a build profile
Setting up a (more clever) build profile
Standard build profile
ShrinkSafe optimization and other common options
Dojo Objective Harness (DOH)
Rhino Test Harness Without Dojo
Rhino Test Harness with Dojo
Browser-Based Test Harness
Browser Test Example
Asynchronous Browser Test Example
Performance Considerations
Benefits of XDomain builds
Don’t optimize prematurely
Summary
A Firebug Primer
Installation
To Allow or Not to Allow?
Now for the Fun Stuff
Inspect
Console
HTML and CSS
Script and DOM
Net
Go Forth and Dismantle
A Brief Survey of DojoX
Index
Nội dung
TimeTextBox dijit clickableIncrement attribute, 313 formatLength attribute, 314 getDisplayedValue method, 314, 315 Gregorian calendar, 311 locale attribute, 314 overview, 310–317 selector attribute, 314 serialize extension point, 315, 317 setDisplayedValue method, 314, 315 strict attribute, 314 timePattern attribute, 314 toString method, 315 visibleIncrement attribute, 313 visibleRange attribute, 313 TitlePane dijit duration attribute, 374 open attribute, 374 overview, 269, 374–375 setContent function, 374 setTitle function, 375 title attribute, 374 toggle function, 375 ToggleButton dijit checked attribute, 327 onChange extension point, 327 overview, 327 setAttribute method, 327 Toggler class, 184, 185 toggling nodes, 184, 185 Toolbar dijit addChild function, 369 getChildren function, 369 overview, 268, 367–369 removeChild function, 369 toolkits, 13 Tooltip dijit connectId attribute, 360 label attribute, 360 overview, 269, 359–360 showDelay attribute, 360 TooltipDialog dijit, 269, 360 tracking state, 119–121 translations, testing, 139 transparency, 189 Tree dijit accessibility, 377 checkAcceptance method, 386 checkItemAcceptance method, 386 childrenAttr attribute, 383 dndController attribute, 385, 386 drag-and-drop support, 378, 385–388 ForestStoreModel class, 378, 381, 384–385 itemCreator method, 386 model attribute, 383 onClick extension point, 382, 383 onDndCancel method, 386 onDndDrop method, 386 openOnClick attribute, 383 overview, 206, 270, 377, 383–385 persist attribute, 383 query attribute, 383 responding to click events, 382–383 showRoot attribute, 383 simple forest example, 380–382 simple tree example, 378–380 _TreeNode class and, 378 TreeStoreModel class, 378, 379, 384 _TreeNode class, 378 TreeStoreModel class destroy function, 384 getChildren function, 384 getIdentity function, 384 getLabel function, 384 getRoot function, 384 mayHaveChildren attribute, 384 newItem function, 384 newParentItem attribute, 384 oldParentItem attribute, 384 onChange function, 384 onChildrenChange function, 384 onComplete function, 384 onItem function, 384 overview, 378, 379, 384 pasteItem function, 384 tundra theme (Dijit), 253, 300 Twisted web site, 89 type checking duck typing, 33, 225 JavaScript support, 33 typeof operator, 34 U UCS (Universal Character Set), 320 Unicode standard, 320 Universal Character Set (UCS), 320 UTC (Coordinated Universal Time), 312 UTF-8 character set, 319, 320 Index | 449 Util build tools functionality, 6, 7, 41, 396 HelloWorld example, 287 performance and, 140 V validation DOCTYPE, 252 forms, 252, 299 ValidationTextBox dijit ComboBox and, 319 constraints attribute, 308 displayMessage attribute, 308 inheritance, 317 invalidMessage attribute, 308 isValid attribute, 308 overview, 307–310 promptMessage attribute, 308 regExp attribute, 308 regExpGen attribute, 308 required attribute, 308 tooltipPosition attribute, 308 validator attribute, 308 variables shortening names, 396 type checking, 33 VerticalSlider dijit clickSelect attribute, 337 container attribute, 337 count attribute, 337 decrement function, 337 discreteValues attribute, 337 increment function, 337 maximum attribute, 337 minimum attribute, 337 overview, 336–338 pageIncrement attribute, 337 ruleStyle attribute, 337 showButtons attribute, 337 slideDuration attribute, 337 W W3C event normalization, 67–69, 128 querying DOM, 114 WAI-ARIA, 250 WAI-ARIA, 250 450 | Index web browsers accessibility considerations, 249 Back button handling, 64–66 box model and, 60 color support, 188 cookies, 62–63 editing support, 389 event model, 67 gzip compression, 404 security settings for running locally, 11 test harness, 411 text selectability, 56 trailing commas and, 233 type checking, 33 (see also specific browsers) web portals, 76 WebKit web site, 114 whitespace minification, 396, 404 trimming, 34, 35 _Widget class buildRendering method, 277, 281, 285 create method, 341 destroyRecursive method, 278 domNode property, 279, 301 functionality, 15 id property, 279 inheritance and, 272 lang property, 279 layout dijits and, 340 lifecycle methods, 275–282 postCreate method, 278 postMixInProperties method, 277, 286 startup method, 278 uninitialize method, 278 widgets defined, 15 parsing, 145, 257–259 publish/subscribe communication, 76 (see also dijits) window object, 52–55 wipe effects, 179–181 Write API deleteItem function, 203 getFeatures function, 202 hasAttribute function, 213 isDirty function, 203, 213 ItemFileWriteStore support, 204, 212–219 newItem function, 203 overview, 198, 202 revert function, 203 save function, 203 setValue function, 203, 212 setValues function, 203 unsetAttribute function, 203 examples, 85–87 form support, 297 functionality, 80 general purpose calls, 87 hitch function and, 87–89 platform configuration, 18 REST support, 83, 84 same origin policy, 92, 99 static content and, 414 X XDomain benefits, 415 CDN build support, configuring at build time, 18 custom module example, 42–44 XMLHttpRequest (XHR) object asynchronous requests, 89–91 Deferred support, 93–97 Y Yahoo!, 397 Z z-indexes, 151 Zulu time, 312 Index | 451 About the Author Matthew Russell is a tenacious technologist with entrepreneurial zeal He has completed more than 40 publications on technology, including work that has appeared or is upcoming in scientific conferences, Linux Journal, Apple Developer Connection, and Make: Magazine Matthew developed his passion for writing during undergraduate studies at the Air Force Academy, where he earned the prestigious Dean W Gonzalez Award as the top cadet in the computer science major Matthew’s most recent efforts include architecting and leading a team to build a classified end-to-end web application for the intelligence community, and serving the Defense Intelligence Agency, where he researches and assesses the next generation of technologies to build government intelligence systems He currently works for Digital Reasoning Systems as the director of advanced technology, where he pushes the limits of user interfaces in the web browser and researches bleeding-edge topics in unstructured text processing You can subscribe to Matthew’s semi-regular “Dojo Goodness” column at http://pipes.yahoo.com/ptwobrussell/dojo_goodness to stay up to date with his latest online writing about Dojo Colophon The animal on the cover of Dojo: The Definitive Guide is a lion-tailed monkey (Macaca silenus) This rare monkey lives primarily in the rain forests of southern India, where it spends its days avoiding humans, foraging, and exploring Easily recognizable for its silvery-white mane, the monkey (also known as the liontailed macaque or wanderloo) is also distinguished by the tuft of hair on its tail Like other macaques, it lives in groups of 10 to 20 monkeys in a hierarchical order involving a few males and many females The male is a territorial creature and will defend his home by screaming at monkeys or other invaders not native to his habitat According to the International Union for Conservation of Nature, the lion-tailed monkey is one of the most threatened primates in the world, due largely to the destruction of its habitat by humans Many zoos now participate in breeding programs to help sustain the survival of the monkey The cover image is from Lydekker’s Royal History The cover font is Adobe ITC Garamond The text font is Linotype Birka; the heading font is Adobe Myriad Condensed; and the code font is LucasFont’s TheSans Mono Condensed ... Magazine Matthew developed his passion for writing during undergraduate studies at the Air Force Academy, where he earned the prestigious Dean W Gonzalez Award as the top cadet in the computer... http://pipes.yahoo.com/ptwobrussell/dojo_goodness to stay up to date with his latest online writing about Dojo Colophon The animal on the cover of Dojo: The Definitive Guide is a lion-tailed monkey (Macaca... monkeys or other invaders not native to his habitat According to the International Union for Conservation of Nature, the lion-tailed monkey is one of the most threatened primates in the world,