UJMLサンプル031:ステートマシン化の練習(2006/02/07)
比較的凝ったアプリケーションを作るなら、再利用可能な部分はステートマシンとしてコンポーネント化すべきだ。今回はその簡単なサンプルを紹介する。コンポーネント化の元となるUJMLサンプルは「UJMLサンプル009:画面の中央で「俺の名は、、、」」だ。
ステートマシンを使う側のサンプルは既にサンプルの014-020で紹介したのでもしわからなかったら見て欲しい。
・UJMLサンプル014:コンポーネントの利用(背景)
・UJMLサンプル015:コンポーネントの利用(日付時刻)
・UJMLサンプル016:コンポーネントの利用(リストボックス)
・UJMLサンプル017:コンポーネントの利用(メッセージボックス)
・UJMLサンプル018:コンポーネントの利用(パッドボタン)
・UJMLサンプル019:コンポーネントの利用(スクロールメニュー)
・UJMLサンプル020:コンポーネントの利用(スクロールテキストボックス)
ステートマシン化するのは、極めて簡単だ。
UJMLの冒頭で↓のようにすればよい。
-------------------
<ujml>
<partition>
<state-machines>
<state-machine name="Ticker">
-------------------
その他は普通に作るのと変わらない。後は、使う側のために関数を公開する必要があるので、今回の例ではinit()とstart()という関数を公開した。
動作サンプル
※動作にはJAVA Runtimeが必要
★---コード(使う側 注 samples_031_LUPINTicker_002.ujmsをincludeしている。)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
]>
<!-- http://uiengineda.blogs.com ルパン三世ティッカーをコンポーネント化 -->
<ujml>
<application>
<state-machines>
<include file="samples_031_LUPINTicker_002.ujms" state-machine="Ticker" />
</state-machines>
<script>
Ticker.init("俺の名はルパン三世");
Ticker.start();
</script>
</application>
</ujml>
★---コード(使われる側 samples_031_LUPINTicker_002.ujms)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
<!ENTITY SPACING "4">
]>
<!-- http://uiengineda.blogs.com ステートマシーン化 -->
<ujml>
<partition>
<state-machines>
<state-machine name="Ticker">
<state-variables>
<state-var name="sShow" type="boolean" visibility="public"/>
</state-variables>
<variables>
<var name="mMessage" type="string" visibility="public"/>
<var name="mChar" type="string" visibility="public"/>
<var name="mWidth" type="int" visibility="public"/>
<var name="mHeight" type="int" visibility="public"/>
<var name="mCounter" type="int" />
</variables>
<functions>
<function name="init" type="void" visibility="public">
<parameters>
<var name="message" type="string"/>
</parameters>
<script>
mMessage = message;
<!-- 1文字分の幅 -->
mWidth = (&SPACING; * 2) +_text_width(_substring(mMessage,0,1), &_FONT_SIZE_MEDIUM;,
&_FONT_STYLE_ITALIC;, &_FONT_FACE_SYSTEM;);
<!-- 高さ -->
mHeight = (&SPACING; * 2) +
_text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_ITALIC;,
&_FONT_FACE_SYSTEM;);
</script>
</function>
<function name="start" type="void" visibility="public">
<script>
mChar = _substring(mMessage, 0, 1);
sShow = true;
</script>
</function>
</functions>
<states>
<state var="sShow">
<transition value="true">
<display>
<!-- 四角い箱の中にラベルを配置しています。 -->
<box>
<x><eval>(_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;) - mWidth) / 2</eval></x>
<y><eval>(_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;) - mHeight) / 2</eval></y>
<width><eval>mWidth</eval></width>
<height><eval>mHeight</eval></height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
<label>
<text><eval>mChar</eval></text>
<x>&SPACING;</x>
<y>&SPACING;</y>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_BLACK;</bg>
</label>
</box>
</display>
<delay>200</delay>
<script>
sShow = false;
mCounter++;
if(mCounter == _strlen(mMessage))mCounter = 0;
mChar = _substring(mMessage, mCounter, mCounter + 1);
sShow=true;
</script>
</transition>
</state>
</states>
</state-machine>
</state-machines>
</partition>
</ujml>
コメント