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

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

今回は、OpenLaszloで標準で提供されている主なコンポーネントについて、サンプル満載で紹介します。LZXの特徴であるソースのXML構造にも注目しながら見てください。サンプルについては、いかにもサンプルといったものもありますが、よく使うものは実践に役立つようなサンプルになるよう工夫してみました。

<view>

これまでにも何度か出てきましたが、まずは基本中の基本<view>です。width、height、bgcolorの3つを設定したときに画面上に表示されます。

リスト1にあるcornerradius(SWF10/HTML5で対応)はビューを角丸にする属性です。

<view>の中にある<dragstate>は、ビューをドラッグアンドドロップ可能にするタグです。ビューのonmousedownとonmouseupで<dragstate>のapply()、remove()を実行して、ドラッグアンドドロップできるようにしています。

ドラッグできるということは、xとyが変わります。ビューをドラッグしたとき、つまりxとyが変わったとき(onxとony)に、それぞれのイベントハンドラでビューが画面からはみ出さないようにスクリプトを記述しています。

リスト1
<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="100" bgcolor="red" cornerradius="10"
    onmousedown="this.dr.apply()" onmouseup="this.dr.remove()">
    <dragstate name="dr"/>
    <handler name="onx"><![CDATA[
      if(this.x<0)this.setAttribute('x',0);
      if(this.x+this.width>canvas.width)this.setAttribute('x',canvas.width-this.width);
    ]]></handler>
    <handler name="ony"><![CDATA[
      if(this.y<0)this.setAttribute('y',0);
      if(this.y+this.height>canvas.height)this.setAttribute('y',canvas.height-this.height);
    ]]></handler>
  </view>
</canvas>
リスト1サンプル

<text>

文字列を表示するという、極めて使用頻度の高いタグです。装飾系のいろいろなオプションがあります。リスト2を参考にしてください。

リスト2
<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout/>
  <text textdecoration="underline">下線を引く</text>
  <text fontstyle="bold">太字にする</text>
  <text fontstyle="italic">斜体にする</text>
  <text fontstyle="bold italic">太字及び斜体にする</text>
  <text fontsize="20">フォントサイズを大きく</text>
  <text fgcolor="0xff0000">文字色をつける</text>
  <text bgcolor="0xffff00">背景色をつける</text>
  <text multiline="true" bgcolor="0xaaffaa">
    複数行<br/>
    複数行<br/>
    複数行<br/>
  </text> 
  <text textalign="center" width="200" bgcolor="0xaaaaff">センタリング</text>
  <text textalign="right" width="200" bgcolor="0xffaaaa">右寄せ</text>
  <text><font color="#ff0000">色をつけたり、</font><i>斜めにしたり、</i><u>下線を引いたり、</u><b>太字にしたり。</b></text>
</canvas>
リスト2サンプル

ボタン

リスト3のサンプルは、1つめのボタンを押すたびにボタン文字列が変わります。同時に2つめのボタンの有効化/無効化の設定をしています。

3つめの青いボタンは、好きな画像でボタンを作った例です。<resource>の中でノーマル時、マウスオーバー時、マウスダウン時の自作ボタン画像を<frame>で指定します。このとき<frame>の記述する順番に意味があるので注意です。その<resource>の名前を<basebutton>のresource属性で指定すればOKです。

リスト3
<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5"/>
  <button width="100" height="50" fontstyle="bold">ボタン
    <handler name="onclick">
      this.setAttribute('text',this.text=="ボタン"?"ぼたん":"ボタン");
      btn.setAttribute('enabled',this.text=="ボタン"?false:true);
    </handler>
  </button>
  <button id="btn" enabled="false" text="ボタン"/>
  <resource name="myButton">
    <frame src="bt_up.png" /><!--ノーマル時-->
    <frame src="bt_over.png" /><!--マウスオーバー時-->
    <frame src="bt_down.png" /><!--マウスダウン時-->
  </resource>
  <basebutton resource="myButton"/> 
</canvas>
リスト3サンプル

ウインドウ

ウインドウコンポーネントには<window>、<alert>、<modaldialog>があります。

<window>はこれまでにもときどき出てきましたが、サンプルをご覧のとおりの一般的なウインドウです。

<alert>は文字列と閉じるボタンのみを扱えるアラートウインドウです。このウインドウが表示されている間は画面の他の部分を動かすことはできません。

<modaldialog>は文字列だけの<alert>とは違って、普通の<window>のようにいろいろなコンポーネントを入れることができます。リスト4ではチェックボックスを入れてみました。<modaldialog>も<alert>と同じく、表示中は画面の他の部分を動かすことはできません。

リスト4
<canvas proxied="false" bgcolor="0xffffcc"> 
  <button onclick="al.open()">アラートウインドウを出す</button>
  <button onclick="dl.open()" y="30">モーダルダイアログを出す</button>
  <window y="60" width="200" height="150" title="ウインドウサンプル" resizable="true" closeable="true">
    <vbox align="center" valign="middle">
      <text>・ドラッグアンドドロップ可能</text>
      <text>・タイトル設定可能</text>
      <text>・リサイズ可能</text>
      <text>・クローズ可能</text>
    </vbox>
  </window>
  <alert id="al" button1="閉じる">
     アラートウインドウ。
  </alert>
  <modaldialog id="dl" width="200" height="150">
    <simplelayout spacing="5"/>
    <text>モーダルダイアログ</text>
    <checkbox>チェックボックス</checkbox>
    <button onclick="parent.close()">閉じる</button>
  </modaldialog>
</canvas>
リスト4サンプル

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

<grid>

いわゆる表ですが、データパスのデータを表示するのが前提のコンポーネントです。

リスト11ではよく使う属性を全部使っています。<grid>については、shownitemsはデフォルト表示項目数、showvlinesは縦罫線の表示、showhlinesは横罫線の表示、bgcolor0とbgcolor1は偶数行と奇数行で色分け、といった属性をよく使います。

グリッド中で文字列を表示する<gridtext>については、textalignは文字列の位置指定、datatypeはデータタイプの指定。datatypeは数値データの場合numberに設定するとソートしたときに数値順に並びます。

<gridcolumn>は文字列だけでなく他のコンポーネントを含めることができます。リスト11では<view>を入れ、売上数値がそのまま幅になって、グラフになっています。売上数値をクリックして数値を変更するとグラフもリアルタイムで変わるので、試してみてください。

リスト11
<canvas proxied="false" bgcolor="0xffffcc">
  <dataset name="ds" >
    <root>
      <data data1="250" data2="りんご"/>
      <data data1="50" data2="いちご"/>
      <data data1="30" data2="みかん"/>
      <data data1="220" data2="ぶどう"/>
      <data data1="200" data2="かき"/>
      <data data1="60" data2="もも"/>
      <data data1="70" data2="さくらんぼ"/>
      <data data1="150" data2="なし"/>
      <data data1="100" data2="すいか"/>
    </root>
  </dataset>
  <grid datapath="ds:/root" width="400"
      shownitems="5" 
      showvlines="true"
      showhlines="true"
      bgcolor0="0xffffdd"
      bgcolor1="0xffdddd"  >
    <gridtext name="d" datapath="position()" textalign="right">連番</gridtext>
    <gridcolumn width="200">売上グラフ
      <view>
        <view y="8" width="$path{'@data1'}" height="10" bgcolor="0x6666ff" />
      </view>
    </gridcolumn>
    <gridtext datapath="@data1" datatype="number">売上</gridtext>
    <gridtext datapath="@data2">商品</gridtext>
  </grid> 
</canvas>
リスト11サンプル

<list>

ボックス形式の選択肢リストコンポーネントです。コーディングは<combobox>に似ています。デフォルトではなにも選ばれていないのでvalue値はnullになります。

リスト12
<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="30" axis="x"/>
  <list id="lst" width="130" shownitems="5">
    <textlistitem text="黒" value="'くろ'"/>
    <textlistitem text="赤" value="'あか'"/>
    <textlistitem text="青" value="'あお'"/>
    <textlistitem text="白" value="'しろ'"/>
    <textlistitem text="緑" value="'みどり'"/>
    <textlistitem text="紫" value="'むらさき'"/>
    <textlistitem text="黄" value="'き'"/>
  </list>
  <text text="${lst.value}"/>
</canvas>
リスト12サンプル

<tree>

ツリー形式にデータを表示するコンポーネントです。ツリー用のコンポーネントはすべて<tree>ですが、ファイルシステムでいうフォルダ/ファイルの区別をisleaf属性でします。isleaf="false"(デフォルト)にすると、フォルダのような形になります。

リスト13
<canvas proxied="false" bgcolor="0xffffcc"> 
  <include href="lz/tree.lzx"/>
  <tree open="true" text="サイトマップ">
    <tree open="true" text="会社情報">
      <tree text="会社概要" isleaf="true"/>
      <tree text="事業内容" isleaf="true"/>
      <tree text="沿革" isleaf="true"/>
      <tree text="アクセス" isleaf="true"/>
    </tree>
    <tree open="true" text="採用情報">
      <tree text="新卒採用" isleaf="true"/>
      <tree text="中途採用" isleaf="true"/>
    </tree>
  </tree>
</canvas>
リスト13サンプル

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

おすすめ記事

記事・ニュース一覧