UJMLサンプル138：135の同時押しコンポーネントの活用(2006/07/08)

　ボタン同時押しに対応するコンポーネントを以前紹介した。

UJMLサンプル135：ボタンの同時押し用コンポーネントを作る 最後

今回を含め、このコンポーネントの使い方を解説しつつ、必要であれば改良を加えていく予定だ。

※このエントリーは初めて本ブログに来た方が読むには敷居が高い。まずは、初心者向けまとめページに目を通すことをおすすめする。

　前回紹介したときのソースコード 135_main.ujml には、ユーザーの入力を受けて画面下部「上下左右」と表示されるようにしていた。まず、今回はユーザーの入力を受け表示する部分を別のパーティションとして切り分ける。これは切り分けることで今後の改良をやりやすくするためだ。切り分けてスリムになった138_main.ujmlは以下の通り。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>
<!-- http://uienginda.blogs.com UJMLサンプル138：135の同時押しコンポーネントの活用 -->
<ujml>
    <application>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="export"/>
        </state-variables>
        <script>
            _link("controler","cursor_controler.ujbc");
            _link("message","message_view.ujbc");
        </script>
    </application>
</ujml>

_link()により新しく作成したパーティション、message_view.ujml へリンクしている。新しく作成した message_viw.ujml は以下の通り。これで、今後はこのファイルの内容を変更することでユーザー入力に対するエフェクトを作成することができる。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>
<!-- http://uienginda.blogs.com メッセージ表示用 -->
<ujml>
    <partition>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="import"/>
        </state-variables>
        <states>
            <state var="sButtonStatus">
                <transition value="0">
                    <script>
                        MessageBar.show("");
                    </script>
                </transition>
                <transition value="1">
                    <script>
                        MessageBar.show("上　　　");
                    </script>
                </transition>
                <transition value="2">
                    <script>
                        MessageBar.show("　下　　");
                    </script>
                </transition>
                <transition value="3">
                    <script>
                        MessageBar.show("上下　　");
                    </script>
                </transition>
                <transition value="4">
                    <script>
                        MessageBar.show("　　左　");
                    </script>
                </transition>
                <transition value="5">
                    <script>
                        MessageBar.show("上　左　");
                    </script>
                </transition>
                <transition value="6">
                    <script>
                        MessageBar.show("　下左　");
                    </script>
                </transition>
                <transition value="7">
                    <script>
                        MessageBar.show("上下左　");
                    </script>
                </transition>
                <transition value="8">
                    <script>
                        MessageBar.show("　　　右");
                    </script>
                </transition>
                <transition value="9">
                    <script>
                        MessageBar.show("上　　右");
                    </script>
                </transition>
                <transition value="10">
                    <script>
                        MessageBar.show("　下　右");
                    </script>
                </transition>
                <transition value="11">
                    <script>
                        MessageBar.show("上下　右");
                    </script>
                </transition>
                <transition value="12">
                    <script>
                        MessageBar.show("　　左右");
                    </script>
                </transition>
                <transition value="13">
                    <script>
                        MessageBar.show("上　左右");
                    </script>
                </transition>
                <transition value="14">
                    <script>
                        MessageBar.show("　下左右");
                    </script>
                </transition>
                <transition value="15">
                    <script>
                        MessageBar.show("上下左右");
                    </script>
                </transition>
            </state>
        </states>
    </partition>
</ujml>