In the last section, we looked at creating a menu on a menu bar. XUL also has the capability of creating popup menus. Popup menus are typically displayed when the user presses the right mouse button.
XUL has three different types of popups, described below. The main difference is the way in which they appear.
All three types of popups differ in the way that the user invokes them. They can contain any content, although menus are common for the plain and context popups and a simple string of text is common for a tooltip. The elements that create the popup do not specify their type but the element that invokes the popup determines the type.
A popup is described using the popup element. It has no special attributes and is a type of box. When invoked, it will display a window containing whatever you put inside the popup. However, you should always put an id attribute on the popup as it used to associate the popup with an element. We'll see what this means soon. First, an example:
<popupset>
<popup id="clipmenu">
<menuitem value="Cut"/>
<menuitem value="Copy"/>
<menuitem value="Paste"/>
</popup>
</popupset>
|
As can be seen here, a simple popup menu with three commands on it has been created. The popup element surrounds the three menu items. It is much like the menupopup element. It is a type of box and defaults to vertical orientation which, since popup menus are more common on popups, makes sense. You will also notice that the id has been set on the popup element itself.
The popupset element surrounds the entire popup menu declaration. This is a generic container for popups. It does not draw on screen but instead is used as a placeholder where you would declare all of your popups. As the name popupset implies, you can put multiple popup declarations inside it. Juts add additional ones after the first popup element. You can have more than one popupset in a file, but usually you will have only one.
Now that we've created the popup, it's time to make the popup appear. To do this we need to associate the popup with an element where it should appear. We do this because we only want the popup to appear when the user clicks in a certain area of a window. Typically, this will be a specific button or a box.
To associate the popup with an element, you add one of three attributes to the element. The attribute you add depends on which type of popup you want to create. For plain popups, add a popup attribute to the element. For context popups, add a context attribute. Finally, for tooltip popups, add a tooltip attribute.
The value of the attribute must be set to the id of the popup that you want to have appear. This is why you must put the id on the popup. That way it's easy to have multiple popups in a file.
In the example above, we want to make the popup a context menu. That means that we need to use the context attribute and add it to the element which we want to have the popup associated with. The sample below shows how we might do this:
Example 5.3.1
<popupset>
<popup id="clipmenu">
<menuitem value="Cut"/>
<menuitem value="Copy"/>
<menuitem value="Paste"/>
</popup>
</popupset>
<box context="clipmenu">
<text value="Click for menu"/>
</box>
|
![[Image of popup menu]](images/popups-ex1.jpg)
Here, the popup has been associated with a box. Whenever you context-click
(right-click) anywhere inside the box, the popup menu will appear. The
popup will also appear even if you click on the children of the box so it
will work on the div here. The
context attribute has been used to associate the
box with a popup with the same id. In this case,
the popup clipmenu will appear. This way, you can
have a number of popups and associate them with different elements.
You could associate multiple popups with the same element by putting more attributes of different types on an element. You could also associate the same popup with multiple elements which is one advantage of using the popup syntax.
Popups can only be associated with XUL elements. They cannot be associated with HTML elements. In the example above, we could not have put the context attribute directly on the div tag as it is an HTML element. This is why we needed the box in the previous example.
We'll look at a simple way to create tooltips here. You might use scripts to create the tooltips as you might want one on every element. You wouldn't want to create a tooltip for each element. Tooltips can be created in the same way as other popups. The example below shows how to do this.
Example 5.3.2
<popupset>
<popup id="savetip" style="background-color: #FFFFC0;">
<text value="Click here to save your stuff"/>
</popup>
</popupset>
<button value="Save" tooltip="savetip"/>
|
Here a popup has been associated with the button as a tooltip. When the user moves the mouse over the button, the tooltip will appear in a popup. The background color has been set to yellow to be consistent with the tooltips on some platforms.
By default, the popup and context windows will appear where the mouse pointer is. Tooltips will be placed slightly to the right and down so that the mouse pointer does not obscure it. There are cases however, where you will want to indicate in more detail where the popup appears. For example, the popup menu that appears when you click the back button in a browser should appear underneath the back button, not where the mouse pointer is.
To change the popup position, two additional attributes can be added to the element the popup is associated with. You can also add them to the menupopup element. The first is popupanchor. It indicates which corner of the element the popup should anchor itself at. In the case of the back button, we want the popup to be anchored at the bottom left corner of the back button. That way, it always appears at the same location. The following values are valid:
A second attribute, popupalign, allows you to specify which corner of the popup should appear at the anchored position. In the case of the back button, we want the top left corner of the popup to appear at the anchored position. If we set this attribute to the bottom right corner, the popup would extend up and to the left of the back button. Clearly not what we want. A similar set of values can be used:
The values are similar for both attributes, apart from the none value. By adding one or both of these attributes to an element, you can specify precisely where the popup appears. You cannot specify an exact pixel position.
The example below demonstrates creating a back button with a popup menu.
Example 5.3.3
<popupset>
<popup id="backpopup">
<menuitem value="Page 1"/>
<menuitem value="Page 2"/>
</popup>
</popupset>
<button value="Pop Me Up" popup="backpopup" popupanchor="bottomleft"/>
|
You can also add the two popup attributes to any menupopup tag. This would allow you to change the position of the popup for a menu or a drop-down list. The default anchor position is generally the bottom left corner. For example, the following menu will have its popup appear to the right:
Example 5.3.4
<menu>
<button value="Color:"/>
<menupopup popupanchor="topright">
<menuitem value="Maroon"/>
<menuitem value="Green"/>
<menuitem value="Peach"/>
</menupopup>
</menu>
|
Let's add a simple popup menu to the find files dialog. For simplicity, we'll just replicate the contents of the Edit menu. However, the Cut, Copy and Paste options will only apply to the text field. Let's have the popup only appear when clicking over the text field. Remember that popups can only be attached to XUL elements, not to HTML input elements. We'll have to put a box around the text field.
<popupset>
<popup id="editpopup">
<menuitem value="Cut" accesskey="t"/>
<menuitem value="Copy" accesskey="c"/>
<menuitem value="Paste" accesskey="p" disabled="true"/>
</popup>
</popupset>
.
.
.
<spring style="width: 10px;"/>
<textfield id="find-text" flex="1" style="min-width: 15em;" context="editpopup"/>
|
Here a simple popup that is similar to the edit menu has been added to the text field. If you right-click (Control-click on the Macintosh) on the text field, the popup will appear. However, the popup will not appear if you click anywhere else.
(Next) Next, we'll look at how to create scrolling menus.
Examples: 5.3.1 5.3.2 5.3.3 5.3.4