- •preface
- •acknowledgments
- •about this book
- •Who should read this book?
- •Roadmap
- •Code conventions
- •Code downloads
- •Author Online
- •About the title
- •About the cover illustration
- •Rethinking the web application
- •A new design for the Web
- •1.1 Why Ajax rich clients?
- •1.1.1 Comparing the user experiences
- •1.1.2 Network latency
- •1.1.3 Asynchronous interactions
- •1.1.4 Sovereign and transient usage patterns
- •1.1.5 Unlearning the Web
- •1.2 The four defining principles of Ajax
- •1.2.1 The browser hosts an application, not content
- •1.2.2 The server delivers data, not content
- •1.2.3 User interaction with the application can be fluid and continuous
- •1.2.4 This is real coding and requires discipline
- •1.3 Ajax rich clients in the real world
- •1.3.1 Surveying the field
- •1.3.2 Google Maps
- •1.4 Alternatives to Ajax
- •1.4.2 Java Web Start and related technologies
- •1.5 Summary
- •1.6 Resources
- •First steps with Ajax
- •2.1 The key elements of Ajax
- •2.2 Orchestrating the user experience with JavaScript
- •2.3 Defining look and feel using CSS
- •2.3.1 CSS selectors
- •2.3.2 CSS style properties
- •2.3.3 A simple CSS example
- •2.4 Organizing the view using the DOM
- •2.4.1 Working with the DOM using JavaScript
- •2.4.2 Finding a DOM node
- •2.4.3 Creating a DOM node
- •2.4.4 Adding styles to your document
- •2.4.5 A shortcut: Using the innerHTML property
- •2.5 Loading data asynchronously using XML technologies
- •2.5.1 IFrames
- •2.5.2 XmlDocument and XMLHttpRequest objects
- •2.5.3 Sending a request to the server
- •2.5.4 Using callback functions to monitor the request
- •2.5.5 The full lifecycle
- •2.6 What sets Ajax apart
- •2.7 Summary
- •2.8 Resources
- •Introducing order to Ajax
- •3.1 Order out of chaos
- •3.1.1 Patterns: creating a common vocabulary
- •3.1.2 Refactoring and Ajax
- •3.1.3 Keeping a sense of proportion
- •3.1.4 Refactoring in action
- •3.2 Some small refactoring case studies
- •3.2.2 Managing event handlers: Observer pattern
- •3.2.3 Reusing user action handlers: Command pattern
- •3.2.4 Keeping only one reference to a resource: Singleton pattern
- •3.3 Model-View-Controller
- •3.4 Web server MVC
- •3.4.1 The Ajax web server tier without patterns
- •3.4.2 Refactoring the domain model
- •3.4.3 Separating content from presentation
- •3.5 Third-party libraries and frameworks
- •3.5.2 Widgets and widget suites
- •3.5.3 Application frameworks
- •3.6 Summary
- •3.7 Resources
- •Core techniques
- •The page as an application
- •4.1 A different kind of MVC
- •4.1.1 Repeating the pattern at different scales
- •4.1.2 Applying MVC in the browser
- •4.2 The View in an Ajax application
- •4.2.1 Keeping the logic out of the View
- •4.2.2 Keeping the View out of the logic
- •4.3 The Controller in an Ajax application
- •4.3.1 Classic JavaScript event handlers
- •4.3.2 The W3C event model
- •4.3.3 Implementing a flexible event model in JavaScript
- •4.4 Models in an Ajax application
- •4.4.1 Using JavaScript to model the business domain
- •4.4.2 Interacting with the server
- •4.5 Generating the View from the Model
- •4.5.1 Reflecting on a JavaScript object
- •4.5.2 Dealing with arrays and objects
- •4.5.3 Adding a Controller
- •4.6 Summary
- •4.7 Resources
- •The role of the server
- •5.1 Working with the server side
- •5.2 Coding the server side
- •5.2.1 Popular implementation languages
- •5.3 The big picture: common server-side designs
- •5.3.1 Naive web server coding without a framework
- •5.3.2 Working with Model2 workflow frameworks
- •5.4 The details: exchanging data
- •5.4.2 Introducing the planet browser example
- •5.5 Writing to the server
- •5.5.1 Using HTML forms
- •5.5.2 Using the XMLHttpRequest object
- •5.5.3 Managing user updates effectively
- •5.6 Summary
- •5.7 Resources
- •Professional Ajax
- •The user experience
- •6.1 Getting it right: building a quality application
- •6.1.1 Responsiveness
- •6.1.2 Robustness
- •6.1.3 Consistency
- •6.1.4 Simplicity
- •6.1.5 Making it work
- •6.2 Keeping the user informed
- •6.2.1 Handling responses to our own requests
- •6.2.2 Handling updates from other users
- •6.3 Designing a notification system for Ajax
- •6.3.1 Modeling notifications
- •6.3.2 Defining user interface requirements
- •6.4 Implementing a notification framework
- •6.4.1 Rendering status bar icons
- •6.4.2 Rendering detailed notifications
- •6.4.3 Putting the pieces together
- •6.5 Using the framework with network requests
- •6.6 Indicating freshness of data
- •6.6.1 Defining a simple highlighting style
- •6.6.2 Highlighting with the Scriptaculous Effects library
- •6.7 Summary
- •6.8 Resources
- •Security and Ajax
- •7.1 JavaScript and browser security
- •7.1.1 Introducing the “server of origin” policy
- •7.1.2 Considerations for Ajax
- •7.1.3 Problems with subdomains
- •7.2 Communicating with remote services
- •7.2.1 Proxying remote services
- •7.2.2 Working with web services
- •7.3 Protecting confidential data
- •7.3.1 The man in the middle
- •7.3.2 Using secure HTTP
- •7.3.3 Encrypting data over plain HTTP using JavaScript
- •7.4 Policing access to Ajax data streams
- •7.4.1 Designing a secure web tier
- •7.4.2 Restricting access to web data
- •7.5 Summary
- •7.6 Resources
- •Performance
- •8.1 What is performance?
- •8.2 JavaScript execution speed
- •8.2.1 Timing your application the hard way
- •8.2.2 Using the Venkman profiler
- •8.2.3 Optimizing execution speed for Ajax
- •8.3 JavaScript memory footprint
- •8.3.1 Avoiding memory leaks
- •8.3.2 Special considerations for Ajax
- •8.4 Designing for performance
- •8.4.1 Measuring memory footprint
- •8.4.2 A simple example
- •8.5 Summary
- •8.6 Resources
- •Ajax by example
- •Dynamic double combo
- •9.1 A double-combo script
- •9.2 The client-side architecture
- •9.2.1 Designing the form
- •9.2.2 Designing the client/server interactions
- •9.3 Implementing the server: VB .NET
- •9.3.1 Defining the XML response format
- •9.4 Presenting the results
- •9.4.1 Navigating the XML document
- •9.4.2 Applying Cascading Style Sheets
- •9.5 Advanced issues
- •9.5.2 Moving from a double combo to a triple combo
- •9.6 Refactoring
- •9.6.1 New and improved net.ContentLoader
- •9.7 Summary
- •Type-ahead suggest
- •10.1 Examining type-ahead applications
- •10.1.2 Google Suggest
- •10.2.1 The server and the database
- •10.3 The client-side framework
- •10.3.1 The HTML
- •10.3.2 The JavaScript
- •10.3.3 Accessing the server
- •10.5 Refactoring
- •10.5.1 Day 1: developing the TextSuggest component game plan
- •10.5.3 Day 3: Ajax enabled
- •10.5.4 Day 4: handling events
- •10.5.6 Refactor debriefing
- •10.6 Summary
- •11.1 The evolving portal
- •11.1.1 The classic portal
- •11.1.2 The rich user interface portal
- •11.2 The Ajax portal architecture using Java
- •11.3 The Ajax login
- •11.3.1 The user table
- •11.4 Implementing DHTML windows
- •11.4.1 The portal windows database
- •11.4.3 Adding the JS external library
- •11.5 Adding Ajax autosave functionality
- •11.5.1 Adapting the library
- •11.5.2 Autosaving the information to the database
- •11.6 Refactoring
- •11.6.1 Defining the constructor
- •11.6.2 Adapting the AjaxWindows.js library
- •11.6.3 Specifying the portal commands
- •11.6.4 Performing the Ajax processing
- •11.6.5 Refactoring debrief
- •11.7 Summary
- •Live search using XSLT
- •12.1 Understanding the search techniques
- •12.1.1 Looking at the classic search
- •12.1.3 Examining a live search with Ajax and XSLT
- •12.1.4 Sending the results back to the client
- •12.2 The client-side code
- •12.2.1 Setting up the client
- •12.2.2 Initiating the process
- •12.3 The server-side code: PHP
- •12.3.1 Building the XML document
- •12.3.2 Building the XSLT document
- •12.4 Combining the XSLT and XML documents
- •12.4.1 Working with Microsoft Internet Explorer
- •12.4.2 Working with Mozilla
- •12.5 Completing the search
- •12.5.1 Applying a Cascading Style Sheet
- •12.5.2 Improving the search
- •12.5.3 Deciding to use XSLT
- •12.5.4 Overcoming the Ajax bookmark pitfall
- •12.6 Refactoring
- •12.6.1 An XSLTHelper
- •12.6.2 A live search component
- •12.6.3 Refactoring debriefing
- •12.7 Summary
- •Building stand-alone applications with Ajax
- •13.1 Reading information from the outside world
- •13.1.1 Discovering XML feeds
- •13.1.2 Examining the RSS structure
- •13.2 Creating the rich user interface
- •13.2.1 The process
- •13.2.3 Compliant CSS formatting
- •13.3 Loading the RSS feeds
- •13.3.1 Global scope
- •13.3.2 Ajax preloading functionality
- •13.4 Adding a rich transition effect
- •13.4.2 Implementing the fading transition
- •13.4.3 Integrating JavaScript timers
- •13.5 Additional functionality
- •13.5.1 Inserting additional feeds
- •13.5.2 Integrating the skipping and pausing functionality
- •13.6 Avoiding the project’s restrictions
- •13.6.1 Overcoming Mozilla’s security restriction
- •13.6.2 Changing the application scope
- •13.7 Refactoring
- •13.7.1 RSS reader Model
- •13.7.2 RSS reader view
- •13.7.3 RSS reader Controller
- •13.7.4 Refactoring debrief
- •13.8 Summary
- •The Ajax craftsperson’s toolkit
- •A.1 Working smarter with the right toolset
- •A.1.1 Acquiring tools that fit
- •A.1.2 Building your own tools
- •A.1.3 Maintaining your toolkit
- •A.2 Editors and IDEs
- •A.2.1 What to look for in a code editor
- •A.2.2 Current offerings
- •A.3 Debuggers
- •A.3.1 Why we use a debugger
- •A.3.2 JavaScript debuggers
- •A.3.3 HTTP debuggers
- •A.3.4 Building your own cross-browser output console
- •A.4 DOM inspectors
- •A.4.1 Using the Mozilla DOM Inspector
- •A.4.2 DOM inspectors for Internet Explorer
- •A.4.3 The Safari DOM Inspector for Mac OS X
- •A.5 Installing Firefox extensions
- •A.6 Resources
- •JavaScript for object-oriented programmers
- •B.1 JavaScript is not Java
- •B.2 Objects in JavaScript
- •B.2.1 Building ad hoc objects
- •B.2.2 Constructor functions, classes, and prototypes
- •B.2.3 Extending built-in classes
- •B.2.4 Inheritance of prototypes
- •B.2.5 Reflecting on JavaScript objects
- •B.2.6 Interfaces and duck typing
- •B.3 Methods and functions
- •B.3.1 Functions as first-class citizens
- •B.3.2 Attaching functions to objects
- •B.3.3 Borrowing functions from other objects
- •B.3.4 Ajax event handling and function contexts
- •B.3.5 Closures in JavaScript
- •B.4 Conclusions
- •B.5 Resources
- •Ajax frameworks and libraries
- •Accesskey Underlining Library
- •ActiveWidgets
- •Ajax JavaServer Faces Framework
- •Ajax JSP Tag Library
- •Ajax.NET
- •AjaxAC
- •AjaxAspects
- •AjaxCaller
- •AjaxFaces
- •BackBase
- •Behaviour
- •Bindows
- •BlueShoes
- •CakePHP
- •CL-Ajax
- •ComfortASP.NET
- •Coolest DHTML Calendar
- •Dojo
- •DWR (Direct Web Remoting)
- •Echo 2
- •FCKEditor
- •Flash JavaScript Integration Kit
- •Google AjaxSLT
- •Guise
- •HTMLHttpRequest
- •Interactive Website Framework
- •Jackbe
- •JPSpan
- •jsolait
- •JSON
- •JSRS (JavaScript Remote Scripting)
- •LibXMLHttpRequest
- •Mochikit
- •netWindows
- •Oddpost
- •OpenRico
- •Pragmatic Objects
- •Prototype
- •Qooxdoo
- •RSLite
- •Ruby on Rails
- •Sack
- •SAJAX
- •Sarissa
- •Scriptaculous
- •SWATO…
- •Tibet
- •TinyMCE
- •TrimPath Templates
- •Walter Zorn’s DHTML Libraries
- •WebORB for .NET
- •WebORB for Java
- •XAJAX
- •x-Desktop
- •XHConn
- •index
- •Symbols
- •Numerics
Editors and IDEs |
565 |
|
|
A.2 Editors and IDEs
Code-editing tools vary a great deal in complexity, from the simple Notepad to complex IDEs that model the code objects in a variety of ways as you type. JavaScript, HTML, and CSS aren’t as well supported as enterprise-class languages such as C#, Visual Basic, and Java, but there’s still quite a wide range of functionality from which to choose. Let’s run through the types of features that we might look for before we consider the products available today.
A.2.1 What to look for in a code editor
Code editors can do many things, arguably too many. A lot of it comes down to individual tastes. Some developers prefer a simple tool that processes text; others like the visual aids and cues of a full-blown IDE.
When it comes to supporting Ajax code, in the form of HTML, CSS, and JavaScript, there are a number of ways in which the editor can help us. Many of these may seem like overkill for the web content of a classic web app, but as the codebase of an Ajax application is typically much larger and more structured, support for that structuring becomes more critical. Here’s a quick rundown of useful features to look for.
Multiple file support
This is a very basic requirement but worth noting anyway. Ajax projects will typically entail a large number of files, and an editor that cannot manage multiple files or buffers (such as Windows Notepad) will quickly become annoying. Nearly all coding editors support multiple files through tabbed panels, a selector panel, or something similar.
Syntax highlighting
This is a fairly basic feature nowadays and one that most programmer’s editors will support. Syntax highlighting simply colors, italicizes, or otherwise marks language keywords, symbols, quoted strings, and code comments, making it easier to read a sequence of code.
Most editors support syntax coloring for a range of languages, often with pluggable syntax definition files. The key issue for Ajax programming is that a variety of languages are typically used. There are HTML, CSS, XML, and JavaScript on the client side, all of which can benefit from syntax highlighting, and some or all of Java, C#, VB, and the more complex ASP, PHP, and JSP, in which blocks of HTML and code alternate with one another. Not all syntax-aware editors support the full range of languages in use in an Ajax project.
566APPENDIX A
The Ajax craftsperson’s toolkit
Higher-level code support
Coloring in the code provides useful visual cues, but some editors go beyond this to model the code at a higher level of function, methods, and object declarations. This higher-level understanding of a codebase opens up a broader range of tools such as outliners that summarize a file’s contents, navigational aids such as maps of object hierarchies, and the ability to search for uses of a specific property or invocations of a method or function. Tools of this type become invaluable as a codebase matures.
Project-level support tools
Taking another step up from modeling individual object definitions, some IDEs will also manage a codebase as an integrated project, recognizing linkages between the various components and resources that lead to a deployed product. In an IDE for a compiled language, a key benefit of this is the ability to build the entire project into executable form, but this isn’t a concern for Ajax, in which all clientside resources are deployed in their human-readable form. Nonetheless, this capability may be useful when working with server-side code.
Further, project-level support may provide the ability to deploy a project to a web server, even to manage the web server itself, either by controlling an external server through RPC calls or by embedding a simple server into the IDE. A tool that supports the codebase at the project level can release the developer from maintaining a build-and-deploy system.
Version control integration
Version control is a necessity in larger projects and good practice in a project of any size. Version-control systems themselves generally work on text and binary files without understanding their higher-level semantics, so there is little to say about them that is specific to Ajax, but integrating version control into your toolset can be a great help.
Mixed-language development: client and server integration
As we noted earlier, many Ajax projects will require a server-side component in addition to the many web browser technologies being employed. Server-side JavaScript is possible but not fashionable, and the Ajax developer will usually make use of different languages on the server side and the client side. It is possible to use completely different tools for server and client coding, but some tasks will involve rapidly switching between the tiers, and an editor that can support the full range of languages can be a distinct advantage.
Editors and IDEs |
567 |
|
|
Those, then, are our main criteria for choosing a code editor, whether it be a plain text editor or an IDE. In the next section, we’ll have a look at some of the available tools at the time this book was written.
Two-way visual designers
Many web-design tools provide visual WYSIWYG designers for web pages. These can be useful for prototyping, although they are often poorly adapted to Ajax’s more dynamic approach to rearranging the user interface through DOM manipulation. Most visual editors will also allow the programmer to switch to a textbased view of the HTML. When you’re using this kind of tool with Ajax, it is important that the visual editor preserve elements that it does not understand, such as comments and custom tag types and attributes, particularly as the latter may be used by the JavaScript code that rearranges the DOM tree.
A.2.2 Current offerings
A variety of text editors and IDEs offer some support for Ajax technologies. We’ll start by looking at the programmer’s editors and move on from there to the more complex IDEs.
Text editors
Depending on your operating system, a wide range of open source, freeware, and shareware text editors is available these days, such as shareware tools TextPad, Notepad2, EditPlus, the UNIX veterans Vim and Emacs, and the extensible cross-platform jEdit, whose plug-in system enables some IDE-like functionality. Figure A.1 shows a few common text editors in JavaScript mode.
TextPad provides a staggeringly diverse base of user-contributed syntax definition files, including several for CSS, JavaScript, XML, and HTML, and for most popular server-side languages. There is minimal support for running userdefined commands such as compilers against the current file. TextPad runs on Microsoft Windows only. NotePad2 and EditPlus fill similar niches.
jEdit is Java based and can run on any platform that supports Java. It supports syntax highlighting for over 100 languages, including all the main Ajax ones. Several more advanced features are available through a plug-in system, which is well integrated. Plug-ins can be automatically browsed, downloaded, and installed from within jEdit itself. Useful plug-ins include support for syntax checkers, debuggers, compilers, and version-control interfaces, and specific support for CSS and XSLT.
568APPENDIX A
The Ajax craftsperson’s toolkit
Figure A.1 Syntax highlighting support for JavaScript in (left to right) the TextPad, Gvim, and jEdit programmer’s editors
Vim and Emacs are powerful extensible text editors with a long tradition in UNIX operating systems, although both have been ported to Windows, too. Both have well-developed modes for JavaScript coding.
Integrated development environments
Enterprise programming languages such as .NET and Java have a long history of integrated development environments. The market for these is mature, and in recent years, a number of mature, feature-rich open source and freeware IDEs have appeared. IDEs designed for server-side coding languages are often extensible enough to allow for client-side development using Ajax.
Microsoft technologies are still dominated by Microsoft’s own Visual Studio. Visual Studio includes support for web development through the Visual InterDev
Editors and IDEs |
569 |
|
|
component, which supports JavaScript and CSS. Free, cut-down versions have recently become available under the name Visual Studio Express, including one targeted at web developers.
The most prominent Java IDE at present is the IBM-sponsored Eclipse. Eclipse is mostly a Java development tool and ships with a complex set of plug-ins specifically written for Java developers. A thriving plug-in community exists, including some relatively simple JavaScript plug-ins providing syntax highlighting and outline views of methods and classes (figure A.2).
With the recent Eclipse version 3.1, a broader range of web developer plugins is being developed by the Web Tools Platform project, which in addition to supporting server-side J2EE technologies, has editors for JavaScript, XML, HTML, and CSS. Eclipse also offers strong project-level codebase-management features and full integration with CVS version control out of the box. Third-party integration with Subversion, Visual SourceSafe, and other version-control systems is available.
Some enterprise Java development tools such as the Sun Java Studio Creator and SAP NetWeaver offer high-level design facilities for web applications. In our experience, these are based heavily on the classic web application metaphor, with an application being modeled as a series of discrete pages, and may translate poorly to the Ajax approach. Studio Creator uses Java ServerFaces (JSF) behind the scenes, however. We discussed JSF and Ajax in chapter 5, and although the two technologies have some challenges to overcome before being fully interoperable, it may be possible that JSF-based tools will support Ajax better in the near future.
Figure A.2 The JavaScript editor plug-in for Eclipse provides rudimentary outlining support for JavaScript objects but doesn’t handle the full object-based syntax.
570APPENDIX A
The Ajax craftsperson’s toolkit
As well as having a foot in the enterprise-development camp, Ajax has roots in the web-design community, for whom an entirely different type of toolset has developed. Macromedia Dreamweaver and Microsoft FrontPage are two notable web-design tools of this type, and both offer support for the basic client-side technologies used by Ajax. Dreamweaver provides good support for basic JavaScript and CSS editing (figure A.3) and a two-way HTML editor with visual and text modes, but for WYSIWYG orchestration of complex JavaScript user interfaces, it supports only its own code library. Integrating third-party libraries such as x, Prototype, and Rico into a Dreamweaver or FrontPage project would require a lot of hand-crafting the scripts, making use of the text editor functionality of the tools and relatively little else.
The final tool worth a mention here is ActiveState’s Komodo, which is a crosslanguage scripting IDE, supporting Perl, Python, PHP, Tcl, JavaScript, and XSLT. Komodo has very good support for JavaScript codebase navigation and a sophis-
Figure A.3 Dreamweaver’s editor supports JavaScript and CSS. The CSS file being edited in the upper-right pane is also shown in outline form in the upper left.