ラジオボタン

<radiogroup>
  <radiobutton>・・・</radiobutton>
  <radiobutton>・・・</radiobutton>
  <radiobutton>・・・</radiobutton>
</radiogroup>

<radiogroup>タグで、複数の<radiobutton>を囲みます。

• 同時に一つしか選択できません
• デフォルトでは1番目が選択された状態になります
• デフォルトでは縦向けに配置されます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <radiogroup>
     <radiobutton>いち</radiobutton>
     <radiobutton>に</radiobutton>
     <radiobutton>さん</radiobutton>
   </radiogroup>
</canvas>

<radiogroup>のonselectイベントでvalue値をとりだせます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <simplelayout spacing="30" axis="x"/>
   <radiogroup>
      <handler name="onselect">
          txt.setAttribute('text',this.value + "が選択されました。");
      </handler>
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
   </radiogroup>
   <text name="txt"/>
</canvas>

自動的に一つ目が選択されるのは仕様なので、一つ目にダミーで <radiobutton visible=“false”/> を入れておくといいでしょう。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <simplelayout spacing="30" axis="x"/>
   <radiogroup>
      <handler name="onselect">
          if(this.value)txt.setAttribute('text',this.value + "が選択されました。");
      </handler>
      <radiobutton visible="false"/>
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
   </radiogroup>
   <text name="txt"/>
</canvas>

こっちのほうがスマート(^^)。

<radiogroup defaultselection="null">

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <simplelayout spacing="30" axis="x"/>
   <radiogroup defaultselection="null">
      <handler name="onselect">
          if(this.value)txt.setAttribute('text',this.value + "が選択されました。");
      </handler>
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
   </radiogroup>
   <text name="txt"/>
</canvas>

<radiogroup>のlayout属性で設定します。layout=“axis:x” です。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <radiogroup height="60" layout="axis:x; spacing:2">
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
      <radiobutton value="4">よん</radiobutton>
      <radiobutton value="5">ご</radiobutton>
      <radiobutton value="6">ろく</radiobutton>
      <radiobutton value="7">しち</radiobutton>
      <radiobutton value="8">はち</radiobutton>
      <radiobutton value="9">きゅう</radiobutton>
   </radiogroup>
</canvas>

横向きにしようと<simplelayout axis=“x”/>を入れたら、こうなります(笑)。もともと縦整列の機能があるので、横整列が足されて斜めになってしまったという理屈です。斜めにしたいときはどうぞ(笑)。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <radiogroup>
      <simplelayout axis="x"/>
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
      <radiobutton value="4">よん</radiobutton>
      <radiobutton value="5">ご</radiobutton>
      <radiobutton value="6">ろく</radiobutton>
      <radiobutton value="7">しち</radiobutton>
      <radiobutton value="8">はち</radiobutton>
      <radiobutton value="9">きゅう</radiobutton>
   </radiogroup>
</canvas>

<radiogroup>のlayout属性で設定します。axis:yの場合、heightの設定が肝心。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
   <radiogroup height="60" layout="class:wrappinglayout; axis:y">
      <radiobutton value="1">いち</radiobutton>
      <radiobutton value="2">に</radiobutton>
      <radiobutton value="3">さん</radiobutton>
      <radiobutton value="4">よん</radiobutton>
      <radiobutton value="5">ご</radiobutton>
      <radiobutton value="6">ろく</radiobutton>
      <radiobutton value="7">しち</radiobutton>
      <radiobutton value="8">はち</radiobutton>
      <radiobutton value="9">きゅう</radiobutton>
   </radiogroup>
</canvas>

データバインド機能を利用すると、XMLデータに合わせてラジオボタンを動的に表示することができます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds">
    <data>
      <sample num="1" name="サンプル１"/>
      <sample num="2" name="サンプル２"/>
      <sample num="3" name="サンプル３"/>
    </data>
  </dataset>
 
  <radiogroup>
    <radiobutton datapath="ds:/data/sample" 
                 value="$path{'@num'}" text="$path{'@name'}"/>
  </radiogroup>
</canvas>

動的データからラジオボタンを作るのとはちょっと違います。

普通に動的データをレプリケーションで表示して、その中にラジオボタンを入れるという、、なんかややこしいですが、とりあえず備忘録(^^;)

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
 
<dataset name="ds" >
  <root>
    <data name="データ１" d1="データ11" d2="データ12" d3="データ13"/>
    <data name="データ２" d1="データ21" d2="データ22" d3="データ23"/>
    <data name="データ３" d1="データ31" d2="データ32" d3="データ33"/>
    <data name="データ４" d1="データ41" d2="データ42" d3="データ43"/>
    <data name="データ５" d1="データ51" d2="データ52" d3="データ53"/>
    <data name="データ６" d1="データ61" d2="データ62" d3="データ63"/>
    <data name="データ７" d1="データ71" d2="データ72" d3="データ73"/>
  </root>
</dataset>
 
<!-- ラジオボタン用 -->
<node id="grpman">
  <attribute name="cursel" value="null" />
  <method name="select" args="d" ><![CDATA[
    if (d.datapath.p == this.cursel) return;
    this.cursel = d.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"/>
 
<vbox y="20" spacing="5" >
  <hbox datapath="ds:/root/data" bgcolor="0xffffff" spacing="10">
    <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>
    <text datapath="@name"/>
    <text datapath="@d1" />
    <text datapath="@d2" />
    <text datapath="@d3" />
  </hbox>
</vbox>
 
</canvas>