XUL を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
XUL では、ベクタグラフィックスの定義に SVG を使用することが出来ます。
XUL では、SVG をシームレスに扱うことができるので、1本のファイルで作成することにします。
「Hello, world!」には 2通りのグラデーションをかけます。
これを「tabbox（タブボックス）」コンポーネントを使用して切り替え表示できるようにします。
Firefox のユーザは実際に動かしてみることができます。
以下に、他のブラウザのユーザのために実行イメージを掲載しておきます。
作成と実行
作成
適当なテキストエディタを使用して、hello.xul を作成します。
hello.xul
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<hello xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<xul:tabbox>
<xul:tabs>
<xul:tab label="Horizontal" />
<xul:tab label="Vertical" />
</xul:tabs>
<xul:tabpanels>
<xul:tabpanel>
<svg:svg version="1.1" width="350" height="100">
<svg:rect x="5" y="5" width="340" height="90" rx="10"
stroke-width="5" stroke="black" fill="slateblue" />
<svg:defs>
<svg:linearGradient id="Horizontal"
x1="0" y1="0" x2="1" y2="0">
<svg:stop offset="0.1" stop-color="darkorange" />
<svg:stop offset="0.9" stop-color="yellow" />
</svg:linearGradient>
</svg:defs>
<svg:text x="30" y="65"
font-size="40" font-family="Georgia"
font-style="italic" font-weight="bold"
fill="url(#Horizontal)">
Hello, world!
</svg:text>
</svg:svg>
</xul:tabpanel>
<xul:tabpanel>
<svg:svg version="1.1" width="350" height="100">
<svg:rect x="5" y="5" width="340" height="90" rx="10"
stroke-width="5" stroke="black" fill="slateblue" />
<svg:defs>
<svg:linearGradient id="Vertical"
x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0.1" stop-color="darkorange" />
<svg:stop offset="0.9" stop-color="yellow" />
</svg:linearGradient>
</svg:defs>
<svg:text x="30" y="65"
font-size="40" font-family="Georgia"
font-style="italic" font-weight="bold"
fill="url(#Vertical)">
Hello, world!
</svg:text>
</svg:svg>
</xul:tabpanel>
</xul:tabpanels>
</xul:tabbox>
</hello>
|
実行
ローカルで実行するには、上で作成した hello.xul をブラウザで開くだけで OK です。
hello.xul をダブルクリックしても構いません。
hello.xul を Webページに埋め込むには、object 要素を使用して次のようにします（これは、一例に過ぎません）。
<object type="application/vnd.mozilla.xul+xml"
data="/usr/2007/169/hello.xul"
width="400" height="145">
</object>
<a href=""></a>
|
さらに .htaccess を作成して、XULファイルの Content-Type を application/vnd.mozilla.xul+xml に設定します。
これを設定しないと、Content-Type に text/xml などが設定されてしまい、正しく処理できなくなります。
.htaccess
AddType application/vnd.mozilla.xul+xml .xul
|
