クラスの継承
クラスを作成するとき,
myViewクラスを継承して,
リスト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を設定したときは必ず正方形になりますが,
そこで属性を定義するためのタグ<attribute>を使って改善してみましょう。<attribute>はwidth,
リスト7のmySquareクラスでは,
リスト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を継承したmySquareクラスではさらにonclickイベントハンドラを追加で定義し,
リスト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 サンプル