ボタン

<button>タグを使います。イベントハンドラonclickとセットで使います。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button onclick="txt.setText('ボタン押されました')">ボタン</button>
  <text name="txt" y="50"/>
</canvas>

ボタン上の文字列を、ボタンを押すごとに入れ替える方法。ベタなやり方ですが。。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button>ボタン
     <handler name="onclick">
         if(this.text=='ボタン') {
             this.setAttribute('text',"ぼたん");
         }else{
             this.setAttribute('text',"ボタン");
         }
     </handler>
  </button>
</canvas>

あるいは、条件演算子を使ってもっとカンタンに・・・

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button>ボタン
    <handler name="onclick">
      this.setAttribute('text',this.text=="ボタン"?"ぼたん":"ボタン");
    </handler>
  </button>
</canvas>

ボタンの文字の色、サイズ、スタイルをクリックごとに変更するサンプル。ようは<button>タグの中に<text>タグを入れれば好きなようにできます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button name="btn" width="50" height="20" x="10" y="10" >
    <handler name="onclick">
      if(this.b.visible){
        this.b.setAttribute('visible',false);
      }else{
        this.b.setAttribute('visible',true);
      }
    </handler>
    <text name="b" text="青" fgcolor="blue" fontstyle="bold italic" fontsize="18"
        align="center" valign="middle" resize="true" visible="false"/>
    <text text="赤" fgcolor="red" fontstyle="bold" fontsize="14"
        align="center" valign="middle" resize="true" visible="${!parent.b.visible}"/>
  </button>
</canvas>

<button>タグの祖先である<basebutton>タグを使います。

ボタンの画像を自作画像と入れ替えるには下記の4種類のボタン状態の画像を用意します。

1. マウスアップ(通常)時の画像
2. マウスオーバー時の画像
3. マウスダウン時の画像
4. 無効時の画像・・・無効というのはボタンが効かない状態。無効化しないときは不要。

それぞれの画像を<resource>タグ内の<frame>タグで、この順番で指定します。すると、マウスの状態に応じて自動的に画像が選択されます。画像のファイル名は何でも良いです。

<resource>
  <frame src="マウスアップ時の画像"/>
  <frame src="マウスオーバー時の画像"/>
  <frame src="マウスダウン時の画像"/>
  <frame src="無効時の画像"/>
</resource>

<?xml version="1.0" encoding="UTF-8"?>
<canvas>
    <resource name="myButton">
        <frame src="bt_up.png" />
        <frame src="bt_over.png" />
        <frame src="bt_down.png" />
    </resource>
 
    <basebutton resource="myButton"/> 
 
</canvas>

通常時の画像	bt_up.png
マウスオーバー時の画像	bt_over.png
押した時の画像	bt_down.png

(OpenLaszlo4.8.0/swf10)

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <button width="100">
    <handler name="oninit"><![CDATA[
      this._title.setAttribute('width', this.width-20);
      this._title.setAttribute('resize', false);
      this._title.setAttribute('multiline', true);
      this._title.setAttribute('text', 'multiline test<br/>multiline test<br/>multiline test');
    ]]></handler>
  </button>
</canvas>