UJMLサンプル021：スタートボタン(2006/02/04)

今回はスタートボタンだけのサンプル。作成したアプリをJavaAppletPTSで配信するとき用にスタートボタンを作成した。スタートボタンをクリックした後、ゲームやツールが使えるようにするためのものだ。

本来スタートボタンをクリックした後、スタートボタンが消えるはずなのだがJavaApplet上は期待したように動作しない。

動作サンプル
※動作にはJAVA Runtimeが必要

---コード
<?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 START_MESSAGE "START" >
    <!ENTITY SPACING "4">
    <!ENTITY BORDER_SIZE "2">
]>
<!-- http://uiengineda.blogs.com -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sStartButton" type="boolean"/>
            <state-var name="sStarted" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int" />
            <var name="mScrHeight" type="int" />

            <var name="mPosX" type="int" />
            <var name="mPosY" type="int" />

            <var name="mMessage" type="string"/>

            <var name="mWidth" type="int"/>
            <var name="mOneWidth" type="int"/>
            <var name="mHeight" type="int"/>
        </variables>

        <script>
            <!-- スクリーンのサイズを調べる -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            <!-- 全文字数分の幅 -->
            mWidth = (&SPACING; * 2) +
                _text_width("&START_MESSAGE;", &_FONT_SIZE_MEDIUM;,
                &_FONT_STYLE_BOLD;, &_FONT_FACE_SYSTEM;);

            <!-- 高さ -->
            mHeight = (&SPACING; * 2) +
                _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_ITALIC;,
                &_FONT_FACE_SYSTEM;);

            <!-- 中心の位置 -->
            mPosX = (mScrWidth / 2) - (mWidth / 2);
            mPosY = (mScrHeight / 2) - (mHeight / 2);

            mMessage = "&START_MESSAGE;";
            sStartButton = true;
        </script>
        <states>
            <state var="sStartButton">
                <transition value="true">
                    <display>
                        <!-- ボタンの枠 -->
                        <box>
                            <x><eval>mPosX-&BORDER_SIZE;</eval></x>
                            <y><eval>mPosY-&BORDER_SIZE;</eval></y>
                            <width><eval>mWidth+&BORDER_SIZE;*2</eval></width>
                            <height><eval>mHeight+&BORDER_SIZE;*2</eval></height>
                            <fg>&_COLOR_BLUE;</fg>
                            <bg>&_COLOR_BLUE;</bg>
                        </box>
                        <!-- 四角い箱の中にラベルを配置しています。 -->
                        <box>
                            <x><eval>mPosX</eval></x>
                            <y><eval>mPosY</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <fg>&_COLOR_SILVER;</fg>
                            <bg>&_COLOR_SILVER;</bg>
                            <event name="onSelect">
                                <script>
                                    // スタートボタンがクリックされた
                                    sStartButton = false;
                                    sStarted = true;
                                </script>
                            </event>
                            <label>
                                <text>&START_MESSAGE;</text>
                                <x>&SPACING;</x>
                                <y>&SPACING;</y>
                                <fg>&_COLOR_BLACK;</fg>
                                <bg>&_COLOR_SILVER;</bg>
                                <style>&_FONT_STYLE_BOLD;</style>
                            </label>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sStarted">
                <transition value="true">
                    <display>
                        <label>
                            <text>STARTED!!</text>
                        </label>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>