クラスの継承
クラスを作成するとき，
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 サンプル