| home / programming / mozilla / 2 |   [previous] |
|
|
|
We must also update the action() function because the individual tabs can still be selected using keypresses. We need to control the <tabbox> from JavaScript. Looking in xul.css in toolkit.jar in the chrome, we see that there are bindings for all of <tabbox>, <tabs>, <tab>, and <tabpanel>. Examining the tabbox.xml file (again in the chrome) that contains these XBL bindings, we note that <tabbox> has a selectedIndex property, and that <tab> has a selected property. Again, those names match the XML attributes and standard DOM 2 HTML properties in their use. We’ll use the
Fig. 8.8 NoteTaker dialog implemented with a <tabbox>.
<tabbox> selectedIndex property. The changes required for the action() function are shown in Listing 8.7.
var card = document.getElementById("dialog." + task);
var deck = card.parentNode;
if ( task == "edit" ) deck.selectedIndex = 0;
if ( task == "keywords") deck.selectedIndex = 1;
// new code
var tabs = document.getElementById("dialog.tabs");
if ( task == "edit" ) tabs.selectedIndex = 0;
if ( task == "keywords") tabs.selectedIndex = 1;
Clearly <tabbox> and <deck> operate in a similar manner, but <tabbox> has a slightly better user interface. That concludes the changes to the dialog box.
The NoteTaker toolbar is a XUL <toolbar> tag that will appear in the main Classic Browser window. It provides an Edit button that allows users to navigate to the main NoteTaker Edit dialog box. It also provides form items that can be used to create or delete a NoteTaker note quickly. The toolbar creates exactly the same note as the Edit dialog box, except it provides default values for nearly everything. It is a shorthand alternative like the “Google bar” toolbar sometimes used to add a search engine to the Classic Browser toolbox. When displayed by itself, the NoteTaker toolbar appears as in Figure 8.9.
Eventually this toolbar will reside in a XUL file with other GUI elements, but for the purposes of this chapter, we’ll just create it by itself. Listing 8.8 shows the code required.
Fig. 8.9 NoteTaker note creation and navigation toolbar.
In the final NoteTaker version, the keywords listed in the dropdown menu will be dynamically created. For now, we display a fixed set. There are many questions to overcome if this toolbar is to be completed, and those questions are addressed in future chapters.
The final change for this chapter is to add an item to the Tools menu of the Classic Browser window, so that users can still open the Edit dialog box if the toolbar isn't installed. That requires only a <menuitem> tag, which will accompany the toolbar changes at a later date.
Adding navigation widgets is obviously easy and painless.
In more general terms, layout is the main source of problems with these navigational tags. If you push the use of these tags too far, they will not lay out properly. Use them as they are intended to be used. An alternative is to study the XUL layout mechanics behind these tags very closely and then to patch their behavior with extra style information.
The sole other problem you might encounter is difficulties with widget focus
and selection. Although this system recently improved in 1.4, it is sometimes
possible to confuse the window, the running platform instance, and even the
Microsoft Windows desktop if the XUL code is poorly expressed. A symptom of
this problem is a window that has two or more of the input cursor (used for
<textbox> tags), the current focus and the current selection in disagreement.
To test if this is caused by buggy behavior, reboot the computer and determine
whether the display and the behavior of the exact same page have improved.
Mozilla provides a number of navigational aids at the user interface level. XUL tags like <tabbox>, <toolbar>, and <splitter> bring structure to the user interface, but at the expense of a more demanding interactive environment. The <scrollbox> tag is an early example of a powerful tag with its own custom box object.
The focus ring allows the user to move around inside a document, and the menu system lets the user break out of the document. If the user is disabled, most navigation elements are accessibility enabled to compensate.
Provided that the navigational aspects of a given window are thought through, these tools can smooth the flow of work and can compress much functionality into a given window. Using poorly conceived navigation widgets can be intrusive, cluttered, and confusing.
Navigation gives the user power to move around an application. Such freedom is complemented by the Mozilla command system, which allows users to do something after they’ve moved. That system is discussed in the next chapter.
| home / programming / mozilla / 2 | [previous] |
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
