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

第11回 OpenLaszloのオブジェクト指向プログラミング

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

OpenLaszloのアプリ開発言語LZXはオブジェクト指向プログラミング言語です。オブジェクト指向の技法を使うとコーディングの効率化が図れたり,コンポーネントの改造や自作が可能になります。

クラス作成とインスタンス化

クラスとは,オブジェクト指向言語でよく出てくる言葉で,わかりやすくいうとひな型とかテンプレートの意味です。インスタンスとは,ひな型を実際に利用できる形にしたものをいいます。

まず,オブジェクト指向を使わない場合と使った場合でのサンプルコードを2つ示して解説します。もちろんどちらも同じ動作結果になるものです。

リスト1のサンプルは,全く同じ黄色い四角を3つ並べたもので,オブジェクト指向ではないコーディングです。

リスト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>です。では,リスト1の<view>をクラス化してみましょう。まずタグ名をviewからclassに変更します。次にnameでクラス名を付けます。ここではmyViewと名付けています。クラス名の命名規則としては,既存のクラス名と重複できないなど一般的な制約はありますが,特に厳密な制約はなく割と自由です。これでクラスの作成は完了です。

リスト2

<view height="50" width="100" bgcolor="yellow" />
                  ↓
<class name="myView" height="50" width="100" bgcolor="yellow" />

クラス作成はタグのひな型を定義するだけのもので,それだけではなにも動作しません。動作させるにはクラスをインスタンス化します。インスタンス化するといってもLZXの場合はクラス名でのタグを記述するだけです。ここではmyViewクラスを作成したので,そのインスタンスは<myView>というタグになります。

リスト3では,<myView>タグを3つ記述しています。するとリスト1のサンプルと同じように黄色い四角が3つ表示されます。表示している実体は<myView>です。

リスト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>,<window>などのタグもすべてLZXのクラスとしてOpenLaszlo側であらかじめ定義されていて,プログラムを書くとき(=タグを書くとき)に無意識のうちにそれぞれをインスタンス化していたことになります。

それでは,仕様変更のシミュレーションとしてmyViewクラスを改造してみましょう。<class>の中に<view>を1つ追加し,それを親タグよりも縦横4ピクセル小さくして縦横中央に配置することで,赤い枠線付きの黄色い四角に改造しました。インスタンスとしての<myView>の記述には何も変更がありません。このようにひな型であるクラスを変更するだけで一気にアプリ全体の該当タグの挙動を変更することができます。

リスト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は幅,高さ,色の変更や,子タグの追加をしてみた例です。

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

著者プロフィール

ason(あそん)

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

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

コメント

コメントの記入