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>