| home / programming / mozilla / 2 |    [previous] [next] |
|
|
|
A typical use of a XUL tab box appears in Listing 8.5. The application programmer must supply most of the content for a tab box as in <arrowscrollbox> and <scrollbar>. As discussed earlier in the chapter, this is not the case for tags.
The number of <tabpanel> tags should match the number of <tab> tags if everything is to be coordinated properly. Any XUL tag can substitute for <tabpanel>, although that tag is the clearest way to design the tab box. Figure 8.5 shows how the standard dir and orient layout attributes can be used on <tabbox> and <tabs> tags to vary the standard appearance of the box.
Fig. 8.5 Variations on tab-box orientation.
Clearly, Mozilla’s tab boxes aren’t as flexible as you might hope; only the most common, normal orientation looks correct. Extensive additional style rules can be used to clean up the appearance of the other orientations, but the effort required is only justified for special cases. Special cases can be found in the Classic Composer and in the Classic Chat client.
The <tabbox> tag is a plain box tag. It has accessibility support and many keystroke handlers for the keys used to navigate around the box. Its XBL definition as well as those for all the tab box–related tags can be found in tabbox.xml in toolkit.jar in the chrome. It has no attributes with special meanings, but the following JavaScript properties are available:
selectedIndex selectedTab selectedPanel accesskey
selectedIndex is the tab number currently selected, with 0 (zero) for the first tab. selectedTab and selectedPanel point at the DOM objects for the <tab> and <tabpanel> matching the currently selected index. accesskey provides accessibility support for the whole tab box.
The DOM object for <tabbox> also has a range of useful methods. Look at the <method> tags for the "tabbox" binding in the XBL file for <tabbox> to see their names, parameters, and uses.
<tabpanels> is a form of the <deck> tag; otherwise, none of the tags associated with the tab box feature of Mozilla have any special meaning as widgets. They are all constructed out of plain boxes, styles, and XBL definitions.
8.2.6.3 <tabs> and <tab> The <tabs> tag is a plain box tag. It contains a set of <tab> tags, plus some hidden <spacer> tags that are used at each end for styling. In the standard Mozilla themes, the tabs cannot overlap (as, for example, the spreadsheet tabs in Microsoft Excel do), but complex and probably pointless style rules can be created to make this happen if necessary.
The <tab> tag is a plain box tag as well. Its rounded corners are the result of Mozilla-style extensions for borders as described in Chapter 2, XUL Layout. The content of such a tab can be any content. If no content is supplied, then the following special attributes can be used to specify an icon and a label:
image label accesskey crop disabled
These attributes work the same as for the <button> tag. The <tab> DOM object has a Boolean selected property, which is true if the tab is the currently selected tab.
The <tabs> and <tab> tags can be specified outside of a <tabbox>, but there is little reason to do so, and they won’t function properly without extra programming effort.
8.2.6.4 <tabpanels> and <tabpanel> The <tabpanels> tag is a <deck>. Each <tabpanel> is one card in the deck and is exposed when the matching <tab> tag is clicked. These tags have accessibility support and some XBL handlers for keyboard navigation; otherwise, they are unremarkable.
XUL is not HTML, and it is possible to hide form elements completely by putting them in a tab that is not the top tab. In HTML, form elements always have the highest possible CSS2 z-index and are impossible to cover over.
8.2.6.5 Custom Panel Systems The combination of XUL, JavaScript, and XBL provides plenty of scope for creating display systems that hide and display panel-like content. In addition to the XUL tags discussed so far, the Classic Browser includes some purpose-built panel-display systems.
The <multipanelset> and <multipanel> are tags specific to the DOM Inspector. They are programmer-defined XBL-based tags. The matching XBL definitions are stored in the DOM Inspector chrome, not in the generalpurpose chrome. Figure 8.6 shows these tags at work.
Fig. 8.6 DOM Inspector’s <multipanelset> content.
This screenshot shows the DOM Inspector displaying the “XBL bindings” version of its right-hand panel. Look carefully at that panel in this screenshot. All the content beneath the <textbox> displaying the chrome://global/… URL is the <multipanelset> content, which takes up the remainder of the right panel. Inside that content area are spread six plain, thin horizontal bars. Each of these bars looks a bit like a <splitter>; they have been slightly darkened in the screenshot to make them stand out. Look at the content of that right panel: There is one bar at the top, one near the bottom, and two groups of two bars partway down. Each of these bars is a <multipanel>, and each bar may have its own user-defined content. That content appears below the bar in a panel of its own. By clicking on one of the bars, the associated content is hidden or revealed. In the screenshot, three <multipanel> tags are showing their content, and three aren’t. These bars cannot be dragged.
The <floatingview> tag is a programmer-defined tag even more sophisticated than <multipanelset>. It is used in the JavaScript Debugger. It also has an XBL definition specific to the content of that application. This can also be copied and reused if required. Figure 8.7 illustrates this tag.
This screenshot shows the debugger displaying four <floatingview> tags. Three are stacked vertically on the left (with two <splitter> tags), and one fills the whole right-hand panel. This tag also consists of a header bar (e.g., “Loaded Scripts”) plus user-defined content in a panel below. The icon on the right end of the header is used to hide the whole <floatingview> panel. The icon on the left end of the header hides the panel but creates a new, small window in which the same <floatingview> tag is displayed. The header bar of the <floatingview> can also be dragged over another <floatingview> tag, which allows the position of the tag to be changed.
Both <multipanelset> and <floatingview> are better suited to power users or desktop-like applications.
Fig. 8.7 JavaScript Debugger’s <floatingview> content.
| 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
