UJMLサンプル011：座標の感覚を覚える(2006/02/02)
UJMLでは画面の左上が座標の原点(0,0)で、右にいくとXの値が増加し、下にいくほどYの値が増加する。
もちろんこれは最初に覚えるべきことなのだが、どれぐらいが100なのか？50なのか？は、体得しておいた方が何かと便利だ。ホームページを作るときに画像サイズやテーブル幅等、width指定をいくつにしようか試行錯誤することがよくある。UJMLでも志向錯誤してしまうが、だいたいのサイズ感は覚えておきたい。
サンプルは、方向キーで表示される箱が移動して、箱の左上の座標（黄色い点）の座標を表示するだけのものだ。
ボタンが押された後に、関数"moveBox"で移動処理をしているが、その中でステート変数sBoxをfalse→trueと切り替えて再描画させているのは今までのサンプルと同じだ。
---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY LABEL_WIDTH_STRING "X:000 Y:000" >
<!ENTITY SPACING "4">
<!ENTITY MOVE_SUB "1">
]>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
XYの位置の練習 カーソルキーで動かすとXYの値が変わる
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ujml>
<application>
<state-variables>
<state-var name="sBox" type="boolean"/>
<state-var name="sInput" type="boolean"/>
</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>
<functions>
<function name="moveBox" type="void">
<parameters>
<var name="dx" type="int"/>
<var name="dy" type="int"/>
<var name="fMove" type="boolean"/>
</parameters>
<script>
if (fMove) {
<!-- 位置を移動する。 -->
mPosX = mPosX + (dx * &MOVE_SUB;);
mPosY = mPosY + (dy * &MOVE_SUB;);
<!-- 箱の再描画です -->
sBox = false;
sBox = true;
}
</script>
</function>
</functions>
<script>
<!-- スクリーンの幅と高さ -->
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
<!-- 全文字数分の幅 -->
mWidth = (&SPACING; * 2) +_text_width("&LABEL_WIDTH_STRING;", &_FONT_SIZE_MEDIUM;,
&_FONT_STYLE_ITALIC;, &_FONT_FACE_SYSTEM;);
<!-- 高さ -->
mHeight = (&SPACING; * 2) + _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_ITALIC;,
&_FONT_FACE_SYSTEM;);
mPosX = &MOVE_SUB;;
mPosY = &MOVE_SUB;;
sInput = true;
sBox = true;
</script>
<states>
<state var="sInput">
<transition value="true">
<display>
<!-- カーソルを押すイベントをキャッチするためのBOX -->
<!-- もちろん空なので表示はされませんよ -->
<box>
<event name="onselect">
<accelerators>
<key>LEFT</key><!-- 左 -->
</accelerators>
<script>
moveBox(-1, 0, _gt(mPosX, &MOVE_SUB;-1));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>RIGHT</key><!-- 右 -->
</accelerators>
<script>
moveBox(1, 0, _lt(mPosX+mWidth, mScrWidth));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>UP</key><!-- 上 -->
</accelerators>
<script>
moveBox(0, -1, _gt(mPosY-mHeight, -1));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>DOWN</key><!-- 下 -->
</accelerators>
<script>
moveBox(0, 1, _lt(mPosY+mHeight, mScrHeight));
</script>
</event>
</box>
</display>
</transition>
</state>
<state var="sBox">
<transition value="true">
<display>
<!-- XYの座標を表示する箱 -->
<box>
<x><eval>mPosX</eval></x>
<y><eval>mPosY</eval></y>
<width><eval>mWidth</eval></width>
<height><eval>mHeight</eval></height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
<label>
<text><eval>_strcat("X:",mPosX," Y:",mPosY)</eval></text>
<x>&SPACING;</x>
<y>&SPACING;</y>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_BLACK;</bg>
</label>
</box>
<!-- 左上の黄色い目印 -->
<box>
<x><eval>mPosX</eval></x>
<y><eval>mPosY</eval></y>
<width>3</width>
<height>3</height>
<fg>&_COLOR_YELLOW;</fg>
<bg>&_COLOR_YELLOW;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント