グリッド

グリッドにチェックボックスを表示し、チェックした行(複数OK)に対して何か処理をするというサンプル。とりあえず、選択データの表示と、削除を入れています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <root>
      <data data1="AAA" data2="111"/>
      <data data1="BBB" data2="222"/>
      <data data1="CCC" data2="333"/>
      <data data1="DDD" data2="444"/>
      <data data1="EEE" data2="555"/>
      <data data1="FFF" data2="666"/>
      <data data1="GGG" data2="777"/>
      <data data1="HHH" data2="888"/>
      <data data1="III" data2="999"/>
    </root>
  </dataset>
  <grid datapath="ds:/root" contentdatapath="data">
    <gridcolumn text="選択"  >
      <checkbox datapath="@checked" onclick="this.datapath.updateData()" xoffset="-20" yoffset="-4">
        <method name="updateData" >
          return this.value ? "true" : "false";
        </method>
      </checkbox>
    </gridcolumn>
    <gridtext datapath="@data1" textalign="center" width="100" text="data1" />
    <gridtext datapath="@data2" textalign="center" width="100" text="data2" />
  </grid> 
 
  <text x="300" id="txt" multiline="true"/>
 
  <button x="400" text="チェックした行の内容を表示" >
    <handler name="onclick" ><![CDATA[
      txt.clearText();
      var dp = new LzDatapointer();
      var res = dp.xpathQuery( "ds:/root/data[@checked='true']" );
      if( res ){
        if( !(res instanceof Array) )
          res = [res];
        for( var i=0; i<res.length; ++i ){
          dp.setPointer( res[i] );
          var d1 = dp.xpathQuery("@data1");
          var d2 = dp.xpathQuery("@data2");
          txt.addText(d1 + " " + d2 + "\n");
        }
      }
      delete dp;
    ]]></handler>
  </button>
 
  <button x="400" y="100" text="チェックした行を削除" >
    <handler name="onclick" ><![CDATA[
      var dp = new LzDatapointer();
      var res = dp.xpathQuery( "ds:/root/data[@checked='true']" );
      if( res ){
        if( !(res instanceof Array) )
          res = [res];
        for( var i=0; i<res.length; ++i ){
          dp.setPointer( res[i] );
          dp.deleteNode();
        }
      }
      delete dp;
    ]]></handler>
  </button>
</canvas>

グリッドヘッダにチェックボックスを置いて、全選択/全解除をできるようにしました。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <root>
      <data data1="AAA" data2="111"/>
      <data data1="BBB" data2="222"/>
      <data data1="CCC" data2="333"/>
      <data data1="DDD" data2="444"/>
      <data data1="EEE" data2="555"/>
      <data data1="FFF" data2="666"/>
      <data data1="GGG" data2="777"/>
      <data data1="HHH" data2="888"/>
    </root>
  </dataset>
 
  <grid datapath="ds:/root" contentdatapath="data">
    <gridcolumn showheader="false" width="30">
      <!-- ヘッダ部のチェックボックス -->
      <checkbox xoffset="${6-parent.width/2}" y="5" placement="header" value="false">
        <handler name="onvalue" args="v">
          var dp = parent.parent.datapath.dupePointer();
          dp.selectChild();
          do{
            if(v)  dp.setNodeAttribute('checked',"true" );
            if(!v) dp.setNodeAttribute('checked',"false" );
          }while(dp.selectNext());
        </handler>
      </checkbox>
      <!-- コンテンツ部のチェックボックス -->
      <checkbox datapath="@checked" xoffset="${6-parent.width/2}" yoffset="-4" onclick="this.datapath.updateData()" />
    </gridcolumn>
    <gridtext datapath="@data1" textalign="center" width="100" text="data1" />
    <gridtext datapath="@data2" textalign="center" width="100" text="data2" />
  </grid> 
 
  <text x="300" id="txt" multiline="true"/>
 
  <button x="400" text="チェックした行の内容を表示" >
    <handler name="onclick" ><![CDATA[
      txt.clearText();
      var dp = new LzDatapointer();
      var res = dp.xpathQuery( "ds:/root/data[@checked='true']" );
      if( res ){
        if( !(res instanceof Array) )
          res = [res];
        for( var i=0; i<res.length; ++i ){
          dp.setPointer( res[i] );
          var d1 = dp.xpathQuery("@data1");
          var d2 = dp.xpathQuery("@data2");
          txt.addText(d1 + " " + d2 + "\n");
        }
      }
    ]]></handler>
  </button>
 
  <button x="400" y="100" text="チェックした行を削除" >
    <handler name="onclick" ><![CDATA[
      var dp = new LzDatapointer();
      var res = dp.xpathQuery( "ds:/root/data[@checked='true']" );
      if( res ){
        if( !(res instanceof Array) )
          res = [res];
        for( var i=0; i<res.length; ++i ){
          dp.setPointer( res[i] );
          dp.deleteNode();
        }
      }
    ]]></handler>
  </button>
</canvas>

ラジオボタンはチェックボックスと違って、一つだけ選択できます。

http://forum.openlaszlo.org/showthread.php?t=10147からの拾い物。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
 
<dataset name="ds" >
  <root>
    <data name="京都" />
    <data name="大阪" />
    <data name="奈良" />
    <data name="滋賀" />
    <data name="兵庫" />
    <data name="和歌山" />
    <data name="三重" />
  </root>
</dataset>
 
<node id="grpman">
  <attribute name="cursel" value="null" />
  <method name="select" args="grp" ><![CDATA[
    if (grp.datapath.p == this.cursel) return;
    this.cursel = grp.datapath.p;
    var dp = new LzDatapointer(this);
    dp.setPointer(this.cursel.parentNode);
    var arr = dp.xpathQuery(this.cursel.nodeName);
    dp.destroy();
    if (arr) {
      if (!(arr instanceof Array)) {
      arr = [arr];
      } 
      for (var i=0; i<arr.length; ++i) {
        if (arr[i] != this.cursel) {
          arr[i].setAttr("selected", "false");
        }
      }
    }
  ]]></method>
</node>
 
<text name="txt"/>
 
<grid y="20" datapath="ds:/root" contentdatapath="data" shownitems="7" >
  <gridtext datapath="@name" text="都道府県" editable="false"/>
  <gridcolumn text="選択" >
    <view>
      <radiogroup datapath="@selected" defaultselection="null" >
        <handler name="onselect" args="d"><![CDATA[
          this.datapath.updateData();
          grpman.select(this);
          var dp = new LzDatapointer();
          var res = dp.xpathQuery( "ds:/root/data[@selected='true']" );
          if( res ){
            if( !(res instanceof Array) ){ 
            res = [res];
            } 
            for( var i=0; i<res.length; ++i ){
              dp.setPointer( res[i] );
              var d = dp.xpathQuery("@name");
              txt.setAttribute('text',d + "が選択されました");
            }
          }
        ]]></handler>
        <radiobutton />
        <method name="updateData" >
          return "true";
        </method>
        <method name="applyData" args="d" >
          if (d == "true") {
            this.selectItemAt(0);
          } else {
            this.clearSelection();
          }
        </method>
      </radiogroup>
    </view>
  </gridcolumn>
</grid>
 
</canvas>

http://forum.openlaszlo.org/showthread.php?t=11699からの拾い物。

サンプルの「マージ」ボタンを押すと、奇数データグリッドと偶数データグリッドがマージされて３つ目のグリッドに表示されます。

マージ結果を反映しているのは表示だけで、データセットの中が変わっているわけではないので注意。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
 
    <dataset name="ds1" >
        <root>
           <data num="1" type="奇数"/> 
           <data num="3" type="奇数"/> 
           <data num="5" type="奇数"/> 
           <data num="7" type="奇数"/> 
        </root>
    </dataset>
    <dataset name="ds2">
        <root>
           <data num="2" type="偶数"/> 
           <data num="4" type="偶数"/> 
           <data num="6" type="偶数"/> 
           <data num="8" type="偶数"/> 
        </root>
    </dataset>
 
    <simplelayout axis="x" spacing="10"/>
 
    <grid datapath="ds1:/root" contentdatapath="data">
        <gridtext datapath="@num" >数字</gridtext>
        <gridtext datapath="@type">タイプ</gridtext>
    </grid>
 
    <grid datapath="ds2:/root" contentdatapath="data">
        <gridtext datapath="@num" >数字</gridtext>
        <gridtext datapath="@type">タイプ</gridtext>
    </grid>
 
    <grid id="gr" datapath="" contentdatapath="data">
        <gridtext datapath="@num" >数字</gridtext>
        <gridtext datapath="@type">タイプ</gridtext>
    </grid>
 
    <button text="マージ" >
        <handler name="onclick">
            var toArray = function(a) {
                return a ? a instanceof Array ? a : [a] : [];
            }
 
            var ds1_list = toArray(ds1.getPointer().xpathQuery("ds1:/root/data"));
            var ds2_list = toArray(ds2.getPointer().xpathQuery("ds2:/root/data"));
 
            var repl = gr._getReplicator();
            if (repl instanceof LzReplicationManager) {
                repl.setNodes(ds1_list.concat(ds2_list));
            } else {
                repl.datapath.setNodes(ds1_list.concat(ds2_list));
            }
        </handler>
    </button>
</canvas>

２つのデータセット間でデータをコピーしたりマージすることで、データバインディングしたコンポーネントの表示を変更する方法。

サンプルでは：

• 「上書きコピー」ボタンで、左グリッドの内容が右グリッドに上書きでコピーされます。
• 「マージ」ボタンで、左グリッドの内容が右グリッドに追加されます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <root>
      <data num="1" /> 
      <data num="2" /> 
      <data num="3" /> 
      <data num="4" /> 
      <data num="5" /> 
    </root>
  </dataset>
  <dataset name="tmp">
    <root>
      <data num="6" /> 
      <data num="7" /> 
      <data num="8" /> 
      <data num="9" /> 
    </root>
  </dataset>
  <simplelayout axis="x" spacing="10"/>
  <grid datapath="ds:/root" contentdatapath="data" shownitems="5">
    <gridtext datapath="@num" >数字</gridtext>
  </grid>
  <button text="上書きコピー" >
    <handler name="onclick">
      var TO = tmp.getPointer();
      tmp.removeChild(TO.p.getFirstChild());
      TO.selectChild();
      var FROM = ds.getPointer();
      FROM.selectChild();
      TO.addNodeFromPointer(FROM);
    </handler>
  </button>
  <button text="マージ" >
    <handler name="onclick">
      var TO = tmp.getPointer();
      TO.selectChild();
      var FROM = ds.getPointer();
      FROM.selectChild(2);
      do{
        TO.addNodeFromPointer(FROM);
      }while(FROM.selectNext());
    </handler>
  </button>
  <grid datapath="tmp:/root" contentdatapath="data" shownitems="5">
    <gridtext datapath="@num" >数字</gridtext>
  </grid>
</canvas>