コンポーネントの姿を動的に変更

<dataset>の動的データを元にコンポーネントを動的に作っていく例です。RIAのこういう性質に慣れると、実際のアプリにセンス良く(?)応用できそうですね。

お試しで、赤い領域にある入力欄に何かいれて追加ボタンを押してみてください。理屈を言うと、入力値が<dataset>のXMLデータとして追加され、その<dataset>にバインドしているコンポーネントが自動で反応してその数や姿を変えていく、という感じです。

• 追加するのは3つぐらいにしとかないとえらいことになるので注意。
• グリッド(真ん中左の表みたいなコンポーネント)の左列の値を変更すると面白いことが起きます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <dataset name="ds">
     <item text="テキスト1" value="バリュー1"/>
  </dataset>
  <simplelayout spacing="10"/>
  <hbox spacing="10" bgcolor="red" width="100%" height="40">
    <edittext id="ed" xoffset="-20" valign="middle" width="150">ここに何か入力</edittext>
    <button text="追加" xoffset="-20" valign="middle">
      <handler name="onclick">
        var d = ed.getText();
        var e = new LzDataElement ("item",{'text':d, 'value':d});
        ds.appendChild(e); 
      </handler>
    </button>
  </hbox>
 
  <hbox spacing="10">
    <vbox>
      <button datapath="ds:/item" text="$path{'@text'}"/>
    </vbox>
    <vbox>
      <checkbox datapath="ds:/item" text="$path{'@text'}" value="$path{'@value'}"/>
    </vbox>
    <radiogroup>
      <radiobutton datapath="ds:/item" text="$path{'@text'}" value="$path{'@value'}"/>
    </radiogroup>
    <list height="82">
      <textlistitem datapath="ds:/item" text="$path{'@text'}" value="$path{'@value'}"/>
    </list>
    <combobox>
      <textlistitem datapath="ds:/item" text="$path{'@text'}" value="$path{'@value'}"/>
    </combobox>
  </hbox>
  <hbox spacing="10">
    <grid datapath="ds:/" height="150">
      <gridtext datapath="@text">データ</gridtext>
      <gridtext datapath="@value">バリュー</gridtext>
    </grid>
    <tabslider width="150" height="150">
      <tabelement datapath="ds:/item" text="$path{'@text'}"/>
    </tabslider>
  </hbox>
  <tabs height="100">
    <tabpane datapath="ds:/item" text="$path{'@text'}"/>
  </tabs>
</canvas>