Image Button/Menu Button Spec
by Mike Pinkerton
Last Modified 2/24/98
Overview
This document is the engineering details behind the Image Button/Menu Button Requirements document. It supplements that document with examples and a comprehensive listing of attributes and parent/child relationships.
Syntax
The XUL syntax for Image Buttons and Menu Buttons. The only difference between the two should be the presence or absence of child nodes in the content tree. There shouldn't be any need for separate tags.
|
Tag |
Attributes |
Description |
|
titledbutton |
src |
Image (gif, jpeg, etc) displayed within the button |
|
align |
Position of text in relation to the image. For example, "bottom" means the text is below the image. |
|
|
value |
Descriptive text for the button |
Style
[ This area really needs work ]
|
Tag |
Style Attributes |
Description |
|
titledbutton |
color |
Color of descriptive text |
|
border |
as in HTML |
|
|
background-color |
as in HTML |
|
|
border-style |
as in HTML |
Event Handlers
[ Info forthcoming ]
Examples
Here is an example of XUL for a toolbar which has a button on it that executes an exposed function on an appcore.
<?xml version="1.0"?>
<window xmlns:html="http://www.w3.org/1999/xhtml">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<html:style type="text/css">
toolbar { background-color=lightGray; background-image=url(marble.gif) }
titledbutton { background-color=lightGray }
</html:style>
<html:script>
function BrowserBack()
{
appCore = XPAppCoresManager.Find("BrowserAppCore");
if (appCore != null) {
appCore.back();
} else {
dump("BrowserAppCore has not been created!\n");
}
}
</html:script>
<window>
<broadcaster id="canGoBack"/>
<toolbar>
<titledbutton src="Back.gif" align="bottom" value="Back" onclick="BrowserBack()">
<observes element="canGoBack" attribute="disabled"/>
</titledbutton>
</toolbar>
</window>
Note that this example doesn't show more complicated features such as:
- how to get a menu or a tree to display on a button
- how to hook up a button to an RDF data source for showing a local data hierarchy (like bookmarks) in a popdown tree
- how to customize the look of a button with CSS
These will appear here shortly.
maintained by Mike Pinkerton (pinkerton@netscape.com)