XVCDを使用してボキャブラリコンポーネントを作成する手順を、簡単な例を示して説明します。
この チュートリアルでは、XVCDによるボキャブラリコンポーネントの開発作業を、わかりやすさを優先した非常に簡単な例題を使い、順を追って見ていきます。このチュートリアルを実践することで、XVCDプログラミングの一歩を踏み出すことができます。
このチュートリアル内のサンプルコードは、xfy Developer's Toolkit配布パッケージ内のdoc/dev/samples/features/tutorial/に収録されています。xfy Developer's Toolkitには、このチュートリアルのほかにも豊富なXVCDサンプルが用意されています。ぜひ、それらのサンプルもご覧ください。
なお、このチュートリアルでは、xfy technologyユーザーエージェントとして、xfy Basic Editionを使用します。
このチュートリアルは、以下に挙げた項目に対してある程度の知識があり、簡単な例を実践することができるスキルを持っている方を読者に想定しています。
xfy Basic Editionを使ってチュートリアルを始める前に、xfy Developer's Toolkitをインストールしましょう。xfy Developer's Toolkitがインストールされていないと、XVCDで開発中のボキャブラリコンポーネントを読み込むことができません。
xfy Basic Edition 1.0ではxfy Developer's Toolkitがあらかじめ導入されていますので、あらためて導入を行う必要はありません。
xfy Developer's Toolkit のインストール手順は、xfy Developer's Toolkit 配布パッケージ内の導入手順文書（installation_dev.ja.html）を参照してください。
また、xfy Basic Editionでブラウズバーを表示すると便利です。xfy Basic Editionをインストールした直後は、ブラウズバーは表示されていません。ブラウズバーを表示するには、［表示-ブラウズバー］を選択します。
最初のステップでは、XML文書をxfy Basic Editionで表示させます。この章では、xfy Basic Editionで動作するボキャブラリコンポーネントをXVCDで作るための最小セットを知ることができます。
由緒正しい Hello World! を例に解説します。 必要なものは、表示対象となるXML文書ファイルと、XVCDによるボキャブラリコンポーネントです。
まず、表示対象となるXML文書ファイルを用意します。 ここでは、次のようなXML文書を作成します。
<?xml version="1.0"?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Hello World!
</hw:message>
</hw:document>
このXML文書は、hw:document要素の子要素として hw:message要素があります。 また、hw:message要素の中に「Hello World!」という文字列が書かれています。
XML文書が作成できたら、HelloWorld.xmlというファイル名で適切なフォルダに保存します。
次に、XVCDによるボキャブラリコンポーネントを作成します。上記のXML文書を表示するためのXVCDは、次のとおりです。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>
<xvcd:template name="root">
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:value-of select="."/>
</p>
</xvcd:template>
</xvcd:xvcd>
これで、XVCDによる最小限のボキャブラリコンポーネントの完成です。このボキャブラリコンポーネントは、hw:message要素の内容を表示するだけのごく簡単なものです。
作成したXVCDは、HelloWorld.xvcdというファイル名で保存します。HelloWorld.xvcdは、HelloWorld.xmlと同じフォルダに保存してください。
ここで、HelloWorld.xmlとHelloWorld.xvcdを関連付けます。 HelloWorld.xmlをテキストエディタで開き、次のように変更します。 強調文字で表記した箇所が、変更された箇所です。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Hello World!
</hw:message>
</hw:document>
HelloWorld.xmlを変更できたら、上書き保存してテキストエディタを終了します。
xfy technologyのボキャブラリコンポーネントを作成するには、Javaによる方法と、XVCDによる方法の2種類があります。基本的に、ボキャブラリコンポーネントをxfy technologyユーザーエージェントで使用するには、どちらの方法で作成しても、Jarファイルを作成してxfy technologyユーザーエージェントの環境にインストールする必要があります。（XVCDによるボキャブラリコンポーネントの場合は、scriptsフォルダ以下にXVCDファイルを置くことでボキャブラリコンポーネントとして使用できる簡易なインストール方法も用意されています。）また、コンポーネントをインストールしたあとは、xfy technologyユーザーエージェントを再起動する必要があります。
しかし、開発しているボキャブラリコンポーネントの動作を確認するためには、何度もインストールと xfy technologyユーザーエージェントの再起動を繰り返さなければならないため、非常に手間と時間がかかる作業となります。
そこで、XVCDによるボキャブラリコンポーネントの開発を効率的に進めることができるように、処理命令（Processing Instruction）でXML文書ファイルと関連付けるXVCDファイルを指定し、ボキャブラリコンポーネントを一時的に登録できる方法が用意されています。この方法で登録されたXVCDボキャブラリコンポーネントは、xfy technologyユーザーエージェントにインストールしなくても使用できます。また、XVCDファイルを変更したときも、xfy technologyユーザーエージェントを再起動する必要はありません。XML文書ファイルを再読込すると、XVCDファイルの変更まで反映されて表示されます。
なお、この処理命令によるXVCDファイルの関連付けとボキャブラリコンポーネントの一時的な登録は、xfy Developer's Toolkitをインストールしている場合のみ有効です。
さっそく、xfy Basic EditionでHelloWorld.xmlを表示してみましょう。
いかがですか、次の図のように表示されましたか？
Hello World!
以上、表示対象となる XML文書ファイルと、XVCD によるボキャブラリコンポーネントを作成しました。また、XML文書ファイルと XVCD ファイルを関連付け、ボキャブラリコンポーネントを登録する方法を学びました。 そしてxfy Basic Editionで Hello World! と表示されることを確認しました。
［XVCDによるボキャブラリコンポーネントの作成］では、HelloWorld.xvcdは、hw:message要素の内容を表示するだけのごく簡単なもの、とだけ紹介しました。 ここでは、HelloWorld.xvcdの内容を詳しく説明します。
もう一度、HelloWorld.xvcdを見てみましょう。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>
<xvcd:template name="root">
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:value-of select="."/>
</p>
</xvcd:template>
</xvcd:xvcd>
勘のよい方は、XSLTの記述方法に似ていることに気が付くでしょう。 同じような結果が得られるXSLTは、次のとおりです。
<?xml version="1.0"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="hw:message">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>
</xsl:stylesheet>
それぞれの template要素の部分は、ほぼ同じ内容となっています。XVCD のテンプレート部分の仕様はXSLT 1.0にほぼ準拠し、さらにXML文書の編集のために必要な機能を拡張しています。
xfy Basic Editionは変換元となる編集対象XML文書をXVCDで定義された規則（テンプレート）に則って変換することで、ビューを作成しています。 HelloWorld.xvcdの例では、HelloWorld.xmlをXHTMLに変換して表示しています。 XSLTを理解できていれば、XVCDも容易に習得することができます。
それでは、HelloWorld.xvcdがどうなっているか、詳細を見てみましょう。
<?xml version="1.0"?>
<!-- XVCDはXMLなので、XML宣言から始まります -->
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<!--
xvcd:xvcd : XVCDの頂点要素
xmlns:xvcd : XVCDのXML名前空間宣言
xmlns : XHTMLのXML名前空間宣言
xmlns:hw : HellowWorldボキャブラリのXML名前空間宣言
version : XVCD のバージョン番号
-->
<xvcd:vocabulary name="HelloWorld" match="hw:document" call-template="root"/>
<!-- ボキャブラリコンポーネントとして登録されるための宣言 -->
<xvcd:template name="root">
<!-- rootという名前のテンプレート -->
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<!-- hw:messageにマッチする場合に適用されるテンプレート -->
<p>
<xvcd:value-of select="."/>
</p>
</xvcd:template>
</xvcd:xvcd>
xvcd:xvcd要素
http://xmlns.xfytec.com/xvcd です。
xvcd:vocabulary要素
match属性の値に指定されたパターンに一致する要素を頂点とする部分木を処理対象とするボキャブラリコンポーネントを宣言する要素です。ある要素に複数のxvcd:vocabulary要素がマッチする場合は、［ツール-ボキャブラリコンポーネントの切り替え］などで表示される切り替え可能なコンポーネントの数が増えます。 この要素の内容には、ボキャブラリ名や、メニューやツールバーなどのユーザーインターフェイス定義などを記述します。
xvcd:template要素
template要素とほぼ同じものと考えれば良いでしょう。 基本的には変換後のXML文書をそのまま記述します。必要に応じて、
xvcd:value-of要素や
xvcd:text-of要素で変換元のXML文書を参照したり、
xvcd:apply-templates要素や
xvcd:call-template要素でほかのテンプレートを呼び出したりします。
VC中核の詳細な仕様については、 VC中核リファレンスをご覧ください。
続いて、HelloWorld.xvcdの処理の流れを追います。
xfy Basic EditionでHelloWorld.xmlを開くと、xfy Basic Editionは次の処理を行います。
com.xfytec vocabulary-connection処理命令の記述で、HelloWorld.xvcdに記述されているボキャブラリコンポーネントがxfy Basic Editionに登録され、使用できるようになります。
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<xvcd:vocabulary match="hw:document" name="HelloWorld" call-template="root"/>
HelloWorldという名前のボキャブラリコンポーネントが適用されます。
xvcd:vocabulary要素のcall-template属性に設定された値を参照して、適用するテンプレートを呼び出します。rootという名前のテンプレートが呼び出されます。rootテンプレートは、次のように記述された
xvcd:template要素の内容です。
<xvcd:template name="root">このテンプレートが適用され、順次、変換後のXML文書が構築されます。
rootテンプレートに記述された
xvcd:apply-templates要素により、コンテキストノードの内容の処理は、ほかで定義されているテンプレートへ委譲されます。 xsl:apply-templates要素と同じです。
hw:message要素用に定義されたテンプレートを適用します。xvcd:template要素の内容です。
<xvcd:template match="hw:message">このテンプレートの次の記述が処理された結果、
hw:message要素の内容に記述された「Hello world!」 が、変換後のXML文書に追加されます。
<xvcd:value-of select="."/>
変換後のXML文書の構築結果は、次のとおりです。
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HelloWorld example</title>
</head>
<body>
<p>
Hello world!
</p>
</body>
</html>
xfy Basic Editionはこの変換後のXML文書を元に、XHTMLボキャブラリコンポーネントを使用して画面に表示します。
ここで学んだことをまとめておきます。
［XML文書の表示］では、xfy Basic Editionで「Hello World!」と表示する方法について学びました。表示だけならXSLTでもできるので特におもしろいことはありません。ここでは、xfy technologyの特徴であるXML文書の編集について説明します。
引き続き、［XML文書の表示］で使用したHelloWorld.xmlとHelloWorld.xvcdを例にして説明します。編集するために必要なものは、表示するときと同じく、XML文書ファイルとXVCDファイルです。［XML文書の表示］では「Hello World!」 と表示しましたが、ここではその文字列を編集できるようにします。
文字列を編集できるようにするには、<xvcd:value-of select="."/> を <xvcd:text-of select="."/> に置き換えるだけです。簡単ですね。
HelloWorld.xvcdをテキストエディタで開き、以下のように編集します。強調文字で表記した箇所が、変更された箇所です。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<xvcd:vocabulary name="HelloWorld2" match="hw:document" call-template="root"/>
<xvcd:template name="root">
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:text-of select="."/>
</p>
</xvcd:template>
</xvcd:xvcd>
編集が完了したら、HelloWorld2.xvcdというファイル名で保存します。
xvcd:value-of要素は、XSLTのvalue-of要素と同じく、select属性で指定されたXPath関数を実行した結果を表示させます。XML文書に記述された情報を表示することはできますが、編集することはできません。
xvcd:text-of要素は、変換元となる編集対象XML文書と変換後のXML文書を繋ぎます。 表示された文字列は編集することができます。編集された文字列は変換元のXML文書へ反映されます。xvcd:text-of要素には、xvcd:value-of要素と同じように、select属性でXPath式を指定します。ただし、このXPath式の評価結果がテキストノード、属性、テキストノードを１つだけ含む要素のどれかを参照していなければならない点が、xvcd:value-of要素と異なります。
HelloWorld.xmlには、HelloWorld.xvcdを関連付ける処理命令が記述されています。ファイル名を書き換えてもよいのですが、今回は処理命令を追加します。HelloWorld.xmlをテキストエディタで開き、次のように編集します。強調文字で表記した箇所が、変更された箇所です。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<?com.xfytec vocabulary-connection href="HelloWorld2.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Hello World!
</hw:message>
</hw:document>
このように、XVCDとの関連付けを指定する処理命令は複数記述することができます。
修正できたら、xfy Basic Editionで表示してみましょう。HelloWorld.xml を xfy Basic Editionで開いてください。すでに開いている場合は、［表示-最新の情報に更新］を選択するか、 ブラウズバーの
をクリックしてください。
HelloWorld.xmlを開く
変更したのに、以前と何も変わらない画面が表示されます。これはどういうことでしょうか？
実は、HelloWorld.xmlを処理できるボキャブラリコンポーネントが複数存在しているので、この状態では１つ目の処理命令で指定されているHelloWorld.xvcd（［XML文書の表示］で作成した、表示するだけのボキャブラリコンポーネント）が適用されているのです。
それでは、編集用のコンポーネントに切り替えましょう。ボキャブラリコンポーネントを切り替えるには、［ツール-ボキャブラリコンポーネントの切り替え］を選択して表示されるダイアログボックスで切り替える方法と、ドキュメントビューエリアのドロップダウンリストから切り替える方法があります。ここではドロップダウンリストで切り替えます。xfy Basic Editionの画面を見てください。ドキュメントビューエリアの右上に、ボキャブラリコンポーネント切り替え用のドロップダウンリストがあります。現在は「HelloWorld」と表示されているはずです。 そこをクリックすると、ドロップダウンリストにHelloWorldとHelloWorld2が登録されているのが確認できます。
ドロップダウンリストには、
xvcd:vocabulary要素のname属性で指定された文字列が表示されます。HelloWorld2.xvcdでは、<xvcd:vocabulary name="HelloWorld2"... と記述したので、HelloWorld2を選びます。
青いキャレットが現れました。カーソルキーでキャレットを移動したり、キャレットの位置に文字を入力できるようになっています。
Helloの後ろにキャレットを移動してxfyと入力した
DeleteキーやBackSpaceキーで文字を削除することもできます。 すべての文字を削除するとどうなるでしょうか。試してみましょう。
「???」と表示されました。
xvcd:text-of要素の参照先に文字列がないときに、「ここに編集領域がありますよ。」とxfy Basic Editionが教えてくれるのです。 「???」という文字列は、任意のメッセージに変更することができます。次節で、その方法を説明します。
ここでは、
xvcd:text-of要素の参照先に文字列がないときに表示する、ガイダンスメッセージを指定する xvcd:text-of要素のfiller属性について説明します。
テキストデータを編集できるようにするには、<xvcd:value-of select="."/> を <xvcd:text-of select="."/> に置き換えるだけでした。 ここではさらに、xvcd:text-of要素に属性 filler="Enter any text here." を追加します。
HelloWorld2.xvcdをテキストエディタで開き、次のように編集します。強調文字で表記した箇所が、変更された箇所です。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:hw="http://xmlns.xfytec.com/samples/helloworld"
version="1.0">
<xvcd:vocabulary name="HelloWorld3" match="hw:document" call-template="root"/>
<xvcd:template name="root">
<html>
<head>
<title>HelloWorld example</title>
</head>
<body>
<xvcd:apply-templates/>
</body>
</html>
</xvcd:template>
<xvcd:template match="hw:message">
<p>
<xvcd:text-of select="." filler="Enter any text here."/>
</p>
</xvcd:template>
</xvcd:xvcd>
編集が完了したら、HelloWorld3.xvcdというファイル名で保存します。
HelloWorld2.xvcdのときと同じように、XML文書ファイルにHelloWorld3.xvcdを関連付ける処理命令を追加します。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<?com.xfytec vocabulary-connection href="HelloWorld2.xvcd" ?>
<?com.xfytec vocabulary-connection href="HelloWorld3.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Hello World!
</hw:message>
</hw:document>
修正できたら、次の手順でxfy Basic Editionで表示して確かめましょう。
をクリックします。
HelloWorld3に切り替えます。
Hello World!」という文字列をすべて削除します。
filler属性の効果
HelloWorld2では、
xvcd:text-of要素の参照先に文字列がないときは「???」と表示されていました。HelloWorld3では「Enter any text here.」と表示されます。
前節では、xfy Basic Editionを使って文字列を編集できることを説明しました。 編集したデータは、保存できなければ意味がありません。この節では、編集したXML文書を保存します。
XML文書の保存を確かめるために、次の操作をします。
HelloWorld.xmlをxfy Basic Editionで開きます。
HelloWorld3に切り替えます。
Hello World!」を適当に編集します。
保存した内容を確認しましょう。HelloWorld.xmlをテキストエディタで開いてください。ここでは、「Hello World!」を「Here is the New XML World.」に変更した例を示します。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<?com.xfytec vocabulary-connection href="HelloWorld2.xvcd" ?>
<?com.xfytec vocabulary-connection href="HelloWorld3.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Here is the New XML World.
</hw:message>
</hw:document>
hw:message要素の内容として、編集した内容が反映されています。
ここで学んだことをまとめておきます。
xvcd:value-of要素でXML文書を参照している箇所を
xvcd:text-of要素に置き換えると、文字列を編集できるようになります。（注：select属性の内容によっては、置き換られない場合があります。詳しくは、VC中核リファレンスのxvcd:text-of要素のselect属性の説明をご覧ください。）xvcd:text-of要素の参照先に文字列がないときには、ガイダンスメッセージを表示をすることができます。
［XML文書内の文字列の編集］では、固定的な構造のXML文書に対して、構造は変更せずに文字列だけを編集する方法について学びました。 この章では、XML文書のデータ構造を動的に編集する方法について説明します。
ここでは簡単な住所録を素材に、編集対象となるXML文書のデータ構造を作成します。
名前と住所だけを管理する非常に簡単な住所録の例を考えましょう。 住所録とするには、ある人の名前とその人の住所の組みを複数扱える必要があります。 次のようにXML文書のデータ構造を定義すると、この要件を満たすことができます。
<?xml version="1.0"?>
<ab:addressbook xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook">
<ab:entry>
<ab:person>George Adams</ab:person>
<ab:address>Rochester, NY, USA</ab:address>
</ab:entry>
<ab:entry>
<ab:person>Betty Jackson</ab:person>
<ab:address>Denver, Colorado USA</ab:address>
</ab:entry>
</ab:addressbook>
住所録XMLのデータ構造は、次のようになっています。
ab:addressbook要素は、子要素として複数のab:entry要素を持ちます。
ab:entry要素は、子要素としてab:person要素とab:address要素の組を１つ持ちます。
ab:person要素内の文字列は、人の名前を意味します。
ab:address要素の中の文字列は、住所を意味します。
データ構造の定義を明確にするために、参考としてDTD定義を以下に示します。なお、xfy technologyでは、DTD定義を使用した妥当性検証などは行わないので、DTDファイルを作成する必要はありません。
<!DOCTYPE addressbook [ <!ELEMENT addressbook entry+> <!ELEMENT entry person,address> <!ELEMENT person (#PCDATA)> <!ELEMENT address (#PCDATA)> ]>
まだXVCDファイルは作成していませんが、あらかじめこのXML文書に関連付けるXVCDファイルを指定しておきましょう。 これから作成するXVCDのファイル名は、AddressBook.xvcdとします。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="AddressBook.xvcd" ?>
<ab:addressbook xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook">
<ab:entry>
<ab:person>George Adams</ab:person>
<ab:address>Rochester, NY, USA</ab:address>
</ab:entry>
<ab:entry>
<ab:person>Betty Jackson</ab:person>
<ab:address>Denver, Colorado USA</ab:address>
</ab:entry>
</ab:addressbook>
住所録のXML文書を作成したら、AddressBook.xml というファイル名で保存します。
次に住所録を表示するボキャブラリコンポーネントをXVCDで作成します。AddressBook.xmlを表示するためのXVCDは、次のとおりです。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook"
version="1.0">
<xvcd:vocabulary name="AddressBook" match="ab:addressbook" call-template="root"/>
<xvcd:template name="root">
<html>
<body>
<table border="1" width="100%">
<tr>
<th width="150">
Name
</th>
<th>
Address
</th>
</tr>
<xvcd:apply-templates select="ab:entry"/>
</table>
</body>
</html>
</xvcd:template>
<xvcd:template match="ab:entry">
<tr>
<td>
<xvcd:apply-templates select="ab:person"/>
</td>
<td>
<xvcd:apply-templates select="ab:address"/>
</td>
</tr>
</xvcd:template>
<xvcd:template match="ab:person">
<xvcd:text-of select="." filler="Enter the name here."/>
</xvcd:template>
<xvcd:template match="ab:address">
<xvcd:text-of select="." filler="Enter the address here."/>
</xvcd:template>
</xvcd:xvcd>
テーブルを使って表形式で表現しています。XVCDの内容にはこれまでに学習したものを使用しているので、説明は省略します。これをAddressBook.xvcdというファイル名で保存します。
AddressBook.xmlをxfy Basic Editionで開くと、変換後のXML文書が次のようなXHTMLとして構築されて表示されます。
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<tr>
<th width="150">Name</th>
<th>Address</th>
</tr>
<tr>
<td>George Adams</td>
<td>Rochester, NY, USA</td>
</tr>
<tr>
<td>Betty Jackson</td>
<td>Denver, Colorado USA</td>
</tr>
</table>
</body>
</html>
では、作成した住所録をxfy Basic Editionで表示しましょう。AddressBook.xmlをxfy Basic Editionで開いてください。次の図のように表示されましたか？
表示はできましたが、まだまだ住所録とは言えません。住所録には新しい住所エントリーを追加できなければなりません。次の節では、住所エントリーを追加する方法を説明します。また、住所録から住所エントリーを削除する方法も説明します。
住所エントリーを追加したり削除したりするには、XML文書のデータ構造を自由に操作できることが必要です。また、ユーザーが住所エントリーの追加や削除を指示できる必要があります。
まず、XML文書のデータ構造をどのように変化させればよいか、イメージしてみましょう。AddressBook.xmlが次のようになれば、住所エントリーを追加したことになります。強調文字で表記した箇所が、追加された構造です。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="AddressBook.xvcd" ?>
<ab:addressbook xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook">
<ab:entry>
<ab:person>George Adams</ab:person>
<ab:address>Rochester, NY, USA</ab:address>
</ab:entry>
<ab:entry>
<ab:person>Betty Jackson</ab:person>
<ab:address>Denver, Colorado USA</ab:address>
</ab:entry>
<ab:entry>
<ab:person/>
<ab:address/>
</ab:entry>
</ab:addressbook>
XML文書のデータ構造に、あるXML文書フラグメント（ XML部分ツリー構造）を追加するには、XVCDによるボキャブラリコンポーネントでコマンドを定義し、その中にXML文書のデータ構造にXML文書フラグメントを挿入するコマンドインストラクションを記述します。コマンドは、
xvcd:command要素を
xvcd:xvcd要素の子要素として記述して定義します。
XML文書のデータ構造にXML文書フラグメントを追加するコマンドインストラクションは、
xvcd:insertコマンドインストラクションです。このxvcd:insertコマンドインストラクションをコマンド定義内に記述します。xvcd:insertコマンドインストラクションのref属性には、挿入位置の基準となるノードをXPath式で指定します。xvcd:insertコマンドインストラクションのposition属性には、基準ノードに対する挿入位置を指定します。
xvcd:insertコマンドインストラクションの内容には、挿入したいXML文書フラグメントを記述します。この場合、ab:addressbook要素の子要素として
<ab:entry>
<ab:person/>
<ab:address/>
</ab:entry>
を挿入すればよいので、新しい住所エントリーを追加するコマンド定義は以下のようになります。 なお、コマンドには名前を付ける必要があります。ここでは、AddEntryという名前を付けます。 コマンドを呼び出すときは、コマンドに付けた名前を指定します。
<xvcd:command name="AddEntry">
<xvcd:insert ref="/ab:addressbook" position="last-child">
<ab:entry>
<ab:person/>
<ab:address/>
</ab:entry>
</xvcd:insert>
</xvcd:command>
定義したコマンドはこのままでは実行されません。メインメニューやコンテキストメニュー、ツールバー、イベントや他のコマンドから呼び出されることで実行できるようになります。メインメニューやコンテキストメニュー、ツールバーが選択されたときに呼び出されるコマンドの指定は、
xvcd:vocabulary要素内に
ui:ui要素で記述します。 詳しくは、ユーザーインターフェイス記述リファレンスをご覧ください。
ここでは、メインメニューに「Entry」というメニューを作り、その中の「Add」で住所エントリーを追加するようにします。
<xvcd:vocabulary name="AddressBook" match="ab:addressbook" call-template="root">
<ui:ui version="1.0">
<ui:main-menu>
<ui:menu label="Entry">
<ui:menu-item label="add" command="AddEntry"/>
</ui:menu>
</ui:main-menu>
</ui:ui>
<xvcd:vocabulary>
ここまでの内容をAddressBook.xvcdに適用すると、次のようになります。 強調文字で表記した箇所が、追加・変更された箇所です。 メニューに割り付ける記述が追加されたため、XML名前空間宣言xmlns:ui="http://xmlns.xfytec.com/ui"が追加されていることに注意してください。
<?xml version="1.0"?>
<xvcd:xvcd
xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns:ui="http://xmlns.xfytec.com/ui"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook"
version="1.0">
<xvcd:vocabulary match="ab:addressbook" name="AddressBook" call-template="root">
<ui:ui version="1.0">
<ui:main-menu>
<ui:menu label="Entry">
<ui:menu-item label="add" command="AddEntry"/>
</ui:menu>
</ui:main-menu>
</ui:ui>
</xvcd:vocabulary>
<xvcd:command name="AddEntry">
<xvcd:insert ref="/ab:addressbook" position="last-child">
<ab:entry>
<ab:person/>
<ab:address/>
</ab:entry>
</xvcd:insert>
</xvcd:command>
<xvcd:template name="root">
<html>
<body>
<table border="1" width="100%">
<tr>
<th width="150">
Name
</th>
<th>
Address
</th>
</tr>
<xvcd:apply-templates select="ab:entry"/>
</table>
</body>
</html>
</xvcd:template>
<xvcd:template match="ab:entry">
<tr>
<td>
<xvcd:apply-templates select="ab:person"/>
</td>
<td>
<xvcd:apply-templates select="ab:address"/>
</td>
</tr>
</xvcd:template>
<xvcd:template match="ab:person">
<xvcd:text-of select="." filler="Enter the name here."/>
</xvcd:template>
<xvcd:template match="ab:address">
<xvcd:text-of select="." filler="Enter the address here."/>
</xvcd:template>
</xvcd:xvcd>
編集が完了したら、AddressBook.xvcdを上書き保存します。
実際にxfy Basic Editionで表示しましょう。AddressBook.xmlをxfy Basic Editionで開いてください。メインメニューに［Entry］が追加されています。
［Entry-Add］を実行しましょう。最終行に住所エントリーが１行追加され、「Enter the name here.」／「Enter the address here.」と表示されます。
XML文書のデータ構造からのXML文書フラグメントの削除も、追加と同様にコマンドを定義して行います。 XML文書のデータ構造からXML文書フラグメントを削除するコマンドインストラクションは、
xvcd:deleteコマンドインストラクションです。このxvcd:deleteコマンドインストラクションをコマンド定義内に記述します。
xvcd:deleteコマンドインストラクションのselect属性には、削除対象となる範囲、またはノードセットをXPath式で指定します。住所録の場合は、削除する住所エントリーを指定する必要があります。 ここでは、キャレットがあるエントリーを削除することにします。 キャレットがあるノードは、
xvcd:caret-node()関数で取得できます。 キャレットはab:person要素、またはab:address要素にあるので、キャレットがあるノードの祖先からab:entry要素を探します。これは、XPath式でxvcd:caret-node()/ancestor-or-self::ab:entryと表現されます。
以上より、キャレットのある住所エントリーを削除するコマンドの定義は、以下のようになります。なお、ここでは住所エントリーを削除するコマンドに、RemoveEntryという名前をつけます。
<xvcd:command name="RemoveEntry">
<xvcd:delete select="xvcd:caret-node()/ancestor-or-self::ab:entry"/>
</xvcd:command>
続いて、ユーザーがコマンドを実行できるようにします。ここでは、コンテキストメニューに「remove」というメニューを作り、そこからRemoveEntryを呼び出すことで住所エントリーを削除するようにします。
<ui:ui version="1.0">
<ui:context-menu>
<ui:menu-item label="remove" command="RemoveEntry"/>
</ui:context-menu>
</ui:ui>
ここまでの内容をAddressBook.xvcdに適用すると、次のようになります。 強調文字で表記した箇所が、追加された箇所です。
<?xml version="1.0"?>
<xvcd:xvcd xmlns:xvcd="http://xmlns.xfytec.com/xvcd"
xmlns:ui="http://xmlns.xfytec.com/ui"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ab="http://xmlns.xfytec.com/tutorial/addressbook"
version="1.0">
<xvcd:vocabulary match="ab:addressbook" name="AddressBook" call-template="root">
<ui:ui version="1.0">
<ui:main-menu>
<ui:menu label="Entry">
<ui:menu-item label="add" command="AddEntry"/>
</ui:menu>
</ui:main-menu>
<ui:context-menu>
<ui:menu-item label="remove" command="RemoveEntry"/>
</ui:context-menu>
</ui:ui>
</xvcd:vocabulary>
<xvcd:command name="AddEntry">
<xvcd:insert ref="/ab:addressbook" position="last-child">
<ab:entry>
<ab:person/>
<ab:address/>
</ab:entry>
</xvcd:insert>
</xvcd:command>
<xvcd:command name="RemoveEntry">
<xvcd:delete select="xvcd:caret-node()/ancestor-or-self::ab:entry"/>
</xvcd:command>
<xvcd:template name="root">
<html>
<body>
<table border="1" width="100%">
<tr>
<th width="150">
Name
</th>
<th>
Address
</th>
</tr>
<xvcd:apply-templates select="ab:entry"/>
</table>
</body>
</html>
</xvcd:template>
<xvcd:template match="ab:entry">
<tr>
<td>
<xvcd:apply-templates select="ab:person"/>
</td>
<td>
<xvcd:apply-templates select="ab:address"/>
</td>
</tr>
</xvcd:template>
<xvcd:template match="ab:person">
<xvcd:text-of select="." filler="Enter the name here."/>
</xvcd:template>
<xvcd:template match="ab:address">
<xvcd:text-of select="." filler="Enter the address here."/>
</xvcd:template>
</xvcd:xvcd>
編集が完了したら、AddressBook.xvcdに上書き保存します。
実際にxfy Basic Editionで表示しましょう。AddressBook.xmlをxfy Basic Editionで開いてください。 開いた直後の画面には何も変化がありません。 削除したいエントリーにキャレットを移動して、右クリックしてください。 コンテキストメニューに「remove」が表示されます。
removeが追加された
「remove」を実行しましょう。キャレットがあった行の住所エントリーが削除されます。
コマンドを使うと、XML文書のデータ構造を変更する以外にも、さまざまなことが実現できます。 以下の文書が参考になります。
ここで学んだことをまとめておきます。
xvcd:command要素を使って、コマンドを定義できます。コマンドの内容はコマンドインストラクションを使って記述します。
xvcd:insertコマンドインストラクションを使うと、XML文書にXML文書フラグメントを追加できます。
xvcd:deleteコマンドインストラクションを使うと、XML文書からXML文書フラグメントを削除できます。
xvcd:command要素を使って定義したコマンドを、メニューから呼び出せます。
［XML文書に対するデータ構造の追加と削除］までは、XML文書に関連付けるXVCDファイルを指定する処理命令を記述しました。しかし、この方法は、xfy Developer's Toolkitをインストールしないと使用できません。また、XVCDで作成したボキャブラリコンポーネントで処理したいすべてのXML文書に処理命令を記述しなければなりません。そのため、処理命令が記述されていないXML文書を直接扱うことができないという問題があります。
この章では、XVCDで作成したボキャブラリコンポーネントをxfy Basic Editionにインストールする方法について説明します。ボキャブラリコンポーネントをインストールすると、xfy Developer's Toolkitがインストールされていない環境や、XVCDファイルを関連付ける処理命令が記述されていないXML文書でも、インストールしたボキャブラリコンポーネントを使ってXML文書を処理できるようになります。
基本的に、ボキャブラリコンポーネントをはじめとする各種コンポーネントをxfy Basic Editionで使用するには、Jarファイルを作成してxfy Basic Editionの実行環境へインストールする必要があります。XVCDによるボキャブラリコンポーネントのJarファイルを簡単に作成するツールは、後日提供される予定です。
XVCDによるボキャブラリコンポーネントの場合は、簡易なインストール方法として、scriptsフォルダ以下にXVCDファイルを置く方法も用意されています。ここでは、このscriptsフォルダ以下にXVCDファイルを置く方法について説明します。
［XML文書の表示］で使用したHelloWorld.xmlを例にして説明します。HelloWorld.xmlからHelloWorld2.xvcdとHelloWorld3.xvcdを関連付ける処理命令を削除し、HelloWorld.xvcdを関連付ける処理命令を残したものを、HelloWorld2.xmlとして保存します。HelloWorld2.xmlの内容は次のとおりです。
<?xml version="1.0"?>
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd" ?>
<hw:document xmlns:hw="http://xmlns.xfytec.com/samples/helloworld">
<hw:message>
Hello World!
</hw:message>
</hw:document>
このHelloWorld2.xmlをxfy Basic Editionで開くと、下の図のようにHelloWorldがボキャブラリコンポーネントとして表示されます。
この例では、
<?com.xfytec vocabulary-connection href="HelloWorld.xvcd"?>
という処理命令によって、HelloWorld.xmlを読み込んだときに
を関連付け、その中に含まれる
Helloworld.xvcd
xvcd:vocabulary要素の記述に基づいてボキャブラリコンポーネントを一時的に登録しています。今度は処理命令を記述しないで、ボキャブラリコンポーネントを登録してみましょう。
xfy Basic Editionをインストールしたフォルダの中に、scriptsフォルダが存在します。このscriptsフォルダに、［XML文書の表示］で作成したHelloWorld2.xvcdとHelloWorld3.xvcdを保存します。XVCDによるボキャブラリコンポーネントのインストールはこれで終了です。
xfy Basic Editionは、起動時にHelloWorld2.xvcdとHelloWorld3.xvcdを参照し、その中に含まれる
xvcd:vocabulary要素の記述に基づいてボキャブラリコンポーネントを登録します。
では、xfy Basic EditionでHelloWorld2.xmlを表示させましょう。次の手順で操作します。
HelloWorld2.xmlを保存したフォルダを選択します。
HelloWorld2.xmlを選択して［開く］をクリックします。
下の図のように、HelloWorld2とHelloWorld3がボキャブラリコンポーネントとして表示されましたか？
ここで学んだことをまとめておきます。
scriptsフォルダへのインストールscriptsフォルダにXVCDファイルを保存すると、xfy Basic Editionが起動するときにXVCDファイルを参照し、ボキャブラリコンポーネントを登録します。