UJMLサンプル130：ボタンの同時押し用コンポーネントを作る カーソルのようなものを表示(2006/06/16)

　今回紹介するサンプルは

UIEngine だ: UJMLサンプル129：ボタンの同時押しを処理するコンポーネントを作る（128の続き）

の続きである。何回かに分けてボタン同時押しを処理するコンポーネントを作成している。今回は前回のソースコードに付け加えるのではなく、カーソルの十字キーのようなものを表示するだけのサンプルである。

　四角形を描画する<box>エレメントを4つ使用して画像のようなものを作成した。HTMLとの大きな違いは<x><y>で描画するものの表示位置を座標指定できる点だろう。

　次回は一度寄り道をして、

UIEngine だ: コンポーネントの重ね合わせが驚くほど簡単である、、、これはすごい

で紹介したように、129までで作成したものに、今回作成した十字キーを_link()関数で重ね合わせる予定だ。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
    <!ENTITY BOX_SIZE "10">
]>
<!-- http://uienginda.blogs.com UJMLサンプル130：ボタンの同時押し用コンポーネントを作る カーソルのようなものを表示 -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sBoxUP" type="boolean"/>
            <state-var name="sBoxDOWN" type="boolean"/>
            <state-var name="sBoxLEFT" type="boolean"/>
            <state-var name="sBoxRIGHT" type="boolean"/>
        </state-variables>
        <variables>
        </variables>
        <script>
            sBoxUP = true;
            sBoxDOWN = true;
            sBoxLEFT = true;
            sBoxRIGHT = true;
        </script>
        <states>
            <state var="sBoxUP">
                <transition value="true">
                    <display>
                        <box>
                            <x>&BOX_SIZE;</x>
                            <y>0</y>
                            <width>&BOX_SIZE;</width>
                            <height>&BOX_SIZE;</height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sBoxDOWN">
                <transition value="true">
                    <display>
                        <box>
                            <x>&BOX_SIZE;</x>
                            <y><eval>&BOX_SIZE; * 2</eval></y>
                            <width>&BOX_SIZE;</width>
                            <height>&BOX_SIZE;</height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sBoxLEFT">
                <transition value="true">
                    <display>
                        <box>
                            <x>0</x>
                            <y>&BOX_SIZE;</y>
                            <width>&BOX_SIZE;</width>
                            <height>&BOX_SIZE;</height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sBoxRIGHT">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>&BOX_SIZE; * 2</eval></x>
                            <y>&BOX_SIZE;</y>
                            <width>&BOX_SIZE;</width>
                            <height>&BOX_SIZE;</height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ

その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD!　その１
・UJMLサンプル053：超基礎：HELLO WORLD!　その２　文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD!　その３　文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD!　その４　文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD!　その５　ラベルの背景も指定する