From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../getting_started/xul_user_interfaces/index.html | 303 --------------------- 1 file changed, 303 deletions(-) delete mode 100644 files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html (limited to 'files/ja/web/guide/css') diff --git a/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html b/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html deleted file mode 100644 index 035c65e106..0000000000 --- a/files/ja/web/guide/css/getting_started/xul_user_interfaces/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: XUL ユーザ インターフェース -slug: Web/Guide/CSS/Getting_started/XUL_user_interfaces -translation_of: Archive/Beginner_tutorials/XUL_user_interfaces ---- -

{{ CSSTutorialTOC() }}

-

このページでは、ユーザ インターフェースを作成する言語を解説します。これは 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="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>
-
-
-

次に、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

- - - - - - - - - - - - - - - -
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
  -
-

Clear Today

-
-
-
-
-

June 27, 2005

-
-
-

このデモで注目すべき点は下記の通りです。

- -

ドキュメントのスタイ-ルシートをよく見て、その中のルールをすべて理解しているか確認してください。もし分からないものがあったらコメント アウトして、ブラウザーでリロードしてください。するとそのルールが無効になることで、どのような変化があるかが分かります。

- - - - - - - -
- チャレンジ
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 html:input element. This is the element that actually receives user input.

-

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.

-- cgit v1.2.3-54-g00ecf