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

第10回 OpenLaszloで使えるコンポーネントいろいろ

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

<checkbox>

<checkbox>はチェックの有無についてtrue/falseをvalue属性値として返します。オーソドックスにフォームの一要素として使えるのはもちろん,コンストレイント式を使って他のコンポーネントとリアルタイムで連動できます。

サンプルでは,チェックボックスのチェックオンオフに連動してボタンの有効/無効や赤四角の可視/不可視を制御しています。

リスト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のように ' で囲います。デフォルトでは一番上の項目が選択されている状態になります。

リスト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のように固定的な選択肢を埋め込むには,<textlistitem>で直接文字列を指定します。データセットのXMLデータをもとに選択肢を動的生成するにはリスト8のように書きます。このやりかたは,たとえばデータベースから選択項目を取り出して表示する場合などに使えます。

リスト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の(注)の記述で,$path{}というのは,textやvalueなどの属性値をXPathでデータパスから取得するという意味です。

<edittext>

入力欄のコンポーネントです。入力値はvalue属性で取り出せます。1つめはノーマル,2つめは入力文字がアスタリスク表示になるパターンです。

リスト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でキー入力の瞬間をイベントハンドラで拾って,自作isInputted()メソッドで2つの入力欄に文字が入っているかどうかを調べ,その結果によってログインボタンの有効化/無効化をしています。ユーザ名,パスワードの両方が入っていないとログインボタンが押せないようになっています。

リスト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サンプル

著者プロフィール

ason(あそん)

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

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