- •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
528CHAPTER 13
Building stand-alone applications with Ajax
After we set the new class, we need to create a timer to call the next step. The setTimeout emethod has two parameters. The first is the function or JavaScript statement to execute, and the second is the amount of time in milliseconds before it is executed. In this case, we are going to call our SetClass() function with the incremented state of our class. The timeout is set to our global variable, flipLength, which we declared in section 13.3.1.
The else portion of our script handles the situation when we have looped through our five CSS classes and applied them to the div. First, we remove the CSS Class f from our div. The default opacity is 100 percent and allows the div to cover the other one completely with nothing showing through from the bottom layer.
We increment the currentMessage gvariable, allowing the next message to be loaded. We check to see if that message number his greater than the number of messages contained in our array arrayMessage. If it is greater, we set the current message back to the start. The timer is restarted to load the next message iafter our set period of time. The setTimeout method calls our function, ChangeView(), and our global variable, flipLength, determines the length of time. In order for this to execute, we make sure that our global variable, bPaused, is not true. We will be coding the pause feature of this script in section 13.5.2.
The transition effect of the slideshow is now complete. We can test what we have created so far and see if it works. If everything is working correctly, we should see the page-loading counter slowly increasing as the files are being loaded into the script, and the first message should begin to fade in.
As you can see in figure 13.9, there are two different messages in the viewer since the one is slightly transparent. The current message (6) is displayed in the header, and we are able to see that in total 31 messages were loaded. Now, all we have left to do is add the pause, back, forward, and add functionality to our viewer.
13.5 Additional functionality
The code that we already developed can be used on its own, without the other features, but they can make the script more flexible for users and for us. The first feature that we want to add allows us to import other RSS feeds that are not included in the preload function. Perhaps we want to check a site once in a while for new content, or maybe we want to grab a weather RSS feed. This feature allows us to obtain the syndication feed when we need it. The other features that we can include will let us skip through messages and pause them if we want more time to read them.
Additional functionality |
529 |
|
|
13.5.1Inserting additional feeds
Adding additional messages to our feed is easier than you may think. Take a look at figure 13.9 again. The selection list contains the names and URLs of additional feeds we want to check occasionally; we just select a name and click the Add Feed button. We have already built most of the functionality in section 13.3; all we need to do now is execute our ContentLoader, in listing 13.14, which will add the feed selected in the select element.
Listing 13.14 JavaScript function to load additional RSS feeds
function LoadNews(){
var sel = document.Form1.ddlRSS; if(sel.options[sel.selectedIndex].className!="added"){
var url = sel.options[sel.selectedIndex].value; sel.options[sel.selectedIndex].className="added"; var loader1 = new net.ContentLoader(url,
BuildXMLResults);
}
}
We create a function called LoadNews() that we initiate from our button named btnAdd. Since we are obtaining the additional RSS feeds’ URLs from a select element, we need to reference our select element, ddlRSS, so we can access its values.
Figure 13.9
The fading transition is taking place between message 5 and 6.
530CHAPTER 13
Building stand-alone applications with Ajax
When we want to add an RSS feed from the select element, we need to have some way to tell if it already has been added. One way to do this is to add a CSS class to the option element. Therefore, we need to add a check to verify that we have not added this RSS feed already. If the feed is new, we grab the value of the selected option and change the className to added.
We execute the ContentLoader with the URL of the feed and also the function BuildXMLResults(). We can use the default error message of the ContentLoader if it encounters an error. Now that we have the ability to load a document from the selection list, we need to add RSS feeds to the selection list and also add the event handler to the button, shown in listing 13.15.
Listing 13.15 HTML selection list
<select name="ddlRSS"> <option
value="http://radio.javaranch.com/frank/rss.xml">
Frank</option>
<option
value="http://radio.javaranch.com/gthought/rss.xml">
Gregg</option>
</select>
<input type="button" name="btnAdd" value="Add Feed" onclick="LoadNews()" />
In the selection list, we add URLs to RSS feeds that are not contained in our preloader RSS feed array. In this case, two additional RSS syndication feeds were added from JavaRanch’s radio blog. We add the onclick event handler to our button btnAdd so the function LoadNews() can be executed.
The last step to loading the individual feeds is to create a CSS class to add to our stylesheet. This gives an added benefit to the users by giving a visual aid that the feed has been loaded.
.added{background-color: silver;}
In the CSS class, we can add any CSS rule so we are able to distinguish the added feeds from the others. In this case, we change the background color of the option to silver so that the option stands out in the list. After we add the class, we can test our application.
As figure 13.10 shows, we have added the RSS feed of Frank since it is highlighted in silver. The feed labeled Gregg is not added since it still has the default white background color. The number of messages in our RSS reader also
Additional functionality |
531 |
|
|
Figure 13.10
The Frank feed has been added to the Ajax reader.
increased from 31 to 54 after we added the feed. The only features remaining to add are our back, forward, and pause buttons.
13.5.2Integrating the skipping and pausing functionality
One of the most useful features that we can add is the ability to skip through messages. If we find a message that is not interesting to us, we can click a button to see the next one instead of having to wait for the timeout to execute. The pause feature allows us to have more time to read a message that is interesting or long. Since we have used global variables for our timers, pause, and the currentMessage counter, we are able to affect the current state of the RSS reader very easily. Listing 13.16 shows the code that lets the user flip through the feed.
Listing 13.16 JavaScript function to pause and skip the RSS reader feeds
function MoveFeed (xOption){ |
b Create function MoveFeed() |
||
if(xOption == 0){ |
c Check for pause/resume action |
||
if(!bPaused){ |
|
|
|
|
|
|
|
bPaused = true; |
|
|
d Pause the reader |
if(timerSwitch) |
|
|
|
clearTimeout(timerSwitch); |
|
||
document.getElementById("btnPause").value = |
|
||
"RESUME"; |
|
|
|
} |
|
|
|
532 |
CHAPTER 13 |
|
|
|
|
Building stand-alone applications with Ajax |
|
|
|
|
else{ |
|
e Resume the |
|
|
|
|||
|
bPaused = false; |
|
||
|
setTimeout("ChangeView()",300); |
|
reader |
|
|
document.getElementById("btnPause").value = |
|
||
|
"PAUSE"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
|
|
|
|
|
if(timerSwitch) |
|
|
|
|
clearTimeout(timerSwitch); |
|
|
|
|
if(xOption == -1)currentMessage += -2; |
f Change |
||
|
if(currentMessage < 0) |
current |
||
|
currentMessage = arrayMessage.length |
message |
||
|
+ currentMessage; |
|
|
|
|
ChangeView(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
By creating a function, MoveFeed()band allowing it to accept a single parameter, we can handle all three situations; pause, skip forward, and skip backward. We can use an integer to differentiate between the different actions. To pause the reader, we pass in a 0. To skip forward, we use 1, and to skip backward we use –1.
The first functionality we check for is the pause. We verify cthat the passedin parameter is a 0. The pause button has two behaviors. The first is to enter the pause mode, which stops the transitions from executing. The second is resume, which allows for the slideshow to restart the transitions.
If the feed is not paused d, then we need to set our bPaused variable to true and check to see if our timer timerSwitch is running. If the timer is running, we need to cancel it by using the clearTimeout method. We change the button’s text to display the string “RESUME”. If the button is clicked to resume the feed, we do the opposite of pausing the feed e. We set the bPaused variable to false; we call our function ChangeView() with a slight pause in time, and we change the text of our button value back to “PAUSE”.
The pause behavior is now complete.
We have to create our skipping and backtracking functionality f. Since we are changing messages, we should remove the timer to avoid problems with skipping multiple messages. After we remove the timeout, we need to see if the action was –1. If we are moving backward, we need to subtract 2 from the currentMessage variable. This is because the variable, currentMessage, is actually holding the value of the next message since it already has been incremented. By subtracting 1 from the variable, we stay on the same message. Since we are already have the
Additional functionality |
533 |
|
|
next message variable stored in currentMessage, we do not have to do anything for the forward button.
We have to be sure that our number is not less than 0. If it is, we need to set our variable to the last message in our array. After we have changed the
Message, we can call our ChangeView() function to load our message. All we have to do is add the event handlers to the buttons (listing 13.17) so we can execute the function, MoveFeed().
Listing 13.17 onclick event handlers for button actions
value=" <BACK " onclick="MoveFeed(-1)"> value=" PAUSE " onclick="MoveFeed(0)"> value="NEXT>" onclick="MoveFeed(1)">
To initialize the function, we add onclick handlers to our buttons. The onclick handlers call our function MoveFeed(), which passes the integers of –1 to skip backwards, 0 to pause the reader, and 1 to skip forward a message. By saving the document and opening our browser to this page, we can test the last of the functionality.
Now that we have the ability to skip messages, we can advance to the messages in the middle of the RSS feed list. Figure 13.11 shows that the reader is paused since the button btnAdd’s text says RESUME. With the additional features that we
Figure 13.11
This window shows the RSS feeder being paused since the center button is now labeled RESUME.