OpenLaszloのアプリ開発言語LZXはオブジェクト指向プログラミング言語です。オブジェクト指向の技法を使うとコーディングの効率化が図れたり、
クラス作成とインスタンス化
クラスとは、
まず、
リスト1のサンプルは、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<view height="50" width="100" bgcolor="yellow" />
<view height="50" width="100" bgcolor="yellow" />
<view height="50" width="100" bgcolor="yellow" />
</canvas>リスト1の問題点は、
まず黄色い四角のひな型＝クラスを作成します。クラスを作成するためのタグは<class>です。では、
<view height="50" width="100" bgcolor="yellow" />
↓
<class name="myView" height="50" width="100" bgcolor="yellow" />クラス作成はタグのひな型を定義するだけのもので、
リスト3では、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<!--myViewクラス-->
<class name="myView" height="50" width="100" bgcolor="yellow" />
<!--myViewインスタンス-->
<myView />
<myView />
<myView />
</canvas>実はこれまでに頻繁に出てきた<text>や<button>、
それでは、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myView" height="50" width="100" bgcolor="red" >
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<myView />
<myView />
<myView />
</canvas>自作のタグ<myView>は普通の<view>と同じように扱えますので、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myView" height="50" width="100" bgcolor="red" >
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<myView height="100" />
<myView bgcolor="blue"/>
<myView width="200" >
<text align="center" valign="middle">自作クラスサンプル</text>
</myView>
</canvas>クラスの継承
クラスを作成するとき、
myViewクラスを継承して、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<!--myViewクラス-->
<class name="myView" height="50" width="100" bgcolor="red" >
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<!--myViewクラスを元に作ったmySquareクラス-->
<class name="mySquare" width="${this.height}" extends="myView">
</class>
<!--mySquareインスタンス-->
<mySquare />
</canvas>属性の設定
リスト6の正方形クラスにはひとつ問題があります。mySquareタグでheightを設定したときは必ず正方形になりますが、
そこで属性を定義するためのタグ<attribute>を使って改善してみましょう。<attribute>はwidth、
リスト7のmySquareクラスでは、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<!--myViewクラス-->
<class name="myView" height="50" width="100" bgcolor="red" >
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<!--myViewクラスを元に作ったmySquareクラス-->
<class name="mySquare" width="${this.size}" height="${this.size}" extends="myView">
<attribute name="size" value="80"/>
</class>
<!--mySquareインスタンス(1)-->
<mySquare />
<!--mySquareインスタンス(2)-->
<mySquare size="120" />
</canvas>イベントハンドラ
イベントハンドラは継承されます。
リスト8では、
myViewを継承したmySquareクラスではさらにonclickイベントハンドラを追加で定義し、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myView" height="50" width="100" bgcolor="red" >
<handler name="onmouseover">
this.setAttribute('bgcolor',"blue");
</handler>
<handler name="onmouseout">
this.setAttribute('bgcolor',"red");
</handler>
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<class name="mySquare" width="${this.size}" height="${this.size}" extends="myView">
<attribute name="size" value="40"/>
<handler name="onclick">
this.setAttribute('size',this.size+5);
</handler>
</class>
<myView />
<mySquare />
</canvas>メソッド
メソッドも継承できます。メソッドを継承したときは内容は上書きになります。
リスト9のサンプルでは、
サンプルの四角をクリックすると、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myView" height="50" width="100" bgcolor="red" >
<handler name="onmouseover">
this.setAttribute('bgcolor',"blue");
</handler>
<handler name="onmouseout">
this.setAttribute('bgcolor',"red");
</handler>
<view width="${parent.width-4}" height="${parent.height-4}"
align="center" valign="middle" bgcolor="yellow" />
</class>
<class name="mySquare" width="${this.size}" height="${this.size}" extends="myView">
<attribute name="size" value="40"/>
<handler name="onclick">
this.changesize();
</handler>
<method name="changesize">
// 5ずつ大きくするメソッド
this.setAttribute('size',this.size+5);
</method>
</class>
<class name="mySquare2" extends="mySquare">
<method name="changesize">
// 5ずつ小さくするメソッド
this.setAttribute('size',this.size-5);
</method>
</class>
<mySquare />
<mySquare2 />
</canvas>標準コンポーネントを継承
これまでのサンプルではextendsのデフォルトである<view>を継承したクラスでした。ここでは<text>、
<text>を継承
<text>を継承したクラスです。文字列の背景色をつけてみた例です。
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myText" bgcolor="aqua" extends="text">
サンプル
</class>
<myText/>
<myText/>
<myText/>
</canvas><button>を継承
<button>を継承したクラスです。ボタンをおすたびにラベルが変わります。
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<class name="myButton" width="100" extends="button">
ボタン
<handler name="onclick">
this.setAttribute('text',this.text=="ボタン"?"ぼたん":"ボタン");
</handler>
</class>
<myButton/>
<myButton/>
<myButton/>
</canvas><window>を継承
<window>を継承したクラスです。デフォルトだとウインドウのタイトルバーにある×ボタンを押すとウインドウがその場で消えますが、
<canvas proxied="false" bgcolor="0xffffcc">
<class name="myWindow" width="200" height="80" closeable="true" extends="window">
<method name="close">
this.animate('y',-100,700,false);
</method>
<text>閉じると上に消えていきます。</text>
</class>
<myWindow title="ウインドウ1"/>
<myWindow title="ウインドウ2" y="100"/>
<myWindow title="ウインドウ3" y="200"/>
</canvas>