<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="100" bgcolor="red" cornerradius="10"
    onmousedown="this.dr.apply()" onmouseup="this.dr.remove()">
    <dragstate name="dr"/>
    <handler name="onx"><![CDATA[
      if(this.x<0)this.setAttribute('x',0);
      if(this.x+this.width>canvas.width)this.setAttribute('x',canvas.width-this.width);
    ]]></handler>
    <handler name="ony"><![CDATA[
      if(this.y<0)this.setAttribute('y',0);
      if(this.y+this.height>canvas.height)this.setAttribute('y',canvas.height-this.height);
    ]]></handler>
  </view>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout/>
  <text textdecoration="underline">下線を引く</text>
  <text fontstyle="bold">太字にする</text>
  <text fontstyle="italic">斜体にする</text>
  <text fontstyle="bold italic">太字及び斜体にする</text>
  <text fontsize="20">フォントサイズを大きく</text>
  <text fgcolor="0xff0000">文字色をつける</text>
  <text bgcolor="0xffff00">背景色をつける</text>
  <text multiline="true" bgcolor="0xaaffaa">
    複数行<br/>
    複数行<br/>
    複数行<br/>
  </text> 
  <text textalign="center" width="200" bgcolor="0xaaaaff">センタリング</text>
  <text textalign="right" width="200" bgcolor="0xffaaaa">右寄せ</text>
  <text><font color="#ff0000">色をつけたり，</font><i>斜めにしたり，</i><u>下線を引いたり，</u><b>太字にしたり。</b></text>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5"/>
  <button width="100" height="50" fontstyle="bold">ボタン
    <handler name="onclick">
      this.setAttribute('text',this.text=="ボタン"?"ぼたん":"ボタン");
      btn.setAttribute('enabled',this.text=="ボタン"?false:true);
    </handler>
  </button>
  <button id="btn" enabled="false" text="ボタン"/>
  <resource name="myButton">
    <frame src="bt_up.png" /><!--ノーマル時-->
    <frame src="bt_over.png" /><!--マウスオーバー時-->
    <frame src="bt_down.png" /><!--マウスダウン時-->
  </resource>
  <basebutton resource="myButton"/> 
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button onclick="al.open()">アラートウインドウを出す</button>
  <button onclick="dl.open()" y="30">モーダルダイアログを出す</button>
  <window y="60" width="200" height="150" title="ウインドウサンプル" resizable="true" closeable="true">
    <vbox align="center" valign="middle">
      <text>・ドラッグアンドドロップ可能</text>
      <text>・タイトル設定可能</text>
      <text>・リサイズ可能</text>
      <text>・クローズ可能</text>
    </vbox>
  </window>
  <alert id="al" button1="閉じる">
     アラートウインドウ。
  </alert>
  <modaldialog id="dl" width="200" height="150">
    <simplelayout spacing="5"/>
    <text>モーダルダイアログ</text>
    <checkbox>チェックボックス</checkbox>
    <button onclick="parent.close()">閉じる</button>
  </modaldialog>
</canvas>