<checkbox>
<checkbox>はチェックの有無についてtrue/
サンプルでは,
リスト5
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<checkbox id="chk">チェックボックス</checkbox>
<text text="${chk.value}"/>
<button enabled="${chk.value}" text="ボタン"/>
<view width="100" height="30" bgcolor="red" visible="${chk.value}"/>
</canvas>
リスト5サンプル
ラジオボタン
ラジオボタンは<radiobutton>を<radiogroup>で囲います。選択された項目の値はvalue属性で取得できます。value値が数字以外の時は,
リスト6
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="30" axis="x"/>
<radiogroup id="rb">
<radiobutton value="'one'">1</radiobutton>
<radiobutton value="'two'">2</radiobutton>
<radiobutton value="'three'">3</radiobutton>
</radiogroup>
<text fgcolor="red" text="${rb.value}"/>
</canvas>
リスト6サンプル
<combobox>
HTMLでいうセレクトボックスです。<textlistitem>を使って選択項目の表示文字列と値を設定していきます。これもvalue属性で値を取得できます。
リスト7
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="30" axis="x"/>
<combobox id="cb" width="130" editable="false">
<textlistitem text="黒" value="'くろ'"/>
<textlistitem text="赤" value="'あか'"/>
<textlistitem text="青" value="'あお'"/>
</combobox>
<text text="${cb.value}"/>
</canvas>
リスト7サンプル
リスト7のように固定的な選択肢を埋め込むには,
リスト8
<canvas proxied="false" bgcolor="0xffffcc">
<dataset name="ds" >
<item value="しろ">白</item>
<item value="むらさき">紫</item>
<item value="みどり">緑</item>
</dataset>
<simplelayout spacing="30" axis="x"/>
<combobox id="cb" width="130" editable="false">
<textlistitem datapath="ds:/item" text="$path{'text()'}" value="$path{'@value'}"/> <!--(注)-->
</combobox>
<text text="${cb.value}"/>
</canvas>
リスト8サンプル
リスト8の(注)の記述で,
<edittext>
入力欄のコンポーネントです。入力値はvalue属性で取り出せます。1つめはノーマル,
リスト9
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="2"/>
<edittext id="ed1"/>
<text text="${ed1.value}"/>
<edittext id="ed2" password="true"/>
<text text="${ed2.value}"/>
</canvas>
リスト9サンプル
リスト10は少し応用でログインパネルを作ってみた例です。onkeyupでキー入力の瞬間をイベントハンドラで拾って,
リスト10
<canvas proxied="false" bgcolor="0xffffcc">
<view x="10" y="10" width="170">
<text text="ユーザー名"/>
<edittext id="ed1" align="right" onkeyup="btn.isInputted()"/>
<text text="パスワード" y="30"/>
<edittext id="ed2" align="right" y="30" password="true" onkeyup="btn.isInputted()"/>
<button id="btn" align="right" y="60" enabled="false">ログイン
<method name="isInputted"><![CDATA[
if(ed1.value!="" && ed2.value!=""){
// 入力欄が両方空でないときはボタンを有効化
this.setAttribute('enabled',true);
}else{
// 入力欄が両方空のときはボタンを無効化
this.setAttribute('enabled',false);
}
]]></method>
</button>
</view>
</canvas>
リスト10サンプル