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/TR/REC-html40">
<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.