« UJMLはどこに行くのか? | メイン | ロジックをユーザーが参加して作るということ »

UJMLサンプル031:ステートマシン化の練習(2006/02/07)

Samples_031_oreno_stm比較的凝ったアプリケーションを作るなら、再利用可能な部分はステートマシンとしてコンポーネント化すべきだ。今回はその簡単なサンプルを紹介する。コンポーネント化の元となる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>

トラックバック

この記事のトラックバックURL:
https://www.typepad.com/services/trackback/6a00d8341c2e2e53ef00e550941a808833

UJMLサンプル031:ステートマシン化の練習を参照しているブログ:

コメント

この記事へのコメントは終了しました。