タブスライダーを記述してみる

OpenLaszlo のサンプルにあった下記のソースを参考にして、修正をしてみる。

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="100%" height="100%" debug="true">
  <view id="s1" x="20" y="20">
    <view layout="spacing:20">
      <tabslider width="250" height="200">
        <tabelement text="holiday cheer" selected="true">
          <radiogroup>
          <radiobutton text="peace on earth"/>
          <radiobutton text="joy to the world"/>
          <radiobutton text="happy new year"/>
          </radiogroup>
        </tabelement >
        <tabelement text="housewares">
          <simplelayout axis="y" spacing="10"/>
          <checkbox text="stainless steel" />
          <checkbox text="glassware" />
        </tabelement>
        <tabelement text="isotope">
          <text multiline="true" width="${immediateparent.width}">
          Atoms that have the same number of protons but a different number of neutrons. They are atoms of the same element that have different masses. The isotope number is the number of protons plus the number of neutrons.
          </text>
          </tabelement>
          <tabelement text="etymology">
          <text multiline="true" width="${immediateparent.width}">
          [iso- + Greek topos, place (so called because the isotopes of a chemical element occupy the same position in the periodic table of elements).]
          </text>
        </tabelement>
        <tabelement text="whale bones"/>
      </tabslider>
    </view>
  </view>
  <!-- <script>
    Debug.write("Hello, Debug window!");
  </script> -->
</canvas>

タブの名称を変更してみる

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="100%" height="100%" debug="true">
  <view id="s1" x="20" y="20">
    <view layout="spacing:20">
      <!-- tableslider の記述を開始する -->
      <tabslider width="250" height="200">
        <!-- 個々の tabl 要素の記述を開始する -->
        <tabelement text="北海道" selected="true">
          <radiogroup>
          <radiobutton text="peace on earth"/>
          <radiobutton text="joy to the world"/>
          <radiobutton text="happy new year"/>
          </radiogroup>
        </tabelement >
        <tabelement text="東北地方">
          <simplelayout axis="y" spacing="10"/>
          <checkbox text="stainless steel" />
          <checkbox text="glassware" />
        </tabelement>
        <tabelement text="関東地方">
          <text multiline="true" width="${immediateparent.width}">
          Atoms that have the same number of protons but a different number of neutrons. They are atoms of the same element that have different masses. The isotope number is the number of protons plus the number of neutrons.
          </text>
          </tabelement>
          <tabelement text="中部地方">
          <text multiline="true" width="${immediateparent.width}">
          [iso- + Greek topos, place (so called because the isotopes of a chemical element occupy the same position in the periodic table of elements).]
          </text>
        </tabelement>
        <tabelement text="近畿地方"/>
      </tabslider>
    </view>
  </view>
  <!-- <script>
    Debug.write("Hello, Debug window!");
  </script> -->
</canvas>

実用的なものをつくってみる

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="100%" height="100%" debug="false">
  <!-- 地方の定義 -->
  <dataset name="areas">
    <!-- 二次元配列 -->
    <area name="北海道地方">
      <prefecture name="北海道" id="1" />
    </area>
    <area name="東北地方">
      <prefecture name="青森県" id="2" />
      <prefecture name="岩手県" id="3" />
      <prefecture name="宮城県" id="4" />
      <prefecture name="秋田県" id="5" />
      <prefecture name="山形県" id="6" />
      <prefecture name="福島県" id="7" />
    </area>
    <area name="関東地方">
      <prefecture name="栃木県" id="8" />
      <prefecture name="茨城県" id="9" />
      <prefecture name="群馬県" id="10" />
      <prefecture name="埼玉県" id="11" />
      <prefecture name="千葉県" id="12" />
      <prefecture name="東京都" id="13" />
      <prefecture name="神奈川県" id="14" />
    </area>
    <area name="中部地方">
      <prefecture name="新潟県" id="15" />
      <prefecture name="富山県" id="16" />
      <prefecture name="福井県" id="17" />
      <prefecture name="石川県" id="18" />
      <prefecture name="長野県" id="19" />
      <prefecture name="静岡県" id="20" />
      <prefecture name="愛知県" id="21" />
      <prefecture name="滋賀県" id="22" />
    </area>
    <area name="近畿地方">
      <prefecture name="岐阜県" id="22" />
      <prefecture name="京都府" id="23" />
      <prefecture name="大阪府" id="24" />
      <prefecture name="兵庫県" id="25" />
      <prefecture name="三重県" id="26" />
      <prefecture name="和歌山県" id="27" />
    </area>
  </dataset>

  <view id="s1" x="20" y="20">
    <view layout="spacing:20">
      <!-- tableslider の記述を開始する -->
      <tabslider width="250" height="200">
        <!-- 個々の tabl 要素の記述を開始する -->
        <!-- 地方名を取得する -->
        <tabelement datapath="areas:/area/" text="$path{'@name'}">
          <vbox>
            <!-- 都道府県名を取得する -->
            <!-- area の属性値の取得の記述に注意 -->
            <!-- @see http://www.openlaszlo-ason.com/doku.php/%E3%82%BF%E3%83%96%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC#%E3%83%87%E3%83%BC%E3%82%BF%E6%95%B0%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E3%82%BF%E3%83%96%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E7%94%9F%E6%88%90 -->
            <text datapath="prefecture/" text="$path{'@name'}" />
          </vbox>
        </tabelement>
      </tabslider>
    </view>
  </view>
  <!-- <script>
    Debug.write("Hello, Debug window!");
  </script> -->
</canvas>