UJMLサンプル144：画像表示基礎、画像の配置(2006/08/14)

　前回紹介したサンプルを少し変更し、ステート変数と<event>を使い、画像の配置を切り替えるようにした。このあたりは難しいことは無いのでOKだろう。

<?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_1 "<image-url>images/skype</image-url>">
]>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- http://uienginda.blogs.com UJMLサンプル144：画像表示基礎、画像の配置 -->
<!-- 画像サイズは 96*96 -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sImage" type="int"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int"/>
            <var name="mScrHeight" type="int"/>

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

            <var name="mPosX" type="int"/>
            <var name="mPosY" type="int"/>
        </variables>
        <script>
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
            
            if(mScrWidth &_LT; 96){
                mWidth = mScrWidth;
            }else{
                mWidth = 96;
            }
            
            if(mScrHeight &_LT; 96){
                mHeight = mScrHeight;
            }else{
                mHeight = 96;
            }
            
            mPosX = 0;
            mPosY = 0;
            
            sImage = 0;
        </script>
        <states>
            <state var="sImage">
                <transition value="0"><!-- top left -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>0</eval></x>
                            <y><eval>0</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 1;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="1"><!-- top right -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>mScrWidth - mWidth</eval></x>
                            <y><eval>0</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 2;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="2"><!-- bottom right -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>mScrWidth - mWidth</eval></x>
                            <y><eval>mScrHeight - mHeight</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 3;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="3"><!-- bottom left -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>0</eval></x>
                            <y><eval>mScrHeight - mHeight</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 4;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="4"><!-- center -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>(mScrWidth - mWidth) / 2</eval></x>
                            <y><eval>(mScrHeight - mHeight) / 2</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 0;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>