| home / programming / mozilla / 2 |    [previous] [next] |
|
|
|
XUL has a few tags that defy categorization. Because they have some small relationship to navigation, they are discussed here.
8.2.7.1 <progressmeter> The <progressmeter> tag is a read-only tag with accessibility support. It provides a bar graph of one bar that gives an indication of progress. It is a <progressmeter> tag that you watch when waiting for a Web page to download, or when waiting for a large file to download. Special attributes for <progressmeter> are
mode value label
mode specifies the type of <progressmeter>. If set to undetermined, then the progress meter represents a task that is either underway or finished. It is similar in purpose to a “Waiting …” message. Using Mozilla themes, this is indicated with an animated image that looks like a barber’s pole. If mode is set to determined, then the meter is split crossways into two parts. One part is styled in width to match the “progress complete” fraction of the task; the other is styled in width to match the “yet to go” fraction of the task. Together they make 100% of the task. The value attribute (and property) specify how much of the task is completed so far, as a percent. The label attribute is used for accessibility and provides no visual content.
The <progressmeter> tag is no more than two styled <spacer> tags set next to each other. The UNIX version of <progressmeter> gets a little confused if both mode="undetermined" and value are specified as attributes, as the example in Figure 8.3 shows. The meter can also be layed out vertically with the orient attribute, but it looks ugly, needs extra styles to repair its appearance, and confuses the layout of the page. Avoid doing this.
To make a <progressmeter> physically larger, use minheight and minwidth attributes.
8.2.7.2 <colorpicker> The <colorpicker> tag is a feature of Mozilla invented for the Composer tool and the Appearance tab of the Preferences dialog box. It allows the user to select a CSS2 color from a color swatch. Both of these uses wrap other logic around the basic tag to make it more complete. <colorpicker> does not have a neatly modular implementation.
If you want to experiment with this tag, then a starting point is to note that the color property of the tag’s DOM object is set to a value whenever one of the color patches displayed in the picker is clicked. Features beyond that are mixed up with the application uses of the tag. Examine the colorpicker.xml XBL definition if you wish.
<colorpicker> contains no special functionality or widgets except for generating a DOMMenuItemActive event to support accessibility requirements.
8.2.7.3 Nontags Although Mozilla’s source code suggests that there might be a <fontpicker> XUL tag, there is no such thing as of version 1.21.
The Mozilla chrome contains an XBL definition of a <titlebar> tag. It is occasionally used in other XBL definitions but has no real status as a XUL tag. It is no more than an <hbox> containing a <label> and an <image>. It is intended to simulate the title bar added to a window by the desktop window manager. Explore its use if you wish.
The FilePicker dialog box is a XUL application that can be created by an object, not a tag of its own.
That brings to an end XUL’s most obvious tags for user navigation.
The -moz-appearance style extension supports native themes for stylable widgets. Some values are applicable to the XUL tags described in this chapter:
toolbox toolbar statusbar statusbarpanel progressbar progressbarvertical progresschunk progresschunk-vertical tab tab-left-edge tab-right-edge tabpanels tabpanel scrollbartrack-horizontal scrollbartrack-vertical
Mozilla supplies the CSS2 overflow style property with some very handy alternatives as shown in Table 8.1.
Mozilla also supports scrollbar : auto.
Table 8.1 CSS2 overflow: scroll style extensions
| Value for overflow property | Content layout | Scrollbar appearance |
| scroll | clipped inside a scrollable box | Scrollbars always appear. |
| -moz-scrollbars-none | clipped inside a scrollable box | Scrollbars never appear. |
| -moz-scrollbars-horizontal | clipped inside a scrollable box | Horizontal scrollbar appears. |
| -moz-scrollbars-vertical | clipped inside a scrollable box | Vertical scrollbar appears. |
A problem with this design task is that we don’t yet have enough technology to see how the NoteTaker pieces will connect to the host application. For now, we’ll just create those pieces separately and wait until a later chapter to integrate them.
The pieces that make up NoteTaker’s navigation system follow:
1. The dialog box we’ve worked on so far.
2. A note management toolbar in the main application window.
3. A menu item on the Tools menu of the main application.
4. The small, inset window that displays a note on the content of a given
Web page.
One day there might also be a Note Manager item to add to the Tools menu, but not in this book. The small inset window requires special treatment. It is handled in Chapter 10, Windows and Panes. We’ll address the other three points here.
The dialog box needs only limited improvement. We’ll replace the clumsy <toolbarbutton>s, <deck>, and some action() logic with a simple <tabbox>. Listing 8.6 shows this new code, which is straightforward.
The result of this change is shown in Figure 8.8.
| home / programming / mozilla / 2 | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: December 19, 2003
URL: http://webreference.com/programming/mozilla/2
