« インサイドUJML 解説1 | メイン | UJMLサンプル001:ステート変数千本ノック:ルパン三世ティッカー »

インサイドUJML:解説2(2006/01/25)

インサイドUJML:解説2
http://developer.uievolution.com/docs/ja/InsideUJML/index.html
隙間時間に書いているので、文体に統一感無く読みにくいかもしれません。随時時間を見つけて修正する予定です。

【Functions:関数の話】

 ビルトイン関数(もともと実装されている関数)もあるし、自分で関数作れます。

 ついでにステート変数を配列で扱う方法も説明、って、タイミング的にちょっと強引な気がするし、サンプル中に自分で関数を作る例が出ていないのは、、とほほ、、だけど、我慢我慢。次のControlFlowのところで出てくるからね。

 サンプルは、デバイスの画面サイズにあわせてうまい具合に四角を描画する(レイアウトする)ものです。参考画面で縦長と横長のものがありますね。うまい具合にレイアウトされたというわけです。

 そして、

「縦長でも横長の画面でも見た目がいい具合に作るのがポイントですよ。そうすれば、いろんなデバイスにアプリケーション配布するのが簡単です。変更もほとんどしなくて済むしね。」

と結んでありました。

そんなうまくいくものか?

そんな疑問が湧いた人はおそらく正常でしょう。

【Control Flow:制御の話】

 ifとwhileだけ使えます。forは使えません。

 そして、このサンプルでオリジナル関数の作成例まで出ています。

【Events:イベント処理の話】

 イベント処理をマスターすると、インタラクティブなアプリケーションが作れるようになりますよ。ボタンを押すと、動いたりとか、そういう感じ。

 サンプルはF1キーを押すと、プログラムが終了するというもの。
Events.ujml

Tip: Always use the F1 key for Back functionality because this behavior is required by some platforms, like BREW, and it fits well with the overall user experience of many devices since most phones have the notion of Back or Clear buttons and Sony’s CLIE PDAs also have a Back button.

F1ボタンは「戻る」として使うのが一般的なのでつべこべ言わずそうしましょう。といったニュアンス?ユーザーが混乱しないためにも「戻る」とするのが良いでしょう。ということです。

Events may only be associated with visual element in a <display> element.

それと、イベントは<display>エレメントの中のヴィジュアルエレメント(<box>とか<label>といったエレメント)にだけ関連付けられます。

Tip: To create event handlers when a visible visual element is not desired, use an empty or transparent <box> element.

とは言うものの、画面上にヴィジュアルエレメント配置したくないときもあるよね?そんなときは、空っぽか透明な<box>エレメントを配置してそいつにイベントを処理させよう!

【States:ステートの正しい使い方】

 ステート変数を変化させて紙芝居的に画面を描画しなおすことはもう説明した通り。
 で、ここでは、画面描画のタイミングでアプリケーションロジックも実行できるよ!ただの再描画だけじゃないよ!という話です。

 サンプルプログラムは5秒で消えるメッセージボックスです。

<delay>5000</delay>

というのがあることにより、<multi-label>エレメントの表示から5秒後に<script>が実行されるという仕組み。

・Delayed logic(間隔あけて動作するもの)
・Timer-based logic(タイマーで動作するもの)
・Animation(アニメーション)

といった使い道があるよ!

とりあえずここまで、また時間のあるときに続きをまとめます。

次はTemplatesからです。

トラックバック

この記事のトラックバックURL:
https://www.typepad.com/services/trackback/6a00d8341c2e2e53ef00e550a94b9d8834

インサイドUJML:解説2を参照しているブログ:

コメント

この記事へのコメントは終了しました。