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 コンポーネントが積み上げられている様子が何となく伝わるんじゃないかな、と思います。

XPages: Hello World アプリケーションを作ってみる

2009年08月27日 00:10

8.5 のXPagesがどんなものかは何となく興味があるけど面倒なので、Eclipseベースのデザイナーもまだ慣れてないのに、コントロールとかがたくさんあってややこしそうなXPagesに手を出すのは何となく億劫・・・と言う人は多いのではないかと思います。

今日はそんな人がとりあえず一歩目だけ踏み出せるようなHello World 的なアプリケーションの作り方を紹介します。これだけではXPagesのすごさはあまり分からないかもしれないですが始めはこのくらいが楽でいいのではないかと思います。

注: 今回の記事はND Wikiにある以下の記事を参考にして書いています。
Tutorial: Introduction to XPages - Exercise 1

手順:
(ほとんどの画像はクリックすると拡大します)

1. 始めに空のデータベースを作ります。 xpages1.nsf としましょう。
  Local で作る場合にはPriviewしやすくなるようにAnonymous をACLに追加しておいて下さい。

2. 作成したデータベースをDomino Designer で開き、「カスタムコントロール」を選択します。右側のペインが切り替わらないときは右クリックで「開く」を選択します。
 表示されたら、「新規カスタムコントロール」を選択します。
カスタムコントロールの作成

3. 「hwControl」と言う名前のコントロールを作成します。(表示されるまで時間がかかりますのでお待ち下さい。)
作成ダイアログ

4. 右側のカスタムコントロールから「ラベル」ドラッグして設計要素の左上に配置します。
ラベルの作成

5. 下部のプロパティ欄に「Hello xPages World!!」のような表示テキストを入れます。
ラベルのプロパティ

6. ちょっとこれだけだとさびしいのでフォントを大きくしてみます。 Ctrl+s でSaveし、hwControlを終了します。
ラベルのフォント

7. 左側のペインから「XPage」を選択して開きます。「新規XPage」から以下のように「hwPage」を作ってください。
新規 XPageの作成

8. 先ほど作った「hwControl」 をドロップします。
  「Hello xPages World!!」と言うラベルが表示されたらページを保存します。
  念のため[プロジェクト]-[すべてビルド]を使用してビルドしておいてください。
コントロールの配置

9. 以下のようなURLを入れてプリビューしてみてください。
http:///xpages/xpages1.nsf/hwPage.xsp

作成中に左下の「アウトライン」ペインから作成したXPageの構造を確認したり、設計ペインの下にある「ソース」タブをクリックして実際のXML構造などを見ておくと勉強になるのではないかと思います。

OpenNTF: ほとんどのXPages のコントロールを試せるデモアプリケーション

2010年04月19日 00:12

社内のミーティングでXPagesの話をしたときにたまたま以下のサンプルアプリケーションの話をしていたのですが、結構知らない人も多かったので紹介しておきます。

OpenNTF では最近Showcase的なサンプルも多数リリースしていて、たとえばXPagesを使ったiPhone/Blackberry/Android用のコントロールとかも出していたりします。

その中でも今回は特にサポートやっている身としてもいいなあ。。。と思ったのが以下のXpagesのサンプルアプリケーションです。

New Release of XPages Demo Application for 8.5.1 including Notes Client (OpenNTF)

要するにXPagesのコントロールとかプロパティを試せるようなサンプルの集合体になっています。
サーバーにアップロードして署名すればすぐに使えるので是非試してみてください。
 調査などのために何かそのコントロールを使ったサンプルアプリケーションを作りたくなったらここを頼ればいいのでとても助かります。開発時にどんなコントロールを使うのがUI上良いのかを見た目で確認するうえでも有用ではないかと思います。 Notes 8.5.1以上であればクライアントから実行することも出来ます。

詳細は以下のブログにも詳しく紹介されているので是非ご参照下さい!


OpenNTF.org より Demonstration Application for XPages の最新版(v1.0.2) がリリースされました (notes/domino liaizon)

Wiki: Domino WebアプリにAjaxを組み込んでみる

2010年05月24日 00:43

ND Webアプリケーション Wikiにこんな記事が掲載されていますね。

Lotus Notes and Domino Application Development wiki
Integrating Ajax into traditional IBM Lotus Domino Web applications

もうAJAXなんてDominoにはまだまだ・・・と言う時期でも無くなったのでそろそろこういう方法を取り入れることを考えておられる方も多いのではないかと思います。
英語の記事をがっつり読む気がしない方も多いと思うので大まかにどんな内容なのかを紹介しておきましょう。

主に以下のようなサンプルを紹介しています。

1. XMLHTTPRequest() を呼ぶサンプル(URLなどが指定されていないので形だけ)
2. Now 関数の結果をPrintで返すエージェントを作って、フィールドに現在時間をセットするサンプル
3. URLパラメータを処理するLotusScriptエージェント
4. 「Work Area」をダイアログリストで選択すると、OnChangeイベントで関係するEmployee NameをAjaxで取ってきてダイアログリストに表示するサンプル。


あまり経験が無くてもこのくらいなら出来そう!と言う内容になっているので興味がある方は是非一度読んでみて動かしてみたらどうでしょう?

Firebug Lite on Notes client

2010年07月07日 01:50

以下の記事を読んでいたのですが、面白い話が載っていたので紹介します。

Lotus Notes and Domino Application Development wiki より
XPages: Dojo 1.3.2 toolkit in the Domino 8.5.1 Server and Notes 8.5.1 Client

Lotus Notes 8.5.1 から XPagesのコンテンツがクライアントから表示可能になったことはこのブログの読者ではご存知の方も多いと思いますが、Notesクライアントで見るとHTMLソースが見れなかったり、解析などでは不都合も多いのですが、Localで動かしていると、Notesクライアントである程度デバッグできると便利だなー、と思います。

そうしたら、何と Lotus Notes 8.5.1 では、以下の設定で簡易版のFirebugが使える事が分かりました。

Firebug which can be installed as an add-on in Mozilla Firefox, is particularly beneficial.
Developer toolbars are also available for other browsers and can prove useful.
In order to debug an XPage application within the Notes Client, there is a property available in the xsp.properties file which will enable Firebug Lite in Notes.
To leverage this functionality, uncomment and modify the following property in xsp.properties

xsp.client.script.dojo.djConfig=isDebug:true

This will provide a certain amount of support for debugging dojo within the Notes Client itself.
If any more advanced debugging is required, you should replicate the XPages application to the Domino Server, if possible, and avail of the complete Firebug tool within Mozilla Firefox.



\properties ディレクトリにある xsp.properties.sample ファイルをxsp.properties にリネームして、xsp.client.script.dojo.djConfig行を xsp.client.script.dojo.djConfig=isDebug:true に書き換えると有効になります。

こんな感じです。(画像はクリックすると拡大します)

Firebug Lite on Lotus Notes 8.5.1

マウスを持っていった部分だけタグを表示するような感じで、DOM Treeを表示したりCSSの詳細情報を表示したりは十分にできないようですがタグ情報を簡易にでも表示できるとすごく便利です。

埋め込みブラウザがFirefoxベースになったのがこういうところにも生かされるようになったのは面白いですね。。



XPagesアプリケーション利用ガイド

2012年07月09日 08:50

XPages のサンプルアプリケーションを実際に体験できる XPages.info というサイトがあります。そのサイト上には、日本IBMが日本語で公開しているサンプルアプリケーションもあります。

Japanese Demos
http://xpages.info/XPagesHome.nsf/DemosJapan.xsp

これらのサンプルアプリケーションについての概要とご利用方法に関するガイドが公開されました。ぜひご活用ください。

●XPagesアプリケーション利用ガイド
http://www.ibm.com/developerworks/jp/lotus/ldd_tech/2012july_xpages.html


最新記事