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

3,177
-1

Published on

XPagesDay 2013 B-4 セッション「Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~」で使用したスライドです。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,177
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 【B-4】Dojo 徹底解剖! 〜~ XPages で Dojo を有効活⽤用するには?  〜~   ⽇日本アイ・ビー・エム株式会社 東京ソフトウェア開発研究所 ⼩小野  充志 2013/11/07 © 2013 IBM Corporation 1
  2. 2. 特記事項   •  本資料料の記載内容は私個⼈人の⾒見見解であり、必ずしも所属する企業の⽴立立場、 戦略略、意⾒見見を代表するものではありません。 •  本資料料の記載内容は、できる限り正確を期すよう努めてはおりますが、 いかなる明⽰示または暗黙の保証も責任も負いかねます。 •  本資料料の情報は、使⽤用先の責任において使⽤用されるべきものであること を、あらかじめご了了承ください。 •  掲載情報は不不定期に変更更されることもあります。他のメディア等に無断 で転載する事はご遠慮ください。 •  当資料料をコピー等で複製することは、執筆者の承諾諾なしではできません。 •  また、当資料料に記載された製品名または会社名はそれぞれの各社の商標 または登録商標です。 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 © 2013 IBM Corporation 2
  3. 3. ⾃自⼰己紹介   •  名前:⼩小野  充志(おの  あつし) •  所属:⽇日本アイ・ビー・エム •  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 © 2013 IBM Corporation 3
  4. 4. アンケート   •  「はい」の⽅方は、Web ミーティング画⾯面左上にある「挙 ⼿手」アイコンをクリックしてください。 練習:まずは皆さん「挙⼿手」してみてください   質問1: jQuery を使ったことがありますか?   質問2: Dojo を使ったことがありますか?   2013/11/07 © 2013 IBM Corporation 4
  5. 5. 背景   •  技術者 xxx ⼈人に聞きました –  Q: 「Dojo をどう思いますか?」 –  A: なんとかしない と!   参考資料料が少ない。特に⽇日本語。   勉強してはみたものの難しい。   Dojo?  やっぱり jQuery でしょ!   2013/11/07 © 2013 IBM Corporation 5
  6. 6. 背景   •  イケヤマくんにも相談しました   Dojo のことはキライでも XPages のことはキライに ならないでください!   じぇじぇじぇ!   2013/11/07 jQuery? 倍返しだ!!   Dojo いつやるの? 今でしょ!!   © 2013 IBM Corporation 6
  7. 7. 本セッションの⽬目的   •  Dojo 単体として機能紹介するのではなく、jQuery と⽐比較 しながら徹底解剖 –  「難しい」といわれる原因を探る –  よく知られた jQuery と⽐比較することで理理解を助ける –  似た機能を⼀一緒に覚えられるので⼀一⽯石⼆二⿃鳥!   ※ ただし講師も jQuery 初⼼心者なのでご助⾔言等お願いいたします •  ⽐比較を通じて学んだ Dojo の機能を XPages で利利⽤用すること で、リッチなアプリケーションを開発するためのさらなる 選択肢を提供 –  Dojo、jQuery、そしてその他 JavaScript ライブラリ全般に興味を もっていただくきっかけとなれば幸いです   2013/11/07 © 2013 IBM Corporation 7
  8. 8. アジェンダ   •  jQuery との⽐比較による Dojo 徹底解剖 •  XPages でより Dojo を有効活⽤用するには? 2013/11/07 © 2013 IBM Corporation 8
  9. 9. jQuery との⽐比較による Dojo 徹底解剖   2013/11/07 © 2013 IBM Corporation 9
  10. 10. 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 © 2013 IBM Corporation 10
  11. 11. jQuery と Dojo の⽐比較   •  ポイントをピックアップして⽐比較 –  機能概要⽐比較 •  モジュール構成 •  HTMLへのロード⽅方法 •  基本コンセプト –  機能詳細⽐比較 •  コア API •  UI ウィジェット 2013/11/07 © 2013 IBM Corporation 11
  12. 12. jQuery と Dojo の⽐比較   •  ポイントをピックアップして⽐比較 –  機能概要⽐比較 •  モジュール構成 •  HTMLへのロード⽅方法 •  基本コンセプト –  機能詳細⽐比較 •  コア API •  UI ウィジェット 2013/11/07 © 2013 IBM Corporation 12
  13. 13. jQuery:モジュール構成   •  コアモジュールは js ファイル1つだけ –  圧縮版と⾮非圧縮版を提供 シンプル!   •  開発時には⾮非圧縮版が便便利利。 •  ユーザーがビルドして圧縮版を作るケースはあまりない(?) –  例例:バージョン 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 © 2013 IBM Corporation 13
  14. 14. 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 © 2013 IBM Corporation 14
  15. 15. 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 メソッドチェーン   © 2013 IBM Corporation 15
  16. 16. Dojo:モジュール構成   •  ダウンロードしたモジュールの中に3つのパッケージが同梱されている –  dojo:コア機能のパッケージ –  dijit:UI ウィジェットパッケージ –  dojox:拡張機能や実験段階機能をまとめたパッケージ なんか ややこしい?   •  コアモジュールの本体は dojo パッケージの dojo.js •  その他のモジュールは、必要になったときに JavaScript でロードする –  例例:dijit.Calendar モジュールを使いたい場合 •  dojo.require(“dijit.Calendar”) •  require([“dijit/Calendar”], function(Calendar){ … }) (1.7 以降降の AMD ⽅方式) –  ロードのたびにリクエストが⾶飛ぶので、本番環境などではビルドして1つの js にまとめるとパフォーマンスが向上 •  それぞれのパッケージやモジュールに css ファイルも⽤用意されている –  dojo:dojo/resources/dojo.css –  dijit:dijit/themes/claro/claro.css (claro テーマの場合)   2013/11/07 © 2013 IBM Corporation 16
  17. 17. (参考)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 © 2013 IBM Corporation さらに 複雑に... 17
  18. 18. 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 と ほとんど同じで⽐比較的 シンプル!   © 2013 IBM Corporation 18
  19. 19. Dojo:基本コンセプト(1)   •  とくにキャッチフレーズはない(?) •  コアモジュールは軽量量 難解にみえるが ⼤大規模開発では 有効!   –  しかし jQuery のコアモジュールにはない機能がいくつかある •  モジュール・フレームワーク –  モジュールの定義  (dojo.provide or define) –  モジュールのロード(dojo.require or require (AMD)) –  継承の仕組み (dojo.declare) これは •  国際化、アクセシビリティ  など ありがたい!   •  モジュールを開発することで拡張が可能 –  dojo プロジェクトの中で開発されている拡張機能は dojox などの モジュールにほとんど同梱されている •  jQuery でいうところのプラグインのようなリリースサイクルに関する ⾃自由度度がない –  別パッケージとしてモジュールを開発しているものもある •  例例:gridx プロジェクト  https://github.com/oria/gridx/ 2013/11/07 © 2013 IBM Corporation 19
  20. 20. Dojo:基本コンセプト(2)   •  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 © 2013 IBM Corporation 20
  21. 21. 機能概要⽐比較のまとめ   シンプルさは jQuery!   jQuery Dojo いい ところ   •  コンセプトがシンプル •  デザイナーにも優しい強⼒力力 なセレクタ機能 → デザイナーツールにも採⽤用 •  jQuery を使ったツールやア プリが沢⼭山ある   •  多機能 •  モジュールを継承した開発 のしやすさ(Java に近い) •  国際化、アクセシビリティ なども標準サポート   気になる ところ   •  ⼤大規模開発ではどう? •  いろいろなプラグインを利利 ⽤用する際のリスクは?   •  多機能すぎてコンセプトが 複雑 向いていそ •  まさにライブラリ うなケース   •  デザインを中⼼心とした開発 •  Web サイト開発、中⼩小規模 Web アプリ開発?   2013/11/07 © 2013 IBM Corporation •  ライブラリというよりはフ レームワーク •  アクセシビリティなどの要 件が必須の場合 •  ⼤大規模 Web アプリ開発? 21
  22. 22. jQuery と Dojo の⽐比較   •  ポイントをピックアップして⽐比較 –  機能概要⽐比較 •  モジュール構成 •  HTMLへのロード⽅方法 •  基本コンセプト –  機能詳細⽐比較 •  コア API •  UI ウィジェット •  モバイル 2013/11/07 © 2013 IBM Corporation 22
  23. 23. コア 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 © 2013 IBM Corporation 23
  24. 24. コア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 © 2013 IBM Corporation 24
  25. 25. コア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 © 2013 IBM Corporation 25
  26. 26. コア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 © 2013 IBM Corporation 26
  27. 27. 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 © 2013 IBM Corporation 27
  28. 28. ⽐比較のまとめ   •  コンセプトレベル –  jQuery はシンプルでわかりやすいが、Dojo は「クセ」がある •  機能が⾜足りないわけではなく、むしろ多機能すぎるため •  うまく「クセ」をふりはらって適材適所での利利⽤用を! •  API レベル –  コア API、UI ウィジェットともに、それほど⼤大きな差異異はない –  jQuery と⾮非常に似ているので、jQuery での同じ機能について⼀一緒に 調べることで Dojo の機能についても理理解できる場合がある •  例例:Deferred –  Dojo の Deferred で検索索しても⽇日本語情報はほとんど出てこないが、 jQuery の Deferred について検索索すると⽇日本語資料料が多く⾒見見つかる XPages のセッションの中ではこれまであまりとりあげられなかった コア API にも是⾮非注⽬目してみてください!   2013/11/07 © 2013 IBM Corporation 28
  29. 29. あれ、⽇日本語資料料の問題は?   •  今あるものをいくつかピックアップしておきます –  テクてく 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 © 2013 IBM Corporation 29
  30. 30. XPages でより Dojo を有効活⽤用するには?   2013/11/07 © 2013 IBM Corporation 30
  31. 31. 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 © 2013 IBM Corporation 31
  32. 32. 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 © 2013 IBM Corporation 32
  33. 33. XPages での Dojo 活⽤用例例   •  例例1:Dojo コア API の利利⽤用 –  セレクタ(dojo.query) •  [参考]: XPagesのRadio Button Groupから選択された値をクライアント Javascriptで取得する⽅方法 –  http://bit.ly/18iPXrq –  アニメーション(dojo.animateProperty) –  ドラッグ&ドロップ (dojo.dnd) •  例例2:コントロールの中で使われている Dojo ウィジェットに API を 使ってアクセス –  タブ・コンテナーのタブの選択 –  アコーディオン・コンテナーのペインを開く(アニメーション付) •  例例3:コントロールには使われていない Dojo ウィジェットを利利⽤用 –  チャート(dojox.charting) –  ゲージ(dojox.widget.gauge) –  描画ウィジェット(dojox.drawing)※ Experimental 2013/11/07 © 2013 IBM Corporation 33
  34. 34. 例例1:Dojo コア API の利利⽤用(1)   •  セレクタ(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 © 2013 IBM Corporation 34
  35. 35. 例例1:Dojo コア API の利利⽤用(2)   •  アニメーション(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(); © 2013 IBM Corporation 35
  36. 36. 例例1:Dojo コア API の利利⽤用(3)   •  ドラッグ&ドロップ(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); © 2013 IBM Corporation 36
  37. 37. 例例2:コントロールの中のウィジェットの API を利利⽤用(1)   •  タブ・コンテナーのタブの選択 –  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 © 2013 IBM Corporation 37
  38. 38. 例例2:コントロールの中のウィジェットの API を利利⽤用(2)   •  アコーディオン・コンテナーのペインを開く –  Extension Library の「Dojo Accordion Container」「Dojo Accordion Pane」を使って作成したアコーディオンのペインを、API を使って プログラムで開く •  <AccordionContainer>.selectChild(<AccordionPane>, true): 指定された AccordionPane をアニメーション付きで開く。第2引数の true を省省略略するとアニメーションなしで開く。 ボタンを押すと対応するペインが アニメーション付きで開く   dijit.byId("#{id:djAccordionContainer1}") .selectChild(dijit.byId("#{id:djAccordionPane2}"), true); 2013/11/07 © 2013 IBM Corporation 38
  39. 39. 例例3:コントロールにないウィジェットの利利⽤用(1)   •  チャート(dojox.charting) –  例例:スパイダー・チャート(dojox.charting.plot2d.Spider) •  Dojo Toolkit の dojox.charting モジュールの tests フォルダにある スパイダー・チャートのサンプルの1つを XPage に取り込んでみる –  http://bit.ly/19Umecc •  easing アニメーション 付きで表⽰示 •  凡例例で選択したものだけ をフィルター表⽰示   –  他にもたくさんのチャートが⽤用意されています!   2013/11/07 © 2013 IBM Corporation 39
  40. 40. 例例3:コントロールにないウィジェットの利利⽤用(1)   // 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 © 2013 IBM Corporation 40
  41. 41. 例例3:コントロールにないウィジェットの利利⽤用(2)   •  ゲージ(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 © 2013 IBM Corporation 41
  42. 42. 例例3:コントロールにないウィジェットの利利⽤用(2)   <xp:panel id="speedo" dojoType="dojox.widget.AnalogGauge" style="margin:10px"> <xp:this.dojoAttributes> <xp:dojoAttribute name="width" value="450"></xp:dojoAttribute> XPages のソース例例 <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:this.dojoAttributes> <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:this.dojoAttributes> </xp:div> <xp:div dojoType="dojox.widget.gauge.Range"> <xp:this.dojoAttributes> <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:this.dojoAttributes> </xp:div> </xp:panel> 2013/11/07 © 2013 IBM Corporation 42
  43. 43. 例例3:コントロールにないウィジェットの利利⽤用(2)   var gauge = dijit.byId('#{id:speedo}'); var fill = { 'type' : 'linear', 'x1' : 50, 'y1' : 50, 'x2' : 350, 'y2' : 350, XPages のソース例例 'colors' : [ (onClientLoad 時の { offset : 0, color : 'black'}, クライアントサイド { offset : 0.5, color : 'black'}, JavaScript)   { offset : 0.75, color : 'yellow'}, { offset : 1, color : 'red'} ] }; gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({ 'value' : 200, 'width' : 20, 'offset' : 150, 'color' : fill, 'noChange' : true, 'hideValues' : true })); gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({ 'value' : 80, 'width' : 10, 'offset' : 150, 'color' : 'blue', 'title' : 'Arc', 'hover' : 'Arc: 80' })); gauge.addIndicator(new dojox.widget.gauge.AnalogNeedleIndicator({ 'value' : 100, 'width' : 8, 'length' : 150, 'color' : 'red', 'title' : 'Needle', 'hover' : 'Needle: 100' })); 2013/11/07 © 2013 IBM Corporation 43
  44. 44. 例例3:コントロールにないウィジェットの利利⽤用(3)   •  描画コントロール(dojox.drawing) –  例例:お絵かきツール(dojox.drawing.Drawing) •  Dojo Toolkit の dojox.drawing モジュールの tests フォルダにある スパイダー・チャートのサンプルの1つを XPage に取り込んでみる –  http://bit.ly/1cessT9 お絵かきツールで描画 した内容を⽂文書に保存 (描画内容は JSON 形式 でフィールドに保存)   ※ drawing のサンプルは、可能性を⽰示すための 実験的なサンプルです。 ⼀一部動かない部分などあるかもしれません。   2013/11/07 © 2013 IBM Corporation 44
  45. 45. サンプル 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 © 2013 IBM Corporation 45
  46. 46. まとめ   •  jQuery と⽐比較しながら Dojo を学ぶことで、Dojo の理理解を より深めることができます –  特に API などは⾮非常によく似ているので参考になる場合が多いです •  XPages で Dojo はいろいろなところで使われているので、 ちょっとした API を利利⽤用するだけで XPages をよりリッチに することができます –  dojo コア API、UI コントロールの API など •  XPages は開発プラットフォームであり、基本的にはいろい ろな JavaScript ライブラリを使うことが出来ます。今⽇日紹介 した jQuery や Dojo に限らず、いろいろな JavaScript ライ ブラリを使ってみてください! –  例例:Ext, Sencha touch など 2013/11/07 © 2013 IBM Corporation 46
  47. 47. ご清聴ありがとうございました   2013/11/07 © 2013 IBM Corporation 47
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×