148 lines
5.5 KiB
XML
148 lines
5.5 KiB
XML
<?xml version="1.0"?>
|
|
<?xml-stylesheet href="xul.css" type="text/css"?>
|
|
|
|
<!DOCTYPE window>
|
|
|
|
<window xmlns:html="http://www.w3.org/TR/REC-html40"
|
|
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
|
title="Mozilla Sample App Shell Component"
|
|
width="425"
|
|
height="180"
|
|
onload="onLoad()">
|
|
|
|
<data>
|
|
<!--
|
|
Place your broadcaster's within this element. There is
|
|
no significance to the <data> element itself, except as a
|
|
container for the broadcasters.
|
|
|
|
By convention, each broadcaster has the id "data.foo".
|
|
This permits "foo" to be used for a corresponding UI
|
|
element, which will have id "dialog.foo" (see below).
|
|
-->
|
|
<broadcaster id="data.input" value=""/>
|
|
<broadcaster id="data.output" value=""/>
|
|
<!--
|
|
The broadcaster with id="data.execute" is, by convention,
|
|
special in that it is a "reverse" broadcaster, used to
|
|
send notifications from the UI to the underlying C++ code.
|
|
|
|
There will generally be a set of "commands" that the C++
|
|
code supports. The UI indicates the requested command by
|
|
setting the command attribute of this broadcaster. The
|
|
setting of that attribute also triggers the command.
|
|
|
|
"Parameters" are passed via other attributes on this element,
|
|
or, via attributes on other broadcaster elements (as in this
|
|
example). If you use other attributes, then take care to set
|
|
those attributes before the command attribute (as that will
|
|
trigger the command execution).
|
|
-->
|
|
<broadcaster id="data.execute" command=""/>
|
|
</data>
|
|
|
|
<html:script>
|
|
/*
|
|
The variables "data" and "dialog", by convention, are generic
|
|
JS Objects with properties corresponding to corresponding
|
|
document elements. For example, in this sample .xul file,
|
|
the "input" property of the variable data refers to the
|
|
document element with id "data.input".
|
|
|
|
The properties of these objects are set in the functions
|
|
initData() and initDialog(), respectively.
|
|
*/
|
|
var data;
|
|
var dialog;
|
|
|
|
/*
|
|
initData is called by the onload handler. It creates the
|
|
data Object and sets each property of interest.
|
|
*/
|
|
function initData() {
|
|
data = new Object;
|
|
data.input = document.getElementById( "data.input" );
|
|
data.output = document.getElementById( "data.output" );
|
|
data.execute = document.getElementById( "data.execute" );
|
|
}
|
|
|
|
/*
|
|
initDialog does likewise for the dialog object and properties.
|
|
*/
|
|
function initDialog() {
|
|
dialog = new Object;
|
|
dialog.input = document.getElementById( "dialog.input" );
|
|
dialog.output = document.getElementById( "dialog.output" );
|
|
dialog.close = document.getElementById("dialog.close");
|
|
}
|
|
|
|
/*
|
|
loadDialog is called by the onload handler. It should load
|
|
the dialog (UI) controls from appropriate data fields and
|
|
otherwise set up for display of the dialog.
|
|
*/
|
|
function loadDialog() {
|
|
}
|
|
|
|
/*
|
|
onLoad is the onload handler. It initializes the data, then
|
|
the dialog, then loads the initial dialog contents.
|
|
*/
|
|
function onLoad() {
|
|
// Init data.
|
|
initData();
|
|
|
|
// Init dialog.
|
|
initDialog();
|
|
|
|
// Fill dialog.
|
|
loadDialog();
|
|
}
|
|
|
|
/*
|
|
onClose is the onclick handler for the dialog's close button.
|
|
It issues the "close" command to the underlying C++ code
|
|
(which will presumably close the window).
|
|
*/
|
|
function onClose() {
|
|
// Close the window.
|
|
data.execute.setAttribute( "command", "close" );
|
|
}
|
|
</html:script>
|
|
|
|
<html:table style="width:100%;">
|
|
<html:tr>
|
|
<html:td colspan="5">
|
|
<html:center><html:h1>XUL Dialog Tests</html:h1></html:center>
|
|
<html:br/>
|
|
This dialog demonstrates use of XUL dialogs. You can cause the
|
|
dialog to be opened from C++ or JavaScript. The dialog can be
|
|
displayed modally or not.
|
|
<html:br/>
|
|
Input: <html:input id="dialog.inpout"/>
|
|
<html:br/>
|
|
Output: <html:input id="dialog.output"/>
|
|
</html:td>
|
|
</html:tr>
|
|
|
|
<html:tr>
|
|
<html:td style="width:20%">
|
|
<html:button id="dialog.more" onclick="onCPPNonModal()" disabled="">Non-modal C++...</html:button>
|
|
</html:td>
|
|
<html:td style="width:20%">
|
|
<html:button id="dialog.pick" onclick="onJSNonModal()" disabled="">Non-modal JS...</html:button>
|
|
</html:td>
|
|
<html:td style="width:20%">
|
|
<html:button id="dialog.save" onclick="onCPPModal()">Modal C++...</html:button>
|
|
</html:td>
|
|
<html:td style="width:20%">
|
|
<html:button id="dialog.save" onclick="onJSModal">Modal JS...</html:button>
|
|
</html:td>
|
|
<html:td style="width:20%">
|
|
<html:button id="dialog.close" onclick="onClose()">Close</html:button>
|
|
</html:td>
|
|
</html:tr>
|
|
</html:table>
|
|
|
|
</window>
|