UJMLサンプル037：ティッカー（横バー式）(2006/02/14)

文字が左に流れるティッカーのサンプルだ。

「[prototype] はてブタグホッパー」のプロトタイプを作っているときにできたコードを切り出してサンプル化した。

こういうコンポーネントをステートマシン化すればその後の開発が容易になることは簡単に想像できる。使うイメージはJSPのtag-libに近と感じた。

★---コード
<?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">
    <!ENTITY MSEC_DELAY "200">
]>
<!-- http://uiengineda.blogs.com 文字列操作の練習 -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sMessage" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int"/>
            <var name="mScrHeight" type="int"/>
            <var name="mLabelHeight" type="int"/>
            <var name="mMessage" type="string"/>
            <var name="mMessageTemp" type="string"/>
            <var name="mCt" type="int"/>
        </variables>
        <script>
            mMessage = "秋元@サイボウズ研究所プログラマーBlog: 従うべきでないプログラミングのアドバイス10個";
            mMessageTemp = mMessage;

            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            mLabelHeight = (&SPACING; * 2) + _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;);

            mCt = 0;
            sMessage = true;
        </script>
        <states>
            <!-- 画面の下部にメッセージを出すための帯 -->
            <state var="sMessage">
                <transition value="true">
                    <display>
                        <box>
                            <x>0</x>
                            <y><eval>mScrHeight - mLabelHeight</eval></y>
                            <width><eval>mScrWidth</eval></width>
                            <height><eval>mLabelHeight</eval></height>
                            <fg>&_COLOR_BLACK;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                            <label>
                                <text><eval>mMessageTemp</eval></text>
                                <x>&SPACING;</x>
                                <y>&SPACING;</y>
                                <fg>&_COLOR_WHITE;</fg>
                                <bg>&_COLOR_BLACK;</bg>
                            </label>
                        </box>
                    </display>
                    <delay>&MSEC_DELAY;</delay>
                    <script>
                        sMessage = false;
                        if(mCt &_LT; _strlen(mMessage)-1){
                            mCt++;
                        }else{
                            mCt = 0;
                        }
                        mMessageTemp = _substring(mMessage,mCt,_strlen(mMessage)-1);
                        sMessage = true;
                    </script>
                </transition>
            </state>
        </states>
    </application>
</ujml>