OpenLaszloでマルチデバイス対応RIAを作ろう

第9回 データの取り扱い[その2]

この記事を読むのに必要な時間:およそ 3.5 分

データポインタのコピー

データポインタをデータパスとして,他のビューのデータパスにコピーすることができます。具体的に何ができるかというと,XMLデータから取得した名前のみの一覧リストを表示して,どれか1つを選んだらその詳細データを表示する,というようなことができます。

リスト3は,動作サンプルでは国名だけを一覧表示していますが,国名をクリックすると,その国の他のデータも表示するサンプルです。

リスト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>ですが,空の<datapath>が設定されています。つまり<text>および<vbox>に実データがないので,このビューは最初は画面に表示されていません。

② 親の<vbox>に作用する<datapath>です。実は<vbox datapath="" >と書いているのと同じことです。見た目をわかりやすくするために別タグにしています。①ですでに書いたのと同じことですが,datapathの値が空なのでレプリケーションが発生せず,<vbox>は画面に表示されていません。

③ ds:/data/@countryに合致するデータがすべてレプリケーションによって複製表示されます。親が<vbox>なので,実際に画面上に国名リストとして表示されている部分になります。

④ onclickハンドラの中に書かれているので,国名をクリックしたら実行されるスクリプトです。details.datapath.setFromPointer(this.datapath)というのは,detailsビューのデータパス<datapath>のポインタを,クリックしたときの国名の元になっているデータパス(this.datapath=ds:/data/@country)にセットする,という意味です。つまり,オランダがクリックされたら「ds:/data/@countryの3番目」がdetailsのdatapathにセットされることになり,details配下の<text>3つのdatapathはそれぞれds:/data[3]/@country,ds:/data[3]/@capital,ds:/data[3]/@langと指定したのと同じになります。

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/