最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション ~ Dojo の基礎と活用 ~
by user
Comments
Transcript
最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション ~ Dojo の基礎と活用 ~
® 最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション ~ Dojo の基礎と活用 ~ 2010 年 6 月 15 日 日本アイ・ビー・エム株式会社 ソフトウェア事業 Lotus 事業部 © 2008 IBM Corporation IBM Software Group | Lotus software 特記事項 当資料は、日本 IBM のテストやレビューを受けておりません。内容について、 できる限り正確を 期すよう努めてはおりますが、いかなる明示または暗黙の 保証も責任も負いかねます。本資料の情報は、使用先の責任において使用され るべきものであることを、 あらかじめご了承ください。 掲載情報は不定期に変更されることもあります。他のメディア等に無断で転載 する事はご遠慮ください。 本資料の著作権は日本アイ・ビー・エムにあります。非営利目的の個人利用の 場合において、自由に使用してもかまいませんが、営利目的の使用は禁止させ ていただきます。 IBM, AIX, Lotus, Lotus Notes, Lotus Domino, は International Business Machines Corporation の米国およびその他の国における商標。その他、記載さ れた社名および製品名は、それぞれ各社の商標または登録商標です。 2 IBM Software Group | Lotus software アジェンダ Rich Internet Application 技術としての Dojo Dojo Toolkit とは Dojo Toolkit の基礎 Domino での Dojo Toolkit 利用方法 まとめ 補足資料 3 IBM Software Group | Lotus software Rich Internet Application 技術としての Dojo 4 Rich Internet Application 技術 JavaScript で出来る範囲は広い RIAはJavaScriptライブラリーが人気 AJAX などでの JavaScript 活用技術の進化 クライアントにインストール不要 コーディングが楽 複数種類のブラウザーへの対応が楽 JavaScriptライブラリー人気度 http://www.kylehayes.info/2009/03/29/survey-results-javascript-frameworks/ Dojo v.s jQuery 機能比較 (1/2) Dojo jQuery Feature detection No Yes DOM unextended Yes Yes XMLHTTPRequest data retrieval Yes Yes JSON data retrieval Yes Yes Server push data retrieval Yes 不明 Other data retrieval Yes Yes Drag and Drop Yes Yes Simple visual effects Yes Yes Animation/advanced visual effects Yes Yes Event handling Yes Yes Back button support / history management Yes 要 Plugin Input form widgets & validation Yes 要 Plugin Grid Yes 要 Plugin Hierarchical aTree Yes 要 Plugin Rich text editor Yes 要 Plugin Auto-competion tools Yes 要 Plugin Wikipedia - http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks Dojo v.s jQuery 機能比較 (2/2) Dojo jQuery HTML generation tools Yes Yes Widgets themeable / skinnable Yes Yes GUI resizable panels and modal dialogs Yes 要 Plugin GUI page layout Yes 要 Plugin Canvas support Yes 不明 Accessiblility / graceful degradation Yes Yes ARIA compliant Yes 開発中 Developer tools Yes Yes Offline storage No No Cross-browser 2d Vector Graphics Yes 不明 Charting & Dashboard Yes 要 Plugin Wikipedia - http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks 主要 JavaScript ライブラリーのベンチマーク結果 http://dante.dojotoolkit.org/taskspeed/report/charts.html (2010/6/8 取得) トータルの開発生産性が重要 ユーザーインターフェース (画面 + ロジック) XPages JavaScript / Dojo Form View Frame, Page, Navigator, etc サーバーサイドロジック LotusScript Java @ 関数、シンプルアクション 文書データ コラボレーション・インフラ機能 ・ ・ ・ ・ ・ 全文検索エンジン、ビューインデックス管理 ・ ・ 複合ドキュメント(リッチテキスト) ター メールルーティング ・ ユーザー / ロール別セキュリティ制御 ・ ユーザー管理 シングルサインオン バックエンドシステムコネク 多言語対応 その他 JavaScript XPagesがあれば Dojoを勉強する必要なし? IBM Software Group | Lotus software Dojo Toolkit とは 16 http://persevere.sitepen.com/stocker.html Dojo Toolkit とは クールなUIを実装できるJavaScriptライブラリー IBMが支援するオープンソース エンタープライズ利用に耐えうる機能性 コア・ライブラリー ベースとなる様々な機能を提供する Ajax通信機能, イベント処理用ユーティリティ, パッケージング, CSSベースのクエリー, アニメーション, JSON, 言語ユーティ リティー,国際化対応、ブラウザ判別用の変数、配列や文字列に関するユーティリティ、DOM/CSSの操作、ロギング、etc dijitライブラリー クールなユーザーインターフェース基本部品を提供する フォーム、メニュー、プログレスバー、チェックボックス、ボタン、コンボボックス、スピナー、スライダー、ツールチップ、 カラーパレット、インラインエディット、ドロップダウン、テキストボックス、カレンダー、ツリー、etc dojoXライブラリー ブラウザとは思えない高度なユーザーインターフェースを提供 チャート、グリッド、ベクター描画、フィッシュアイ、ドラッグ&ドロップ、etc Dojo Toolkitのウィジェット例 IBM Software Group | Lotus software Dojo Toolkit の基礎 24 Dojo Toolkit をダウンロード http://www.dojotoolkit.org/ dijitライブラリー コア・ライブラリー dojoxライブラリー ボタンを表示させるだけのコード <html> <html> <head> <head> <meta <meta http-equive="Content-Type" http-equive="Content-Type" content="text/html;charset=UTF-8"/> content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> true"></script> <style type="text/css"> <style type="text/css"> @import @import "js/dojo/resources/dojo.css"; "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> </style> <script <script type="text/javascript"> type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.Button"); </script> </script> </head> </head> <body <body class="tundra"> class="tundra"> <div <div dojoType="dijit.form.Button">Dijit dojoType="dijit.form.Button">Dijitのボタン のボタン</div> </div> </body> </body> </html> </html> <html> <head> <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> <script src="js/dojo/dojo.js" <script src="js/dojo/dojo.js" djConfig="parseOnLoad: djConfig="parseOnLoad: dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <div dojoType="dijit.form.Button">Dijitのボタン</div> </body> </html> true"></script> true"></script> •コア・ライブラリーの中核 •最初に必ずロードする必要あり •djConfig属性で、dojoの実行環境を設定 •“パラメータ:値, パラメータ:値、・・・” •parseOnLoad:trueにより、dojoType属性がついている要 素をウィジェットに置き換える <html> <head> <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <div dojoType="dijit.form.Button">Dijitのボタン</div> <style <style type="text/css"> type="text/css"> </body> @import @import "js/dojo/resources/dojo.css"; "js/dojo/resources/dojo.css"; </html> @import @import "js/dijit/themes/tundra/tundra.css"; "js/dijit/themes/tundra/tundra.css"; </style> </style> •スタイルシートの読み込み。 •スタイルシートの読み込み。 •ウィジェットの表示には必ず必要。 •ウィジェットの表示には必ず必要。 <html> <head> <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <div dojoType="dijit.form.Button">Dijitのボタン</div> </body> <script <script type="text/javascript"> type="text/javascript"> </html> dojo.require("dojo.parser"); dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.Button"); </script> </script> •dojo.requireは、指定したパッケージをロードする •dojo.requireは、指定したパッケージをロードする •dojo.parserは、”parseOnLoad:true”の処理を行う •dojo.parserは、”parseOnLoad:true”の処理を行う •dijit.form.Button •dijit.form.Button は、ボタンウィジェットのパッケージ は、ボタンウィジェットのパッケージ <html> <head> <meta http-equive="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <div dojoType="dijit.form.Button">Dijitのボタン</div> </body> </html> <div <div dojoType="dijit.form.Button">Dijitのボタン</div> dojoType="dijit.form.Button">Dijitのボタン</div> •div, •div, span, span, buttonなどの要素は、dojoType属性がつけられてい buttonなどの要素は、dojoType属性がつけられてい ると、指定されたウィジェットに置き換えられる。 ると、指定されたウィジェットに置き換えられる。 ウィジェット生成 ~ 2種類の方法 マークアップ方式 dojoType 属性で HTML 中に生成場所を指定 どこに何を表示するのか明確で分かりやすい ダイナミック方式 ウィジェットをnewコマンドで動的に生成 条件によってウィジェットの種類・生成場所を変更できる 必要な時のみ生成すればいいのでメモリ使用効率が良い ダイナミック方式でボタン表示を書き換えた例 <html> <html> <head> <head> <meta <meta http-equiv="Content-Type" http-equiv="Content-Type" content="text/html;charset=UTF-8"/> content="text/html;charset=UTF-8"/> <script <script src="js/dojo/dojo.js"></script> src="js/dojo/dojo.js"></script> <style <style type="text/css"> type="text/css"> @import @import "js/dojo/resources/dojo.css"; "js/dojo/resources/dojo.css"; @import @import "js/dijit/themes/tundra/tundra.css"; "js/dijit/themes/tundra/tundra.css"; </style> </style> <script <script type="text/javascript"> type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function() dojo.addOnLoad(function() {{ var var elem elem == dojo.byId("one"); dojo.byId("one"); var var button button == new new dijit.form.Button({label:" dijit.form.Button({label:"クリック クリック"}, "}, elem); elem); }); }); </script> </script> </head> </head> <body <body class="tundra"> class="tundra"> <div <div id="one"></div> id="one"></div> </body> </body> </html> </html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.addOnLoad(function() { var elem = dojo.byId("one"); var button = new dijit.form.Button({label:"クリック"}, elem); }); </script> </head> <body class="tundra"> <div id="one"></div> </body> <script </html> <script src="js/dojo/dojo.js"></script> src="js/dojo/dojo.js"></script> •dojo.jsは必ず読み込む必要がある •dojo.jsは必ず読み込む必要がある •djConfig="parseOnLoad: •djConfig="parseOnLoad: true" true" は必要ない は必要ない <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.addOnLoad(function() { var elem = dojo.byId("one"); var button = new dijit.form.Button({label:"クリック"}, elem); }); </script> </head> <body class="tundra"> <div id="one"></div> </body> </html> <div <div id="one"></div> id="one"></div> •ウィジェットを生成する場所の候補にid属性を付ける •ウィジェットを生成する場所の候補にid属性を付ける •dojoType属性はつけない •dojoType属性はつけない <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js"></script> <style type="text/css"> @import "js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.addOnLoad(function() { var elem = dojo.byId("one"); var button = new dijit.form.Button({label:"クリック"}, elem); }); </script> </head> <body class="tundra"> <div id="one"></div> </body> </html> dojo.addOnLoad(function() dojo.addOnLoad(function() {{ … … }} •HTML全体が読み込み終わったら実行する処理を記述 •HTML全体が読み込み終わったら実行する処理を記述 •以下の処理を行うには、id=”one”が読み込まれている必要があるので、dojo.addOnLoad •以下の処理を行うには、id=”one”が読み込まれている必要があるので、dojo.addOnLoad を使う を使う var var elem elem == dojo.byId("one"); dojo.byId("one"); •id=”one”が指定されているDOMノードへの参照を獲得 •id=”one”が指定されているDOMノードへの参照を獲得 •document.getElementByIdでも良いが、dojo.byIdの方が複数種類のブラウザー上で動作す •document.getElementByIdでも良いが、dojo.byIdの方が複数種類のブラウザー上で動作す る可能性が高い る可能性が高い var var button button == new new dijit.form.Button({label:"クリック"}, dijit.form.Button({label:"クリック"}, elem); elem); •elemが指すDOMノードへdijitボタンを生成する •elemが指すDOMノードへdijitボタンを生成する イベントを定義するには - 1 オーバーライド方式 イベントの実装を置き換える ウィジェット生成部分に書けるので分かりやすい <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import ".js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); </script> </head> <body class="tundra"> <div id="button" dojoType="dijit.form.Button" label="クリック!"> <script type="dojo/method" event="onClick"> alert("こんにちは!"); </script> </div> </body> </html> <script <script type="dojo/method" type="dojo/method" event="onClick"> event="onClick"> alert("こんにちは!"); alert("こんにちは!"); </script> </script> ●● マークアップした直後に記述 マークアップした直後に記述 ●● type=”dojo/method”と指定することにより、dojo.parserが type=”dojo/method”と指定することにより、dojo.parserが ウィジェットのイベント実装を置き換えてくれる。 ウィジェットのイベント実装を置き換えてくれる。 イベントを定義するには - 2 コネクト方式 dojo.connectを使ってダイナミックに関数をイベントに接続 複数の関数を1つのイベントに接続可能 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <script src="js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <style type="text/css"> @import ".js/dojo/resources/dojo.css"; @import "js/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function(){ dojo.connect(dijit.byId("button"),"onClick",function(){ alert("こんにちは!"); }) }); </script> </head> <body class="tundra"> <div id="button" dojoType="dijit.form.Button" label="クリック!"></div> </body> </html> dojo.addOnLoad(function(){ dojo.connect(dijit.byId("button"),"onClick",function(){ alert("こんにちは!"); }) }); ● body中のid=”button”で指定した要素に対して、関数を接続 IBM Software Group | Lotus software Domino での Dojo Toolkit 利用方法 40 復習 ~ Dojo に必要なこと ① dojo.js のロード ② CSSのロード <html> <html> <head> <head> <meta <meta http-equiv="Content-Type" http-equiv="Content-Type" content="text/html;charset=UTF-8"/> content="text/html;charset=UTF-8"/> <script <script src="js/dojo/dojo.js" src="js/dojo/dojo.js" djConfig="parseOnLoad: djConfig="parseOnLoad: true"></script> true"></script> <style <style type="text/css"> type="text/css"> @import @import ".js/dojo/resources/dojo.css"; ".js/dojo/resources/dojo.css"; @import @import "js/dijit/themes/tundra/tundra.css"; "js/dijit/themes/tundra/tundra.css"; </style> </style> <script <script type="text/javascript"> type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.Button"); </script> </script> </head> </head> <body <body class="tundra"> class="tundra"> <div <div id="button" id="button" dojoType="dijit.form.Button" dojoType="dijit.form.Button" label="クリック!"> label="クリック!"> <script <script type="dojo/method" type="dojo/method" event="onClick"> event="onClick"> alert("こんにちは!"); alert("こんにちは!"); </script> </script> </div> </div> </body> </body> </html> </html> ③ 利用するパッケー ジのロード ⑤ イベントの定義 ④ ウィジェットの生成 Domino で実現するには? ① dojo.jsのロード ② CSSのロード ③ 利用パッケージのロード ④ ウィジェットの生成 ⑤ イベントの定義 XPages のプロパティで設定 ① dojo.jsのロード ② CSSのロード ③ 利用するパッケー ジのロード ④ ウィジェットの生成 ● ● マークアップする場所を作成 パネル、ボタン、スパンコンテンツ、ブロックレベルコンテンツ ● ● dojoType属性を指定 ウィジェットの属性をname, valueで 指定 ⑤ イベントの定義 ~ オーバーライド方式 dojoType属性が指定された要 素の中にスクリプトを定義 ソースタブを選択 スクリプトタグでイベントの 実装をコーディング ⑤ イベントの定義 ~ コネクト方式 出力スクリプト コントロールを 配置する ● ● XSP.addOnLoadは、XPages関連のライブラ リーがロード完了されるのを保証 idは、#{id:名前} で指定する ツールチップの実装 スライダーの実装 1/2 スライダーの実装 2/2 スライダーコントロールのロード スライダーのonChange イベントの実装 スライダーコントロールの配置 と各プロパティの設定 フェードインの実装 1/2 じわ~っと表示 フェードインの実装 2/2 id=”targetarea”が指定さ れたDOM要素に対して、3000 ミリ秒かけてフェードインさ せる id=”targetarea”が指定され たDOM要素に対して、不透明度 をゼロ(非表示)に初期化する 。 フィッシュアイの実装 1/2 フィッシュアイの実装 2/2 dojox.widget.FisheyeListで、 リスト全体のプロパティを設定 dojox.widget.FisheyeListItemで、 個々のアイコンのプロパティを設定 http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/XPages%20Fisheye%20Control チャートの実装 http://openntf.org/Projects/pmt.nsf/ProjectLookup/Voting%20XPage%20Control Notes文書データの読み込みコードも参考になる ツリーの実装 developerWorks記事「XPagesでDojoウィジェットを利用する」 http://www.ibm.com/developerworks/jp/ysl/library/lotus/y-lot-dojoonxpages/ IBM Software Group | Lotus software 56 IBM Software Group | Lotus software 補足資料 57 IBM Software Group | Lotus software 参考資料 The Official Dojo Documentation ( 英語) – http://docs.dojocampus.org/ – dojo の公式リファレンスマニュアル。サンプルが充実している。 Dojo Toolkit Web Site – http://www.dojotoolkit.org/ – Dojo Toolkit のダウンロード、 Q&A フォーラム Lotus Notes and Domino Application Development wiki ( 英語 ) – http://www.lotus.com/ldd/ddwiki.nsf – Notes 開発に関するあらゆる内容をカバー。チュートリアルが豊富。 Lotus Notes/Domino 8.5 で Dojo を使う – https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=124355489 – Notes データベース内のデータを JSON 形式で返す方法の説明が分かりやすい。 XPages で Dojo ウィジェットを利用する – http://www.ibm.com/developerworks/jp/ysl/library/lotus/y-lot-dojoonxpages/ – XPages で Dojo を利用するための解説。 Notes のビューを dojo.tree で操作するサンプルが参考になる。 【連載】パーフェクト Dojo – http://journal.mycom.co.jp/series/dojo/menu.html – マイコミジャーナルによる Dojo の基礎解説。非常に分かりやすい。 58 Dijitライブラリーが提供する部品 - 1 Dijitライブラリーが提供する部品 - 2 Dijitライブラリーが提供する部品 - 3 Dijitライブラリーが提供する部品 - 4