Subject Matter Expert - Managed Services (PA) Next Step Systems US-PA-Wayne Post A Job | Post A Resume

8.2 NAVIGATION WIDGETS

Figure 8.1 illustrates all XUL’s navigation tags in one screenshot.

Figure 8.1 diagram is special in several ways. First, diagnostic styles are turned on so that you can see some of the internal structure of the tags. Second, this screenshot is taken with Mozilla version 1.02. That version includes support for toolbar grippys, support that is not present in version 1.21. Third, some <description> tags have been added where no tags are meant to be. These tags, the text of which appears inside braces and is surrounded by a light background, show the position of the nondisplayed container tags.

Fig. 8.1 XUL Navigation tags with diagnostics.

Fig. 8.2 XUL Navigation tags.

All the tags illustrated in this diagram have XBL definitions. Figure 8.2 shows the same content as Figure 8.1 without the diagnostic extras.

8.2.1 Scrolling Widgets

XML content that exceeds the current window or the screen in size can be created. Such content is usually clipped to the border of the current window. HTML and XUL provide scrollbars that allow the user to move the content inside the clip region. This is a command to pan the current view based on a mouse gesture or keypresses. Such panning actions are implemented directly by both HTML and XUL. XUL has the following tags available for panning actions:

<arrowscrollbox> <scrollbar> <nativescrollbar> <scrollbox>

Mozilla’s implementation of HTML supports the <MARQUEE> tag, whose XBL definition can be found in the chrome. This tag allows for animated scrolling of the tag’s contents.

XUL also supports the overflow:scroll and overflow:auto CSS2 style properties. These are the quickest ways to provide simple content scrolling. Some CSS2 extensions, however, complement these features (see “Style Options” later in this chapter).

8.2.1.1 <scrollbox> The <scrollbox> tag might sound like all the solution you need for scrolling, but that is not true. The <scrollbox> tag provides no user-interface elements. It acts like the <box> tag, except that it also implements the nsIScrollBoxObject interface. Like the <box> tag, it supports these layout attributes:

orient align pack dir maxwidth maxheight minwidth minheight

This tag is similar to <box> because it has a narrow purpose. It is the first tag discussed in this book that is a specialization of the generic <box> object.

Recall from Chapter 2, XUL Layout, that boxes are implemented on top of a lower-level concept called a frame. A frame is just an area of the screen that is managed independently. <scrollbox> is designed to display its content so that it is offset from the frame by a given x- and y-amount. That is all.

<scrollbox> has no special features available from XUL, but it does supply some scriptable object methods. The nsIScrollBoxObject interface adds these methods. Each method call moves the displayed contents to a new position inside the frame. Raw pixel amounts or other units can be specified. For example, methods with “line” in their names move the content vertically by the specified number of whole lineboxes. Methods with “index” in their names move content vertically by the height of a set number of content tags. If these methods are used repeatedly, the content will appear to scroll in a given direction (up and down, back and forth, or any other animated movement).

These extra methods are not present on the <scrollbox>’s DOM object. Every boxlike XUL tag has a boxObject property. This boxObject property is an object containing all the states that apply to a box tag (e.g., position and size). It also contains the QueryInterface() method, which is used for retrieving XPCOM interfaces. If the tag is a <scrollbox>, then this method can be used to retrieve the nsIScrollBoxObject interface methods. It is the only way to get this interface.

All this means that the <scrollbox> tag must be controlled by some programmer’s bits of script if it is to do anything. It is only really useful to programmers creating their own widgets.

A simple example can be seen in the chrome file scrollbox.xml inside toolkit.jar. The XBL binding named autorepeatbutton extracts the nsIScrollBoxObject interface from nearby <scrollbox> content and manipulates that content via the interface so that it scrolls up or down. A fragment of that code is shown in Listing 8.1.

---

Listing 8.1 Example of an XUL tab box.
<handler event="command"><![CDATA[
... some code removed ...
var dir = this.getAttribute("scrolldir");
this.mScrollBox.boxObject.QueryInterface(Components.interfaces.n sIScrollBoxObject);
bx.scrollByIndex(dir == "up" ? -1 : 1);
]]>
</handler>

---

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs