UJMLサンプル135：ボタンの同時押し用コンポーネントを作る 最後(2006/07/06)
これまで何回かにわたって紹介してきた、ボタン同時押しコンポーネントは一応今回で終了する。これまで8回、今回入れて9回にわたり作成過程を紹介してきた。この135の段階でもリファクタリングの余地はあるがとりあえず終了とする。
ボタンの同時押しに対応すると、ユーザーインタフェースも幅が広がるだろう。ただ、今になって気づいたことがる。それは、ほとんどの携帯電話ではカーソルキーの同時押しは物理的なボタンの設計上できないのではないか、ということだ。もしそうならば、カーソルキーを番号キーの2468に置き換えてもらえれば良いと思っている。
また、今回紹介するような _link() でパーティションをリンクさせるUJMLを書く上で気をつけたいことがある。それは、
_link()で変数等を共有するとき、export/importするものが多くなる場合にはそれらをまとめてステートマシン化し、ステートマシンをexport/importした方がスマートだ。
ということだ。実際にUJMLを書いていただくと実感できると思うが、頭の隅にでもおいてもらえたらうれしい限りだ。UIEngineの最大の特徴の一つである _link() を使うときの tips は他にも色々あるかもしれない。見つけたらまた書いていこう。
以下これまでのサンプル：
UJMLサンプル128：KeyUp & KeyDown
UJMLサンプル129：ボタンの同時押しを処理するコンポーネントを作る（128の続き）
UJMLサンプル130：ボタンの同時押し用コンポーネントを作る カーソルのようなものを表示
UJMLサンプル131：ボタンの同時押し用コンポーネントを作る _link()関数で重ね合わせ
UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2
UJMLサンプル132：ボタンの同時押し用コンポーネントを作る カーソルのようなもの2配列化
UJMLサンプル133：ボタンの同時押し用コンポーネントを作る カーソルのようなもの3
UJMLサンプル134：ボタンの同時押し用コンポーネントを作る 入力と描画を_link()で連結
ソースコード：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>
<!-- http://uienginda.blogs.com UJMLサンプル135：ボタンの同時押し用コンポーネントを作る 最後 -->
<!--
コンポーネント側がセットした sButtonStatus の変化により画面下部に押されているボタン名を表示している。
ステート変数をこのように設計するとコードが冗長になる。
ステート変数を下のように2つ用意した方が良いかもしれない。
sStateChanged 値が変化したことを通知
sButtonStatus 押されているボタンの値
これらは、ステートマシン化してexportするのがスマート。（UJML1.5の場合）
UJML2.0の場合にはオブジェクト化可能なので、また別の設計もいけるだろう。
-->
<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");
</script>
<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>
</application>
</ujml>
ソースコードダウンロード（全て同一フォルダ内に配置）：
Download 135_main.ujml
Download bottommessagebar.ujms
Download cursor_controler.ujml
Download cursor_view.ujml
UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ
その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD! その１
・UJMLサンプル053：超基礎：HELLO WORLD! その２ 文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD! その３ 文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD! その４ 文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD! その５ ラベルの背景も指定する
コメント