サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
ymdmstk.cocolog-nifty.com
dojo.io.bindを用いるのではなく、dojo.rpc.JsonServiceを用いることで、JSONで提供されるサービスをRPCのようなAPIにより呼び出すことができる。内部的にはdojo.io.bindを用いている。 RPC呼び出しを用いるときは、Simple Method Description (SMD)と呼ばれるRPC呼び出しの定義を記述したファイルを作成する。SMDファイルは以下のようにJSON形式で記述する。 SMDファイルの形式では、serviceTypeは"JSON-RPC"を指定する。serviceURLは呼び出し先のURLを指定する。methodsには、各メソッド名とパラメータ名、パラメータの型を指定する。 { "serviceType": "JSON-RPC", "serviceURL": "rpcProcessor.php", "methods":[ { "
Dojoでは、異なるドメインのサービスをブラウザから直接呼び出する方法として、scriptタグによる方法(ScriptSrcTransport)とIFrame(XhrIframeProxy)による方法の２つを提供している。 ScriptSrcTransport scriptタグを用いてJavaScript/JSONサービスを呼び出すことで、異なるドメインのサービスをブラウザから直接呼び出すことができる。 scriptタグを用いて呼び出すときも、dojo.io.bindを用いる。transportプロパティとしてScriptSrcTransportを指定する点が異なる。scriptタグによる呼び出しの最も簡単な例を以下に示す。 dojo.require("dojo.io.ScriptSrcIO"); dojo.io.bind({ url: "http://the.script.url/goe
Dojoは http://dojotoolkit.org/downloads からダウンロードできます。基本機能のみで画面部品を含まないDojo Baseのみのパッケージと、すべてを含むパッケージ(Dojo + Dijit + DojoX)がダウンロードできます。 http://download.dojotoolkit.org/ からは、圧縮されていないコメント付きのソースコード(dojo-release-xxx-src.zip)、ドキュメント(dojo-release-xxx-doc.zip)、デモアプリ(dojo-release-xxx-demos.zip)もダウンロードできます。 Dojoを利用するときは、dojo/dojo.jsのロードが必要となります。 以下にDojoを利用した簡単な例を示します。 <html> <head> <script type="text/javascri
DojoのDate/日時処理を用いるときは、dojo.date.formatをrequireする。 dojo.require("dojo.date.format"); 日付 → 文字列 Dojoでは、JavaScriptのDateを文字列に変換する関数として、dojo.date.formatが提供されている。一つ目の引数にDateオブジェクト、2つ目の引数として変換方法を示したパラメータを渡す。 var sdate = dojo.date.format(new Date(), {selector:'dateOnly', locale:'ja-jp'}); => 2007年4月5日木曜日 var sdate = dojo.date.format(new Date(), {selector:'dateOnly', formatLength:'short', locale:'ja-jp'});
カラーパレットを表示して、色をユーザに選択させることができる。カラーパレットを用いるときはdojo.widget.Checkboxをrequireする。 dojo.require("dojo.widget.ColorPalette"); カラーパレットを表示するところで、dojoTypeをColorPaletteとして指定したdiv要素を記述する。 <div dojoType="ColorPalette" id="cp"></div> デフォルトでは、7x10のカラーパレットだが、属性としてpalette="3x4"を指定することで、3x4のカラーパレットを作ることができる。 <div dojoType="ColorPalette" id="cp" palette="3x4"></div> ユーザが選択した色の情報を取得するためには、onColorSelectイベントを関数に割り当てる。o
dojo.io.bindは、デフォルトではXMLHttpRequestを使ってサービスを呼び出すが、IFrameを使って呼び出すこともできる。 IFrameを使った場合、XMLHttpRequestを実装していない古いブラウザでも動作するメリットがある。一方で、IFrameでは、GETのみでPOSTが使えないため、主に情報の取得のみに使う。 IFrameを使って呼び出すときは、"dojo.io.IframeIO"をrequireし、dojo.io.bindの引数のtransportプロパティとして、"IframeTransport"を指定する。 IFrameを使ったときのサービスはHTMLを返す。mimetypeとしてtext/htmlを指定したときは、HTML全体のDOMを取得できる。以下にHTMLを返すサービスを呼び出す例を示す。 dojo.require("dojo.io.*");
バック/フォワードボタンへの対応 Ajaxによりデータを取得して画面の一部を書き換えた場合、ブラウザのバックボタンを押しても画面の一部の書き換えを元に戻すことはできない。間違ってバックボタンを押すと、これまでの操作内容は失われてしまう。 画面の一部を書き換えただけでは、ブラウザの履歴(history)、URLを更新しないためである。 dojo.undo.browser を使うことで、Ajaxアプリケーションにおいてもブラウザのバック/フォワードボタンを利用することができるようになる。dojo.undo.browserでは、バック/フォワードボタンの通知を受けて動作するオブジェクト/関数を指定することで、ブラウザのバック/フォワードボタンに対応できるようになる。 dojo.undo.browserを利用するには、まず、djConfigで、preventBackButtonFix: false
カレンダーを表示して日付を選択させることができる。カレンダーには、その場で表示されるDatePickerと、ボタンを押すと表示されるDropdownDatePickerの２つがある。 DatePicker <script type="text/javascript"> dojo.require("dojo.widget.DatePicker"); </script> <div dojoType="datepicker" widgetId="foo"> DatePickerの日付選択は、onValueChangedイベントとして受け取ることができる。 選択した日付の値を取得するには、DatePickerのwidgetに対して、getValue()またはgetDate()メソッドを実行する。getValue()では日付を文字列として取得し、getDate()ではDateオブジェクトとして取得で
dojo.storageを使うことでクライアント側にデータを保存して利用することができる。一般的に、ブラウザ側の保存領域として使うことができるCookieでは数kbyteまでしか保存できないが、dojo.storageではクライアントPCのディスク容量の限りデータを保存できる。 クライアントにデータを保存することで、サーバとのやりとりを減らすことができ、作業の中断をいつでもできるようになる。また、Webベースで提供されているOfficeアプリケーションをオフラインでも動作させることができるようになる。 dojo.storageでは、データの保存とアクセスは、単純なHashテーブルとしてアクセスできる。 dojo.storageを利用するときは、dojo.storage.*とdojo.event.*をrequireする。 dojo.require("dojo.event.*"); dojo.
Dojoのドラッグ＆ドロップ機能を用いるときは、"dojo.dnd.*"をrequireする。 dojo.require("dojo.dnd.*"); 利用するときは、ドラッグ＆ドロップするHTML要素を指定する。HTMLとしての記述は特にない。 ドラッグ対象となるオブジェクト(HTML要素)をHtmlDragSourceとして設定する。 ドラッグしたオブジェクトをドロップする場所を、HtmlDropTargetとして設定する。 ドロップできる場所では、水平の線が現れる。ドラッグしたオブジェクトを、ドロップ対象ではない場所でドロップしたら、ドラッグしたオブジェクトは元の場所に戻る。 HtmlDragSource/HtmlDropTargetの引数として、1つ目にドラッグ対象となるオブジェクト、2つ目にドラッグ/ドロップ対象の範囲を示すコードを指定する。HtmlDragSourceではコード
Dojoでは、dojo.io.bind()により、クロスブラウザのAjax機能を提供する。以下のシンプルな例では、ボタンを押すと、"sample.txt"を取得して、ファイルの中身をポップアップで表示する。 <html> <head> <title>dojo.io.bind</title> <script type="text/javascript" src="dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.io.*"); function doit() { dojo.io.bind({ url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt", load: function(type, data, evt) { alert(data); }
Dojoでは、グラフを描画する方法として、dojo.charting.Chartとdojo.widget.Chartの２つが提供されている。 dojo.charting.ChartはJavaScriptでグラフの描画方法を指定するのに対して、dojo.widget.Chartは主にHTMLのtable要素として指定する。 dojo.charting.Chartで指定する方法を説明する。 まず、以下の2つをrequireする。 dojo.require("dojo.collections.Store"); dojo.require("dojo.charting.Chart"); 次にJSON形式のグラフデータをdojo.collections.Storeに読み込む。 var json = [ { x: 0, y: 110, y2: 20}, { x: 10, y: 24, y2: 4}, {
Dojo 0.4.2について少しずつ書いていきます。ここはまとめページ。 Dojo http://dojotoolkit.org/ は、The Dojo Foundationにより提供されているオープンソースのJavaScriptツールキットである。 Dojoは、Ajax呼び出しから、イベント処理、タブやツリーなどの各種GUI部品など、広範な機能を提供しており、機能ごとにファイルが分かれていて必要な機能だけを動的にロードする仕組みとなっているのが特徴となっている。 ブラウザは、Safari 2.0.x, Opera 9.0+, IE(Windows) 6.0+, Firefox 1.0+/Mozilla, Konqueror 3.5+に対応している。 概要 Dojoのインストール ビルド デバッグ方法 オブジェクト HTML要素の取得 クラス/オブジェクト 配列 Collection Da
Dojoをベースに使っているJavaScriptライブラリ Dojo Toolkit Module (GPL) ZK (GPL or Commercial License) yFiles AJAX (有償) Nexaweb Universal Client Framework dojo.E (Apache License Version 2.0) Dojoを利用しているフレームワーク jMaki (Java) Tacos (Tapestry/Java/Apache License Version 2.0) Spring.js (Spring/Java) WicketStuff Dojo (Java) Zend framework (PHP) Dojima Widgets (Django /Python) extensible ajax platform (any web server/Ap
このページを最初にブックマークしてみませんか？
『ymdmstk.cocolog-nifty.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
