This page illustrates Mozilla's specialized language for creating user interfaces.
You create a simple demonstration that runs in your Mozilla browser.
Information: User interfaces
Although HTML has some support for user interfaces, it does not support all the features that you need to make a standalone application.
Mozilla overcomes this limitation by providing a specialized language for creating user interfaces: XUL (XML User-interface Language, usually pronounced like "zool").
In XUL, many common user interface features are built in. For example, XUL provides specialized windows like dialogs and wizards, as well as status bars, menus, tool bars, and even browsers.
More specialized features can be built from parts by using XUL together with other technologies that you have seen in this tutorial: CSS style, JavaScript code, and XBL bindings.
Like other XML-based languages, XUL uses CSS stylesheets.
| For more information about XUL user interfaces, see the XUL page in this wiki. |
Action: A XUL demonstration
Make a new XUL document as a plain text file, doc7.xul. Copy and paste the content from here, making sure that you scroll to get all of it:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style7.css"?>
<!DOCTYPE window>
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="CSS Getting Started - XUL demonstration"
onload="init();">
<script type="application/javascript" src="script7.js"/>
<label class="head-1" value="XUL demonstration"/>
<vbox>
<groupbox class="demo-group">
<caption label="Day of week calculator"/>
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row>
<label class="text-prompt" value="Date:"
accesskey="D" control="date-text"/>
<textbox id="date-text" type="timed"
timeout="750" oncommand="refresh();"/>
</row>
<row>
<label value="Day:"/>
<hbox id="day-box">
<label class="day" value="Sunday" disabled="true"/>
<label class="day" value="Monday" disabled="true"/>
<label class="day" value="Tuesday" disabled="true"/>
<label class="day" value="Wednesday" disabled="true"/>
<label class="day" value="Thursday" disabled="true"/>
<label class="day" value="Friday" disabled="true"/>
<label class="day" value="Saturday" disabled="true"/>
</hbox>
</row>
</rows>
</grid>
<hbox class="buttons">
<button id="clear" label="Clear" accesskey="C"
oncommand="clearDate();"/>
<button id="today" label="Today" accesskey="T"
oncommand="setToday();"/>
</hbox>
</groupbox>
<statusbar>
<statusbarpanel id="status"/>
</statusbar>
</vbox>
</window>
Make a new CSS file, style7.css. Copy and paste the content from here, making sure that you scroll to get all of it:
/*** XUL demonstration ***/
window {
-moz-box-align: start;
background-color: -moz-dialog;
font: -moz-dialog;
padding: 2em;
}
.head-1 {
font-weight: bold;
font-size: 200%;
padding-left: 5px;
}
/* the group box */
.demo-group {
padding: 1em;
}
.demo-group grid {
margin-bottom: 1em;
}
.demo-group column {
margin-right: .5em;
}
.demo-group row {
margin-bottom: .5em;
}
.demo-group .buttons {
-moz-box-pack: end;
}
/* the day-of-week labels */
.day {
margin-left: 1em;
}
.day[disabled] {
color: #777;
}
.day:first-child {
margin-left: 4px;
}
/* the left column labels */
.text-prompt {
padding-top: .25em;
}
/* the date input box */
#date-text {
max-width: 8em;
}
/* the status bar */
statusbar {
width: 100%;
border: 1px inset -moz-dialog;
margin: 4px;
padding: 0px 4px;
}
#status {
padding: 4px;
}
#status[warning] {
color: red;
}
Make a new text file, script7.js. Copy and paste the content from here, making sure that you scroll to get all of it:
// XUL demonstration
var dateBox, dayBox, currentDay, status; // elements
// called by window onLoad
function init() {
dateBox = document.getElementById("date-text")
dayBox = document.getElementById("day-box")
status = document.getElementById("status")
setToday();
}
// called by Clear button
function clearDate() {
dateBox.value = ""
refresh()
}
// called by Today button
function setToday() {
var d = new Date()
dateBox.value = (d.getMonth() + 1)
+ "/" + d.getDate()
+ "/" + d.getFullYear()
refresh()
}
// called by Date textbox
function refresh() {
var d = dateBox.value
var theDate = null
showStatus(null)
if (d != "") {
try {
var a = d.split("/")
var theDate = new Date(a[2], a[0] - 1, a[1])
showStatus(theDate)
}
catch (ex) {}
}
setDay(theDate)
}
// internal
function setDay(aDate) {
if (currentDay) currentDay.setAttribute("disabled", "true")
if (aDate == null) currentDay = null
else {
var d = aDate.getDay()
currentDay = dayBox.firstChild
while (d-- > 0) currentDay = currentDay.nextSibling
currentDay.removeAttribute("disabled")
}
dateBox.focus();
}
function showStatus(aDate) {
if (aDate == null) {
status.removeAttribute("warning")
status.setAttribute("label", "")
}
else if (aDate === false || isNaN(aDate.getTime())) {
status.setAttribute("warning", "true")
status.setAttribute("label", "Date is not valid")
}
else {
status.removeAttribute("warning")
status.setAttribute("label", aDate.toLocaleDateString())
}
}
To see the result exactly as intended, use the default theme in your browser. If you use a different theme, it changes some user-interface styles and the demonstration might look strange.
Open the document in your Mozilla browser and use the interface.
This wiki does not support XUL and JavaScript in pages, so it is not possible to show the demonstration here. It looks something like this:
|
XUL demonstration Day of week calculator
June 27, 2005 |
Notes about this demonstration:
- The XUL document links the stylesheet as usual, and it also links the script.
- The script is not important in this demonstration.
- Much of the style that you see is determined by your browser's theme.
Examine the document's stylesheet to ensure that you understand all the rules there. If there is a rule that you do not understand, comment it out and refresh your browser to see the effect on the document.
| Use the DOM Inspector tool to examine the Date textbox. It is made up of other elements that are generated by its XBL binding.
Discover the class of its Using this knowledge, add a rule to the stylesheet that makes the background of the Date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else). |
What next?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
In this demonstration, you see the standard rectangular shapes that are common to most user interfaces. Mozilla also supports a specialized graphics language for creating shapes, using CSS stylesheets to specify the style. The next page demonstrates this: SVG and CSS.