Dojo プログラミング IBM Japan Systems Engineering Co.,Ltd. 日本アイ・ビー・エム システムズ・エンジニアリング株式会社 Webインフラストラクチャー
by user
Comments
Transcript
Dojo プログラミング IBM Japan Systems Engineering Co.,Ltd. 日本アイ・ビー・エム システムズ・エンジニアリング株式会社 Webインフラストラクチャー
IBM Japan Systems Engineering Co.,Ltd. Dojo プログラミング 日本アイ・ビー・エム システムズ・エンジニアリング株式会社 Webインフラストラクチャー 高橋健太 ([email protected]) 水野雅裕 ([email protected]) © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Agenda 1. Dojo概要 2. Dojo利用方法 3. Dojoコーディング・サンプル 1. 基本 2. 画面関連 3. その他のクラス/sMash特有のクラス 4. Dojo Hint & Tips 参考文献/URL © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 1. Dojo概要 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoとは 概要 – JavaScriptのツールキットで、下記の機能を提供する – Dojo Foundationが提供しているオープンソースのツールキット • 機能 – Core • • – – Dojoの基本的な機能（GUI関連除く）を提供 イベント処理、ドラッグアンドドロップ、データアクセス、etc. ユーザインターフェースをリッチにするための機能を提供 高品質で自然なデフォルトテーマ (置換可能) 先進的な機能を提供 グラフ表示やComet, 特殊なGUIパーツ実装 ユーザー アプリケーション Internet Explorer Mozilla Firefox ユーザー アプリケーション ユーザー アプリケーション DOJO DOJO Internet Explorer Mozilla Firefox 例： ドラッグアンドドロップによる操作、タブによる画面切り替え 等 ブラウザ間の表示/動作の違いの吸収 • – ユーザー アプリケーション お客様のユーザー・インターフェースに関するご要望への対応 • – dojo 多くのコミュニティが拡張モジュールを提供 メリット – Core dojoX • • – dojox Dijit Dijit • • IBMはDojo Foundationのcontributor Internet ExploreやFirefox等の主要ブラウザーをサポート 画面パーツの国際化対応 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 : Dijit一覧(1/5) フォーム / dijit.form dijit.form.CheckBox dijit.form.ComboBox dijit.form.DateTextBox dijit.form.TextArea dijit.form.TextBox dijit.form.DateTextBox dijit.form.ValidataionTextBox dijit.form.InlineEditBox dijit.form.NumberSpiner dijit.form.NumberTextBox dijit.form.CurrencyTextBox dijit.form.FilteringSelect dijit.form.Slider © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 : Dijit一覧(2/5) コマンド制御 / dijit.form dijit.form.Button dijit.form.DropDownBusttion dijit.MenuItem dijit.Toolbar dijit.form.ComboButton © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 : Dijit一覧(3/5) ユーザー・アシスタンス dijit.Dialog dijit.ProgressBar dijit.TitlePane dijit.TooltipDialog dijit.Tooltip © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 : Dijit一覧(4/5) 編集・表示 dijit.ColorPalette dijit.Editor dijit.Tree © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 : Dijit一覧(5/5) レイアウト / dijit.layout dijit.layout.LayoutContainer dijit.layout.SplitContainer dijit.layout.ContentPane dijit.layout.AccordionContainer dijit.layout.StackContainer dijit.layout.TabContainer © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoによるマルチ・ブラウザー対応 ブラウザー間で挙動・実装方法が異なる – イベント・ハンドリングやDOM操作など、 異なるブラウザーで、同様に動作する アプリケーションを実装するのは困難 （工数がかかる） Dojoがブラウザー間の差異を吸収 – マルチ・ブラウザー対応の アプリケーション開発が容易に ユーザー アプリケーション ユーザー アプリケーション Internet Explorer Mozilla Firefox ユーザー アプリケーション ユーザー アプリケーション DOJO DOJO Internet Explorer Mozilla Firefox – 但し、Dojoがサポートするブラウザーの使用が前提 • Cf. http://dojotoolkit.org/support/faq/what-browsers-does-dojo-support • http://docs.dojocampus.org/releasenotes/1.4#browser-support – 例 ： Dojo 1.3のサポート対象 > IE6, IE7, IE8 > Firefox v1.5-v3.0 （DijitのみFirefox 2以上でサポート） > Safari v3.1 > Opera v9.6 (Dojo coreのみ) > Konqueror v3.5以上 (Dojo coreのみ) • これら以外のブラウザーで実行する場合は十分なテストが必要 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojo開発環境 ページエディターの例 テキストエディター – 通常のエディターを用い、表示を見ながら調整する eclipse – JavaScript Editorを使うことで、色分けやコードアシストを利用可能 Rational Application Developer 7.5 – dojo用のコードアシストが利用可能 ページエディター (WebSphere sMashのAppBuilder) – GUI操作によるパーツの配置が可能 ドラッグアンドドロップ © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 2. Dojo利用方法 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoの入手/配置 （sMashが提供するDojo） sMashでは、ivy.xmlにdojoモジュールの依存性を追加するのみで利用可能 – DojoのWebサイトからダウンロードしてくる必要はない この場合、アプリケーション内に直接展開されない – publicディレクトリ直下に置かれたのと同等の扱いとなる © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoの入手/配置 （Dojoを独自に入手） 手順 独自のDojoの利用環境を整える場合には、下記手順を実行 – • sMashが提供するモジュールでなく独自にDojo環境を作成する場合 – 最新のDojoが使用したい – Dojoのカスタムビルドを行いたい 1. 下記URLからDojoをダウンロード • http://download.dojotoolkit.org/release-1.2.3/dojo-release-1.2.3.zip – sMashでは、1.1と1.2をサポートしているため、本資料は1.2ベースで解説する – 最新版を使う場合は1.3をダウンロード – 他の形式の最新版や過去のバージョンは下記のサイトから入手 > http://download.dojotoolkit.org/ 2. zipファイルを解凍し、任意のディレクトリに配置する • 当資料では、C:¥Dojo_sampleに配置する 注：sMash提供でないDojoを使用した場合、その部分 はIBMのサポート対象外となるので注意 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. dojo.jsの読み込み HTMLファイルの中で、/dojo/dojo.jsを読み込む – ここでは、 C:¥Dojo_sample¥hello1.htmlを作成し、以下のように記述する – 意味は後述 hello1.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Hello Dojo</title> <script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.addOnLoad (function() { var helloObj = dojo.byId('hello1'); dojo.connect(helloObj, 'onclick', function(){alert('Hello, Dojo!')}); }); </script> </head> <body> <input type="button" id="hello1" value="hello1"> </body> </html> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. dojo.jsの読み込み ブラウザーで読み込み、実行テスト – 任意のブラウザーを開き、hello1.htmlをドラッグアンドドロップ – hello1ボタンをクリック – 以下のように表示されれば、dojoの読み込みは成功 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojo Coreの使用宣言 dojo.jsの指定 <script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad: true"></script> – Dojoの最もベースとなるモジュール • 他のDojoモジュールのロードが可能に • src属性: dojo.jsモジュールの配置されたディレクトリを指定 • djConfig: dojoの設定内容を指定。 – parseOnLoad : Boolean > デフォルト : false > ドキュメント読込み後、dojoType属性が指定された要素のパースを実施 – isDebug : Boolean > デフォルト : false > Firebugのコンソールに対するデバッグ出力 – その他設定項目については下記参照 > http://api.dojotoolkit.org/jsdoc/1.3.2/djConfig © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dijitの使用 (テーマの適用) Dijit（画面パーツ）を利用するには、Dojoのテーマを読み込む必要がある テーマ – 画面パーツの見た目（色使いやアイコンなど）を規定しているCSSファイル – tundra, soria, nihiloの3種類が用意されている 適用方法 – <style>タグでCSSのインポート <style type="text/css"> @import "/dijit/themes/tundra/tundra.css"; </style> – <body>要素のclass属性にテーマ名を指定 <body class="tundra"> … </body> nihilo soria tundra © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoデモの実行 Dojoの機能がフルに使われた デモが公式に用意されている 手順 1. 下記URLから、デモをダウンロード • http://download.dojotoolkit.org/release-1.2.3/dojo-release-1.2.3-demos.zip 2. 作成されたdemosディレクトリを、任意のディレクトリに配置 • • • 当資料では、C:¥Dojo_sampleに配置する PHPサーバがあれば、PHPサーバーに配置する – /demos/demos.phpにアクセスすると、デモ用のメニューが表示される > ただし、リンク先に誤りがあるので、demo.phpの146行目を以下に修正する print "¥n¥t<li><a href='".$ranked['link']."demo.html'>"; ファイルのまま実行する場合は、demos配下のディレクトリ内にある、demo.htmlをブラ ウザーにドラッグアンドドロップする © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 デモのスクリーンショット デモのメニュー画面 – 画像ビューワー – 画像処理 – コメットの実装 – メーラー – 動画プレイヤー – 複数ファイル対応 アップローダー – 国際化対応 – 等々… © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 デモのスクリーンショット 画像ビューワー © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 デモのスクリーンショット メーラー © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 3. Dojoコーディング・サンプル - 基本 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 注意 以下の例では、サンプル・コードを解説するので、 付属のサンプル・アプリケーションのコードを確認しながらお読みください。 Firefoxを利用する際は、下記の設定を行ってください。 – アドレス・バーに"about:config"と入力する – フィルタ欄に"fileuri"と入力する – security.fileuri.strict_origin_policyの値をfalseに切り替える © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 基本となるクラス Dojo _baseに含まれるAPIはdojo.jsを読み込んだ時点で使用可能 – http://api.dojotoolkit.org/jsdoc/1.3.2/dojo#Functions – 例: • • • • dojo.addOnLoad() dojo.byId() dojo.query() dojo.connect() : ページ読込時に行う処理を指定 : DOM要素の取得 : DOM要素の取得 : イベント・ハンドラーの設定 hello2.html document body input input id=hello1 id=hello2 value=Hello1 value=Hello2 type=button type=button hello2.js dojo.addOnLoad ( function() { var helloObj = dojo.byId('hello1'); ページが読み込まれたら、以下を実行 helloObj変数に、 hello1というidを持つオブジェクトを代入 helloObjのonclickイベントのハンドラーに、 alert('Hello, Dojo! (1)')を設定 dojo.query('#hello2').connect('onclick', function() {alert('Hello, Dojo! (2)')}); hello2というidを持つオブジェクトの } onclickイベントのハンドラーに、alert('Hello, Dojo! (2)')を設定 ); dojo.connect(helloObj, 'onclick', function(){alert('Hello, Dojo! (1)')}); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. クラスの読み込み 基本となるクラス以外を利用する場合は、dojo.require()を利用する titlepane1.html : 10-12行目 <script type="text/javascript"> dojo.require("dijit.TitlePane"); </script> コンストラクタ名と定義されているjsファイルが異なる場合があるので注意 – 利用する場合は、API Referenceを確認する © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoの実行方法 dojoを実行するには、大きく分けて2種類の方法がある – dojoType属性による指定 • タグに対してdojoType属性でdojoのクラスを指定し、 その他の属性値として、dojoのクラスのプロパティー値を指定 titlepane1.html : 16行目 <div dojoType="dijit.TitlePane" title="My TitlePane" open="true" duration=600> – JavaScript内でのインスタンス化 • JavaScript内で、Dojoのクラスをインスタンス化し、 その際にプロパティー値を指定 titlepane2.html : 10, 14-16行目 <script type="text/javascript" src="./js/titlepane2.js"></script> <div id="mytitlepane"> Click Title! </div> titlepane2.js (抜粋) dojo.require("dijit.TitlePane"); dojo.addOnLoad(function() { var tp = new dijit.TitlePane( { duration :600, title :'My TitlePane', open :'true' }, dojo.byId("mytitlepane")); }); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ループ処理 JavaScriptには、配列走査を行うforeach文が存在しない – for in構文を利用することで、同様のことができる可能性があるが、 ブラウザーによって動作の違いが大きい Dojoのdojo.forEachを利用することで、クロスブラウザー対応した配列走査が容易になる – 走査を中断することはできないので、その場合は、dojo.some()やdojo.every()を利用する dojo.forEach(Array|String arr, Function|String callback, {Object} thisObject) – arr : 走査対象の配列 – callback : コールバック関数（実行時に呼ばれる関数） • コールバック関数は3つの引数を持つ – callback(item, index, array) > item : 値 index : 番号 array : 走査対象の配列自身 – thisObject : コールバック関数のスコープ foreach.html : 7-12行目 <script type="text/javascript"> var myarr = ['apple', 'banana', 'cherry'] dojo.forEach(myarr, function(value, index) { alert(index + "番目の要素は" + value + "です。"); }); </script> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. HTTPリクエストの送信 Webサービスの呼び出しや、Webアプリケーションとのやり取りをする際に使用する 各HTTPメソッドに対応するdojo.xhrGet, dojo.xhrPost, dojo.xhrPut, dojo.xhrDeleteと、汎用のdojo.xhrがある 引数に指定するプロパティー値の例 – url: リクエスト先 – content: サーバーに送信するパラメーター – load: HTTPレスポンスが成功を返した場合に呼ばれる関数を指定する • 関数の第1引数に、HTTPのレスポンスが入る – error: リクエストに失敗した場合やサーバーエラーの場合に呼ばれる関数を指定する • load同様、関数の第1引数に、HTTPのレスポンスが入る xhr.html : 8-31行目 dojo.addOnLoad (function() { dojo.connect(dojo.byId('myget'), 'onclick', function(){ dojo.xhrGet({ url:"hello.html", load: function(data,ioargs){ console.log(data); }, error: function(error,ioargs) { console.warn(error); } }); }); dojo.connect(dojo.byId('mypost'), 'onclick', function(){ dojo.xhr("POST", { url:"hello.html", load: function(data,ioargs){ console.log(data); }, error: function(error,ioargs) { console.warn(error); } }); }); }); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ドラッグアンドドロップ dojo.dnd.Container – dndパッケージの中で最も基本的なクラス – 処理を実装するための基本的なAPIを提供する dnd.html • getItem(id), setItem(id, obj), delItem(id), clearItems(), forInItems(f, o) など • autoSync="true"だと、onMouseDownイベントの際に、中の要素が同期される（要素の追加・削除時に便利になる） dojo.dnd.Selector – Containerの拡張クラス（Containerの関数やオブジェクトなどは全て使える） – Ctrl+クリックで複数選択、Shift+クリックで範囲選択などが実装されている dojo.dnd.Source – Selecterの拡張クラス（Container, Selectorの関数やオブジェクトなどは全て使える） – 基本的なドラッグアンドドロップが実装されている（ドラッグ元 兼 ドロップ先） • • • • • isSource="false"を指定することで、ドラッグが不可能となる（ドロップ先としてだけ動作する） タグ内のdojoDndItemクラスを指定したタグがドラッグ可能になる acceptプロパティーで指定したタグのみを受け入れる copyOnly="true"を指定することで、ドラッグした要素がコピーされる selfAccept="false"を指定することで、自分自身の要素をドロップできなくできる dojo.dnd.Target – SourceのisSource="false"で固定したもの（ドロップ先としてだけ動作する） dojo.dnd.AutoSource – SourceのautoSync="true"で固定したもの © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ドラッグアンドドロップ 【参考】 – Dojo campusによる詳細な解説 • http://docs.dojocampus.org/dojo/dnd – 公式サイトのサンプル • http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/tests/dnd/test_dnd.html – Dojo Drag and Drop, Part 1: dojo.dnd (Revin Guillen) • http://www.sitepen.com/blog/2008/06/10/dojo-drag-and-drop-1/ – デモ > http://o.sitepen.com/labs/code/dnd/intro/dnd/1-dnd.html > http://o.sitepen.com/labs/code/dnd/intro/dnd/1-dnd.markup.html > http://o.sitepen.com/labs/code/dnd/intro/dnd/2-dnd.html > http://o.sitepen.com/labs/code/dnd/intro/dnd/2-dnd.markup.html > http://o.sitepen.com/labs/code/dnd/intro/dnd/3-dnd.html © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ファイルの読み書き dojo.data.ItemFileReadStore – ファイル内のデータの読み込みに利用する（読み込みだけで、追加/変更などはできない） – 読み込むファイルのフォーマットは以下の通り • { label : 並べ替えに用いられるオプション値 • "label": "name", identifier : 一意な値を持つキー • "identifier": "id", items : データの実体 • "items:" [ • { "id":"1", "name": "tanaka", "address":"chiba"}, • { "id":"2", "name": "tanaka", "address":"tokyo", "spouse": {"_reference":"3"}, "children": [ { "_reference":"1"} ] }, • { "id":"3", "name": "suzuki", "address":"tokyo", "birthdate": { "_type": "Date", "_value": "1983-08-20"} }, • ... • ] • } dojo.data.ItemFileWriteStore – ItemFileReadStoreの拡張クラスで、書き込みを行うためのAPIが用意されている – newItem(), deleteItem(), save()など これらのストアを利用して、データを読み込み、 DataGridやTreeと結びつけることでデータを表示できる datagrid.html : 62行目 <span dojoType="dojo.data.ItemFileWriteStore" jsId="store1" url="json/datagrid.json"></span> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 3. Dojoコーディング・サンプル - 画面関連 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 画面の全体レイアウト layout.html 大きなレイアウトの枠用のクラスとして、以下の2つがある – dijit.layout.LayoutContainer • 全く画面に表示を持たないコンテナー – dijit.layout.BorderContainer • 境界線を持つコンテナー • CSSによって、デフォルトでマージンが設定されている 上記レイアウトの本文を入れるクラス – dijit.layout.ContentPane • 後述のタブなどのコンテンツもこのクラスを用いる 上下左右を指定するためのプロパティー値が異なる – dijit.layout.BorderContainerでは、regionプロパティー • "top", "bottom", "leading", "trailing", "left", "right" – dijit.layout.LayoutContainerでは、layoutAlignプロパティー • "left", "right", "bottom", "top", "client" © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 画面の全体レイアウト デザイン上の注意点 – 上下左右指定の優先度 • dijit.layout.BorderContainerでは、designプロパティー値により、上下と左右のどちらを優先するか を選ぶ。左だけ優先、などは選択できない。 • dijit.layout.LayoutContainerでは、プロパティー値による優先は決めることができないが、コンテンツ を記載する順序によって、自由に配置をカスタムできる。 – dijit.layout.BorderContainerと同等の境界線を描くには、下記のように記述する • <style type="text/css"> （要素） { border: 1px solid #ccc; margin-top: 10px; } （要素） div { padding: 5px; } </style> • dijit.layout.StackContainerなどでは、境界線が描かれないため、統一感を出すためには上記の指 定を行う必要がある – 印刷 • 印刷時にレイアウトが崩れる可能性があるため、 画面の印刷要件がある場合には注意する change_contents.html 手動で描いた境界線 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. コンテンツ切り替えの実装 (タブなど) Webページ内のコンテンツを大きく切り替えるようなデザインを行う場合に使える – dijit.layout.AccordionContainer • 内部コンテンツ : dijit.layout.AccordionPane – dijit.layout.TabController – dijit.layout.TabContainer • 内部コンテンツ : dijit.layout.ContentPane – dijit.layout.StackController – dijit.layout.StackContainer • 内部コンテンツ : dijit.layout.ContentPane change_contents.html コントローラ系のクラスは、コンテナーと紐付け、コン テナーの操作などを行うことが可能になる – コントローラがなくても、コンテナー自体は利用可能 – dojo.require()の対象が1.2と1.3で変更になってい るので注意 • 1.3系では、Controllerクラスは独自のファイル 印刷時に表示が崩れる可能性があるため、注意する – タブが2列以上になる場合は避ける（v1.4の制約） アコーディオンは1つだけしか開けない – 複数のペインを開いたままにしたい場合は、 TitlePaneなどを利用する © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 折り畳めるパネル titlepane1.html dijit.TitlePaneでは、AccordionPaneとは異なり、 開いた状態や閉じた状態を維持できる – セクションを実装する際に利用できる 特有なプロパティー値 – open : 開閉の初期状態 – duration : 開閉にかかる時間（ミリ秒） – title : Paneに表示する文字 titlepane1.html : 16-28行目 <div dojoType="dijit.TitlePane" title="My TitlePane" open="true" duration=600> Click Title! </div> <div dojoType="dijit.TitlePane" title="My TitlePane1" open="true" duration=600> Click Title1! <div dojoType="dijit.TitlePane" title="My TitlePane2" open="true" duration=600> Click Title2! <div dojoType="dijit.TitlePane" title="My TitlePane3" open="true" duration=600> Click Title3! <div dojoType="dijit.TitlePane" title="My TitlePane4" open="true" duration=600> Click Title4! <div dojoType="dijit.TitlePane" title="My TitlePane5" open="true" duration=600> Click Title5 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. フェードイン・フェードアウト fade.html dojo.fadeIn / dojo.fadeOut – dojo._Animationの拡張 • play(), status(), pause(), stop()などが利用可能 – 任意のオブジェクトをフェードイン・フェードアウトできる fade.html : 12-27行目 function mysquareFade() { var fadeArgs = { node: "mysquare", IDがmysquareのノード duration: 2000 アニメーションの時間（2000ミリ秒 = 2秒） }; var Out = dojo.fadeOut(fadeArgs) var In = dojo.fadeIn(fadeArgs) function mysquareFadeOut() { Out.play(); } function mysquareFadeIn() { In.play(); } function mysquareFadeInPause() { In.pause(); } function mysquareFadeInStop() { In.stop(); } dojo.connect(dijit.byId("inButton"), "onClick", mysquareFadeIn); dojo.connect(dijit.byId("outButton"), "onClick", mysquareFadeOut); dojo.connect(dijit.byId("pauseButton"), "onClick", mysquareFadeInPause); dojo.connect(dijit.byId("stopButton"), "onClick", mysquareFadeInStop); } © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 進行状況の表示 dijit.ProgressBar – update()メソッドを用いて、progressプロパティーの値を上書きすることで、 進行状況をアップデートすることができる – その他の特有なプロパティー • indeterminate • places • maximum : trueにすると、パーセント表記が消え、単なる進行中のアニメーションになる : 小数点以下何桁まで表示するか : 最大値 ● 通常の表示 progress.html : 13-19行目, 23-24行目 function exec() { var time = 0; ● indeterminate=trueの場合の表示 for (var i = jsProgress.progress; i <= jsProgress.maximum; i++) { setTimeout("jsProgress.update({ progress: "+i+" })", (time+1)*); time++; } } ※JavaScriptにはwait処理がないため、setTimeout()により、 ループ回数に応じて、progressを書き換えるタイミングをずらしている <div dojoType="dijit.ProgressBar" style="width:300px" jsId="jsProgress" indeterminate="false" places="1" progress="20" maximum="100"></div> <button dojoType="dijit.form.Button" onclick="exec();">実行</button><br/> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ローディング画像 テーマ内にローディング画像がある – /dijit/themes/tundra/images/loading.gif – /dojox/image/resources/images/loading.gif これらを各種の方法で表示させることで、ロード中であることを示すことが可能 – ページ読み込み中に、ダイアログ内に表示する – コンテンツの更新時に、更新対象のコンテンツ内に表示する – ボタンを押した際に、ボタンの横に表示する /dijit/themes/tundra/images/loading.gif /dojox/image/resources/images/loading.gif © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ツリー構造の表示 tree.html ツリー構造を表示するには、以下のような構造になる – データ・ストア ⇒ ツリー – データ・ストア ⇒ モデル ⇒ ツリー • どちらでも表示は可能だが、モデルを利用するとModel APIを利用して、 ツリー表示用のデータ編集が容易になる 各コンポーネントの説明 – データ・ストア • dojo.data.ItemFileReadStore • dojo.data.ItemFileWriteStore – モデル • ※モデルはdojo 1.3では単独ファイルになったので、dojo.requireに注意 • dijit.tree.ForestStoreModel – 最上位階層 (Root) が複数あるツリー • dijit.tree.TreeStoreModel – 最上位階層 (Root) が１つだけのツリー – ツリー • dijit.Tree – モデル、もしくはデータ・ストアと関連付けて利用する – 単なる表示を担当するため、データの追加や削除を行う場合は、 モデル、もしくはデータ・ストアを操作する必要がある © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. menu.html 右クリックメニューの作成 利用できるクラスは以下の通り – dijit.Menu : メニューそのものを提供 – dijit.MenuItem : メニュー内のアイテム – dijit.MenuSeparator : メニュー内の区切り線 – dijit.PopupMenuItem : メニュー内の展開できるアイテム – dijit.CheckedMenuItem : メニュー内のチェックボックス dijit.Menu – 利用する場合は、style="display: none;"を指定し、画面に表示されないようにする – contextMenuForWindowにtrueを指定すると、画面全体の右クリックメニューとなる dijit.MenuItem – アイコンが複数用意されている tundra.css内 (1.3では1400行目付近) • テーマのCSS内でクラスが定義されているので、適宜利用する • iconclassで指定する – 切り取り : dijitEditorIcon dijitEditorIconCut – コピー : dijitEditorIcon dijitEditorIconCopy – 貼り付け : dijitEditorIcon dijitEditorIconPaste – 保存 : dijitEditorIcon dijitEditorIconSave – disabledにtrueを指定すると、選択できなくなる dijit.CheckedMenuItem – checkedがtrueだとチェックされた状態、falseだとチェックされていない状態 メニューアイテムがクリックされた後の処理は、それぞれ実装する必要がある © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 色々なフォームの作成 - クラス一覧 ●フォーム一覧 ： 非常に様々な機能を持つフォームが利用できる ボタン dojox テキストエリア – dijit.form.Button – dijit.form.SimpleTextarea – dijit.form.DropDownButton – dijit.form.Textarea – dijit.form.ComboButton – dijit.form.ToggleButton 入力フォーム – dijit.form.CurrencyTextBox – dijit.form.DateTextBox 選択 – dijit.form.ComboBox – dijit.form.MultiSelect – dijit.form.FilteringSelect その他 – dijit.form.NumberSpinner – dijit.form.Form – dijit.form.NumberTextBox – dijit.form.Slider – dijit.form.TextBox – dijit.form.CheckBox – dijit.form.TimeTextBox – dijit.form.RadioButton – dijit.form.ValidationTextBox – dojox.form.BusyButton – dojox.form.CheckedMultiSelect – dojox.form.DateTextBox – dojox.form.DropDownSelect – dojox.form.DropDownStack – dojox.form.FileInput – dojox.form.FilePickerTextBox – dojox.form.FileUploader – dojox.form.manager – dojox.form.Manager (widget) – dojox.form.MultiComboBox – dojox.form.PasswordValidator – dojox.form.RadioStack – dojox.form.RangeSlider – dojox.form.Rating – dojox.form.TimeSpinner © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 色々なフォームの作成 - 一般 dijit.form.FilteringSelect 以下、説明が必要なもののみ解説する – dijit.form.ToggleButton • 押すと値が切り替わるボタン（チェックボックスのボタン版） – dijit.form.ValidationTextBox • regExpプロパティに正規表現を与えることで、それ以外の表現が含まれる場合に、ツールチッ プを表示する • ツールチップには、invalidMessageプロパティの値が入る – 未指定の場合は、"入力した値は無効です。"と表示される – 他のValidationを行うフォームも、このプロパティを設定することで、メッセージを変えられる – dijit.form.Form • HTMLの<form>と同等の要素 • validate()メソッドにより、自身に含まれる各フォームの事前チェックを行うことができる – dijit.form.FilteringSelect • 関連付けたストア内の文字列を候補として、ドロップダウンで表示する入力フォーム – ストアの元となるURLのデータを更新することで、 最新の検索候補を表示する場合などに利用できる © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 色々なフォームの作成 - スライダー dijit.form.Slider – 大きく分けて、3つのクラスが存在する • スライダーそのもの – 縦 : dijit.form.VerticalSlider – 横 : dijit.form.HolizontalSlider • スライダーのルール（１目盛りの範囲など） – 縦 : dijit.form.VerticalRule – 横 : dijit.form.HorizontalRule • スライダーのラベル – 縦 : dijit.form.HorizontalRuleLabels – 横 : dijit.form.VerticalRuleLabels – Dojo 1.2とDojo 1.3では、dojo.requireする対象が異なるので注意 • 1.2ではdijit.form.Slider • 1.3では、それぞれ個別のファイル © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 色々なフォームの作成 - dojox dojox.form.BusyButton – 処理待ちの表示が実装されているボタン dojox.form.PasswordValidator – よくあるパスワードの処理を行う入力フォーム • old : 以前のパスワード • new : 新しいパスワード • verify : 新しいパスワードの確認 dojox.form.FileUploader – 複数ファイルのアップロードの処理を行う – デモ • http://mwilcox.dojotoolkit.org/dtk/demos/uploader/demo.html • http://mwilcox.dojotoolkit.org/dtk/dojox/form/tests/test_FileUploader.html © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 複数ファイル・アップロード dojox.form.FileUploaderの注意点 – 複数ファイル・アップロードは、Dojo 1.3以降で利用可能 (Dojo 1.2以前ではサポートされない) • Dojo 1.2以前から移行できない場合は、以下のファイルをコピーして利用することも可能 – dojox/form/FileUploader.js – dojox/form/resources/uploader.swf – dojox/form/resources/FileUploader.css – dojox/embed/flashVars.js – dojox/embed/Flash.js – dojox/form/resources/UploadFile.php (optionally) – dojox/form/resources/cLOG.php (optionally) > ただし、これらのファイルを使うHTML内では、dojo.destroy()を使わず、dojo._destroyElement()を 使うようにコードを変更する必要がある • Dojo 1.3.2の利用を強く推奨 (1.3.0からいくつかのバグを修正している) – http://bugs.dojotoolkit.org/ticket/9615 – http://bugs.dojotoolkit.org/ticket/9646 – 数百ファイル以上を同時にアップロードする場合は、Dojo 1.4以降のコードを利用する – その他、様々な注意点があるため、利用する場合は下記URL内の文章を参照 • http://docs.dojocampus.org/dojox/form/FileUploader – 利用方法は、前ページのURLのデモを参照のこと © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 吹き出しの作成 注釈やヒントを表示する、小さなテキスト表示域 tooltip.html dijit.Tooltip – 以下の対象がTooltipのconnectIdに 指定したものである場合に、吹き出しが表示される • マウスカーソルが当たっている対象 • キーボードでの操作対象になっている対象 ●position="above"の場合 – 特有なプロパティー値 • connectId : 吹き出しを表示する対象のID • label : 吹き出しに表示する内容 • position : 吹き出しを表示する位置 – before, after, above, below – 表示位置にはスペースに余裕があるかどうか注意すること • showDelay : 吹き出しを表示させるまでの時間（ミリ秒） – デフォルトは400 (0.4秒) スペースが足りない場合、 誤った場所を指してしまうため、注意 注意 – （Firefox 2, IE8では現在のところ表示されない） – 以下のような場合は、次ページのTooltipDialogを利用する • 吹き出し内の文字を選択（コピーなど）する場合 • 吹き出し内にフォームなどを入れたい場合 • その他、吹き出し内に対して操作の可能性がある場合 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ダイアログの作成 dialog.html 通常のダイアログと、吹き出しのダイアログがある dijit.Dialog – デフォルトでは中央に表示され、その他の領域はグ レーアウトされる ●通常のダイアログ (Dialog) • その他領域の色はCSSの#dialogColor_underlayのbackground- colorを上書きすることで変更可能 – 例 : <style type="text/css"> #dialogColor_underlay { background-color:green; } </style> – 右上の×ボタンをクリックすることで閉じることが可能 • ダイアログ外をクリックしてもデフォルトでは閉じない （明示的にhide()メソッドを実行しなければならない） dijit.TooltipDialog ●吹き出しのダイアログ (TooltipDialog) – 通常はDropDownButtonと合わせて利用する – 吹き出しの外をクリックすることで閉じることが可能 • 閉じても入力中の文字列は残る（非表示になるだけ） – フォームのリセットが必要な場合は別途用意が必要 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 2次元グラフの表示 chart.html 様々なグラフを描くことができる グラフ内のパーツに対して、アクションを定義することができる – dojox.charting.Chart2D • type属性に、以下のいずれかを指定する – MarkersOnly : 点グラフ – Lines : 線グラフ (線のみ) – Markers : 線グラフ (線+点) – Areas : 線グラフ (線の内部を塗りつぶし) – Stacked : 積み上げ線グラフ (線のみ) – StackedLines : 積み上げ線グラフ (線のみ) – StackedAreas : 積み上げ線グラフ (線の内部を塗りつぶし) – Bars : 棒グラフ (横) – Columns : 棒グラフ (縦) – ClusteredBars : 複数の棒グラフ (横) – ClusteredColumns : 複数の棒グラフ (縦) – StackedBars : 積み上げ棒グラフ (横) – StackedColumns : 積み上げ棒グラフ (縦) – Pie : 円グラフ – Scatter : 散布図 – Grid : グラフではなく、グリッド線をグラフに追加するためのタイプ • 線・点の有無などはプロパティー値によって切り替えられる – lines: true, areas: true, markers: false など © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 2次元グラフの表示 基本的な使い方 インスタンス化 1. • • コンストラクタとして、文字列を指定すると、そのIDを持つ要素が取得される var chart = new dojox.charting.Chart2D("mychart"); 軸の追加（オプション） 2. • • • 第1引数は任意の文字列（名前）、第2引数にオプション値を指定する – 縦軸の場合は、vertical: trueを指定する chart.addAxis("x") chart.addAxis("y", {vertical: true}) プロットを追加（オプション） 3. • • • • • 第1引数は任意の文字列（名前）、第2引数にtypeなどを指定する 複数の表を重ねたり、グリッド線を追加する場合は、ここで2つ以上指定する chart.addPlot("hoge1", {type: "Columns", lines: true, markers: true, tension:2}) chart.addPlot("hoge2", {type: "Lines", lines: true, markers: true, tension:2}) chart.addPlot("grid", {type: "Grid"}); データを追加 4. • • • • 第1引数は任意の文字列（名前）、第2引数にデータ、第3引数にオプション値を指定する 複数の表を重ねた場合に、特定の表だけに値を与える場合は、plotプロパティーに名前を指定する chart.addSeries("Series A", [2, 1, 0.5, -1, -2]); chart.addSeries("Series B", [-2, -1, -0.5, 1, 2], {plot: "hoge2", fill: "lightblue"}); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 2次元グラフの表示 その他Tips – 凡例を付加する • dojox.charting.widget.Legendを利用することで、凡例を容易に添付できる – legendプロパティーに値が与えられている場合は、その値が凡例で使われる – それ以外の場合は、nameプロパティーの値が使われる (円グラフの場合はtextプロパティー) • 縦に並べたい場合は、テーマを変更する – アクションの付加 • 付加できるアクションは、以下の3つ – ツールチップ : マウスが乗った場合に、ツールチップを表示する > dojox.charting.action2d.Tooltip – ハイライト : マウスが乗った場合に、色を明るくする > dojox.charting.action2d.Highlight – その他 > dojox.charting.action2d.MoveSlice > dojox.charting.action2d.Magnify > dojox.charting.action2d.Shake : 円グラフの要素を引き出して表示 – 影をつける • addPlot()で指定できるオプション値に、shadowsを追加する – chart7.addPlot("default", {type: "Markers", shadows: {dx: 2, dy: 2, dw: 2}}); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 3. Dojoコーディング・サンプル - その他/sMash © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. データ・グリッドの利用 ●カラムの順序変更 データを表形式で表示するクラス – dojox.grid.DataGrid (1.2～) – dojox.grid.EnhancedGrid (1.4～) – dojox.grid.TreeGrid (1.4～) – dojox.grid.Grid (1.1-1.2) (非推奨) ●データの昇順・降順ソート 可能な操作 – データの昇順・降順ソート – データの検索、検索結果表示 – 項目の選択、複数選択 – セルの結合されたテーブル表示 – カラムの順序変更(ドラッグアンドドロップ) ●データの検索・検索結果表示 – 元データにないカラムの追加 – データの直接編集、削除、追加 • ただしDB処理はコーディングが必要 • 後述のzero.grid.DataGridでは、 DB処理まで実装されている © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. データ・グリッドの利用 dojox.grid.DataGrid – データ・ストアとグリッドを関連付け、表示させる datagrid.html : 62, 64-66行目 <span dojoType="dojo.data.ItemFileWriteStore" jsId="store1" url="json/datagrid.json"></span> <table dojoType="dojox.grid.DataGrid" jsId="dgrid1" store="store1" query="{ id: '*' }" singleClickEdit="true" selectionMode="extended" columnReordering="true" style="width:100%;height:350px" rowSelector="20px"> – HTMLタグで表示する場合 • <table>タグにDataGridクラスを指定する • その中の<thead>タグ内の<th>タグがカラムとなる（ここに各種プロパティー値を設定） – CSSの指定 • 下記のような指定が必要 <style type="text/css"> @import "/dojox/grid/resources/Grid.css"; @import "/dojox/grid/resources/{{テーマ名}}Grid.css"; .dojoxGrid table { margin: 0; } </style> datagrid.html : 7-14行目 <style type="text/css"> //データグリッド用のCSSファイル読み込みとテーブルの定義 @import "/dojox/grid/resources/Grid.css"; @import "/dojox/grid/resources/tundraGrid.css"; .dojoxGrid table { margin: 0; } </style> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. データ・グリッドの利用 Gridに対するプロパティー – singleClickEdit • trueを指定すると、editable="true"のカラムのセルが、シングルクリックで編集可能（通常はダブルクリック） – selectionMode • 列の選択をどのようにするか。none(選択不可), single(1つのみ選択可能), multiple(クリックの度に選択対象追加), extended(クリックで1つのみ選択、Ctrl+クリックで追加、Shift+クリックで範囲選択。デフォルト値) – columnReordering • trueを指定すると、カラムのドラッグアンドドロップによる順序の変更が可能となる（前々ページ参照） – rowSelector : "20px"など指定すると、列をクリックするための幅が左に付与される カラムに対するプロパティー – width : 幅の指定 基本的には指定した固定幅で表示する（次ページ注意点参照） – editable : trueを指定すると、各セルが編集可能となる – type : editableがtrueのカラムの編集形態の指定（日付（カレンダー）、セレクトボックス、独自のクラスなど） • タグによる指定の場合は、cellType="XXXX"などと指定する • 指定可能なクラスの一例 – dojox.grid.cells.DateTextBox : カレンダーによる日付の選択 – dojox.grid.cells.Select : セレクトボックス > 選択肢は、optionsプロパティー値にカンマ区切りで指定する – dojox.grid.cells.CheckBox : チェックボックス – dojox.grid.cells.AlwaysEdit : テキストボックスが常時表示される – formatter : セル内のデータの処理を行う関数 • 値が1の場合は"XX"などのケース処理など、任意の処理を埋め込むことが可能 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. データ・グリッドの利用 メソッド そのままでは、 任意のタグが 埋め込めてしまう – filter() : 表示されているデータ項目をフィルタリングする（検索などに利用） – sort() : 並べ替え – removeSelectedRows() • 選択された列を削除する • 対象のデータ・ストアがItemFileWriteStoreである必要がある（ItemFileReadStoreでは動作しない） – 内部的にストアのdeleteItem()が呼ばれるため 注意点 – カラムの幅にautoを指定することは、現在では非推奨 • http://docs.dojocampus.org/dojox/grid/DataGrid#auto-width-columns を参照のこと • 非常に限定された場合にのみ利用可能だが、将来サポートされなくなる可能性がある • それ以外の場合では、幅にズレが発生する可能性がある – Dojo 1.2やDojo 1.3.1以前では、セルを編集可能にした場合、そのままではXSS脆弱性がある • HTMLタグを書くと、そのままHTMLの要素として取り扱われてしまうため（右上図参照） – これを回避するためには、formatterを指定し、"<"や">"をエスケープするようにする必要がある • Dojo 1.3.2では、Grid内のHTMLタグは自動でエスケープされるようになった – Gridのプロパティー値であるescapeHTMLInDataをfalseにすることで、エスケープしないことも可能 > ただし、その場合は、対象のカラム内に表示するデータが ユーザーが任意に入力できる文字列でないことを保証しなければならない – その他、1.3や1.4では追加となったプロパティー値などがあるため、注意すること © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ZRMとの連携 ZRM (Zero Resource Model) とは、sMash特有のリソースモデル – RESTfulなWebサービスを容易に構築するための機能 – ほぼコーディングレスで、DBのCRUD処理を行うRESTful Webサービスを作成できる – ZRMの利用方法は、下記の記事を参照 – Project Zeroで試すアジャイルなWebアプリケーション開発 > http://www.itarchitect.jp/issue/-/123509-6.html – PHP on sMash – 第6回 Zero Resource Model (ZRM) > http://www.projectzero.org/jblog/index.php/2008/12/17/php06/ – Configuring the Zero Resource Model > http://www.projectzero.org/sMash/1.1.x/docs/zero.devguide.doc/zero.resource/configuration.html ZRMと連携し、DataGridから直接DBのCRUD処理を行うDojoパーツをsMashで提供 – zero.resource.DataStore • sMashのデータアクセスAPIを実装したデータ・ストア – zero.grid.DataGrid • zero.resource.DataStoreと関連付けて利用するグリッド • dojox.grid.Gridの拡張 (dojox.grid.DataGridの拡張ではないため、DataGridの各種機能は利用できない) – 詳細は下記URLを参照 • Using Dojo with the Zero Resource Model – http://www.projectzero.org/sMash/1.1.x/docs/zero.devguide.doc/zero.dojo/dojo.html © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. ZRMとの連携 zero.resource.DataStoreで利用可能なメソッド（一部） – fetch() : 検索やソート、ページングに利用可能 • fetchで様々なクエリを発行するイメージ • 例： nameがsoで始まるレコードの取得 – dataStore.fetch({ query: { name__startswith: "so" }}); • 例： nameを降順でソートして表示 – dataStore.fetch({ attribute: 'name', descending: true }}); – getMetadata() : メタデータ（ZRMのmodelで定義した各項目）の取得 Tips – スクロールバーの有無 • .{{テーマ名}} .dojoxGrid-scrollboxクラスのoverflowの値を変更することで、変更可能 – カラム名の変更 • ZRMのモデル定義で、labelの値を指定する • labelの値がない場合は、カラム名が利用される – 表示するカラムの指定 • zero.grid.DataGridのvisibleFieldsに、カンマ区切りでfieldを指定する • 指定がない場合は、全てのカラムが表示される（ID, updated） <style type="text/css"> .tundra .dojoxGrid-scrollbox { overflow: auto; } </style> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 4. Dojo Hint & Tips © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Webブラウザー Dojo 1.3.0のサポート対象 • http://dojotoolkit.org/support/faq/what-browsers-does-dojo-support • サポート対象のブラウザーはバージョンアップにより追加される – – – – – IE6, IE7, IE8 Firefox v1.5-v3.0 （DijitのみFirefox v2以上でサポート） Safari v3.1 Opera v9.6 (Dojo coreのみ) Konqueror v3.5以上 (Dojo coreのみ) お勧めのWebブラウザー – Firefox 3.x • 標準への準拠、及びパフォーマンスが良い • デバッグ環境が充実している（Firebug） 注意が必要なWebブラウザー – IE 6.0 • 現在多くの企業で使用されている • 標準への準拠に問題がある • JavaScriptのパフォーマンスが良くない （IE 8.0と比較して10倍以上の差があるケースもある） • デバッグツールが充実していない © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoデザインのポイント REST RESTを使用する場合はURL デザインも重要。 JavaScript設計 非同期、パレル処理やデータ のキャッシュと言った目に見え ない機能を実装することも可能。 それに合わせて画面の見え方 を自由にデザイン可能。 画面遷移 画面の一部のみ変更可能にな るので、画面遷移をDojo側でコ ントロールする必要がある。ま た、画面遷移のパターンも複雑 になる点に注意。 パフォーマンス 画面にDojoのGUIパーツを使いすぎると パフォーマンスの低下を引き起こすので 注意。プロトタイプを作成し早期からパ フォーマンスを検証を実施すべき。 Dojo.query()を使用するとパフォーマンス が極端に悪化する。この関数のなるべく 使用しないようにする。内部的にこの関数 を使用している関数も対象。 sMash 実行速度は、ブラウザーの種類、バージョ ンより変わってくる。基本的にパフォーマ ンスチューニングを行える余地は多くない。 サーバーエラー時の処理もど の部分をどの様に表示するか ケースごとにデザインする必要 がある。 データ形式 JSON or XML AjaxではJSONの方が 圧倒的に扱いやすい © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 国際化対応（i18n) <meta http-equiv=“Content-Type” content="text/html;charset=UTF-8" /> UTF-8でのエンコーディングを推奨 – 詳細は、国際化ガイドライン参照 9 Dojo自身もUTF-8でエンコーディングされている Localeの指定 – デフォルトは、ブラウザー設定より取得（navigator browser object） – djConfig.localeにより上書き可能 ex) djConfig.locale=ja • • メニューから言語を選択して、表示を変更する場合などに使用可能 1ページで複数のlocaleを使用したい稀な場合には、djConfig.extraLocaleで指 定可能 Translatable Resource Bundle – Dojoが提供するクライアント・サイドの国際化対応フレームワーク – Dojoを利用したメッセージに対してのみ有効 9 その他のメッセージには、従来のサーバー・サイドで置換えの仕組みを使用する © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Translatable Resource Bundle ローカライズド・ストリング – 各国語に翻訳されたメッセージを保持 • nls¥[locale名]ディレクトリ下にJSONスタイルで保持 – localeに応じた翻訳メッセージの出力 – 使い方 • • ({ invalidMessage: "* 入力した値は無効です。", missingMessage: "* この値は必須です。", rangeMessage: "* この値は範囲外です。" }) ({ invalidMessage: "* 非法的输入值。", missingMessage: "* 此值是必须的。", rangeMessage: "* 输入数据超出值域。" }) dojo.requireLocalization() – dojo.requires()と同様のモジュールのロード ＋localeの言語に翻訳されたメッセージのロード > 第１引数：nlsディレクトリを保持するディレクトリ > 第２引数：各国語に翻訳されたメッセージを保持するファイルの名前 dojo.getLocalization() – 各国語に翻訳されたメッセージ・リソースへの参照取得 > 第１引数：nlsディレクトリを保持するディレクトリ > 第２引数：各国語に翻訳されたメッセージを保持するファイルの名前 dojo.require("dojo.i18n"); dojo.requireLocalization(“dijit.form”, “validate”); var _form = dojo.i18n.getLocalization("dijit.form", "validate"); console.log(_form.invalidMessage); © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 文化的慣習 日付/時間 – Dojoでは各国語へのフォーマット/各国語からのパースが可能 <script type="text/javascript"> dojo.require("dojo.date.locale"); var dt = new Date(); console.info("日本語:"+dojo.date.locale.format(dt {locale:'ja',formatLength:'full'})); console.info(“仏 語:”+ dojo.date.locale.format(dt, {locale:‘fr',formatLength:'full'})); var date = dojo.date.locale.parse(“2008年4月7日月曜日”,{selector:‘date’,formatLength: “full”}); console.info(date); </script> 通貨 – 表記方法、丸めなどの慣習も適用 <script type="text/javascript"> dojo.require("dojo.currency"); console.info(dojo.currency.format(1234.567, {currency: "USD"})); console.info(dojo.currency.format(1234.567, {currency: "EUR"})); console.info(dojo.currency.format(1234.567, {currency: "JPY"})); </script> © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 日本語対応について データとして日本語（UTF-8）を扱うことが可能 Dojoの各種リソースも日本語対応済み – カレンダー、日付、時間、通貨、デフォルトメッセージ etc. IMEの制御に対応する機能はない 文字化けに注意 ・Shift-JIS範囲外の文字が入力 された場合 UTF-8対象部分 ・他システムとデータ共有 （変換コンバーターが違う場合） UTF-8化対象部分 HTML Shift-JIS CSS Unicode ブラウザー JS XML DB JVM sMash EBCDIC JSON ホスト © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. Dojoカスタム・ビルド Dojoカスタム・ビルドとは – http://docs.dojocampus.org/build/index – 読み込むJavaScriptを必要な機能のみで1ファイル化し、圧縮するための機能 • 圧縮にはShrinsafe（圧縮ツール）を内部的に利用 – Dojoだけでなく自分で作成したJavaScriptファイルも対象とできる – メリット • Webアプリケーションの起動が高速化される –標準で用いるdojo.jsでは、不必要なモジュールまで読み込んでしまうため、読み込みに時間がか かるが、カスタム・ビルドで必要な物だけに抑えられる –1ファイル化されるので、ファイルIOを減らすことができる –圧縮されているので、データ転送量が削減される – デメリット • モジュールの追加があると再ビルドが必要となる • コードの可読性が損なわれ、人がデバッグする事が非常に困難になる 前提条件 – Java 1.4.2以降 (推奨:1.5 以上) – Dojoのソース 注：sMash提供でないDojoを使用する場合、その部分 はIBMのサポート対象外となるので注意 • http://download.dojotoolkit.org/current-stable/ • Dojo Toolkitのサイトにある -srcとついているエディションをダウンロードしてセットアップ • sMashが提供しているDojoでは実施できないので、Dojo Toolkitのサイトから上記Dojoをダウンロード する必要がある © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. カスタム・ビルドの作成 実施手順 – １．必要な環境とモジュールを準備する – ２．カスタム・プロファイル（下記）を作成する – ３．ビルド・コマンドの実行 カスタム・プロファイル – 使用するDojoコンポーネントを指定したファイル – "<dojo-src root>/util/buildscripts/profiles"に"<name>.profile.js"を作成 • 例 : foo.profile.js dependencies ={ layers: [ { name: "mydojo.js", dependencies: [ "dijit.Button", "dojox.wire.Wire", "dojox.wire.XmlWire“ ] } ], prefixes: [ [ "dijit", "../dijit" ], [ "dojox", "../dojox" ] ] }; layersの中のnameには、生成するjsファイルの 名前を指定する。 layersの中のdependenciesには、使用するモ ジュールを記述する。Dojoのジュール場合、 dojo.require()で指定しているモジュール名を指 定する。自作のJavaScriptの場合ファンクション 名を指定する。 prefixesには、対象のモジュールがある場所と 名前を指定する。Dojoのモジュールの場合は、 例の通りに指定する。自作JavaScriptも対象の 場合は追記する。 その他の設定項目については通常は使用しな い。詳細はDojoToolkitのサイトを参照。 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. カスタム・ビルド･コマンドの実行 １．cd "<dojo-src root>/util/buildscripts" ２．ビルド・コマンド実行 – UNIX系の場合 • build.sh profile=<name> action=release [その他オプション] – Windowsの場合 • build.bat profile=<name> action=release [その他オプション] コマンド例 – build.bat profile=foo action=release optimize=shrinksafe copyTests=false • foo.profile.jsを用いて、shrinksafeで圧縮し、テスト用のモジュールを除いたビ ルドを作成する場合 • 通常は、この例のオプションを使用することを推奨する © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 主なカスタム・ビルド・オプション profile – プロファイル名を指定 action – ビルド実行時のアクション。通常、releaseを指定する loader – xdomainを指定すると、拡張ローダーであるXDローダーで実行される – 通常は指定しない copyTests – Dojoモジュール内にあるテスト用のコードも含めるか指定する。 – falseで含めない。通常はこちらを使用する optimize – 圧縮用のオプション – shrinksafe ・・・ Shrinksafeを使用して圧縮する – comments ・・・ コメントのみを削除する – shrinksafe.keepLines ・・・ Shrinksafeで圧縮するが改行は削除しない © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 Shrinksafe Shrinksafeとは – JavaScriptコード圧縮ツールの1つ • コメントや不必要な改行や空白の削除や、長い関数名・引数名の短縮化を実施し、ファイ ルサイズをミニマイズするツール – メリット • 本番環境で利用する直前に、shrinlsafeで圧縮することで、ユーザーがダウンロードする JavaScriptファイルのサイズを低く抑えることができる。特にナローバンドが介在する可能 性がある場合に有効 – デメリット • コードの可読性が損なわれ、人がデバッグする事が非常に困難になる 前提環境 – Java 1.4以降 (推奨:1.5 以上) – shrinksafe.jar • http://svn.dojotoolkit.org/src/util/trunk/shrinksafe/shrinksafe.jar © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 【参考】 Shrinksafe 利用方法 以下のコマンドを実行 –１．cd <shrinksafe root> –２．java -jar shrinksafe.jar <input>.js > <output>.js • 例） java -jar shrinksafe.jar infile.js > outfile.js infile.js function MyClass(){ this.foo = function(argument1, argument2){ var addedArgs = parseInt(argument1)+parseInt(argument2); return addedArgs; } var anonymousInnerFunction = function(){ // do stuff here! } } function MyFunc(){ // this is a top-level function } // we've got multiple lines of whitespace here outfile.js function MyClass(){ this.foo=function(_1,_2){ var _3=parseInt(_1)+parseInt(_2); return _3; }; var _4=function(){ }; } function MyFunc(){ } 注：オプションによっては改行も削除される © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 参考文献/URL 公式 – Dojo Toolkit - Home : http://www.dojotoolkit.org/ • Dojo Toolkit - Downloads : http://www.dojotoolkit.org/downloads • Dojo Official API : http://api.dojotoolkit.org/ – DojoのAPIリファレンス – Dojo campus : http://docs.dojocampus.org/ • Dojoのサンプルコードや技術情報が記載されているページ – 以前はDojo Bookという名前だったものが、こちらに変更された • 右の検索バーから、使いたいクラスの名前で検索すると、実際のサンプルコードが見られるので便利 – Dojo Book : http://dojotoolkit.org/book/dojo-book-1-0 • 現Dojo Campusだが、幾つかのクラスは記述が完全に移行されていない為、こちらの方が詳細な場 合がある CodeZine – Dojoツールキットで始めるオブジェクト指向 • http://codezine.jp/article/detail/3476 – Dojo ToolkitのDataGridを使いこなす • http://codezine.jp/article/detail/3486 © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. 参考文献/URL IBM developerWorks – Dojo ツールキット解説ページ • https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=53871737 – 学習のためのリンク集 > https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=120980048 – Dojoアプリケーション開発ガイド > https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=120979797 – 関連書籍紹介 > https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=117899265 – Java 開発者にとっての Dojo の概念 • Javaが分かる方向けのDojoの入門となる • http://www.ibm.com/developerworks/jp/web/library/wa-aj-dojo/ – Dojoでの検索結果 • http://www.ibm.com/developerworks/search/searchResults.jsp?searchType=1&searchSite=dWJapan&pageLan g=ja&searchScope=dW&query=dojo ワークショップ資料 – WebSphere sMash ハンズオン ワークショップ • http://www-06.ibm.com/jp/domino01/mkt/websphere.nsf/doc/0014FE2D – WAS Feature Pack for Web 2.0 ワークショップ資料 • http://www.ibm.com/developerworks/jp/websphere/library/was/was_web20fep_ws/ © 2009 IBM Corporation © 2009 ISE Corporation IBM Japan Systems Engineering Co.,Ltd. © IBM Corporation 2009. All Rights Reserved. ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独自の見解を反映したものです。それらは情報提供の目 的のみで提供されており、いかなる参加者に対しても法律的またはその他の指導や助言を意図したものではなく、またそのような結果を生むものでもありませ ん。本プレゼンテーションに含まれている情報については、完全性と正確性を帰するよう努力しましたが、「現状のまま」提供され、明示または暗示にかかわら ずいかなる保証も伴わないものとします。本プレゼンテーションまたはその他の資料の使用によって、あるいはその他の関連によって、いかなる損害が生じた 場合も、IBMは責任を負わないものとします。 本プレゼンテーションに含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかなる保 証または表明を引きだすことを意図したものでも、IBMソフトウェアの使用を規定する適用ライセンス契約の条項を変更することを意図したものでもなく、また そのような結果を生むものでもありません。 本プレゼンテーションでIBM製品、プログラム、またはサービスに言及していても、IBMが営業活動を行っているすべての国でそれらが使用可能であることを 暗示するものではありません。本プレゼンテーションで言及している製品リリース日付や製品機能は、市場機会またはその他の要因に基づいてIBM独自の決 定権をもっていつでも変更できるものとし、いかなる方法においても将来の製品または機能が使用可能になると確約することを意図したものではありません。 本資料に含まれている内容は、参加者が開始する活動によって特定の販売、売上高の向上、またはその他の結果が生じると述べる、または暗示することを 意図したものでも、またそのような結果を生むものでもありません。 パフォーマンスは、管理された環境において標準的なIBMベンチマークを使用した測定と予測に基づいています。ユーザーが経験する実際のスループットや パフォーマンスは、ユーザーのジョブ・ストリームにおけるマルチプログラミングの量、入出力構成、ストレージ構成、および処理されるワークロードなどの考慮 事項を含む、数多くの要因に応じて変化します。したがって、個々のユーザーがここで述べられているものと同様の結果を得られると確約するものではありま せん。 記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使用したか、またそれらのお客様が達成した結果の実例として示されたもの です。実際の環境コストおよびパフォーマンス特性は、お客様ごとに異なる場合があります。 以下は、International Business Machines Corporationの米国およびその他の国における商標。IBMの全商標のリストについては、 www.ibm.com/legal/copytrade.shtmlをご覧ください。 AIX, CICS, CICSPlex, DB2, DB2 Universal Database, i5/OS, IBM, the IBM logo, IMS, iSeries, Lotus, OMEGAMON, OS/390, Parallel Sysplex, pureXML, Rational, RCAF, Redbooks, Sametime, Smart SOA, System i, System i5, System z , Tivoli, WebSphere, z/OS. JavaおよびすべてのJava関連の商標およびロゴは Sun Microsystems, Inc.の米国およびその他の国における商標。 Microsoft, Windows, Windows NT および Windowsロゴは Microsoft Corporationの米国およびその他の国における商標。 Intel, Intelロゴ, Intel Inside, Intel Insideロゴ, Intel Centrino, Intel Centrinoロゴ, Celeron, Intel Xeon, Intel SpeedStep, Itanium, Pentium は Intel Corporationまたは子会社の米国およびその他の国における商標または登録商標。 UNIXはThe Open Groupの米国およびその他の国における登録商標。 Linuxは、Linus Torvaldsの米国およびその他の国における商標。 その他の会社名、製品名およびサービス名等はそれぞれ各社の商標。 75 © 2009 IBM Corporation © 2009 ISE Corporation