Firefox Hacks [Electronic resources] نسخه متنی

Hack 68. Make Applications and Extensions with XUL

height="36" SRC="/image/library/english/10055_hack68.gif;379354">

Make an application rather than a web page by
filling a Firefox window with XUL.

Many books have been written on the craft of making web pages with
HTML, and this hack won't cover that broad category.
Crafting whole XUL
applications
(or
extensions,
which are application pieces) is a similar process. XUL can run
standalone (as discussed in this hack) or mixed with HTML [Hack #60] . There is extensive source
material on XUL development. Chapter 7
and Chapter 8 in this book explain how to deploy
or install XUL content once it's created. This hack
offers a first taste of the XUL tags that can go into such content.

XUL describes user interface elements such as menu bars and
scrollbars, just as XHTML describes links and paragraphs of text. It
addresses a problem space that HTML is not ideally designed for. It
allows record management, content management, control systems, and
other nontextual applications to run over the Web without having to
bend hypertext content into shape to do it.

6.12.1. Make and Display an XUL Demo

The following document is the start of an XUL-based application. It
should be stored in a file with a .xul
extension, such as test.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="?>
<?xul-overlay    href="?>
<window 
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Example App" 
>
<script src="/image/library/english/10055_/image/library/english/10055_example.js"/>
<stringbundle id="str-example"
src="/>
<command id="cmd_start" oncommand="doStart( );"/>
<command id="cmd_stop" oncommand="doStop( );"/>
<keyset id="hotkeys">
<key id="key_start" key="A" command="cmd_start"/>
<key id="key_stop"  key="Z" command="cmd_stop"/>
</keyset>
<toolbox id="top-controls">
<menubar id="top-menubar">
<menu label="File" accesskey="F">
<menupopup id="menu1">
<menuitem id="menu_start" label="Start" accesskey="A"
command="cmd_start"/>
<menuitem id="menu_stop"  label="Stop" accesskey="Z"
command="cmd_stop"/>
</menupopup>
</menu>
<box flex="1"/>
<menu label="Help" accesskey="H">
<menupopup>
<menuitem id="menu_help" label="Get help" accesskey="H"
command="cmd_help"/>
</menupopup>
</menu>
</menubar>
</toolbox>
<hbox flex="1">
<vbox flex="1"> 
<description>Left</description>
</vbox> 
<scrollbar orient="vertical"/>
<vbox flex="1"> 
<description>Right</description>
<tabbox>
<tabs>
<tab label="First"/>
<tab label="Second"/>
</tabs>
<tabpanels>
<tabpanel>
<description>First Content</description>
</tabpanel>
<tabpanel>
<description>Second Content</description>
</tabpanel>
</tabpanels>
</tabbox>
</vbox> 
</hbox>
<stack style="font-family: Arial" flex="1">
<description style="color:red; font-size:48px;">Red</description>
<description style="color:green; font-size:24px;">&#xA0;Green
</description>
</stack>
</window>

Notice in this listing how keystroke and menu items are tied to
commands; the commands' ID values are put in those
items' command attributes.
Similarly <command> tag
oncommand attributes specify specific JavaScript
functions. That's how you get an XUL window to do
any processingby hooking commands up to keystrokes and GUI
features. The other tags show some typical XUL widgets that you
can't easily create with plain HTML: a menu bar with
two menus, a standalone scrollbar that isn't
attached to anything, a tab box, and stacked text.

The bolded lines should be omitted or commented out with XML comments
(<!-- and -->) if this
file is created for ad hoc testing purposes. These lines, which
include chrome: URLs, can only be used if the XUL
document is bundled up into a chrome package [Hack #86] . You can put back the
<script> tags if you use locally stored
scripts, for example:

<script src="/image/library/english/10055_test.js"/>

To test the reduced file, just load its URL into a normal browser
window, or start Firefox from the command line as follows. For
Windows:

firefox -chrome file:///C:/tmp/test.xul

For Unix/Linux and the Mac OS X BSD command line:

firefox -chrome file:///tmp/test.xul

Figure 6-11 shows the resulting window halfway
through a mouse menu-selection gesture.

Figure 6-11. Sample XUL window

6.12.2. Send XUL Application Data to a Server

XUL doesn't have
the HTML concept of a form; the whole XUL window effectively is a
form. To send data to the server that the .xul
page came from, change the previous example as follows.

You must also have the server set up properly [Hack #27] .

Replace this line:

<script src="/image/library/english/10055_/image
/library/english/10055_example.js"/>

with this line:

<script src="/image/library/english/10055_example.js"/>

Create the /image/library/english/10055_example.js file in the same directory
as the .xul file. It contains this script:

function doStart(  ) {
var req = new XMLHttpRequest(  ); 
req.open("GET", "test.cgi?action=start", false);
try {
req.send(");
if (req.status / 100 != 2 )
alert("Server Failed! HTTP status: " + req.status);
}
catch (e) {
alert("Request Failed! Error: " + e);
}
}

The try wrapper block is required only if you are
too lazy to look in the JavaScript Console for errors. Since the
doStart() function is hooked up to the
cmd_start command, you can run it by choosing
Start from the File menu. Security restrictions prevent you from
submitting data to servers other than to the one the .XUL file
originated from. If you load the .xul file from
an ad hoc local file, such form submissions have nowhere to go, and
an error will result. To get around this, the file must be placed in
the chrome [Hack #86] and a full
chrome: URL must be used.

6.12.3. See Also

See Chapter 7 and Chapter 8 of this book for more on managing XUL content
once it is created. For the theory and detail of XUL programming, see
the remaining references in this list.

Rapid Application Development with Mozilla
(Prentice Hall Professional Technical References) by Nigel McFarlane
is a comprehensive description of and tutorial on XUL and many
related Mozilla technologies. On the subject of XUL, it is the most
systematic and popular work in print.

Creating Applications With Mozilla
(O'Reilly) by Brian King et al is a shorter
treatment that provides a speedy tour through the world of XUL.

XULPlanet