OpenLaszlo に限らず、リッチインターフェイスの肝になるのが
このスクリプティングです。
基本的な構文については JavaScript とほとんど同じですので、
ここで詳しく説明したりはしません。
<script> 要素を使います。
ただ一点注意することは、lzxはXMLファイルなので < などの文字をそのまま使うことが出来ません。
<script>
for (var i = 0; i < 11; i++) {
Debug.write(i);
}
</script>
↑このようにHTMLエンコードして使うか、
<script>
<![CDATA[
for (var i = 0; i < 11; i++) {
Debug.write(i);
}
]]>
</script>
↑このように CDATA 記法を使います。
一般的には、こちらを使うことになるでしょう。
スクリプトの定義は <script> を使って記述することもできますが
この要素は canvas の子要素など限定された場所でしか使用できません。
例えばあるボタンがあり、そこからしか使われないメソッドを定義したい場合など
ボタンの内部にメソッドを記述することで、その関連を明確に示すことができます。
これには <method> 要素を使います。
<button text="My button" onclick="this.moveWindow()">
<method name="moveWindow">
var increment = 20;
var originalX = this.parent.parent.windowTwo.getAttribute('x');
var newX = originalX + increment;
this.parent.parent.windowTwo.setAttribute('x', newX);
</method>
</button>
このように、<button> の内部に <method> が定義されています。
ちなみに、this. は省略可能です。
もちろん、OpenLaszlo でもメソッドに引数を付けることができます。
<script>
function func1(param1) {
...
}
</script>
<method> を使うと以下のようになります。
<method name="func1" args="param1"> ... </script>
OpenLaszlo ならではのやり方が、この属性を使った方法です。
<method name="moveWindow" args="buttonObj">
direction = buttonObj.getAttribute("direction");
distance = parseInt(buttonObj.getAttribute("distance"));
</method>
<button onclick="windowTwoId.moveWindow(this)">Left 2
<attribute name="direction" value="'left'"/>
<attribute name="distance" value="'2'"/>
</button>
こんな感じで、moveWindow の引数に this を渡しています。
this はここで言えば button 要素になります。
メソッド内部では buttonObj として渡され、buttonObj.getAttribute(...) とすることで
button 要素内部で定義された attribute 要素の内容を読み出せるという感じになります。