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>
コメント