前回はXMLデータを取得して表示する基本を解説しました。今回は、
データポインタ
データポインタとは
前回出てきたデータパス
それに対してデータポインタは、
データポインタの基本形
実例で説明します。リスト1を実行すると画面上に
<canvas proxied="false" bgcolor="0xffffcc">
<dataset name="ds" >
<world name="世界">
<country area="ヨーロッパ" name="イタリア" />
<country area="ヨーロッパ" name="ギリシャ" />
<country area="アフリカ" name="ケニア" />
<country name="日本" />
<space name="月" />
</world>
</dataset>
<simplelayout/>
<text id="txt"/>
<datapointer xpath="ds:/"><!-- ① -->
<handler name="ondata">
this.selectChild(); // ②
var t = this.xpathQuery('@name'); // ③
txt.setAttribute('text',t); //④
</handler>
</datapointer>
</canvas>以下、
① <datapointer>でデータポインタを宣言します。そのxpath属性で、
② thisは自分自身つまりデータポインタを指します。selectChild()というメソッドはデータポインタのメソッドで、
③ xpathQuery()は、
④ txtのtext属性値、
データポインタの操作では、
データポインタのループ処理
データポインタはXMLデータ中の1つの階層にのみアクセス可能なので、
<canvas proxied="false" bgcolor="0xffffcc">
<dataset name="ds" >
<world name="世界">
<country area="ヨーロッパ" name="イタリア" />
<country area="ヨーロッパ" name="ギリシャ" />
<country area="アフリカ" name="ケニア" />
<country name="日本" />
<space name="月" />
</world>
</dataset>
<simplelayout/>
<text id="txt" multiline="ture"/>
<datapointer xpath="ds:/"><!-- ① -->
<handler name="ondata">
this.selectChild(2); // ②
do{
var area = this.xpathQuery('@area'); // ③
if(area=="ヨーロッパ" || area=="アフリカ"){ // ④
var name = this.xpathQuery('@name'); // ⑤
txt.addText(name + "\n"); //⑥
}
}while(this.selectNext()); //⑦
</handler>
</datapointer>
</canvas>
① データポインタを宣言し、
② selectChild(2)は2階層下に移動するという意味です。selectChild(2)の括弧内の数字は移動する階層の数で、
③ area属性値を変数areaに格納しています。
④ area属性値がヨーロッパあるいはアフリカかどうかを判断しています。
⑤ name属性値を変数nameに格納しています。
⑥ addText()は文字列を追加するメソッドです。nameに改行コード(\n)を追加して、
⑦ selectNext()は、
ということで、
データポインタのコピー
データポインタをデータパスとして、
リスト3は、
<canvas proxied="false" bgcolor="0xffffcc">
<dataset name="ds" >
<data country="イギリス" capital="ロンドン" lang="英語" />
<data country="イタリア" capital="ローマ" lang="イタリア語" />
<data country="オランダ" capital="アムステルダム" lang="オランダ語" />
<data country="スペイン" capital="マドリード" lang="スペイン語" />
<data country="フランス" capital="パリ" lang="フランス語" />
<data country="モナコ公国" capital="モナコ" lang="フランス語" />
<data country="ルーマニア" capital="ブカレスト" lang="ルーマニア語" />
</dataset>
<vbox id="details" x="80" width="100" bgcolor="white"><!-- ① -->
<datapath/><!--②-->
<text datapath="@country" fgcolor="red" fontstyle="bold"/>
<text datapath="@capital"/>
<text datapath="@lang"/>
</vbox>
<vbox>
<text datapath="ds:/data/@country"> <!--③-->
<handler name="onclick">
details.datapath.setFromPointer(this.datapath); //④
</handler>
</text>
</vbox>
</canvas>リスト3サンプル
国名をクリックすると詳細表示が出ます
① 配下に3つの<text>がある<vbox>ですが、
② 親の<vbox>に作用する<datapath>です。実は<vbox datapath="" >と書いているのと同じことです。見た目をわかりやすくするために別タグにしています。①ですでに書いたのと同じことですが、
③ ds:/data/@countryに合致するデータがすべてレプリケーションによって複製表示されます。親が<vbox>なので、
④ onclickハンドラの中に書かれているので、