UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2配列化(2006/06/18)
前回、
UIEngine だ: UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2
で紹介した通り、この132番のソースコードを配列化したらどうなるのか、実験がてらやってみた。もちろん動作は同じだが、問題はコンパイル後のujbc（アプリケーションのバイトコード）のサイズである。大きくなるだろうか？小さくなるだろうか？
コンパイル前にわかることはまず、<script>ブロックに記述されるスクリプトの量と宣言される変数の数は増えるということだ。<box>エレメントはソースコードの見た目上一つにまとまっているので、全体のソースコードはすっきりした。
<?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の色を変化させる -->
<!-- boxエレメントを配列化する -->
<ujml>
<application>
<state-variables>
<state-var name="sBox" type="boolean" size="4"/>
<state-var name="sTick" type="boolean"/>
</state-variables>
<variables>
<var name="mBG" type="int" size="4"/>
<var name="mPosX" type="int" size="4"/>
<var name="mPosY" type="int" size="4"/>
<var name="ctr" type="int"/>
</variables>
<functions>
<function name="refresh" type="void">
<script>
_clear_state(sBox[0]);
_clear_state(sBox[1]);
_clear_state(sBox[2]);
_clear_state(sBox[3]);
sBox[0] = true;
sBox[1] = true;
sBox[2] = true;
sBox[3] = true;
</script>
</function>
</functions>
<script>
mPosX[0] = &BOX_SIZE;;// TOP
mPosX[1] = &BOX_SIZE;;// DOWN
mPosX[2] = 0;// LEFT
mPosX[3] = &BOX_SIZE; * 2;// RIGHT
mPosY[0] = 0;
mPosY[1] = &BOX_SIZE; * 2;
mPosY[2] = &BOX_SIZE;;
mPosY[3] = &BOX_SIZE;;
sTick = true;
ctr = 0;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&INTERVAL;</delay>
<script>
sTick = false;
if(ctr==0){
mBG[0] = &_COLOR_WHITE;;
mBG[1] = &_COLOR_BLACK;;
mBG[2] = &_COLOR_BLACK;;
mBG[3] = &_COLOR_BLACK;;
refresh();
}else if(ctr==1){
mBG[0] = &_COLOR_BLACK;;
mBG[1] = &_COLOR_BLACK;;
mBG[2] = &_COLOR_BLACK;;
mBG[3] = &_COLOR_WHITE;;
refresh();
}else if(ctr==2){
mBG[0] = &_COLOR_BLACK;;
mBG[1] = &_COLOR_WHITE;;
mBG[2] = &_COLOR_BLACK;;
mBG[3] = &_COLOR_BLACK;;
refresh();
}else{
mBG[0] = &_COLOR_BLACK;;
mBG[1] = &_COLOR_BLACK;;
mBG[2] = &_COLOR_WHITE;;
mBG[3] = &_COLOR_BLACK;;
refresh();
ctr = -1;
}
ctr++;
sTick = true;
</script>
</transition>
</state>
<state var="sBox" index="*">
<transition value="true">
<display>
<box>
<x><eval>mPosX[_state_index(0)]</eval></x>
<y><eval>mPosY[_state_index(0)]</eval></y>
<width>&BOX_SIZE;</width>
<height>&BOX_SIZE;</height>
<fg>&_COLOR_GRAY;</fg>
<bg><eval>mBG[_state_index(0)]</eval></bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
どうだろうか？結果は次の通りである。
配列化無し→380Byte（UIESDK1.5を使用）
配列化→610Byte（UIESDK1.5を使用）
ずいぶん大きくなった。わかったことは、
ソースコードをすっきりさせようとすると、バイトコードが大きくなる可能性がある。場合によってはそれは結構な割合である。携帯電話等の小型デバイス上の実行を考えると、アプリサイズの制約と通信速度からバイトコードは小さいほうが望ましいので、配列化したくなった時は少し考えた方が良いということだ。
配列化したらバイトコードが大きくなった理由はまた機会があるときに説明する予定だ。時間のある方は出来上がったバイトコードをバイナリエディタ等で比較参照することをおすすめする。
UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ
その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD! その１
・UJMLサンプル053：超基礎：HELLO WORLD! その２ 文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD! その３ 文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD! その４ 文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD! その５ ラベルの背景も指定する
コメント