最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション～ Dojo の基礎と活用～

by user

on 15 сентября 2016

Category: Documents

>> Downloads: 6

views

Report

Comments

Description

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属性がつけられてい
ると、指定されたウィジェットに置き換えられる。
ると、指定されたウィジェットに置き換えられる。
ウィジェット生成～２種類の方法
マークアップ方式
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を使ってダイナミックに関数をイベントに接続
複数の関数を１つのイベントに接続可能
<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

最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション ～ Dojo の基礎と活用 ～

Comments

Description

Transcript

最新ユーザーインターフェース技術で作る Lotus Notes/Domino Web アプリケーション～ Dojo の基礎と活用～