UJMLサンプル071：画像を使って、大きさの変わるボタンを表示する。(2006/02/27)

画像を複数使うことで、大きさの変わるボタンを作ることも可能だ。今回のサンプルはその最初のステップで、大きさは変わらないが、画像をパーツ化して表示している。

左と真中と右だ。

ここから、真中が「ぐにゅーっ」と伸びることで、左右に伸びるボタンを作成する予定だ。

★---コード
<?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 IMAGE_URL_CENTER "images/aqua_5_center">
    <!ENTITY IMAGE_URL_LEFT "images/aqua_5_left">
    <!ENTITY IMAGE_URL_RIGHT "images/aqua_5_right">
    <!ENTITY IMAGE_CENTER_WIDTH "10">
    <!ENTITY IMAGE_CENTER_HEIGHT "80">
    <!ENTITY IMAGE_SIDE_WIDTH "30">
    <!ENTITY IMAGE_SIDE_HEIGHT "80">
]>
<!-- http://uienginda.blogs.com 今後、ボタンサイズがぐにゃぐにゃ変化するようになる予定-->
<ujml>
    <application>
        <state-machines>
            <include file="../components/background.ujms" state-machine="Background" />
        </state-machines>
        <state-variables>
            <state-var name="sImage" type="boolean" size="3"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int"/>
            <var name="mScrHeight" type="int"/>

            <var name="mWidth" type="int" size="3"/>
            <var name="mHeight" type="int" size="3"/>

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

            <var name="mImageURL" type="string" size="3"/>
        </variables>
        <script>
            <!-- 背景を白くするように指定：background.ujmsのステートマシンを利用 -->
            Background.init(&_COLOR_WHITE;,true);

            <!-- 画面の幅と高さ -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            mPosX[0] = 0;
            mPosX[1] = &IMAGE_SIDE_WIDTH;;
            mPosX[2] = &IMAGE_SIDE_WIDTH; + &IMAGE_CENTER_WIDTH;;

            mPosY[0] = 0;
            mPosY[1] = 0;
            mPosY[2] = 0;

            mWidth[0] = &IMAGE_SIDE_WIDTH;;
            mWidth[1] = &IMAGE_CENTER_WIDTH;;
            mWidth[2] = &IMAGE_SIDE_WIDTH;;

            mHeight[0] = &IMAGE_SIDE_HEIGHT;;
            mHeight[1] = &IMAGE_CENTER_HEIGHT;;
            mHeight[2] = &IMAGE_SIDE_HEIGHT;;

            mImageURL[0] = "&IMAGE_URL_LEFT;";
            mImageURL[1] = "&IMAGE_URL_CENTER;";
            mImageURL[2] = "&IMAGE_URL_RIGHT;";

            <!-- ステート変数をセットして表示処理の実行 -->
            sImage[0] = true;<!-- 左 -->
            sImage[1] = true;<!-- 中 -->
            sImage[2] = true;<!-- 右 -->
        </script>
        <states>
            <state var="sImage" index="*">
                <transition value="true">
                    <display>
                        <image>
                            <url><image-url><eval>mImageURL[_state_index(0)]</eval></image-url></url>
                            <x>
                                <eval>mPosX[_state_index(0)]</eval>
                            </x>
                            <y>
                                <eval>mPosY[_state_index(0)]</eval>
                            </y>
                            <width><eval>mWidth[_state_index(0)]</eval></width>
                            <height><eval>mHeight[_state_index(0)]</eval></height>
                        </image>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>