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

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

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

クラスの継承

クラスを作成するとき,既存のクラスの全設定を引き継いで新しいクラスを作成することになります。これを継承と呼びます。<class>のextends属性で継承元クラスを指定します。extendsのデフォルトは<view>なので,これまでのサンプルで作成したmyViewクラスの継承元クラスは実は<view>でした。つまり,自作myViewクラスは<view>の持つすべての属性・メソッド・イベントハンドラを備えていることになります。

myViewクラスを継承して,枠線付きボックスという性質はそのままで,新しく正方形という性質を持つクラスを作成してみましょう。リスト6では,width値をheight値と同じにする,という設定を付け加えることで正方形になるmySquareクラスを作成してみた例です。

リスト6

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

属性の設定

リスト6の正方形クラスにはひとつ問題があります。mySquareタグでheightを設定したときは必ず正方形になりますが,widthを設定すると正方形になりません。これでは失敗ですね。

そこで属性を定義するためのタグ<attribute>を使って改善してみましょう。<attribute>はwidth,heightなどの既存の属性を扱うこともできますが,新たな属性名を指定した場合,属性を新規作成することになります。

リスト7のmySquareクラスでは,sizeという名前の属性を定義し,widthとheightにsize属性値を代入するようにしました。つまり,size属性を1つ設定するだけで縦横の設定を同時にでき,正方形になるということです。mySquareインスタンスでは,四角のサイズをwidth/heightではなくsizeで設定します。

リスト7

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

リスト7 サンプル

イベントハンドラ

イベントハンドラは継承されます。

リスト8では,myViewクラスにonmouseoverとonmouseoutの2つのイベントハンドラを定義しています。実際の動作としては,マウスカーソルが四角の上を出たり入ったりするときに枠線の色が変わります。

myViewを継承したmySquareクラスではさらにonclickイベントハンドラを追加で定義し,size値を5ピクセルずつ増加させています。実際の動作としては,四角をクリックするたびに少しずつ大きくなります。mySquareでもマウスカーソルの出入りで枠線の色が変わるので,onmouseoverとonmouseoutの定義を継承しているのがわかります。

リスト8

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

リスト8 サンプル

著者プロフィール

ason(あそん)

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

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