{{ CSSTutorialTOC() }}
本页用来描述创建用户界面的Mozilla特定语言。
你可以创建一个小型的DEMO在你的火狐浏览器中运行。
Information: 用户界面
虽然HTML已经差不多可以支持用户界面，但是HTML却不能完全支持创建一个独立程序（用户界面）时所需要的所有特性。
Mozilla 克服这方面的困难，创建了一种能用于创建用户界面的特定语言，这种语言就是：XUL (基于XML的用户界面描述语言, 通常这个单词发音类似于 "zool").
很多通用的与用户界面相关的特性都内建到了XULI中，n XUL,例如XUL除了提供类似于windows系统中的对话框和wizard外，还提供了状态栏、菜单、工具栏甚至是“浏览器 ”。
更多特定的功能可通过使用XUL与一些其他的技术（在CSS、JavaScript以及XBL bindings中有提到过）相结合实现，
与其他基于XML的语言一样，XUL也利用CSS来进行布局。
| 更多关于XUL方面的信息，请参看XUL 页面 |
Action: 一个XUL案例
用创建纯文本文档的形式创建一个新的XUL文档，并命名为doc7.xul，复制、粘贴下面的内容（滑动右侧的滚动条，确保把框内的内容复制完全） C
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style7.css"?>
<!DOCTYPE window>
<window
xmlns="https://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>
创建一个新的CSS文档，命名为style7.css，并复制、粘贴下列框内的内容。
/*** 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;
}
创建一个新的CSS文档，命名为script7.js，e, script7.js. 并复制、粘贴下列框内的内容。
// 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.