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

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

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

今回は,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サンプル

著者プロフィール

ason(あそん)

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

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

コメント

コメントの記入