UJMLサンプル133：ボタンの同時押し用コンポーネントを作る カーソルのようなもの3(2006/06/18)
前回紹介した、
UIEngine だ: UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2
を少し修正したものを紹介する。今回から_link()を使用して描画用コンポーネントとそれをコントロールするアプリを別々にする設計に方向付ける。
アプリA→_link()→コンポーネントB
アプリAの役割：ユーザーの入力を処理し、コンポーネントBの描画（カーソルボタン）をコントロールする。
コンポーネントBの役割：指示を受け、カーソルボタンを描画する。
といった具合で、AがBを使うという設計である。
実際に_link()させるのは次回以降だが、その前段階としてコンポーネントBを外部からの命令を受け入れやすい形に変えておく。変更内容は、ステート変数 sCurSor を追加し、
<state-var name="sCurSor" type="string"/>
sCurSorの値が、UP,DOWN,LEFT,RIGHT 、と変化することで描画をコントロールする。ソースコードは以下の通り、太字が主な変更点
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
<!ENTITY BOX_SIZE "10">
<!ENTITY INTERVAL "500">
]>
<!-- http://uienginda.blogs.com UJMLサンプル133：ボタンの同時押し用コンポーネントを作る カーソルのようなもの3 -->
<!-- INTERVAL で指定された間隔毎に各boxの色を変化させる -->
<!-- ステート変数sCurSorにより色を変える箱を指定する -->
<ujml>
<application>
<state-variables>
<state-var name="sBoxUP" type="boolean"/>
<state-var name="sBoxDOWN" type="boolean"/>
<state-var name="sBoxLEFT" type="boolean"/>
<state-var name="sBoxRIGHT" type="boolean"/>
<state-var name="sCurSor" type="string"/>
<state-var name="sTick" type="boolean"/>
</state-variables>
<variables>
<var name="bgUP" type="int"/>
<var name="bgDOWN" type="int"/>
<var name="bgLEFT" type="int"/>
<var name="bgRIGHT" type="int"/>
<var name="ctr" type="int"/>
</variables>
<functions>
<function name="refresh" type="void">
<script>
_clear_state(sBoxUP);
_clear_state(sBoxDOWN);
_clear_state(sBoxLEFT);
_clear_state(sBoxRIGHT);
sBoxUP = true;
sBoxDOWN = true;
sBoxLEFT = true;
sBoxRIGHT = true;
</script>
</function>
</functions>
<script>
ctr = 0;
sTick = true;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&INTERVAL;</delay>
<script>
sTick = false;
if(ctr==0){
_clear_state(sCurSor);
sCurSor = "UP";
}else if(ctr==1){
_clear_state(sCurSor);
sCurSor = "RIGHT";
}else if(ctr==2){
_clear_state(sCurSor);
sCurSor = "DOWN";
}else{
_clear_state(sCurSor);
sCurSor = "LEFT";
ctr = -1;
}
ctr++;
sTick = true;
</script>
</transition>
</state>
<state var="sCurSor">
<transition value="UP">
<script>
bgUP = &_COLOR_WHITE;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
</script>
</transition>
<transition value="DOWN">
<script>
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_WHITE;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
</script>
</transition>
<transition value="LEFT">
<script>
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_WHITE;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
</script>
</transition>
<transition value="RIGHT">
<script>
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_WHITE;;
refresh();
</script>
</transition>
<transition value="NULL">
<script>
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
</script>
</transition>
</state>
<state var="sBoxUP">
<transition value="true">
<display>
<box>
<x>&BOX_SIZE;</x>
<y>0</y>
<width>&BOX_SIZE;</width>
<height>&BOX_SIZE;</height>
<fg>&_COLOR_GRAY;</fg>
<bg><eval>bgUP</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sBoxDOWN">
<transition value="true">
<display>
<box>
<x>&BOX_SIZE;</x>
<y><eval>&BOX_SIZE; * 2</eval></y>
<width>&BOX_SIZE;</width>
<height>&BOX_SIZE;</height>
<fg>&_COLOR_GRAY;</fg>
<bg><eval>bgDOWN</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sBoxLEFT">
<transition value="true">
<display>
<box>
<x>0</x>
<y>&BOX_SIZE;</y>
<width>&BOX_SIZE;</width>
<height>&BOX_SIZE;</height>
<fg>&_COLOR_GRAY;</fg>
<bg><eval>bgLEFT</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sBoxRIGHT">
<transition value="true">
<display>
<box>
<x><eval>&BOX_SIZE; * 2</eval></x>
<y>&BOX_SIZE;</y>
<width>&BOX_SIZE;</width>
<height>&BOX_SIZE;</height>
<fg>&_COLOR_GRAY;</fg>
<bg><eval>bgRIGHT</eval></bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ
コメント