OpenLaszloのアプリ開発言語LZXはオブジェクト指向プログラミング言語です。オブジェクト指向の技法を使うとコーディングの効率化が図れたり,
クラス作成とインスタンス化
クラスとは,
まず,
リスト1のサンプルは,
リスト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 サンプル
リスト1の問題点は,
まず黄色い四角のひな型=クラスを作成します。クラスを作成するためのタグは<class>です。では,
リスト2
<view height="50" width="100" bgcolor="yellow" />
↓
<class name="myView" height="50" width="100" bgcolor="yellow" />
クラス作成はタグのひな型を定義するだけのもので,
リスト3では,
リスト3
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout spacing="5"/>
<!--myViewクラス-->
<class name="myView" height="50" width="100" bgcolor="yellow" />
<!--myViewインスタンス-->
<myView />
<myView />
<myView />
</canvas>
リスト3 サンプル
実はこれまでに頻繁に出てきた<text>や<button>,
それでは,
リスト4
<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>
リスト4 サンプル
自作のタグ<myView>は普通の<view>と同じように扱えますので,
リスト5
<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>
リスト5 サンプル