iNotes Lite Framework - iNotes Lite Widgets

2009年03月06日 00:13

iNotes Lite Framework の第二弾はiNotes Lite Widget と言うiNotes Liteフレームワーク上に作られたUI についてです。

バックナンバー
1. iNotes Lite Framework - Frameset
2. iNotes Lite Framework - iNotes Lite Widgets
3. iNotes Lite Framework - Lazy loading code
4. iNotes Lite Framework - Basic Layout
5. iNotes Lite Framework - Common Property

(このエントリは以下の記事を参考に書かれています)
iNotes Lite framework (Notes/Domino Wiki)

出来るだけ翻訳記事にならないように、少しでも自分の言葉で書こうと思ったのですがこの章は非常に例とかも分かりやすいので、元々のお話のままのほうがいい気がします。。
なので、ちょっと翻訳記事っぽくなるのですが、その点はご容赦下さい。。


以下のような"Hello World"を挿入するシンプルな Widgetを作る事を考えます。
以下のようなコンストラクタを始めに作成します。

function com_ibm_dwa_ui_hello(sId){
var oElem = AAA.EcK.getElementById(sId);
oElem.innerHTML = 'Hello world';
}

このWidgetを使うために以下のようなタグを用意します。
<div id="e-hello" com_ibm_dwa_ui_widget_class="com_ibm_dwa_ui_hello"> </div>

以下のようにして呼び出します。
EPl(AAA.EcK.getElementById('e-hello')); 

EPl() [com_ibm_dwa_ui_loadWidgets()] はWidgetsを初期化するためのAPIです。EPl()は始めの引数で与えられたオブジェクトに対して初期化を行い、com_ibm_dwa_ui_widget_class 属性を持つ各HTML要素を探します。
EPl()は、 com_ibm_dwa_ui_widget_class 属性で指定されたJavaScriptオブジェクトを作成し、始めの引数で渡された HTML要素のID をコンストラクタに渡します。このようなHTML要素は iNotes Lite Widgetの 「Root Element」と呼ばれます。

上の例では、EPl() はe-hello HTML要素のcom_ibm_dwa_ui_widget_class 属性を見つけ、com_ibm_dwa_ui_hello('e-hello') を呼びます。このようにして、 com_ibm_dwa_ui_hello クラスはここで指定されたUIを認識できるようになります。

ある要素が com_ibm_dwa_ui_widget_class クラスを定義しながら、EPl() がWidgetを初期化するのを避けるための方法があります。これは、com_ibm_dwa_ui_widget_delayed="true" と言う属性を該当要素に指定する事によって出来ます。
そのような場合、EPl()の二番目の引数にTrueを指定した場合にそのようなWidgetを初期化することが出来るようになります。 Widgetの初期化を遅らせる事は非常に有益です。 実際には、iNotesはEPl()をBody全体を初期化しようとするからです。

非常に短いコードサンプルですが、 iNotes Lite内で、

1. コンストラクタを定義
2. タグでコンストラクタを指定
3. 表示するときに初期化と同時にコンストラクタを呼び出す

のような流れで UI コンポーネントが積み上げられている様子が何となく伝わるんじゃないかな、と思います。


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://hnagasim.blog8.fc2.com/tb.php/103-8cb0c84e
    この記事へのトラックバック


    最新記事