XPagesDay2013 【B-4】 Dojo 徹底解剖！～ XPages で Dojo を有効活用するには～

【B-4】Dojo 徹底解剖！
〜～ XPages で Dojo を有効活⽤用するには？
〜～

⽇日本アイ・ビー・エム株式会社
東京ソフトウェア開発研究所
⼩小野
充志

2013/11/07

© 2013 IBM Corporation

1

特記事項

•  本資料料の記載内容は私個⼈人の⾒見見解であり、必ずしも所属する企業の⽴立立場、
戦略略、意⾒見見を代表するものではありません。
•  本資料料の記載内容は、できる限り正確を期すよう努めてはおりますが、
いかなる明⽰示または暗黙の保証も責任も負いかねます。
•  本資料料の情報は、使⽤用先の責任において使⽤用されるべきものであること
を、あらかじめご了了承ください。
•  掲載情報は不不定期に変更更されることもあります。他のメディア等に無断
で転載する事はご遠慮ください。
•  当資料料をコピー等で複製することは、執筆者の承諾諾なしではできません。
•  また、当資料料に記載された製品名または会社名はそれぞれの各社の商標
または登録商標です。
IBM、IBMロゴ、DB2、Lotus、Lotus
Notes、Lotus
Domino、Quickr、Sametime、Workplace、WebSphereは、International
Business
Machines
Corporationの⽶米国およびその他の国における商標。

JavaおよびすべてのJava関連の商標およびロゴは
Sun
Microsystems,
Inc.の⽶米国およびその他の国における商標。

Microsoft,
Windowsは
Microsoft
Corporationの⽶米国およびその他の国における商標。

Linuxは、Linus
Torvaldsの⽶米国およびその他の国における商標。

他の会社名、製品名およびサービス名等は、それぞれ各社の商標。

2013/11/07


2

⾃自⼰己紹介

•  名前：⼩小野
充志（おの
あつし）
•  所属：⽇日本アイ・ビー・エム
•  Twitter：@onoat（pizza bot）
•  XPages および Dojo と私：
–  ICS (Lotus) BPTE チームに所属
•  技術⽀支援活動を通じて XPages および Dojo と出会う
–  その後社内の Dojo Mobile 開発プロジェクトチームへ
•  本家 Dojo Mobile へ少しだけコントリビュート
–  現在は ECM 製品開発チームに所属
•  Dojo を使った UI 開発
–  ICS コミュニティー活動は現在も継続中
•  テクてく Lotus 技術者夜会
開発者編
•  XPages Extension Library Japan チーム

2013/11/07


3

アンケート

•  「はい」の⽅方は、Web ミーティング画⾯面左上にある「挙
⼿手」アイコンをクリックしてください。

練習：まずは皆さん「挙⼿手」してみてください

質問１： jQuery を使ったことがありますか？

質問２： Dojo を使ったことがありますか？

2013/11/07


4

背景

•  技術者 xxx ⼈人に聞きました

–  Q: 「Dojo をどう思いますか？」
–  A:

なんとかしない
と！

参考資料料が少ない。特に⽇日本語。

勉強してはみたものの難しい。

Dojo？
やっぱり jQuery でしょ！

2013/11/07


5

背景

•  イケヤマくんにも相談しました

Dojo のことはキライでも
XPages のことはキライに
ならないでください！

じぇじぇじぇ！

2013/11/07

jQuery？
倍返しだ！！

Dojo いつやるの？
今でしょ！！


6

本セッションの⽬目的

•  Dojo 単体として機能紹介するのではなく、jQuery と⽐比較
しながら徹底解剖
–  「難しい」といわれる原因を探る
–  よく知られた jQuery と⽐比較することで理理解を助ける
–  似た機能を⼀一緒に覚えられるので⼀一⽯石⼆二⿃鳥！
　※ ただし講師も jQuery 初⼼心者なのでご助⾔言等お願いいたします

•  ⽐比較を通じて学んだ Dojo の機能を XPages で利利⽤用すること
で、リッチなアプリケーションを開発するためのさらなる
選択肢を提供
–  Dojo、jQuery、そしてその他 JavaScript ライブラリ全般に興味を
もっていただくきっかけとなれば幸いです

2013/11/07


7

アジェンダ

•  jQuery との⽐比較による Dojo 徹底解剖
•  XPages でより Dojo を有効活⽤用するには？

2013/11/07


8

jQuery との⽐比較による Dojo 徹底解剖

2013/11/07


9

jQuery と Dojo
•  オープンソースの JavaScript ライブラリ
–  jQuery
•  http://jquery.com/
•  最新バージョンは 1.10.2 および 2.0.3

–  Dojo （正式名称は Dojo Toolkit）

•  http://dojotoolkit.org/
•  最新バージョンは 1.9.1 （2.x ストリームも開発予定）

•  ともにWeb アプリケーション開発を効率率率化するための機能
を提供
–  クロスブラウザ対応
–  DOM操作の簡易易化
–  イベント処理理、アニメーション、AJAX、などなど

2013/11/07


10

jQuery と Dojo の⽐比較

•  ポイントをピックアップして⽐比較
–  機能概要⽐比較

•  モジュール構成
•  HTMLへのロード⽅方法
•  基本コンセプト

–  機能詳細⽐比較

•  コア API
•  UI ウィジェット

2013/11/07


11





•  コア API

2013/11/07


12

jQuery：モジュール構成

•  コアモジュールは js ファイル１つだけ
–  圧縮版と⾮非圧縮版を提供

シンプル！

•  開発時には⾮非圧縮版が便便利利。
•  ユーザーがビルドして圧縮版を作るケースはあまりない（？）

–  例例：バージョン 1.10.1 の場合

•  圧縮版：　jquery-1.10.1-min.js
•  ⾮非圧縮版：　jquery-1.10.1.js

•  各プラグインの js ファイルおよび css ファイル
–  例例：jQuery UI のすべてのプラグインを利利⽤用する場合

•  js ファイル（⾮非圧縮版）
–  jquery-ui.js
•  css ファイル（※ ダウンロードの際にテーマを選べる）
–  jquery.ui.all.css
•  i18n ファイル（ある場合のみ。jQuery UI の場合は datepicker ⽤用）
–  jquery-ui-i18n.js

2013/11/07


13

jQuery：HTMLへのロード⽅方法

•  コアモジュールおよび必要なプラグインの js ファイル・ css
ファイルを script タグ・link タグで読み込む
•  あとは JavaScript で jQuery API を呼び出すだけ
<link rel="stylesheet" href="themes/base/jquery.ui.all.css"/>
<script src="jquery-1.10.1.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui-i18n.js"></script>
<script>
$(function() {
$("#effect").addClass("newClass");
});
</script>
とてもシンプルでわかりやすい！
でもプラグインがたくさんあるとき
は少し⼤大変？

2013/11/07


14

jQuery：基本コンセプト

•  「write less, do more」

シンプルでクール！

–  $ で jQuery にアクセス
–  メソッドをつなげて記述する「メソッドチェーン」

•  コアモジュールは軽量量で⾼高速
–  必要最低限の機能のみ

•  DOM 操作、イベント処理理、AJAX、アニメーション、など

•  プラグインの仕組みにより拡張が容易易

–  jQuery グローバルオブジェクトを拡張
–  UI ウィジェットも jQuery UI というプラグインとして提供

•  セレクタでの DOM ノード選択が強⼒力力でよく使われる
–  例例：class が “red” の div すべての背景を⾚赤にして表⽰示

$("div.red").css("background-color", "red").show();
セレクタでのノード選択

2013/11/07

メソッドチェーン


15

Dojo：モジュール構成

•  ダウンロードしたモジュールの中に３つのパッケージが同梱されている
–  dojo：コア機能のパッケージ
–  dijit：UI ウィジェットパッケージ
–  dojox：拡張機能や実験段階機能をまとめたパッケージ

なんか
ややこしい？

•  コアモジュールの本体は dojo パッケージの dojo.js
•  その他のモジュールは、必要になったときに JavaScript でロードする
–  例例：dijit.Calendar モジュールを使いたい場合

•  dojo.require(“dijit.Calendar”)
•  require([“dijit/Calendar”], function(Calendar){ … }) （1.7 以降降の AMD ⽅方式）

–  ロードのたびにリクエストが⾶飛ぶので、本番環境などではビルドして１つの
js にまとめるとパフォーマンスが向上

•  それぞれのパッケージやモジュールに css ファイルも⽤用意されている
–  dojo：dojo/resources/dojo.css
–  dijit：dijit/themes/claro/claro.css （claro テーマの場合）

2013/11/07


16

（参考）AMD
•  AMD: Asynchronous Module Definition
–  参考資料料（⽇日本語）

•  Dojo道場
〜～
第11回「Dojo 最新動向 - Asynchronous Module Definition」
–  http://codezine.jp/article/detail/6482

–  CommonJS という JavaScript 標準化グループによって提唱
•  http://www.commonjs.org/

–  require によってモジュールをロードした際に⾮非同期にロード処理理を⾏行行うこと
で⾼高速化
•  http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition

–  さまざまな JavaScript ライブラリがこの標準に対応してきている
•  dojo では 1.7 から対応（ローダーとロードされる側両⽅方）
•  jQuery も 1.7 から対応（ロードされる側のみ。ローダーはなし。）

–  コードの書き⽅方が変わる

•  旧： dojo.require(“dijit.Calendar”)
•  新： require([“dijit/Calendar”], function(Calendar){ ….. });

–  9.0 現在 XPages では互換性のため同期ロードを使⽤用

2013/11/07


さらに
複雑に...

17

Dojo：HTMLへのロード⽅方法

•  コアモジュールである dojo.js および必要な css ファイルを
script タグ・link タグで読み込む
–  data-dojo-config 属性で load 時にパラメータを渡すことも可能

•  あとは JavaScript で dojo API を呼び出すだけ

<link rel="stylesheet" href="dojo/resources/dojo.css">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script src="dojo/dojo.js" data-dojo-config="parseOnLoad:false"></script>
<script>
dojo.ready(function(){
dojo.addClass(dojo.byId("effect"), "newClass");
});
</script>

※ このページも含め、以下コード例例は
すべて、先ほど紹介した AMD を使わ
ない形式で紹介します

2013/11/07

コードの構成は jQuery と
ほとんど同じで⽐比較的
シンプル！


18

Dojo：基本コンセプト（１）

•  とくにキャッチフレーズはない（？）
•  コアモジュールは軽量量

難解にみえるが
⼤大規模開発では
有効！

–  しかし jQuery のコアモジュールにはない機能がいくつかある

•  モジュール・フレームワーク
–  モジュールの定義
（dojo.provide or define)
–  モジュールのロード（dojo.require or require （AMD））
–  継承の仕組み (dojo.declare)
これは
•  国際化、アクセシビリティ
など
ありがたい！

•  モジュールを開発することで拡張が可能

–  dojo プロジェクトの中で開発されている拡張機能は dojox などの
モジュールにほとんど同梱されている

•  jQuery でいうところのプラグインのようなリリースサイクルに関する
⾃自由度度がない

–  別パッケージとしてモジュールを開発しているものもある
•  例例：gridx プロジェクト　https://github.com/oria/gridx/

2013/11/07


19

Dojo：基本コンセプト（２）

•  jQuery でよく取り上げられるセレクタによる DOM ノード
選択機能は dojo にもある
–  dojo.query()
–  でも普及度度はいま⼀一歩
セレクタでのノード選択

dojo.query はメソッド
チェーンに対応している
が、dojo 全般としては対
応していない API が多い。

dojo.query("div.red").style("backgroundColor", "red");
もしくは

dojo.query("div.red").forEach(function(node){
dojo.style(node, "backgroundColor", "red");
});

メソッドチェーンを使わない書き⽅方。
コードは少し⻑⾧長くなるけど結果は同じ。

2013/11/07


20

機能概要⽐比較のまとめ

シンプルさは
jQuery！

jQuery

Dojo

いい
ところ

•  コンセプトがシンプル
•  デザイナーにも優しい強⼒力力
なセレクタ機能
→ デザイナーツールにも採⽤用
•  jQuery を使ったツールやア
プリが沢⼭山ある

•  多機能
•  モジュールを継承した開発
のしやすさ（Java に近い）
•  国際化、アクセシビリティ
なども標準サポート

気になる
ところ

•  ⼤大規模開発ではどう？
•  いろいろなプラグインを利利
⽤用する際のリスクは？

•  多機能すぎてコンセプトが
複雑

向いていそ •  まさにライブラリ
うなケース
•  デザインを中⼼心とした開発
•  Web サイト開発、中⼩小規模
Web アプリ開発？

2013/11/07


•  ライブラリというよりはフ
レームワーク
•  アクセシビリティなどの要
件が必須の場合
•  ⼤大規模 Web アプリ開発？
21





•  コア API
•  モバイル

2013/11/07


22

コア API 詳細⽐比較

•  jQuery のコア API
– 
– 
– 
– 
– 
– 
– 

セレクタ
DOM 操作
Ajax
イベント
アニメーション
Deferred
…

•  Dojo のコア API
– 
– 
– 
– 
– 

dojo.query
dojo.addClass, dojo.style, etc
dojo.xhr, dojo.xhrGet, etc
dojo.connect / dojo.on
dojo.fadeIn,
dojo.animateProperty, etc
–  dojo.Deferred
–  dojo.dnd (ドラッグ＆ドロップ）

コアのAPIレベルでの機能
はほぼ同じ！

2013/11/07


23

コアAPI：セレクタ、DOM操作

•  例例：td タグ直下の div でクラスが red のものの背景を⾚赤に
<div class="red">a</div>
<table><tbody><tr>
<td><div class="red">b</div></td>
<td><div class="blue">c</div></td>
</tr></tbody></table>

–  jQuery
$("td > div.red").css("background-color", "red");

–  Dojo
dojo.query("td > div.red").style("backgroundColor", "red");
dojo.query("td > div.red").forEach(function(node){
dojo.style(node, "backgroundColor", "red");
});
2013/11/07


24

コアAPI：AJAX
•  例例：サーバーの message.txt ファイルを読み込んで表⽰示
–  jQuery
$.get("message.txt", function(data){
$("#messages").html(data);
});

–  Dojo
dojo.xhrGet({
url: "message.txt",
handleAs: "text",
load: function(data){
dojo.byId("messages").innerHTML = data;
}
});

2013/11/07


25

コアAPI：アニメーション

•  例例：イメージ（id == pizza）をフェードインアニメーション
で表⽰示
–  jQuery
$("#pizza").fadeIn(1000);

–  Dojo
dojo.fadeIn({
node: "pizza",
duration: 1000
}).play();

（参考）Dojo道場
〜～
第5回「アニメーションを使いこな
す」　　　　
　　　　http://codezine.jp/article/detail/5759

2013/11/07


26

UI ウィジェット詳細⽐比較

•  jQuery UI のウィジェット
– 
– 
– 
– 
– 
– 
– 
– 
– 
– 
– 

アコーディオン
オートコンプリート
ボタン
⽇日付ピッカー
ダイアログ
メニュー
プログレスバー
スライダー
数値スピナー
タブ
ツールチップ

•  Dojo ウィジェット
– 
– 
– 
– 
– 
– 
– 
– 
– 
– 
– 

dijit.layout.AccordionContainer
dijit.form.ComboBox
dijit.form.Button
dijit.form.DateTextBox
dijit.Dialog
dijit.Menu
dijit.ProgressBar
dijit.form.HorizontalSlider
dijit.form.NumberSpinner
dijit.form.TabContainer
dijit.Tooltip

UI ウィジェットも
ほぼ同じ機能をもっている！

2013/11/07


27

⽐比較のまとめ

•  コンセプトレベル

–  jQuery はシンプルでわかりやすいが、Dojo は「クセ」がある
•  機能が⾜足りないわけではなく、むしろ多機能すぎるため
•  うまく「クセ」をふりはらって適材適所での利利⽤用を！

•  API レベル

–  コア API、UI ウィジェットともに、それほど⼤大きな差異異はない
–  jQuery と⾮非常に似ているので、jQuery での同じ機能について⼀一緒に
調べることで Dojo の機能についても理理解できる場合がある

•  例例：Deferred
–  Dojo の Deferred で検索索しても⽇日本語情報はほとんど出てこないが、
jQuery の Deferred について検索索すると⽇日本語資料料が多く⾒見見つかる

XPages のセッションの中ではこれまであまりとりあげられなかった
コア API にも是⾮非注⽬目してみてください！

2013/11/07


28

あれ、⽇日本語資料料の問題は？

•  今あるものをいくつかピックアップしておきます

–  テクてく Lotus 技術者夜会　2011/01/21 　Dojo Toolkit 概要
•  https://www.ibm.com/developerworks/community/files/app?lang=ja#/
collection/46fe748d-f171-4c53-9afd-41aa95393682

–  「Dojo道場」〜～実⽤用アプリ構築のためのベストプラクティス
•  http://codezine.jp/article/corner/397

•  英語ですが API ドキュメントなどは重宝します
–  Dojo Toolkit API Documentation
•  http://dojotoolkit.org/api/

–  Dojo Toolkit Documentation
•  http://dojotoolkit.org/documentation/

•  是⾮非コミュニティーの皆さまのお⼒力力をお貸しください！

2013/11/07


29

XPages でより Dojo を有効活⽤用するには？

2013/11/07


30

XPages と Dojo
•  XPages と Dojo の相性はとてもいい

–  なにもしなくても dojo がページにロードされている
–  Dojo のビルドなどを気にしなくても CSS や JavaScript を集約する機
能が XPages にはついている（※ Notes/Domion 8.5.3 以降降）
–  Dojo のモジュールをロードするための resources プロパティもある
Dojo の「クセ」の部分をかなり隠蔽してくれている

•  Notes/Domino のバージョンによって Dojo のバージョンが
変わる点にはご注意ください
Notes/Domino

8.5

8.5.1

8.5.2

8.5.3

9.0

9.0.1

Dojo Toolkit

1.1.1

1.3.2

1.4.3

1.6.1

1.8.1

1.8.3

2013/11/07


31

XPages で Dojo をより有効活⽤用するには？

•  Dojo のコア API を使ってみましょう

–  これまで XPages の技術セッションではあまり API は紹介されず、
Dojo = UI ウィジェットとして紹介する機会が多かったのですが、
今回のセッションを機会に Dojo の API を使ってみましょう！

•  XPages のコントロールの中で使われている Dojo の UI ウィ
ジェットの API を呼び出してみましょう
–  特に XPages Extension Library には Dojo の UI ウィジェットをその
ままコントロール化したものが多いため、それらの UI ウィジェット
の API を呼び出すことでさまざまな拡張ができます

•  XPages のコントロールにはない UI ウィジェットの利利⽤用も
もちろん有効です

–  Dojo にはまだまだおもしろい UI ウィジェットがたくさんあります！

2013/11/07


32

XPages での Dojo 活⽤用例例

•  例例１：Dojo コア API の利利⽤用

–  セレクタ（dojo.query）
•  [参考]： XPagesのRadio Button Groupから選択された値をクライアント
Javascriptで取得する⽅方法
–  http://bit.ly/18iPXrq
–  アニメーション（dojo.animateProperty）
–  ドラッグ＆ドロップ (dojo.dnd）

•  例例２：コントロールの中で使われている Dojo ウィジェットに API を
使ってアクセス
–  タブ・コンテナーのタブの選択
–  アコーディオン・コンテナーのペインを開く（アニメーション付）

•  例例３：コントロールには使われていない Dojo ウィジェットを利利⽤用
–  チャート（dojox.charting）
–  ゲージ（dojox.widget.gauge）
–  描画ウィジェット（dojox.drawing）※ Experimental

2013/11/07


33

例例１：Dojo コア API の利利⽤用（１）

•  セレクタ（dojo.query）
–  例例：表の列列・⾏行行の選択

•  カラーパレットで指定した⾊色で表の列列・⾏行行を選択して塗りつぶし

あらかじめ表のセルに何⾏行行何列列か分かるよ
うなスタイルクラスを設定しておく
例例： <tr class=“row1”><td class=“col1”>…

列列選択

dojo.query("td.col3").style("backgroundColor", dijit.byId("#{id:palette}").get("value") || "red");

⾏行行選択

dojo.query(“tr.row3 td").style("backgroundColor", dijit.byId("#{id:palette}").get("value") || "red");

2013/11/07


34

例例１：Dojo コア API の利利⽤用（２）

•  アニメーション（dojo.animateProperty）

–  Extension Library のサンプル NSF にもいろいろ例例が載っています
•  http://www.xpages.jp/xpagesext.nsf/Core_DojoEffects.xsp

–  例例：スライダーで指定した倍率率率にイメージを拡⼤大縮⼩小スライダーには
Extension Library の「Dojo Horizontal Slider」を使⽤用
•  スライダーの onChange イベントで dojo.animateProperty を使⽤用し、
指定された倍率率率にイメージをアニメーション付きで拡⼤大縮⼩小する

イメージをアニメーション
付きで拡⼤大

2013/11/07

var ratio = thisEvent; // Slider で指定された倍率
dojo.animateProperty({
node: "#{id:logo}",
properties: {
width: 149 * ratio,
height: 33 * ratio
},
duration: 1000
}).play();


35

例例１：Dojo コア API の利利⽤用（３）

•  ドラッグ＆ドロップ（dojo.dnd）

–  例例：ドラッグ＆ドロップで移動可能な「メモ」を作成する
•  dojo.dnd.Moveable モジュールを利利⽤用
–  ノードをドラッグ＆ドロップで移動可能にしてくれる

var textarea = dojo.byId("#{id:inputTextarea1}");

メモ内容を⼊入⼒力力してボタンを
押すと、ドラッグ＆ドロップ
で移動可能なメモを作成

※ 保存の処理理は実装していないので、
リロードするとメモは消えます

2013/11/07

// メモの div ノードを作成して body に追加
var memoNode = dojo.create("div", {
innerHTML: textarea.value,
style: {
position: "absolute",
top: "80px",
left: "10px",
width: "100px",
height: "100px",
backgroundColor: "lightyellow",
border: "1px solid #CCCCCC"
}
}, dojo.body());
// Moveable を作成してドラッグ＆ドロップ可能に
new dojo.dnd.Moveable(memoNode);

36

例例２：コントロールの中のウィジェットの API を利利⽤用（１）

•  タブ・コンテナーのタブの選択

–  Extension Library の「Dojo Tab Container」「Dojo Tab Pane」を
使って作成したタブを、API を使ってプログラムで選択する

•  dijit.byId(id)： id で指定されたウィジェットを取得する
•  <TabContainer>.selectChild(<TabPane>)：
指定された TabPane を開く

ボタンを押すと対応するタブが開く

dijit.byId("#{id:djTabContainer1}")
.selectChild(dijit.byId("#{id:djTabPane2}"));

2013/11/07


37

例例２：コントロールの中のウィジェットの API を利利⽤用（２）

•  アコーディオン・コンテナーのペインを開く

–  Extension Library の「Dojo Accordion Container」「Dojo Accordion
Pane」を使って作成したアコーディオンのペインを、API を使って
プログラムで開く
•  <AccordionContainer>.selectChild(<AccordionPane>, true)：
指定された AccordionPane をアニメーション付きで開く。第２引数の
true を省省略略するとアニメーションなしで開く。

ボタンを押すと対応するペインが
アニメーション付きで開く

dijit.byId("#{id:djAccordionContainer1}")
.selectChild(dijit.byId("#{id:djAccordionPane2}"), true);

2013/11/07


38

例例３：コントロールにないウィジェットの利利⽤用（１）

•  チャート（dojox.charting）

–  例例：スパイダー・チャート（dojox.charting.plot2d.Spider）

•  Dojo Toolkit の dojox.charting モジュールの tests フォルダにある
スパイダー・チャートのサンプルの１つを XPage に取り込んでみる
–  http://bit.ly/19Umecc

•  easing アニメーション
付きで表⽰示
•  凡例例で選択したものだけ
をフィルター表⽰示

–  他にもたくさんのチャートが⽤用意されています！

2013/11/07


39

例例３：コントロールにないウィジェットの利利⽤用（１）

// Spider チャートの生成（データは固定）
var chart = new dojox.charting.Chart("#{id:spiderChart}")
.setTheme(dojox.charting.themes.PlotKit.blue)
XPages のソース例例
.addPlot("default", {
（onClientLoad 時の
type: "Spider",
クライアントサイド
labelOffset: -10,
divisions: 7,
JavaScript）

axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon"
})
.addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" })
.addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" })
.addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green" })
.addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow" })
.addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" })
.addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" })
.render();
// 選択可能な凡例の作成
new dojox.charting.widget.SelectableLegend({
chart: chart,
horizontal: false
}, "#{id:legend}");

2013/11/07


40

例例３：コントロールにないウィジェットの利利⽤用（２）

•  ゲージ（dojox.widget.gauge）

–  例例：アナログ・ゲージ（dojox.widget.AnalogGauge）

•  Dojo のドキュメントにあげられているスピードメーターのサンプルを
XPages に取り込んでみる
–  http://bit.ly/17pnBRz
–  もちろんメーターの範囲や針の初期位置、ゲージのスタイルなどは
パラメータの中で⾃自由にカスタマイズ可能
メーターの針の部分は
ドラッグして動かす
ことが可能

–  Notes/Domino 9.0 の Dojo 1.8.1 では dojox.dgauge という新しい
ゲージコンポーネントもあります
•  http://bit.ly/HQRRsh
2013/11/07


41


<xp:panel id="speedo" dojoType="dojox.widget.AnalogGauge" style="margin:10px">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="width" value="450"></xp:dojoAttribute>
<xp:dojoAttribute name="height" value="300"></xp:dojoAttribute>
<xp:dojoAttribute name="cx" value="225"></xp:dojoAttribute>
（XSP部分）

<xp:dojoAttribute name="cy" value="175"></xp:dojoAttribute>
<xp:dojoAttribute name="radius" value="150"></xp:dojoAttribute>
<xp:dojoAttribute name="startAngle" value="-135"></xp:dojoAttribute>
<xp:dojoAttribute name="endAngle" value="135"></xp:dojoAttribute>
<xp:dojoAttribute name="useRangeStyles" value="0"></xp:dojoAttribute>
<xp:dojoAttribute name="hideValues" value="true"></xp:dojoAttribute>
<xp:dojoAttribute name="color" value="white"></xp:dojoAttribute>
<xp:dojoAttribute name=“majorTicks” value="{length:10, offset:105, interval:10, color:'gray'}"></xp:dojoAttribute>
<xp:dojoAttribute name="minorTicks“ value="{length:5, offset:105, interval:5, color:'gray'}"></xp:dojoAttribute>
</xp:this.dojoAttributes>
<xp:div dojoType="dojox.widget.gauge.Range">
<xp:dojoAttribute name="low" value="0"></xp:dojoAttribute>
<xp:dojoAttribute name="high" value="100"></xp:dojoAttribute>
<xp:dojoAttribute name="color" value="{'color': 'black'}"></xp:dojoAttribute>
</xp:div>
<xp:div dojoType="dojox.widget.gauge.Range">
<xp:dojoAttribute name="low" value="100"></xp:dojoAttribute>
<xp:dojoAttribute name="high" value="200"></xp:dojoAttribute>
<xp:dojoAttribute name="color" value="{'color': 'black'}"></xp:dojoAttribute>
</xp:div>
</xp:panel>
2013/11/07


42

例例３：コントロールにないウィジェットの利利⽤用（３）

•  描画コントロール（dojox.drawing）

–  例例：お絵かきツール（dojox.drawing.Drawing）

•  Dojo Toolkit の dojox.drawing モジュールの tests フォルダにある
スパイダー・チャートのサンプルの１つを XPage に取り込んでみる
–  http://bit.ly/1cessT9

お絵かきツールで描画
した内容を⽂文書に保存
（描画内容は JSON 形式
でフィールドに保存）

※ drawing のサンプルは、可能性を⽰示すための
実験的なサンプルです。
⼀一部動かない部分などあるかもしれません。

2013/11/07


44

サンプル NSF
•  ご紹介した活⽤用例例を実装したサンプル NSF は以下の URL
からダウンロードできます。（mydeveloperWorks）
–  http://ibm.co/HPw0lS
•  ダウンロードした ZIP の中の XPagesDay2013-B4-DojoSample.nsf に
ブラウザからアクセスするとサンプルを実際に試すことができます。

–  動作環境

•  Lotus Notes/Domino 8.5.3 + XPages Extension Library or Upgrade Pack
•  IBM Notes/Domino 9.0

2013/11/07


45

まとめ

•  jQuery と⽐比較しながら Dojo を学ぶことで、Dojo の理理解を
より深めることができます

–  特に API などは⾮非常によく似ているので参考になる場合が多いです

•  XPages で Dojo はいろいろなところで使われているので、
ちょっとした API を利利⽤用するだけで XPages をよりリッチに
することができます
–  dojo コア API、UI コントロールの API など

•  XPages は開発プラットフォームであり、基本的にはいろい
ろな JavaScript ライブラリを使うことが出来ます。今⽇日紹介
した jQuery や Dojo に限らず、いろいろな JavaScript ライ
ブラリを使ってみてください！
–  例例：Ext, Sencha touch など

2013/11/07


46

ご清聴ありがとうございました

2013/11/07


47

XPagesDay2013 【B-4】 Dojo 徹底解剖！～ XPages で Dojo を有効活用するには～

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to XPagesDay2013 【B-4】 Dojo 徹底解剖！～ XPages で Dojo を有効活用するには～

Similar to XPagesDay2013 【B-4】 Dojo 徹底解剖！～ XPages で Dojo を有効活用するには～ (20)