UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2(2006/06/18)
前回UIEngineのコンポーネント重ね合わせの妙を紹介した。
UIEngine だ: UJMLサンプル131：ボタンの同時押し用コンポーネントを作る _link()関数で重ね合わせ
今回のサンプル紹介は130番で作成したカーソルのようなものを表現する4つの<box>エレメント
UIEngine だ: UJMLサンプル130：ボタンの同時押し用コンポーネントを作る カーソルのようなものを表示
を少し改良し、4つの箱のうち一つだけ色が変わるようにしたものである。サンプルコードではINTERVALで指定されたミリ秒毎に箱の色が時計回りに変わっていくようになっている。この手の一定間隔で処理を行うのは本ブログの初期のサンプルが参考になるだろう。
UIEngine だ: UJMLサンプル００１：ステート変数千本ノック:ルパン三世ティッカー
UIEngine だ: UJMLサンプル003：ステート変数千本ノック その３ タイマー
今回紹介する下のソースコードを見て頂けるとわかるが、<box>エレメントが4つありほとんど同じようなソースコードになっている。こういう物は思わず配列化したくなるが、次回の投稿では配列化したものを紹介する予定。
<?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サンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2 -->
<!-- INTERVAL で指定された間隔毎に各boxの色を変化させる -->
<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="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>
sTick = true;
ctr = 0;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&INTERVAL;</delay>
<script>
sTick = false;
if(ctr==0){
bgUP = &_COLOR_WHITE;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
}else if(ctr==1){
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_WHITE;;
refresh();
}else if(ctr==2){
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_WHITE;;
bgLEFT = &_COLOR_BLACK;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
}else{
bgUP = &_COLOR_BLACK;;
bgDOWN = &_COLOR_BLACK;;
bgLEFT = &_COLOR_WHITE;;
bgRIGHT = &_COLOR_BLACK;;
refresh();
ctr = -1;
}
ctr++;
sTick = true;
</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 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ
その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD! その１
・UJMLサンプル053：超基礎：HELLO WORLD! その２ 文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD! その３ 文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD! その４ 文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD! その５ ラベルの背景も指定する
コメント