UJMLサンプル042：メッセージバー(2006/02/15)

画面の一番下にメッセージを表示するバーをステートマシン化したサンプルを紹介する。この例は、単純に文字を表示するだけなので、表示したい文字列が長いと全て表示されないという欠点があるが、文字を右から左にスクロールするようにしたものは別途紹介する予定。

ステートマシン化の例は

・UJMLサンプル031：ステートマシン化の練習

で紹介した。また、使い方の例はサンプルの014-020で紹介したのでもしわからなかったら見て欲しい。

・UJMLサンプル014：コンポーネントの利用（背景）
・UJMLサンプル015：コンポーネントの利用（日付時刻）
・UJMLサンプル016：コンポーネントの利用（リストボックス）
・UJMLサンプル017：コンポーネントの利用（メッセージボックス）
・UJMLサンプル018：コンポーネントの利用（パッドボタン）
・UJMLサンプル019：コンポーネントの利用（スクロールメニュー）
・UJMLサンプル020：コンポーネントの利用（スクロールテキストボックス）

使う側：main.ujml
ステートマシン：bottommessagebar.ujms

としている。

★---コード(main.ujml)
<?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="components/bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <script>
            MessageBar.show("MessageBarを表示しています。");
        </script>
    </application>
</ujml>

★---コード（bottommessagebar.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="MessageBar">
                <state-variables>
                    <state-var name="sMessage" type="boolean"/>
                </state-variables>
                <variables>
                    <var name="mLabelHeight" type="int"/>
                    <var name="mMessage" type="string"/>
                </variables>

                <functions>
                    <function name="show" type="void" visibility="public">
                        <parameters>
                            <var name="message" type="string"/>
                        </parameters>
                        <script>
                            mLabelHeight = (&SPACING; * 2) + _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;);
                            mMessage = message;
                            sMessage = false;
                            sMessage = true;
                        </script>
                    </function>
                    <function name="hide" type="void" visibility="public">
                        <script>
                            sMessage = false;
                        </script>
                    </function>
                </functions>
                <states>
                    <state var="sMessage">
                        <transition value="true">
                            <display>
                                <box>
                                    <x>0</x>
                                    <y><eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;) - mLabelHeight</eval></y>
                                    <width><eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval></width>
                                    <height><eval>mLabelHeight</eval></height>
                                    <fg>&_COLOR_BLACK;</fg>
                                    <bg>&_COLOR_BLACK;</bg>
                                    <label>
                                        <text><eval>mMessage</eval></text>
                                        <x>&SPACING;</x>
                                        <y>&SPACING;</y>
                                        <fg>&_COLOR_WHITE;</fg>
                                        <bg>&_COLOR_BLACK;</bg>
                                    </label>
                                </box>
                            </display>
                        </transition>
                    </state>
                </states>
            </state-machine>
        </state-machines>
    </partition>
</ujml>