<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>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="5"/>
  <checkbox id="chk">チェックボックス</checkbox>
  <text text="${chk.value}"/>
  <button enabled="${chk.value}" text="ボタン"/>
  <view width="100" height="30" bgcolor="red" visible="${chk.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="30" axis="x"/>
  <radiogroup id="rb">
    <radiobutton value="'one'">1</radiobutton>
    <radiobutton value="'two'">2</radiobutton>
    <radiobutton value="'three'">3</radiobutton>
  </radiogroup>
  <text fgcolor="red" text="${rb.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="30" axis="x"/>
  <combobox id="cb" width="130" editable="false">
    <textlistitem text="黒" value="'くろ'"/>
    <textlistitem text="赤" value="'あか'"/>
    <textlistitem text="青" value="'あお'"/>
  </combobox>
  <text text="${cb.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc">
  <dataset name="ds" >
    <item value="しろ">白</item>
    <item value="むらさき">紫</item>
    <item value="みどり">緑</item>
  </dataset>
  <simplelayout spacing="30" axis="x"/>
  <combobox id="cb" width="130" editable="false">
    <textlistitem datapath="ds:/item" text="$path{'text()'}" value="$path{'@value'}"/> <!--(注)-->
  </combobox>
  <text text="${cb.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="2"/>
  <edittext id="ed1"/>
  <text text="${ed1.value}"/>
  <edittext id="ed2" password="true"/>
  <text text="${ed2.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc">
  <view x="10" y="10" width="170">
    <text text="ユーザー名"/>
    <edittext id="ed1" align="right" onkeyup="btn.isInputted()"/>
    <text text="パスワード" y="30"/>
    <edittext id="ed2" align="right" y="30" password="true" onkeyup="btn.isInputted()"/>
    <button id="btn" align="right" y="60" enabled="false">ログイン
      <method name="isInputted"><![CDATA[
        if(ed1.value!="" && ed2.value!=""){
          // 入力欄が両方空でないときはボタンを有効化
          this.setAttribute('enabled',true);
        }else{
          // 入力欄が両方空のときはボタンを無効化
          this.setAttribute('enabled',false);
        }
      ]]></method>
    </button>
  </view>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc">
  <dataset name="ds" >
    <root>
      <data data1="250" data2="りんご"/>
      <data data1="50" data2="いちご"/>
      <data data1="30" data2="みかん"/>
      <data data1="220" data2="ぶどう"/>
      <data data1="200" data2="かき"/>
      <data data1="60" data2="もも"/>
      <data data1="70" data2="さくらんぼ"/>
      <data data1="150" data2="なし"/>
      <data data1="100" data2="すいか"/>
    </root>
  </dataset>
  <grid datapath="ds:/root" width="400"
      shownitems="5" 
      showvlines="true"
      showhlines="true"
      bgcolor0="0xffffdd"
      bgcolor1="0xffdddd"  >
    <gridtext name="d" datapath="position()" textalign="right">連番</gridtext>
    <gridcolumn width="200">売上グラフ
      <view>
        <view y="8" width="$path{'@data1'}" height="10" bgcolor="0x6666ff" />
      </view>
    </gridcolumn>
    <gridtext datapath="@data1" datatype="number">売上</gridtext>
    <gridtext datapath="@data2">商品</gridtext>
  </grid> 
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout spacing="30" axis="x"/>
  <list id="lst" width="130" shownitems="5">
    <textlistitem text="黒" value="'くろ'"/>
    <textlistitem text="赤" value="'あか'"/>
    <textlistitem text="青" value="'あお'"/>
    <textlistitem text="白" value="'しろ'"/>
    <textlistitem text="緑" value="'みどり'"/>
    <textlistitem text="紫" value="'むらさき'"/>
    <textlistitem text="黄" value="'き'"/>
  </list>
  <text text="${lst.value}"/>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <include href="lz/tree.lzx"/>
  <tree open="true" text="サイトマップ">
    <tree open="true" text="会社情報">
      <tree text="会社概要" isleaf="true"/>
      <tree text="事業内容" isleaf="true"/>
      <tree text="沿革" isleaf="true"/>
      <tree text="アクセス" isleaf="true"/>
    </tree>
    <tree open="true" text="採用情報">
      <tree text="新卒採用" isleaf="true"/>
      <tree text="中途採用" isleaf="true"/>
    </tree>
  </tree>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <menubar width="200">
    <menu text="ファイル" width="100">
      <menuitem text="新規作成" onselect="txt.menuname(this.text);"/>
      <menuitem text="開く" onselect="txt.menuname(this.text);"/>
      <menuitem text="保存" onselect="txt.menuname(this.text);"/>
      <menuseparator/>
      <menuitem text="印刷">
        <menu>
          <menuitem text="印刷プレビュー" onselect="txt.menuname(this.text);"/>
          <menuitem text="印刷" onselect="txt.menuname(this.text);"/>
        </menu>
      </menuitem>
    </menu>
    <menu text="編集" width="100">
      <menuitem text="切り取り" onselect="txt.menuname(this.text);"/>
      <menuitem text="コピー" onselect="txt.menuname(this.text);"/>
      <menuitem text="貼りつけ" onselect="txt.menuname(this.text);"/>
    </menu>
  </menubar>
  <text id="txt" x="220">
    <method name="menuname" args="d">
      this.setAttribute('text',d);
    </method>
  </text>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <tabs x="5">
    <tabpane>タブ1
      <simplelayout spacing="5"/>
      <checkbox>ボーカル</checkbox>
      <checkbox>ギター</checkbox>
      <checkbox>ベース</checkbox>
      <checkbox>ドラム</checkbox>
    </tabpane>
    <tabpane>タブ2
      <radiogroup>
        <radiobutton>スラッシュメタル</radiobutton>
        <radiobutton>デスメタル</radiobutton>
        <radiobutton>ブラックメタル</radiobutton>
      </radiogroup>
    </tabpane>
    <tabpane selected="true">タブ3
      <simplelayout spacing="5"/>
      <button>ボタン</button>
      <button>ボタン</button>
      <button>ボタン</button>
    </tabpane>
  </tabs>
</canvas>

<canvas proxied="false" bgcolor="0xffffcc"> 
  <tabslider width="150" x="10" y="10" height="200" spacing="2" slideduration="300">
    <tabelement>タブスライダー1
      <simplelayout spacing="5"/>
      <checkbox>ボーカル</checkbox>
      <checkbox>ギター</checkbox>
      <checkbox>ベース</checkbox>
      <checkbox>ドラム</checkbox>
    </tabelement>
    <tabelement>タブスライダー2
      <radiogroup>
        <radiobutton>スラッシュメタル</radiobutton>
        <radiobutton>デスメタル</radiobutton>
        <radiobutton>ブラックメタル</radiobutton>
      </radiogroup>
    </tabelement>
    <tabelement selected="true">タブスライダー3
      <simplelayout spacing="5"/>
      <button>ボタン</button>
      <button>ボタン</button>
      <button>ボタン</button>
    </tabelement>
  </tabslider>
</canvas>