Section 15.8. Update Control

15.8. Update Control

Backwards, FastForward, Forwards, Freeze, Pause, Push, Refresh, Rewind, Reverse, Speed, Sticky, Update

Figure 15-20. Update Control

15.8.1. Goal Story

Sasha is entranced by a world map that continuously updates with events from around the world. She plays around with the velocity controls, first speeding it up so there's a new event every second (no matter how trivial), then backtracking through previous events, and finally pausing on something that catches her eye.

15.8.2. Problem

How can the user deal with continuous information entering the browser and updating the page?

15.8.3. Forces

• Many Ajax Apps continuously grab data from the server and place it on the page.

• The web page has a limited area, so you'll need to remove or relegate older content.

• The optimum speed of updating depends on the user and his task. It should be fairly quick if the user is actively monitoring, for example, and probably quite slow if the content is a bit of eye candy at the edge of a page.

15.8.4. Solution

Let the user control the rate and criteria of updates. When using patterns such as HTTP Streaming (Chapter 6) and Periodic Refresh (Chapter 10), it's possible to keep grabbing fresh content from the server, so you can show news updates, system events, and more. The trend is increasing, with photo slideshows, news updates, and so on, and it can easily lead to information overload. This pattern is about giving the user control over the incoming stream of information. It takes several forms.

First, the user can control the rate of change, by pausing, rewinding, and fast-forwarding. Pausing is important for several reasons: it gives the user an ability to reflect on the content, it lets him keep the content open while perform work related to it, and it lets him interact with the content in the case that it contains links or other forms of control. This is a serious issue in interfaces like Digg Spy (http://digg.com/spy) that stream new links every second or so. Go to click a link andBAM!it's already been replaced by a new link by the time your mouse pointer gets there.

Rewinding is useful too, because it lets users see things they didn't catch the first time, or lets them revisit something in the light of new information.

Fast-forwarding is another form of Update Control. More generally, this relates to setting the speed of updates to be faster or slower than the application's default. With this tool, users can tailor update behavior to their own needs and the task they're performing. Different users will have different mental processing capabilities and preferencessome are hungry for a torrent of incoming data, whereas others prefer a more casual pace. Furthermore, consider how is the information being used. In one case, the user, perhaps a trader monitoring company news, might be actively watching the information. In another case, the user might be trying to find an interesting story to read while viewing a list of new RSS items. Instead of second-guessing how the user's using all of this content, the advice in this pattern is to set a suitable default rate and give her the power to change it.

In theory, you only need a single "speed control" to allow for Update Control. A negative speed corresponds to rewind, zero to pause, one to default speed, and a high number for fast-forward. This could be set with a Slider (Chapter 14) or an input field or both. However, you can probably do a better job than that. The media player metaphor is particularly compelling given how closely it relates to this problem as well as how universal the concepts are. You may also opt to control the speed by adapting to the user's behavior. If the mouse is hovering near some content, that's probably a good clue to pause it, especially if the content is interactive.

You can also let the user choose what kind of content will be shown, which is an indirect way of influencing the rate. For example, a user might select between "Critical", "Informational," and "All." Or the criteria may be more domain-specific, as with Digg Spy, which provides checkboxes for the kinds of things you want to monitornew stories, new comments, and so on.

15.8.5. Real-World Examples

15.8.5.1. Digg Spy

Digg Spy (http://digg.com/spy) shows new stories and events such as user moderation as they happen (see Figure 5-5). The information can change so quickly that it's difficult to click on a link, but fortunately a pause button is present. In addition, you can indirectly control how fast the content appears by tweaking the filtering options, so, for example, you can ask Digg to show only you new story submissions.

15.8.5.2. Slide

Slide (http://Slide.com) shows a stream of visual content from Flickr, EBay, and elsewhere (Figure 15-21). A minus (-) button moves content to the left, a pause button pauses it, and a plus (+) button speeds it up. It will also pause when you hover the mouse over it. The rolling slideshow is implemented with Flash, but the idea is equally applicable to pure Ajax.

Figure 15-21. Slide

15.8.5.3. WBIR

WBIR (http://wbir.com/), a regional news provider, sometimes shows "slideshow images" (Figure 15-22). Like animated GIFs, these are a sequence of several imagesshown one at a timein the same container. But unlike animated GIFs, you can click to pause a single image.

Figure 15-22. WBIR.com image

15.8.6. Code Example: Digg Spy

Digg Spy (http://digg.com/spy) includes a pause and a play button in the initial HTML. At any point in time, exactly one of these buttons is active and will respond to a click, which is registered to notify the togglePause( ) function. togglePause( ) doesn't actually check which button the event originated from, because it instead tracks the pause mode with an explicit pause variable. Thus, the first task of togglePause( ) is to toggle the state of the pause variable.

   function togglepause( ) {     pause = !pause;     ...   } 

If we've just entered pause mode, togglepause( ) cancels the timers used to make the updates. Otherwise, it does the exact opposite, i.e., schedules the updates, as well as making an initial update.

   function togglepause( ) {     ...     if (pause == 1) {       clearInterval(timer);       clearTimeout(timer2);       ...     } else {       update( );       timer = setInterval('addaline(true)', scrollDelay);       timer2 = setTimeout('update( )', updateDelay);     }     ...   } 

The last thing togglepause( ) does is call write_pause, which updates the container (play-pause-toggle) containing both buttons. The HTML is mostly the same in both cases, but the hyperlink to togglepause( ) changes location according to which button should be active.

   function write_pause( ) {     if (pause == 0) {       document.getElementById('pause-play-toggle').innerHTML = '<span class= "spy-play"><strong>Play</strong></span><a href="#" onclick= "togglepause( )" >Pause</a></span>';     } else {       document.getElementById('pause-play-toggle').innerHTML = '<a href= "#"  onclick="togglepause( )"><strong>Play</strong> </a><span ><strong title="Pause the display of new items.">Pause </strong></span>';     }   } 

15.8.7. Related Patterns

15.8.7.1. Periodic Refresh

Periodic Refresh (Chapter 10) is one means of keeping page content freshhence, a situation in which you might use Update Control.

15.8.7.2. HTTP Streaming

Like Periodic Refresh (Chapter 10), HTTP Streaming (Chapter 6) is a pattern that keeps page content fresh, the same situation in which Update Control applies.

15.8.8. Metaphor

Think of the navigation controls on a DVD player; conceptually, Update Control is very similar.

15.8.9. Acknowledgments

Thanks to Christopher Kruslicky for suggesting a pattern based around pausing, which ultimately led to this pattern.