Certain lesser-known elements and features are indispensable to the savvy XUL developer and can add that something extra to Mozilla applications, as shown here.
Tooltips are visual pop ups that appear when you place the cursor over a piece of the UI. The hovering behavior of a tooltip is useful for many things, including abbreviated help and the display of values that are otherwise obscured in the UI. In the Mozilla application, the most common places where they are used are on toolbar buttons and splitter grippies that divide panels in the window.
To invoke a tooltip, add a tooltiptext attribute to the widget that needs it:
<button id="printButton" label="Print" tooltiptext="Print this page" />
Defining this attribute is enough to ensure that the generic Mozilla tip box appears with the specified text when you place the cursor over the element.
Tooltips are actually implemented as an XBL binding. Underneath, a tooltip is essentially a pop up with a description element within that holds text. You can also create your own tooltips.
To create your own content and customized appearance for a tooltip:
Create the content.
Attach it to the pop-up element you will be using.
Give the pop up a unique ID.
The following snippet shows the kind of tooltip you can create and then reuse in your application code:
<popupset id="aTooltipSet">
<popup id="myTooltip"
class="tooltip"
onpopupshowing="return FillInTooltip(document.tooltipNode);" >
<description id="TOOLTIP-tooltipText"
class="my-tooltip-label" flex="1"/>
</popup>
</popupset>Use your newly created widget by adding its id value to the tooltip attribute to the UI element that wants it:
<treeitem id="FlyDescription" tooltip="myTooltip" tooltiptext="" />
Note that this example assumes that the actual text will be applied dynamically to the tooltiptext attribute, which is initially empty. This is useful in many situations -- for example, in tree cells that contain transient values.
The advantage of creating your own tooltip is that you can apply your own styles to it, giving the text and background whatever font and colors you want. A variation of the tooltip attribute named contenttooltip is used for content panels.
Sometimes in your application you need to give the user feedback during a long operation. The classic example in the browser is the status bar that shows a visual representation of the time remaining when you load a big web page or download a file.
Of these two activities, loading pages and downloading files, downloading uses the determined mode, meaning that the time to complete the operation is calculable. In this case, an algorithm is written based on the file size and the bandwidth values to formulate the time remaining. The second of three modes of a progress meter is the undetermined mode, in which the time for the operation to complete is unknown. Commonly called the "barber pole," the progress meter shows a spinning pole when in undetermined mode. The third mode is normal, which shows an empty bar. You can get/set the mode by using the mode attribute.
Here is the XUL for a sample progress meter:
<progressmeter id="progressTask" mode="normal" value="0" onclick="alert(`Task is in progress')"/>
Here is the accompanying script for activating the progress meter:
var meter = document.getElementById('progressTask');
meter.setAttribute('mode', 'undetermined');
sometask( );
meter.setAttribute('mode', 'determined');
meter.setAttribute('value', '100%');The mode is changed to undetermined just before carrying out the task, and is represented by the function sometask( ). The JavaScript code is synchronous, so it will not hand back control until the operation is complete.
Mozilla is a web application, and many programs and operating systems (e.g., Windows XP) are moving toward full web integration. Linking is fundamental in application programming, so Mozilla provides a couple of ways to do it in your XUL document.
To use HTML in your XUL file, you must define the HTML namespace at the top of your document:
<window id="MyOverlay"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">Then you can use the HTML elements just as you would in a regular web page, but with the addition of the namespace you declared:
<vbox> <html:a href="myOverlay.html">Go to Help page</html:a> </vbox>
When you use a page with code in your application, the user can click the link and open a Mozilla browser to the requested page or item.
You can also tap into the more sophisticated XML capabilities in Mozilla by trying a simple XLink. Again, the correct namespace is required:
<window xmlns:xlink=http://www.w3.org/1999/xlink ...>
Then you define your link as follows:
<xlink:link xlink:type="simple" xlink:href="c.xml">c.xml</xlink:link>
The element here is link, the type is simple, and the locator is href.