この翻訳は不完全です。英語から この記事を翻訳 してください。
このページでは、ユーザ インターフェースを作成する言語を解説します。これは Mozilla 特有の言語です。
簡単なデモを作り、Mozilla ブラウザで実行してみましょう。
ユーザ インターフェース
HTML ではユーザ インターフェースをある程度サポートしていますが、スタンドアローンのアプリケーションを作成するのに必要な機能は十分に備わっていません。
Mozilla は、ユーザ インターフェイス作成用の言語 XUL (XML ユーザ インタフェース言語、"ズール" と読まれることが多い) を開発し、HTML の制約を解消しました。
XUL では、よく使われるユーザ インターフェースの機能が最初から組み込まれています。例えば、ダイアログやウイザードといった特殊なウィンドウ、ステータス バー、メニュー、ツール バーなどです。ブラウザーさえも組み込まれています。
XUL をこのチュートリアルで紹介されてきた CSS スタイル、JavaScript コードや XBL バインディングと組み合わせて使うと、高度な専用機能を部品から作成することができます。
他の XML ベースの言語と同じように、XUL でも CSS スタイルシートを使用します。
| XUL ユーザー インターフェースの詳細は、この wiki の XUL ページをご覧下さい。 |
実例: XUL デモ
XUL ドキュメント ファイルをプレーン テキスト ファイル (doc7.xul) で新規作成します。下記の内容を一番下までスクロールし、すべての行をコピー & ペーストしてください。
<?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;
}
テキストファイルを 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())
}
}
ここでは、ブラウザーのデフォルト テーマを使用してください。デモの結果が筆者の意図した通りになるようにするためです。もし他のテーマを使ってしまうと、ユーザー インターフェースの スタイルが違ったものになり、デモが変わった結果になるかもしれません。
Mozilla ブラウザーで XUL ドキュメントを開きインターフェースを使ってみてください。
この wiki は XUL とページ内 JavaScript に対応していないので、ここではデモをお見せできませんが下のようになるはずです。
|
XUL demonstration Day of week calculator
June 27, 2005 |
このデモで注目すべき点は下記の通りです。
- XUL ドキュメントは、良くあるようにスタイルシートにリンクし、スクリプトにもリンクしています。
- このデモではスクリプトはそんなに重要ではありません。
- ここで見られるスタイルの多くは、ブラウザーのテーマで決定されています。
ドキュメントのスタイ-ルシートをよく見て、その中のルールをすべて理解しているか確認してください。もし分からないものがあったらコメント アウトして、ブラウザーでリロードしてください。するとそのルールが無効になることで、どのような変化があるかが分かります。
| 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.