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

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

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

メソッド

メソッドも継承できます。メソッドを継承したときは内容は上書きになります。

リスト9のサンプルでは,mySquareクラスでsize属性値を5ずつ増やすchangesize()メソッドを定義しています。そのmySquareクラスを継承したmySquare2クラスではchangesize()メソッドを再定義し,今度はsize属性値を5ずつ減らす処理に変更しています。

サンプルの四角をクリックすると,上の四角は大きくなり,下の四角は小さくなります。

リスト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>

リスト9 サンプル

標準コンポーネントを継承

これまでのサンプルではextendsのデフォルトである<view>を継承したクラスでした。ここでは<text>,<button>,<window>といったOpenLaszloの標準コンポーネントを継承してカスタマイズした例を紹介します。

<text>を継承

<text>を継承したクラスです。文字列の背景色をつけてみた例です。

リスト10

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5"/>
  <class name="myText" bgcolor="aqua" extends="text">
  サンプル
  </class>
  <myText/>
  <myText/>
  <myText/>
</canvas>

リスト10 サンプル

<button>を継承

<button>を継承したクラスです。ボタンをおすたびにラベルが変わります。

リスト11

<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>

リスト11 サンプル

<window>を継承

<window>を継承したクラスです。デフォルトだとウインドウのタイトルバーにある×ボタンを押すとウインドウがその場で消えますが,このサンプルではclose()メソッドを上書きして,消える代わりに上に移動するように変更してみました。画面からはみ出るので上に消えたように見えます。

リスト12

<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>

リスト12 サンプル

著者プロフィール

ason(あそん)

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

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