Section 6.1. Using Behaviors
6.1. Using BehaviorsAtlas behaviors are similar to the behaviors introduced by Microsoft for Internet Explorer: you can attach a predefined Atlas behavior to an HTML element just as you can attach an Internet Explorer behavior. For instance, one behavior that ships with IE allows you to "do something when the mouse pointer hovers over an element," such as a button, perhaps altering its color or font. The base Atlas library ships with the following behaviors:
Each of these behaviors functions just as its name suggests. Each will be covered in greater detail in this chapter, except from AutoCompleteBehavior, which will be covered in Chapter 1. Other behaviors are defined in additional Atlas libraries that you can optionally reference in your application. These include:
Of special interest is the AtlasUIGlitz.js library, which will be covered in Chapter 7, and the behavior for drag-and-drop operations from the AtlasUIDragDrop.js file, which is covered in Chapter 1. 6.1.1. Using the Click BehaviorThe behavior defined in Sys.UI.ClickBehavior does what the name suggests: it ties an action to an HTML element. When the user clicks on the element, the action is executed. The example shown in this section demonstrates this approach. This example emulates tabbed browsing, a popular feature of browsers such as Firefox, Opera, and Internet Explorer 7. Two <div> elements represent the two tabs; the user can toggle between the two tabs using two <span> elements: <div> <span style="background-color: Fuchsia;">Tab 1</span> <span style="background-color: Fuchsia;">Tab 2</span> </div> <div style="visibility: visible; position: absolute; top: 35px; left: 10px"> This is the first tab.<br /> It is full of Atlas information.<br /> Although it seems to be full of dummy text. </div> <div style="visibility: hidden; position: absolute; top: 35px; left: 10px"> This is the second tab.<br /> It is full of Atlas information as well.<br /> Although it seems to be full of dummy text, too. </div> The rest of the page will consist of declarative elements only, so no code is required. Once again, xml-script will come to life. First of all, the two <div> elements must be registered so that they can be accessed later using behaviors. As you probably remember, there is no client-side web control in Sys.UI that represents a <div> panel. However, since the panels must only be made visible or invisible, a generic <control> element can be used, as shown in the following snippet: <control /> <control /> The behaviors must be attached to the individual <span> elements. First, the element itself is required: <label > ... </label> Then, a set of subelements comes into play:
Then, the <setProperty> or <invokeMethod> elements introduced in Chapter 5 enter the stage. When a user clicks the first <span> element, the first panel is made visible, and the second invisible. Here's the markup that accomplishes that: <label > <behaviors> <clickBehavior> <click> <setProperty target="Panel1" property="visible" value="true" /> <setProperty target="Panel2" property="visible" value="false" /> </click> </clickBehavior> </behaviors> </label> For the second <span> element, the first panel must be made invisible and the second one invisible. Example 6-1 shows the complete markup required to implement a tabbed page. Example 6-1. Using the click behavior
Figure 6-1 shows the page displayed by the markup in Example 6-1. Figure 6-1. Clicking on the labels loads the associated tab
6.1.2. Using the Hover BehaviorAn event quite similar to the client click event is the hover event. In Java-Script, the correct events are mouseover and focus, but hover is more common in the CSS world (for instance, the hover CSS pseudoclass introduced in Internet Explorer). To use the hover behavior, only a few changes are required from the click example. Instead of specifying <clickBehavior>, you use <hoverBehavior>; and instead of <click>, you use <hover> to specify the event. Example 6-2 implements the application shown in Example 6-1, but this time, hovering over the <span> elements triggers the tab swapping that previously required a click. Example 6-2. Using the hover behavior
There are two new features as well. First, there is an additional element, <unhover>, which describes an event that occurs when the mouse pointer leaves the element (in JavaScript terms, mouseout). Second, the hover behavior (or, the <hoverBehavior> element, to be exact) supports the unhoverDelay property. It denotes in milliseconds the delay between hovering over the element and the moment the unhover event is actually raised. The default value for unhoverDelay is 0, so the event is fired immediately. Note that in Example 6-2, the <unhover> element is not used. Since users like to move the mouse pointer when reading text, the tabs remain visible even after the mouse moves away from the <span> elements. |
