UIEngine だ

UJMLサンプル128：KeyUp & KeyDown

　以前の投稿でボタンの同時押しイベントに言語レベルで対応していないことを書いたが、KeyUpとKeyDownイベントをハンドルできるのでコンポーネントで実装してしまえば良いだろうということで作り始めた。

　これまでKeyUpとKeyDownイベントを使ったことが無かったので、まずは簡単なサンプルから作り始め、最終的にはすぐに使えるコンポーネントとして公開する予定。その頃にはSDK2.0がDoja対応していることに期待。

　基本的にはこれまで使ってきたonSelectイベントと使い方は同じで、ボタンを押したとき、離したときにイベントが発生する。

　ソースコードをそのまま掲載するが、重要なのは太字部分。どのボタンに対してイベントが発生したのか、関数を使って取得している。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>
<!-- http://uienginda.blogs.com UJMLサンプル128：KeyUp & KeyDown -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sLabel" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mLabelText" type="string"/>
        </variables>
        <script>
            sLabel = true;
        </script>
        <states>
            <state var="sLabel">
                <transition value="true">
                    <display>
                        <label>
                            <text><eval>mLabelText</eval></text>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                            <size>&_FONT_SIZE_SMALL;</size>
                        </label>
                        <box>
                            <event name="onKeyDown">
                                <variables>
                                    <var name="key" type="string"/>
                                </variables>
                                <script>
                                    key = _getStringEventData(&_EVENT_STRING_ONKEY;);
                                    mLabelText = _strcat("KeyDown:",key);
                                    _clear_state(sLabel);
                                    sLabel = true;
                                </script>
                            </event>
                        </box>
                        <box>
                            <event name="onKeyUp">
                                <variables>
                                    <var name="key" type="string"/>
                                </variables>
                                <script>
                                    key = _getStringEventData(&_EVENT_STRING_ONKEY;);
                                    mLabelText = _strcat("KeyUp:",key);
                                    _clear_state(sLabel);
                                    sLabel = true;
                                </script>
                            </event>
                        </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!　その５　ラベルの背景も指定する

UJMLサンプル126：移動するキャラとテキスト（125から続き）

　前回の

UIEngine だ: UJMLサンプル125：移動するキャラとテキスト（124から続き）

に引き続き、表示される文字を見やすくしたバージョン。Boxを重ねることで、HTMLのTableタグのようにボーダーの幅を自由に指定することもできる。テキストの背景色も自由に変更することができるので、このあたりはHTMLデザイン等に慣れたホームページデザイナーにまかせれば上手い配色を考えてくれるのだろう。

　UIEngineの特長は、例えばこのようにして作成したUIのパーツを組み合わせることで簡単に他のアプリに取り組むことができる点だ。わかる方はこのサンプルを<partition>化し、何でも良いので他のアプリケーションから_link()関数を使いリンクしてみて欲しい。

　以下は<box>を重ねている部分の例：

            <state var="sLabel"><!-- *125* -->
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mLabelPosX</eval></x>
                            <y><eval>mLabelPosY</eval></y>
                            <width><eval>mLabelWidth</eval></width>
                            <height><eval>mLabelHeight</eval></height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_GRAY;</bg>
                            <box>
                                <x>&SPACING;</x>
                                <y>&SPACING;</y>
                                <width><eval>mLabelWidth - &SPACING; * 2</eval></width>
                                <height><eval>mLabelHeight - &SPACING; * 2</eval></height>
                                <fg>0xFFEEEEEE</fg>
                                <bg>0xFFEEEEEE</bg>
                                <label>
                                    <text><eval>mLabelText</eval></text>
                                    <x>&SPACING;</x>
                                    <y>&SPACING;</y>
                                    <fg>&_COLOR_BLACK;</fg>
                                    <bg>0xFFEEEEEE</bg>
                                    <size>&_FONT_SIZE_SMALL;</size>
                                </label>
                            </box>
                        </box>
                    </display>
                </transition>
            </state>

ソースコード：
Download 126_main.ujml

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

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

UJMLサンプル125：移動するキャラとテキスト（124から続き）

　前回の

UIEngine だ: UJMLサンプル124：きょろきょろと移動（サンプル028を流用）

に続き、画面の下を移動するキャラに文字がついてくるサンプルを紹介する。これまで紹介したいくつかのサンプルを応用しているだけで、どちらかと言うと初心者の方向けのサンプルである。

　例えば、これまで紹介した次のようなサンプルが参考になる。

UIEngine だ: UJMLサンプル012：はじく感じで移動する
UIEngine だ: UJMLサンプル028：うろうろ
UIEngine だ: UJMLサンプル029：うろうろ+ジャンプ

今回のサンプルは、キャラの右端にラベル<label>エレメントをくっつけて移動させているだけである。キャラの移動にあわせラベルのX座標<x>の値mLabelPosXを変化させている。

            <state var="sLabel"><!-- *125* -->
                <transition value="true">
                    <display>
                        <label>
                            <text>0123456789</text>
                            <x><eval>mLabelPosX</eval></x>
                            <y><eval>mLabelPosY</eval></y>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </label>
                    </display>
                </transition>
            </state>

動作サンプル

ソースコード：
Download 125_main.ujml

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

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

UJMLサンプル124：きょろきょろと移動（サンプル028を流用）

　UJMLサンプル028：うろうろで作成したアニメーションを応用して、画面の下を歩いていくものを作成した。

　028のサンプルから以下の点を削除

・ランダムでの移動方向決定処理
・上下の移動処理
・上下の画像描画（state-transition）

以前も解説し、何度も繰り返しになるが、アニメーションで使用する画像はもともと一枚である。一枚の画像上の必要なエリアだけを表示するようになっている。一枚の画像はこんな感じだ。

必要なエリアのみを表示する際には

                <transition value="&SBOY_R1;">
                    <display>
                        <image>
                            <url>&IMAGE_URL;</url>
                            <src-x>&BOYW;</src-x>
                            <src-y>&BOYH;</src-y>
                            <x><eval>mPosX</eval></x>
                            <y><eval>mPosY</eval></y>
                            <width>&BOYW;</width>
                            <height>&BOYH;</height>
                        </image>
                    </display>
                </transition>

のようにし、<src-x><src-y>を設定するのがポイントだ。左上を原点とした位置を指定している。

ソースコード：
Download 124_main.ujml

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

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

UJMLサンプル122：超基礎：タイマーのおさらい

　【初心者向け】前回のUJMLサンプル121では、ボタン入力による四角の移動を紹介した。今回は次回と合わせて自動的に移動させる方法を紹介する。まずは、自動的に移動させるためにタイマーのサンプルのおさらい。

UJMLサンプル003：ステート変数千本ノック　その３　タイマー

タイマーのサンプルは上記で既に紹介しているが同じものをおさらいする。

　自動処理のポイントは以下の二つ

１．<delay>エレメントを使い処理間隔を設定する
２．<script>ブロック内で自分のステートをfalse/trueと切り替える

下記ソースコードの太字を見るとわかるが、<delay>1000</delay>とし、<script>内でsMessageをfalse→trueと切り替えることで1秒おきに<script>エレメント内の処理を実行している。

            <state var="sMessage">
                <transition value="true">
                    <display>
                        <label>
                            <text><eval>mTimer</eval></text>
                            <x>10</x>
                            <y>10</y>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </label>
                    </display>
                    <delay>1000</delay>
                    <script>
                        sMessage = false;
                        mTimer--;
                        if(mTimer > 0)sMessage=true;
                    </script>
                </transition>
            </state>

ソースコード：
Download 122_main.ujml

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

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

UJMLサンプル121：超基礎：ユーザー入力でちょっとずつ移動その２

　【初心者向け】前回のUJMLサンプル120では、ユーザーのボタン入力毎に四角を表示する位置を変え、移動するように見せた。処理の流れは

四角が表示されている
↓
ボタン入力
↓
四角を消す※１
↓
ボタン入力
↓
新しい表示位置をセット
四角を表示する

となっていたが、今回は※１を省き再表示処理を一回の入力で行うものだ。入力処理を記述する<script>エレメント内を

<event name="onSelect">
<!-- 少しずつ移動する -->
<accelerators><key>FIRE</key></accelerators>
<script>
    mPosX = mPosX + 10;
    sBox = false;
    sBox = true;
</script>
</event>

のようにする。つまり、ステート変数のfalse/trueを隣接させることで、再表示させている。mPosxに新しい値をセットしているが、この段階で四角の位置が変わることは無い。それはsBoxの部分をコメントアウトして実行すればわかる。

ソースコード：
Download 121_main.ujml

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

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

UJMLサンプル120：超基礎：ユーザー入力でちょっとずつ移動

　　【初心者向け】前回のUJMLサンプル119では、実行ボタンの入力により四角の非表示/再表示をステート変数でコントロールするサンプルを紹介した。今回のサンプルは再表示のときに四角の位置を変更することで、徐々に移動するように見せるものだ。

　主には前回のコードに下のコードを加え、ユーザーの入力を受け付けるようにしている。mPosXを徐々に増やした後再表示を実行させることでこのように箱が移動しているように見せることが可能である。FIREに処理を紐づけているが「RIGHT」とすればより本来のUIらしくなるだろう。
<state var="sInput">
<transition value="true">
    <display>
        <box>
            <event name="onSelect">
                <!-- 表示するたびに少しずつ移動する -->
                <accelerators><key>FIRE</key></accelerators>
                <script>
                    if(sBox){
                        sBox = false;
                    }else{
                        mPosX = mPosX + 10;
                        sBox = true;
                    }
                </script>
            </event>
        </box>
    </display>
</transition>
</state>

ソースコード：
Download 120_main.ujml

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

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

UJMLサンプル119：超基礎：ユーザー入力で四角の表示非表示を切り替える

　【初心者向け】今回のサンプルは、サンプル117を、ユーザー入力で四角の表示を切り替えられるようにしたもの。

　四角の描画が定義されていた<state var="sBox">内のエレメントが、sBox=false;とすることで非表示になり、またｓBox=true;とすることで表示される。

ソースコード：
Download 119_main.ujml

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

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

UJMLサンプル118：超基礎：四角を表示する 117見たらやりたくなるのが,,,

　前回のUJML117を見たら誰でもやりたくなるのが、左の写真のようなものか？ためしに作成してみた。

　<width><height>を都度指定しなければならないのが面倒だ。少し難しい話になるが、親の<box>の幅や高さを取得できるなら楽だが。例えば、

<width><eval>parent.width-4</eval></width>

といった具合。あまり役には立たないかもしれないが、このようなこともできるという参考程度ということで。

ソースコード：
Download 118_main.ujml

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

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

UJMLサンプル117：超基礎：四角を表示する 四角の中の四角

　今回紹介するサンプルは、<box>の中に入れ子で<box>を描くこと。もちろん、そのまた中に<box>、、、と延々続けて書けるだろうが。

　左の写真のとおり、外側に赤枠の四角、その内側に青枠の四角が描画されている。ポイントは内側の四角の位置<x><y>の指定方法。外側の赤枠の左上の頂点からの距離で指定することができる。

　本サンプルでは赤枠の左上から2ポイントずつ<x><y>をずらし、内側に描画している。そのため、内側の<width><height>は2ポイントの2倍の4ずつ減らしているわけだ。これで、内側にすっぽり収まったように見える。

--- ソース抜き出し
<box>
    <x><eval>mPosX</eval></x>
    <y><eval>mPosY</eval></y>
    <width><eval>mWidth</eval></width>
    <height><eval>mHeight</eval></height>
    <fg>&_COLOR_RED;</fg><!-- 四角の枠色：赤で -->
    <bg>&_COLOR_WHITE;</bg><!-- 四角の中の色：白で -->
    <!-- 箱の中に箱を -->
    <box>
        <x>2</x>
        <y>2</y>
        <width><eval>mWidth-4</eval></width>
        <height><eval>mHeight-4</eval></height>
        <fg>&_COLOR_BLUE;</fg><!-- 四角の枠色：青で -->
        <bg>&_COLOR_YELLOW;</bg><!-- 四角の中の色：黄色で -->
    </box>
</box>
---

ソースコード：
Download 117_main.ujml

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

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