お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

XForms の repeat を最大限に利用する

オープンスタンダード・フォームでのデータ・セットに対する繰り返しを管理する

Jan J. Kratky, Advisory Software Engineer, IBM　

Jan Joseph Kratky は、Compound XML Document Editor と XML Forms Generator の開発リーダーです。現在はノースキャロライナ州 Research Triangle Park にある IBM Emerging Software Standards のソフトウェア・エンジニアであり、Cornell University にて学位を、そして Rensselaer Polytechnic Institute にて修士号を取得しています。彼は Sun 認定のJava プログラマー、Sun 認定の Web コンポーネント開発者として、Java 技術には 1997 年から、そして Eclipse 技術には 2001 年から従事しています。

Steve Speicher (sspeiche@us.ibm.com), Senior Software Engineer, IBM　

Steve Speicherは、ノースキャロライナ州Research Triangle ParkにあるIBMの、シニア・ソフトウェア・エンジニアです。新興技術に取り組んでおり、ここ数年はアプリケーション開発ツールの開発に従事しています。

概要： XForms は、XML データを扱う上での強力な機構を数多く提供しています。そうした機構の 1 つが「repeat」要素です。repeat 要素を使うことによって、XML の中にある同種のデータ・セットに対する繰り返しを、素早く容易に実装することができます。さらに、そうしたデータ・セットを表の形式で表示することができ、また繰り返しセットの中に特定のデータ片を挿入、削除するような、動的な動作を持たせることもできます。この記事で、XForms の repeat を最大限に利用するためのヒントと要領を学んでください。

タグを付ける!

日付: 2006年 11月 21日
レベル: 中級
この記事の原文: 英語
アクティビティー： 2607 ビュー
お気軽にご意見・ご感想をお寄せください：

XForms の repeat とは何か

repeat 要素を使うと、XForms の UI (user interface) 要素を、XForms 文書の XML データ・インスタンスの中にある同種の集り (homogeneous collection) にマッピングすることができます。「同種の集り」というのは、文書の中の同じレベルにあり、同じデータ型を持った一連のノードと考えることができます。例えば、下記のリスト 1 の中にある一連の bread 要素は、この XML インスタンスのノードの同種の集りです。

リスト 1. XML ノードの同種の集り

                
<xforms:instance id="in-stock">
    <in-stock>
        <groceries>
            <perishable>          
                <bread brand="Wonder" quantity="1"/>
              <bread brand="Merita" quantity="2"/>
              <bread brand="Arnold" quantity="4"/>             
            </perishable>
        </groceries>
    </in-stock>
</xforms:instance>

repeat 要素を同種のセットと関連付けるためには、repeat 要素の nodeset 属性の中にある XPath を指定して、単純にその同種のセットを参照するだけです。これを下記のリスト 2 に示します。

リスト 2. repeat を同種の集りにバインドする

                
<xforms:repeat id="bread-repeat" nodeset="instance('in-stock')/perishable/bread">
    ...

リスト 2 で、リピートに id 値が与えられていることにも注意してください。これによって、後で他の XForms 構成体からそれを参照することができます。

これで、repeat 要素の中に UI 要素を置くことができます。そしてフォームを見ると、UI 要素は「アンロール」され、同種のセットの各メンバーに対して 1 つのコントロールが現れます。リスト 3 は、リスト 1 の同種のセット内の属性にバインドされた、XForms の input UI 要素を示しています。input 要素からデータ・インスタンスへの参照が、その前後にある repeat に対して定義されるノードセットに対する相対参照であることに注意してください。

リスト 3. repeat の中の UI 要素

                
<xforms:repeat id="bread-repeat" 
               nodeset="instance('in-stock')/groceries/perishable/bread">
    <xforms:input ref="@brand">
        <xforms:label>Brand of bread: </xforms:label>
    </xforms:input>      
</xforms:repeat>

リスト 4 は、実際に描画されるはずの「アンロールされた」バージョンを示しています (フォームを開発する際に、こうしたソースを見ることはないはずです。これは単にレンダラーが repeat 構成体をどう解釈するかを示すためのものです)。

リスト 4. リスト 3 の repeat をアンロールしたもの

                
    <xforms:input ref="instance('in-stock')/groceries/perishable/bread[1]/@brand">
        <xforms:label>Brand of bread: </xforms:label>
    </xforms:input>
    <xforms:input ref="instance('in-stock')/groceries/perishable/bread[2]/@brand">
        <xforms:label>Brand of bread: </xforms:label>
    </xforms:input>
    <xforms:input ref="instance('in-stock')/groceries/perishable/bread[3]/@brand">
        <xforms:label>Brand of bread: </xforms:label>
    </xforms:input>

図 1 は、この構成体を XForms エクステンションをインストールした Mozilla Firefox で描画した様子を示したものです (Firefox XForms エクステンションの入手方法については、「参考文献」を参照してください)。

図 1. 描画された repeat

上に戻る

repeat を表としてフォーマットする

同種のセットのデータは、表の形式で表示した方が適切なことが多いものです。Firefox 用の XForms エクステンションの場合、repeat を表の形式で見えるように表示するためには、少しばかり CSS (cascading stylesheet) を扱う必要があります。

まずリスト 5 のソースは、CSS 定義を適用すべき、文書本体のマークアップを示しています。表と列のヘッダーが XHTML マークアップで宣言されていることに注意してください。しかし表の「本体」は、すべて XForms のrepeat で構成されています。

リスト 5. repeat を表として表示するためのマークアップ

                
<xhtml:table>
    <xhtml:tr>
        <xhtml:thead>
            <xhtml:th>Brand Name</xhtml:th>
            <xhtml:th>Quantity</xhtml:th>
        </xhtml:thead>
    </xhtml:tr>
    <xforms:repeat id="bread-repeat" 
                   nodeset="instance('in-stock')/groceries/perishable/bread">
        <xforms:output ref="@brand">
            <xforms:label/>
        </xforms:output>
        <xforms:input ref="@quantity">
            <xforms:label/>
        </xforms:input>
    </xforms:repeat>
</xhtml:table>

リスト 6 は、ここでの repeat に使用するスタイル定義を示しています。CSS 宣言は、XHTML の style タグの中に置かれています (style タグの src 属性を使えば、外部ファイルに保存された CSS を参照することもできます)。

リスト 6. repeat を表としてスタイリングするための CSS

                
<xhtml:style type="text/css">
    @namespace xforms url("http://www.w3.org/2002/xforms");
    @namespace xhtml url("http://www.w3.org/1999/xhtml");

    xhtml|th 
    { 
        width: 240px; 
    }

    xforms|repeat .xf-repeat-item 
    {
        display: table-row;
        width:   480px;
    }

    xforms|repeat xforms|output, xforms|repeat xforms|input
    {
       display:          table-cell;
       border:           thin;
       border-style:     solid;
       width:            240px;
       text-align:       center;
       background-color: lightgray;  
    }
</xhtml:style>

リスト 6 は、repeat の中の各項目 (つまり各行) を、表の中の行として表示するように宣言することでスタイリングする、という方式をとっています。そして次の宣言は、repeat の中の各 XForms 入出力コントロールを表のセルとして扱うこと、枠線付きであること、そしてライト・グレーの背景であることを表明しています。

図 2 は、XForms エクステンションをインストールした Mozilla Firefox で描画した場合の結果を示しています。

図 2. 表として描画された repeat

他のスタイリング方式を使って、Firefox で同じような表示をすることもできます。さらに、他の XForms レンダラーであれば、また別の方式があるかもしれません。そうした別の方式の一例として、XForms 1.0 仕様で定義されるオプション属性、特に repeat-nodeset を使う方式があります。こうした属性は XForms 要素ではない要素に対して使われ、その要素の子に適用される繰り返し構造を定義します。リスト 7 は、XHTML の table 要素に対して repeat-nodeset を使った例です。

リスト 7. repeat-nodeset 属性を使う

                
<xhtml:table>
    <xhtml:tr>
        <xhtml:thead>
            <xhtml:th>Brand Name</xhtml:th>
            <xhtml:th>Quantity</xhtml:th>
        </xhtml:thead>
    </xhtml:tr>
</xhtml:table>
<xhtml:table xforms:repeat-nodeset="instance('in-stock')/groceries/perishable/bread">
    <xhtml:tr>
        <xhtml:td>
            <xforms:output ref="@brand">
                <xforms:label/>
            </xforms:output>
        </xhtml:td>
        <xhtml:td>
            <xforms:input ref="@quantity">
                <xforms:label/>
            </xforms:input>          
        </xhtml:td>      
    </xhtml:tr>
</xhtml:table>

XForms ではない要素に対して repeat 属性を使う方法はスマートです。この方法は、Firefox 用の XForms エクステンションを含めて、いくつかの XForms 実装でサポートされています。

上に戻る

行の挿入と削除

ここまでは、繰り返し構造を、XML データ・インスタンスの中にあるとおりに表示する方法を見てきました。しかし XForm では、ずっと多様な方法でデータを扱えるのです。例えば、表に新しい行を追加したい、あるいは既存の行を削除したい、といった要求はごく一般的です。リスト 8 は、繰り返しセットへの行の挿入や削除をユーザーがトリガーできるマークアップを示しています。

リスト 8. 行の挿入と削除を可能にする

                
<xforms:trigger>
    <xforms:label>Insert Row</xforms:label>
    <xforms:insert ev:event="DOMActivate"
                   at="index('bread-repeat')" position="after"
                   nodeset="instance('in-stock')/groceries/perishable/bread"/>
</xforms:trigger>
<xforms:trigger>
    <xforms:label>Delete Row</xforms:label>
    <xforms:delete ev:event="DOMActivate"
                   at="index('bread-repeat')"
                   nodeset="instance('in-stock')/groceries/perishable/bread"/>
</xforms:trigger>

リスト 8 では、repeat の「インデックス」の概念が導入されています。insert アクションと delete アクションの at 属性の中で index() 関数が使われていることに注意してください。at 属性の値の中に与えられている値は、1 を基数として、挿入または削除が行われる repeat のデータ・セットまでのインデックスを表しています。この属性の値の中で index() 関数を使うことによって、挿入または削除が、repeat の中の現在選択されている行で行われることを指定しています。削除アクションの場合であれば、これは現在選択されている行が削除されることを意味します。挿入アクションの場合であれば、これは選択されたインデックス行の直前または直後に新しい行が挿入されることを意味します。新しい行が、現在選択されている行の直前に挿入されるか直後に挿入されるかは、insert 要素の position 属性に与えられる値に依存します。

挿入アクションがトリガーされると、repeat の最後の行が複製され、その複製が挿入されます。この場合、その行の要素や属性の値も同時に複製挿入されることが普通です。これは望ましくないこともあるため、挿入を行った後に setvalue アクションで値をリセットする必要があるかもしれません (リスト 9)。この場合も index() 関数を使って、現在選択されている repeat の行を setvalue アクションを行うべき行として指定します。これは、今ちょうど挿入された行をターゲットとする、という目的と一致します。つまり挿入アクションによって、repeat のインデックスは、今ちょうど挿入された行のインデックスにリセットされるのです。

リスト 9. 挿入された値をリセットする

                
<xforms:trigger>
    <xforms:label>Insert Row</xforms:label>
    <xforms:action ev:event="DOMActivate">
        <xforms:insert at="index('bread-repeat')"
                       position="after" 
                       nodeset="instance('in-stock')/groceries/perishable/bread"/>
        <xforms:setvalue 
                    ref="instance('in-stock')/
                         groceries/perishable/bread[index('bread-repeat')]/@quantity"
                    value="0"/>
    </xforms:action>
</xforms:trigger>

repeat への行の挿入、削除のためのトリガーを実装することは、非常に一般的なパターンです。実際、XForms 自動生成ツール、特に IBM® XML Forms Generator (「参考文献」を参照) は、すべての repeat に対して追加と削除のトリガーを自動的に生成します。

上に戻る

最後の行が削除されるのを防ぐ

前のセクションでは、挿入アクションで repeat の最後の行が複製されることを示しました。これは、repeat に行がなくなったとき (例えばユーザーがすべての行に対して削除アクションをトリガーした場合など) には困ったことになります。その結果として、例えば先の例では、もしすべての行が削除されてしまうと、挿入アクションでは何も行われなくなります。

従って、最後の行は削除されないようにしたいかもしれません。リスト 10 は、そのための 1 つの方法を示しています。「Delete」トリガーをデータ・モデルの中のノードにバインドし、そしてそのセットのノード・カウントが 1 に達したら、そのノードを無関係にするのです。

リスト 10. 最後の行が削除されるのを防ぐ

                
<xforms:instance id="trigger-controller">
    <trigger-sets>
        <trigger-set>
            <insert-trigger/>
            <delete-trigger/>
        </trigger-set>
    </trigger-sets>
</xforms:instance>
<xforms:bind nodeset="instance('trigger-controller')/trigger-set/delete-trigger"
             relevant="count(instance('in-stock')/groceries/perishable/bread) > 1"/>
		                 
        ...
        
<xforms:trigger ref="instance('trigger-controller')/trigger-set/insert-trigger">
    <xforms:label>Insert Row</xforms:label>
    <xforms:insert ev:event="DOMActivate" at="index('bread-repeat')"
                   position="after" 
                   nodeset="instance('in-stock')/groceries/perishable/bread"/>
</xforms:trigger>
<xforms:trigger ref="instance('trigger-controller')/trigger-set/delete-trigger">
    <xforms:label>Delete Row</xforms:label>
    <xforms:delete ev:event="DOMActivate" at="index('bread-repeat')"
                   nodeset="instance('in-stock')/groceries/perishable/bread"/>
</xforms:trigger>

トリガーに参照されるノードが無関係になると、そのトリガーは「使用不可」になります。Firefox でのデフォルト動作としては、ボタンがページから消えます。図 3 はその一例で、最後から 1 つ前の行が削除される前と後のフォームの様子を示しています。

図 3. 最後の行が削除されるのを防ぐ

「関係」プロパティーを使って他の方法を試すこともできます。例えば、repeat の最後の行を必ず無関係にするのです。こうすると最後の行は選択されなくなり、従って repeat インデックスに基づいて削除位置を決めている場合には、最後の行が削除されなくなります。

リスト 11 は、データ・インスタンスに「プロトタイプ」エントリーを追加してから、最後のエントリーを常に無関係にするバインドを追加する方法を示しています。最後の行が表示されないようにするために、「.disabled」CSS キューをキーとする新しい CSS エントリーが作られています。この方法では、repeat 要素とその内容には何も変更が必要ありません。

リスト 11. 最後のエントリーを無関係にする

                
<xforms:model>
    <xforms:instance id="in-stock">
        <in-stock>
            <groceries>
                <perishable>
                    <bread brand="Wonder" quantity="1" />
                    <bread brand="Merita" quantity="2" />
                    <bread brand="Arnold" quantity="4" />
                    <bread brand="Not sure yet" quantity="0" />
                </perishable>
            </groceries>
        </in-stock>
    </xforms:instance>
    <xforms:bind nodeset="instance('in-stock')/groceries/perishable/bread
                          [count(instance('in-stock')/groceries/perishable/bread)]/
                          @brand"
		 relevant="false()"/>
    <xforms:bind nodeset="instance('in-stock')/groceries/perishable/bread
                          [count(instance('in-stock')/groceries/perishable/bread)]/
                          @quantity"
		 relevant="false()"/>
</xforms:model>
<xhtml:style type="text/css">
    @namespace xforms url("http://www.w3.org/2002/xforms");
    xforms|*:disabled { display: none; }
</xhtml:style>

今のところ、挿入プロトタイプが削除されるのを防ぐためには、こうした方法が必要です。しかし、助けが現れつつあります。XForms 1.1 仕様は、挿入や削除アクションに関する、この問題やその他の欠点に対応しており、ここで示したような回避策が必要なくなっています。

上に戻る

repeat をネストする

XForms の強力さが発揮されるのは、さまざまなレベルで同種のデータ・セットを含むデータがあり、それらがネストされているような場合です。例えばリスト 12 は、最上位レベルの同種の要素セットが 3 つの item 要素から構成されるデータ・インスタンスを示しています。そして各 item 要素はそれぞれ独自の info 要素セットを含んでいます。

リスト 12. 2 つのレベルにネストしたデータ

                
<xforms:instance id="in-stock">
    <in-stock>
        <groceries>
            <perishable>
                <item type="bread">
                    <info brand="Wonder" quantity="1"/>
                    <info brand="Merita" quantity="2"/>
                    <info brand="Arnold" quantity="4"/>	                    
                </item>
                <item type="peanut butter"">
                    <info brand="Skippy" quantity="2"/>		                
                    <info brand="Jif" quantity="1"/>
                </item>
                <item type="jelly">
                    <info brand="Smuckers" quantity="1"/>
                    <info brand="Welch's" quantity="3"/>	                    
                </item>
            </perishable>
        </groceries>
    </in-stock>
</xforms:instance>

XForms では、このようにネストしたセットに対する繰り返しを、それぞれに対応する repeat をネストすることで容易に行うことができます。リスト 13 は、この方法を示したものです。

リスト 13. ネストした repeat を定義する

                
                
<xforms:repeat id="bread-repeat" nodeset="instance('in-stock')/groceries/perishable/item">
    <xforms:output ref="@type">
        <xforms:label>Item type: </xforms:label>
    </xforms:output>
    <xforms:repeat id="bread-repeat" nodeset="info">
        <xforms:output ref="@brand">
            <xforms:label>Brand: </xforms:label>
        </xforms:output>
        <xforms:input ref="@quantity">
            <xforms:label>Quantity: </xforms:label>
        </xforms:input>
    </xforms:repeat>
    <xhtml:hr/>
</xforms:repeat>

リスト 13 は、最も外側の repeat の出力を定義しています。この repeat に対して各アイテム・タイプ (Item type) が表示されます。次に、その内側の repeat は、各 item 内の info 要素に対して繰り返しを行います。内側の repeat の nodeset 属性の XPath は、Xpath が含む repeat のノードセットに相対的に定義されていることに注意してください。図 4 は、このようにネストした repeat が Firefox でどのように表示されるかを示しています。

図 4. ネストした repeat を描画する

ここでも、repeat をネストする深さに制限がないという事実から、XForms の力が発揮されています。制約があるとすれば、レンダラーのパフォーマンスと、エンドユーザーにとってクリーンでナビゲートしやすいインターフェースをどう維持するかのみです。

上に戻る

repeat のインデックスを管理する

先ほどの挿入と削除のアクションに関する説明の中で、repeat のインデックス、つまり 1 を基数とする、現在選択されている「行」のインデックスの概念について触れました。

インデックスはユーザーが選択することもでき、あるいは、次の 2 つの方法のいずれかによってプログラムで強制的に選択することもできます。

ユーザーは選択することもできるし、ユーザーにプログラムで選択を強制

第 1 に、フォームが最初に描画される際に、startindex と呼ばれる repeat の属性の整数値を指定することで repeat のインデックスを指定することができます。XForms の他の機能でインデックスの処理を行う場合と異なり、ここでは XPath 式を指定できません。XForms 1.0 仕様では、正の整数値しか使えません。

第 2 に、repeat のインデックスを、ユーザーによるトリガーへの応答として、あるいは他のアクションの一部 (例えば、挿入または削除の後、必要な値に対するインデックスをリセットする、など) として、setindex アクションで設定することができます。リスト 14 はマークアップの一例として、最初はインデックスを 2 に設定し、次にユーザーにインデックスの値を入力させ、そして「Select」というラベルのトリガーをアクティブにすることで、インデックスをその値に設定しています。

リスト 14. setindex を使う

                
    <xforms:instance id="target-index">
        <target-index>
            <value>1</value>
        </target-index>
    </xforms:instance>
		    
    ...
		    
    <xhtml:table>
        <xhtml:tr>
            <xhtml:thead>
                <xhtml:th>Brand Name</xhtml:th>
                <xhtml:th>Quantity</xhtml:th>
            </xhtml:thead>
        </xhtml:tr>
        <xforms:repeat id="bread-repeat" 
                       nodeset="instance('in-stock')/groceries/perishable/bread" 
                       startindex="2">		      
            <xforms:output ref="@brand">
                <xforms:label/>
            </xforms:output>
            <xforms:input ref="@quantity">
                <xforms:label/>
            </xforms:input>
        </xforms:repeat>
    </xhtml:table>
	    
    <xforms:input ref="instance('target-index')/value">
        <xforms:label>Target Index: </xforms:label>
    </xforms:input>
    <xforms:trigger>
        <xforms:label>Select</xforms:label>
        <xforms:setindex ev:event="DOMActivate"
                        repeat="bread-repeat" 
                        index="instance('target-index')/value"/>
    </xforms:trigger>

リスト 14 では、repeat インデックスの値を保持するためのデータ・インスタンスが追加されています。入力コントロールはこのデータにバインドされているため、ユーザーが新しい値を入力すると、その値は value 要素の中に置かれます。最後に、トリガーに結びつけられた setvalue アクションは、そのアクションの index 属性の中にある同じ value 要素を参照します。この value 要素は XPath 式を使うことができます。図 5 は、その結果のフォームを Firefox で表示したものです。

図 5. ユーザーが repeat インデックスを入力できるようにする

図 5 を見ると、選択された行の見え方が、他の行とは異なっています。こうした視覚的な手掛かりがないと、どの行が現在選択されているのか、わかりにくくなる可能性があります。CSS を使えば、現在選択されている行をユーザーに示すことができます。Firefox では、リスト 15 に示すような CSS を使うことで、選択されたインデックスをターゲットにすることができます。

リスト 15. repeat インデックスをスタイリングする

                
xforms|repeat .xf-repeat-index > xforms|*
{
    color:            white;
    background-color: black;
    border:           none;
}

上に戻る

number 属性

XForms の repeat 要素に対する number 属性は、1 度に表示すべき繰り返し項目 (または行) の数をレンダラーが知るためのヒントになります。この属性をサポートするかどうかは XForms 処理ではオプションのため、これをサポートしないレンダラーが数多くあります。しかし一部のレンダラー、例えば Microsoft® Internet Explorer の FormsPlayer プラグイン (「参考文献」を参照) は、実際に number 属性をサポートしています。

number 属性を使うことで、特に非常に大きなデータ・セットに対する繰り返しの場合には、より明確な表示が可能になります。またデータが変更された場合、repeat の中の全項目が関連コントロールの再描画を要求するわけではないので、number 属性を使うことでパフォーマンスを改善することもできます。

例えば、リスト 1 のデータ・インスタンスを使って、1 度に 1 行のデータのみを表示したいとしましょう。そのためには、リスト 2 で定義したように、repeat 要素に単純に値 1 を追加します。その結果はリスト 16 に示すようなものになります。

リスト 16. number 属性を repeat に適用する

                
<xforms:repeat id="bread-repeat" 
               nodeset="instance('in-stock')/groceries/perishable/bread" 
               number="1">
...

さて、1 度に 1 つのrepeat 行しか表示しないことで大幅にスペースが節約できたことは素晴らしいのですが、このフォームのユーザーは、最初に表示される行以外の行のデータを操作したいかもしれません。ユーザーが他の repeat 項目にアクセスできるようにするためには、repeat インデックスの現在値をユーザーが設定できるようにします。リスト 17 は、これを setindex アクションを活用することで実現する方法を示しています。

リスト 17. repeat をナビゲーションできるようにする

                
<xforms:trigger>
    <xforms:label>< < Previous</xforms:label>
    <xforms:setindex ev:event="DOMActivate" repeat="bread-repeat"
                     index="index('bread-repeat') - 1"/>
</xforms:trigger>
<xforms:trigger>
    <xforms:label>Next > ></xforms:label>
    <xforms:setindex ev:event="DOMActivate" repeat="bread-repeat"
                     index="index('bread-repeat') + 1"/>
</xforms:trigger>

リスト 17 によって、「< < Previous」と「Next > >」というラベルの付いたボタンが作られます。これらのボタンを押すと、repeat のインデックスが、それぞれデクリメント、インクリメントされます。これによってフォームのユーザーは、repeat の中のデータをスクロールして進んだり戻ったりできるようになります。

図 6 は、スクロール可能な repeat が FormsPlayer プラグインを使った Internet Explorer でどう見えるかを示したものです。

図 6. スクロール可能な repeat

上に戻る

XForms の力

XForms の repeat は、XFormsの持つ強力な構成体の 1 つです。皆さんがまだレンダラーを入手していなければ、Mozilla Firefox 用の XForms エクステンションの無料ダウンロードなどを早速入手し (「参考文献」を参照)、ここで示した手法を皆さん自身で試してみてください。

参考文献

学ぶために

W3C の XForms のホームページを訪れ、XForms について詳しく調べてください。ここには XForms の正式仕様へのリンクや、XForms のさまざまなレンダリング・オプションへのリンクなどが用意されています。
W3C のサイトで、XHTML や CSS (Cascading Style Sheets)、XML、XML Events、XPath など、関連の標準について調べてください。

製品や技術を入手するために

Mozilla XForms プラグインを利用して、標準に準拠したフォームを Mozilla Firefox で描画してください。
Internet Explorer で XForms を描画できるオープンソース・コントロール、MozzIE を入手してください。
XForms を描画するための、Internet Explorer 用のプラグイン、FormsPlayer を試してみてください。
alphaWorks で提供されている、Eclipse ベースのツール XML Forms Generator を利用すると、標準に準拠して適切に動作するフォームを、マウスのクリックだけで作成することができます。
Visual XForms Designer のホームページをチェックしてください。インストール方法や前提条件、フォーラムなどへのリンクが用意されています。
Compound XML Document Toolkit を訪れ、他のオープン・スタンダード XML マークアップ、例えば SVG (Scalable Vector Graphics) や MathML、VoiceXML、そして SMIL (Synchronized Multimedia Integration Language) などについても調べてください。