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

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

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

<menu>

アプリケーションのメニューバーのようなコンポーネントです。メニューの土台となるメニューバー<menubar>,プルダウンメニューを実現する<menu>,メニューの実体<menuitem>,区切り線<menuseparator>などのコンポーネントからなります。<window>の中に入れるとアプリらしくなりますので,試してみてください。<menuitem>はonselectでイベントを拾います。

リスト14

<canvas proxied="false" bgcolor="0xffffcc"> 
  <menubar width="200">
    <menu text="ファイル" width="100">
      <menuitem text="新規作成" onselect="txt.menuname(this.text);"/>
      <menuitem text="開く" onselect="txt.menuname(this.text);"/>
      <menuitem text="保存" onselect="txt.menuname(this.text);"/>
      <menuseparator/>
      <menuitem text="印刷">
        <menu>
          <menuitem text="印刷プレビュー" onselect="txt.menuname(this.text);"/>
          <menuitem text="印刷" onselect="txt.menuname(this.text);"/>
        </menu>
      </menuitem>
    </menu>
    <menu text="編集" width="100">
      <menuitem text="切り取り" onselect="txt.menuname(this.text);"/>
      <menuitem text="コピー" onselect="txt.menuname(this.text);"/>
      <menuitem text="貼りつけ" onselect="txt.menuname(this.text);"/>
    </menu>
  </menubar>
  <text id="txt" x="220">
    <method name="menuname" args="d">
      this.setAttribute('text',d);
    </method>
  </text>
</canvas>

リスト14サンプル

<tabs>

タブのコンポーネントです。いちばん外側の入れ物である<tabs>と,そのなかのひとつひとつのタブ<tabpane>からなります。<tabpane>を追加していけば,その分タブが増えていきます。<tabpane>直下の文字列はタブのタイトルになります。デフォルトでは<tabs>のサイズは,一番大きい<tabpanes>のサイズに自動的に合わせられます。

リスト15

<canvas proxied="false" bgcolor="0xffffcc"> 
  <tabs x="5">
    <tabpane>タブ1
      <simplelayout spacing="5"/>
      <checkbox>ボーカル</checkbox>
      <checkbox>ギター</checkbox>
      <checkbox>ベース</checkbox>
      <checkbox>ドラム</checkbox>
    </tabpane>
    <tabpane>タブ2
      <radiogroup>
        <radiobutton>スラッシュメタル</radiobutton>
        <radiobutton>デスメタル</radiobutton>
        <radiobutton>ブラックメタル</radiobutton>
      </radiogroup>
    </tabpane>
    <tabpane selected="true">タブ3
      <simplelayout spacing="5"/>
      <button>ボタン</button>
      <button>ボタン</button>
      <button>ボタン</button>
    </tabpane>
  </tabs>
</canvas>

リスト15サンプル

<tabslider>

縦方向にアニメーションしながらスライドするタブスライダーです。ソースの構造的には<tabs>とそっくりです。いちばん外側の入れ物である<tabslider>と,その中のひとつひとつのタブ<tabelement>からなります。

リスト16

<canvas proxied="false" bgcolor="0xffffcc"> 
  <tabslider width="150" x="10" y="10" height="200" spacing="2" slideduration="300">
    <tabelement>タブスライダー1
      <simplelayout spacing="5"/>
      <checkbox>ボーカル</checkbox>
      <checkbox>ギター</checkbox>
      <checkbox>ベース</checkbox>
      <checkbox>ドラム</checkbox>
    </tabelement>
    <tabelement>タブスライダー2
      <radiogroup>
        <radiobutton>スラッシュメタル</radiobutton>
        <radiobutton>デスメタル</radiobutton>
        <radiobutton>ブラックメタル</radiobutton>
      </radiogroup>
    </tabelement>
    <tabelement selected="true">タブスライダー3
      <simplelayout spacing="5"/>
      <button>ボタン</button>
      <button>ボタン</button>
      <button>ボタン</button>
    </tabelement>
  </tabslider>
</canvas>

リスト16サンプル

著者プロフィール

ason(あそん)

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

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