|
3. 外観の変更と動作の追加2006.09.08 株式会社四次元データ 溝口佑爾
外観の変更と動作の追加
この章では、第２章で作ったアプリケーションの外観や動作を定義します。 3.1. スタイルシートで外観を変更するHTML と同じく、XUL アプリケーションはスタイルシートを使って外見を指定することができます。まずは 'sample2.xul' に次の赤い部分を追加して、パッケージをインストールし直してください。この部分を記述することで、'howareyou.css' というスタイルシートが参照されるようになります。 sample2.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="sample2.css" type="text/css"?>
<window
id="Howareyou"
title="How are you"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox>
<label value="How are you?"/>
<hbox>
<button id="good" label="Good"/>
<button id="bad" label="Bad"/>
<button id="crazy" label="Crazy"/>
</hbox>
</vbox>
</window>
次に、sample2.xul と同じフォルダ ( chrome/sample2/content/sample2/ ) に CSS ファイル 'sample2.css' を作ります。'sample2.css' の中身は次のように記述します。 sample2.css
window#Howareyou {
background-color: blue;
color: white;
font-size: x-large;
font-weight: bold;
}
button#good {
color: white;
background-color: yellow;
font-size: x-large;
font-weight: bold;
}
button#bad {
color: purple;
background-color: white;
text-decoration: underline;
font-family: cursive;
font-size: large;
font-style: oblique;
}
button#crazy {
color: red;
background-color: black;
text-shadow: -0.5em 0.5em 0.5em yellow;
font-family: fantacy;
font-weight: bolder;
}
'sample2.xul' を実行し直して、ボタンの色などが変わっていれば成功です。 3.2. JavaScript で動作を加えるボタンを押したときにアラートを表示させるような動作や、キーボードショートカットを加えてみましょう。動作の定義は JavaScript で行います。 まずはアラートの動作を追加してみましょう。'sample2.xul' の次の赤の部分を変更してください。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="sample2.css" type="text/css"?>
<window
id="Howareyou"
title="How are you"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox>
<label value="How are you?"/>
<hbox>
<button id="good" label="Good" oncommand="alert('GREAT!')"/>
<button id="bad" label="Bad" oncommand="alert('TERRIBLE!')"/>
<button id="crazy" label="Crazy" oncommand="alert('ME, TOO!')"/>
</hbox>
</vbox>
</window>
'sample2.xul' を実行すると、ボタンを押したときにメッセージ付のアラートが表示されます。'oncommand' 属性は値としてスクリプトを持つ属性で、'command' イベントを発動します。'command' イベントは、要素が活性化されたときに発動するイベントです。要素のクリックしても発動するし、Enter キーを押しても発動するところが便利なところです。試しに tab キーと Enter を使ってボタンを押してみてください。クリックと同じくアラートが表示されるはずです。 動作の内容を外部ファイルに記述することもできます。外部ファイルは script 要素の src 属性によって指定することができます。下記のように script 要素の追加と oncommand 属性の変更（赤の部分）を行ってみましょう。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="sample2.css" type="text/css"?>
<window
id="Howareyou"
title="How are you"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="script2.js"/>
<vbox>
<label value="How are you?"/>
<hbox>
<button id="good" label="Good" oncommand="good()"/>
<button id="bad" label="Bad" oncommand="bad()"/>
<button id="crazy" label="Crazy" oncommand="crazy()"/>
</hbox>
</vbox>
</window>
'script2.js' の中身は次のようになります。例によって 'sample2/content/sample2' フォルダに 'script2.js' を追加しましょう。スクリプトファイルはどのようなものを使っても問題ありませんが、通常は拡張子を js にします。 script2.js
function good()
{
alert('GREAT!');
}
function bad()
{
alert('TERRIBLE!');
}
function crazy()
{
alert('ME, TOO!');
}
これで先ほどと同じ動作を実現できます。 最後にキーボードショートカットを追加してみましょう。ウィンドウ要素開始タブの直後に <keyset> 要素を、その中に作りたいショートカットの <key> 要素を入れます。'sample2.xul' に次の赤の部分を追加してください。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="sample2.css" type="text/css"?>
<window
id="Howareyou"
title="How are you"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="script2.js"/>
<keyset>
<key id="close-key" modifiers="control" key="w" oncommand="alert('SEE YOU!'), window.close()"/>
<key id="yeah-key" modifiers="control" key="y" oncommand="alert('YEAH!')"/>
</keyset>
<vbox>
<label value="How are you?"/>
<hbox>
<button id="good" label="Good" oncommand="good()"/>
<button id="bad" label="Bad" oncommand="bad()"/>
<button id="crazy" label="Crazy" oncommand="crazy()"/>
</hbox>
</vbox>
</window>
これで Ctrl キー と y の同時押しでアラートを表示し、Ctrl キー と w の同時押しでウィンドウを閉じることができるようになりました。
|
|
