UI をいろいろ試してみる

元のコード

<vbox>
	<!-- 都道府県名を取得する -->
	<text datapath="prefecture/" text="$path{'@name'}" />
</vbox>

リスト

<list>
	<!-- 都道府県名を取得する -->
	<textlistitem datapath="prefecture/" text="$path{'@name'}" />
</list>

リストの横幅を設定する

<list width="100%">
	<!-- 都道府県名を取得する -->
	<textlistitem datapath="prefecture/" text="$path{'@name'}" />
</list>

リストのボーダーを消してみる

<list width="100%" bordersize="0">
	<!-- 都道府県名を取得する -->
	<textlistitem datapath="prefecture/" text="$path{'@name'}" />
</list>

リストのテキストがクリックされると、非表示状態の view が表示されるようにする

<?xml version="1.0" encoding="UTF-8"?>
<canvas width="100%" height="100%" debug="false">
  <!-- 地方の定義 -->
  <dataset src="prefectures.xml" name="areas" />

  <view id="s1" x="20" y="20">
    <view layout="spacing:20">
      <!-- tableslider の記述を開始する -->
      <tabslider width="250" height="360">
        <!-- 個々の tabl 要素の記述を開始する -->
        <!-- 地方名を取得する -->
        <!-- area の属性値の取得の記述に注意 -->
        <tabelement datapath="areas:/japan/area/" text="$path{'@name'}">
            <list width="100%" bordersize="0">
                <!-- 都道府県名を取得する -->
                <textlistitem datapath="prefecture/" text="$path{'@name'}" onclick="mainContents.setAttribute('visible', true);" />
            </list>
        </tabelement>
      </tabslider>
    </view>
  </view>

  <!-- 読み込み時は非表示設定。右側のリストがクリックされると表示される -->
  <view id="mainContents" x="300" y="20" bgcolor="red" width="300" height="300" visible="false">
    <text>left column</text>
  </view>

  <!-- <script>
    Debug.write("Hello, Debug window!");
  </script> -->
</canvas>

view を表示させると同時に、view 内の「left column」文字列をを都道府県名に変える

変更箇所

evvent 処理を追加する。

<list width="100%" bordersize="0">
    <!-- 都道府県名を取得する -->
    <textlistitem datapath="prefecture/" text="$path{'@name'}" 
        onclick="mainContents.setAttribute('visible', true); sampleText.setAttribute('text', this.text);" />
</list>

view 内のテキストに id 属性を追加

   <text id="sampleText">left column</text>