今回はスクリプトの書き方というより、
<script>
<script>内に書かれたスクリプトは、
グローバル変数の定義
<script>内にグローバル変数を定義することができます。ここでいうグローバルとは、
リスト1ではtxt変数に格納された文字列を参照するためにコンストレイント式を使っています。グローバル変数であるtxt変数の内容はいつでもどこでも参照できます。
ちなみにリスト1にあるような<text text="…">という書き方は<text>…</text>と同じ意味です。
<canvas proxied="false" bgcolor="0xffffcc">
<script>
var txt = "こんにちは";
</script>
<simplelayout/>
<text text="${txt}"/>
<button text="${txt}"/>
<checkbox text="${txt}"/>
</canvas>リスト1サンプル
グローバル関数の定義
<script>内にグローバル関数を定義することができます。
リスト2ではボタンをクリックした時に、
<canvas proxied="false" bgcolor="0xffffcc">
<script>
var txt = "移動";
function moveWin(){
var increment = 20;
win.setAttribute('x', win.x + increment);
}
</script>
<button text="${txt}" onclick="moveWin();"/>
<window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
</window>
</canvas>リスト2サンプル
<method>
<method>を使うと、
<method>にはname属性で名前を付ける必要がありますが、
メソッド名の設定はたとえば<method name="sample">のように記述し、
リスト3の例では全く同じ内容のmoveWin()メソッドを<canvas>直下とウインドウタグ内に定義しています。ボタン1を押すと(1)のmoveWin()メソッド、
<canvas proxied="false" bgcolor="0xffffcc">
<!--(1)canvas直下の自作メソッド-->
<method name="moveWin">
var increment = 20;
win.setAttribute('x', win.x + increment);
</method>
<button text="ボタン1" onclick="canvas.moveWin();"/>
<button y="25" text="ボタン2" onclick="win.moveWin();"/>
<window x="50" y="50" width="150" height="100" title="ウインドウ" id="win">
<!--(2)windowタグの自作メソッド-->
<method name="moveWin">
var increment = 20;
win.setAttribute('x', win.x + increment);
</method>
</window>
</canvas>リスト3サンプル
メソッドはargs属性を使って引数を受け取ることができます。リスト4では
<canvas proxied="false" bgcolor="0xffffcc">
<button text="ボタン" onclick="win.moveWin(20);"/>
<window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
<method name="moveWin" args="increment">
win.setAttribute('x', win.x + increment);
</method>
</window>
</canvas>リスト4サンプル
メソッドはreturnを使って値を戻すことができます。リスト5では、
<canvas proxied="false" bgcolor="0xffffcc">
<!--足し算メソッド-->
<method name="add" args="n1,n2">
return n1+n2;
</method>
<simplelayout/>
<button text="ボタン" >
<handler name="onclick">
var ans = canvas.add(2,3);
res.setAttribute('text', ans);
</handler>
</button>
<text id="res"/>
</canvas>リスト5サンプル
<handler>
<handler>はonclickのようなイベント発生時に実行するスクリプトを記述するためのタグです。名前はname属性で設定します。名前の付け方は自由ではなくonで始まるイベントハンドラ名を付けます。イベントハンドラ名にはonclickやonmouseoverといった
イベントハンドラのスクリプトの記述方法は2種類あります。
<view onclick="クリック時に処理するスクリプトをここに記述" />リスト7 タグの属性としてイベントハンドラを記述(2)
<view onclick="doSomething()">・・・クリック時にdoSomething()メソッドを実行
<method name="doSomething">
スクリプトをここに記述
</method>
</view>リスト8 <handler>でイベントハンドラを記述
<view>
<handler name="onclick">
クリック時に処理するスクリプトをここに記述
</name>
</view>これまでのサンプルで出てきた<button>でのonclick="win.
リスト9のボタン1とボタン2のイベントハンドラonclickの記述形式は異なっていますが、
<canvas proxied="false" bgcolor="0xffffcc">
<button text="ボタン1" onclick="win.moveWin(20)"/>
<button text="ボタン2" y="25">
<handler name="onclick">
win.moveWin(20);
</handler>
</button>
<window x="50" y="50" width="150" height="100" title="ウインドウ" id="win">
<method name="moveWin" args="increment">
win.setAttribute('x', win.x + increment);
</method>
</window>
</canvas>リスト9サンプル
複数のイベントハンドラ
メソッドと違いイベントハンドラの場合は同じ名前で複数の定義ができます。複数の同名イベントハンドラは上書きにはならずすべてが実行されます。
リスト10の例では、
<canvas proxied="false" bgcolor="0xffffcc">
<simplelayout/>
<button text="ボタン" onclick="v.setAttribute('x',50)">
<handler name="onclick">
v.setAttribute('y',50);
</handler>
<handler name="onclick">
v.setAttribute('width',100);
</handler>
<handler name="onclick">
v.setAttribute('height',100);
</handler>
</button>
<view id="v" x="20" y="20" width="20" height="20" bgcolor="red"/>
</canvas>リスト10サンプル
idとname、オブジェクト指定方法
これまでのサンプルでもしょっちゅう出ていたので何となくご理解いただいているかもしれませんが、
あるタグに対して動作させたり属性値を取得したりするにはそのタグを指定しなければなりません。そのタグを指定するためにid属性やname属性で名前を付けます。nameは同一階層でのみ重複しなければ良く、
nameの場合の指定方法
nameの場合、
自分自身はthisで指定します。
階層構造の親子関係の中では親は1つなので名前を指定する必要はなくparentで指定できます。親の親はparent.
親の子、
リスト11ではA,Bのビューは兄弟タグなので同じ名前は使えませんが、
| 指定の内容 | 相対指定 | 絶対指定 |
|---|---|---|
| (1)から(2) | this. | canvas. |
| (1)から(3) | this. | canvas. |
| (1)から(5) | parent. | canvas. |
| (3)から(1) | parent. | canvas. |
| (3)から(2) | parent | canvas. |
| (3)から(4) | parent. | canvas. |
| (5)から(3) | parent. | canvas. |
<view name="A">
<view name="a"> (1)
<view name="b"> (2)
<view name="c"> (3)
</view>
<view name="d"> (4)
</view>
</view>
</view>
</view>
<view name="B">
<view name="a">
<view name="b">
<view name="c"> (5)
</view>
</view>
</view>
</view>
<canvas proxied="false" bgcolor="0xffffcc">
<window title="ウインドウ2" name="win2" y="150" width="200" height="100">
<method name="moveRight">//メソッド1
this.animate('x',20,300,true);
</method>
</window>
<window title="ウインドウ1" width="300">
<method name="moveRight">//メソッド2
this.animate('x',20,300,true);
</method>
<simplelayout spacing="4"/>
<button text="(1)ウインドウ1を動かす" onclick="parent.moveRight()"/>
<button text="(2)ウインドウ2を動かす" onclick="parent.parent.win2.moveRight()"/>
<button text="(3)このボタンを動かす" onclick="this.moveRight()">
<method name="moveRight">//メソッド3
this.animate('x',20,300,true);
</method>
</button>
</window>
</canvas>リスト12サンプル
リスト12では全く同じ内容の自作メソッドmoveRight()が3ヶ所に記述されています。moveRight()自体は自分自身を右に動かす処理が書かれています。
ボタン(1)はparent.
ボタン(2)はparent.
ボタン(3)はthis.
moveRight()メソッド内のthisは<method>自身ではなく<method>が定義されている親タグのことを指します。<method>自身はビューではなく親タグの付属物であり、
※ここで出ているanimate()はアニメーション処理をするメソッドです。this.
idの指定方法
idを使う場合、
リスト13はリスト11と同じですが、
| (1)から(2) | b |
|---|---|
| (1)から(3) | c |
| (1)から(5) | g |
| (3)から(1) | a |
| (3)から(2) | b |
| (3)から(4) | d |
| (5)から(3) | c |
<view id="A">
<view id="a"> (1)
<view id="b"> (2)
<view id="c"> (3)
</view>
<view id="d"> (4)
</view>
</view>
</view>
</view>
<view id="B">
<view id="e">
<view id="f">
<view id="g"> (5)
</view>
</view>
</view>
</view>
リスト14はリスト12の相対指定の部分をid指定に変更したものです。リスト12との変更点は2ヶ所で、
<canvas proxied="false" bgcolor="0xffffcc">
<window title="ウインドウ2" id="win2" y="150" width="200" height="100">
<method name="moveRight">//メソッド1
this.animate('x',20,300,true);
</method>
</window>
<window title="ウインドウ1" width="300">
<method name="moveRight">//メソッド2
this.animate('x',20,300,true);
</method>
<simplelayout spacing="4"/>
<button text="(1)ウインドウ1を動かす" onclick="parent.moveRight()"/>
<button text="(2)ウインドウ2を動かす" onclick="win2.moveRight()"/>
<button text="(3)このボタンを動かす" onclick="this.moveRight()">
<method name="moveRight">//メソッド3
this.animate('x',20,300,true);
</method>
</button>
</window>
</canvas>リスト14サンプル
setAttribute()
スクリプトを記述するときに頻出するメソッドsetAttribute()について説明しておきます。このメソッドは文字通りattribute(=属性)をset(設定)するものです。
文法的にはsetAttribute(属性名,値)となります。たとえばx属性の値を100にするにはsetAttribute('x',100)、
setAttribute()の超重要な機能としては、
リスト15サンプルのボタンを押すと縦向きの赤青黄のビューが位置を変えて横向きになります。ボタンクリック時にボタン自身のx値を変えただけ(1)なのですが、
※
<handler>にあるreference属性には、
<canvas proxied="false" bgcolor="0xffffcc">
<button id="btn">
<handler name="onclick">
this.setAttribute('x',100); // (1)
</handler>
</button>
<view id="v1" y="30" width="20" height="20" bgcolor="red">
<handler name="onx" reference="btn"> // (2)
this.setAttribute('x',20);
this.setAttribute('y',50);
</handler>
</view>
<view id="v2" y="50" width="20" height="20" bgcolor="yellow">
<handler name="onx" reference="v1"> // (3)
this.setAttribute('x',40);
this.setAttribute('y',50);
</handler>
</view>
<view id="v3" y="70" width="20" height="20" bgcolor="blue">
<handler name="ony" reference="v2"> // (4)
this.setAttribute('x',60);
this.setAttribute('y',50);
</handler>
</view>
</canvas>リスト15サンプル
(1)・
(2)・
(3)・
(4)・