有限会社 ウィス
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
WEBアプリケーション・システム開発
- 事務所移転しました -
長野県松本市中央1-7-13カネモ公園ビル3F
※本サイトは弊社ブログシステムで動作しております。
簡単な３つのステップで完了です。
1.ダウンロード
http://www.dojotoolkit.org/downloadsよりダウンロードします。
2.ファイルの配置
展開したファイルを、公開するサーバー、もしくはテストするドキュメントフォルダに「/js/dojoroot」などのディレクトリで配置します。
基本的に、dojo, dijit, dojox, util すべてのフォルダを配置します。
3.動作の確認
http://yoursite.com/js/dojoroot/dijit/themes/themeTester.html にアクセスして下のような表示ができれば設置完了です。
core. まずは簡単なサンプルを作ってみたいと思います。
headタグでスクリプトをロードします。
<script type="text/javascript" src="/js/dojoroot/dojo/dojo.js"></script>実際、このブログでは、headタグはテンプレートによって書出され、変更することができませんので、ブログの記事内で定義しています。
<input type="button" value="GET" onclick="getFunc()"/>
<script>
function getFunc() {
dojo.xhrGet({
url: '/readme.txt',
load: function(response) {
dojo.byId("box").innerHTML = response;
}
});
}
</script>
<div id="box" style="border:1px solid gray"></div>
今回使用したDojoの機能は、非同期でのデータ取得：dojo.xhrGet、IDセレクタのオブジェクト取得：dojo.byId です。
core. RSS2.0のフィード(XML)を非同期で取得して表示します。
<input type="button" value="GET" onclick="getFunc()"/>
<script>
function getFunc() {
dojo.xhrGet({
url: '/rss.xml',
handleAs: 'xml',
error: function(response, ioArgs){
console.error("HTTP status code:",ioArgs.xhr.status);
return response;
},
load: function(response) {
var html = "<ul>";
var items = dojo.query("item",response);
for(i=0; i<items.length; i++)
html += "<li>"+
dojo.query("title",items[i])[0].firstChild.nodeValue+"</li>";
dojo.byId("box").innerHTML = html+"</ul>";
}
});
}
</script>
<div id="box" style="border:1px solid gray"></div>
error, load のハンドラの最終行（return response;）は入れておいた方が良いようです。dojo.query で xml.getElementsById と同じ事が簡単にできます。
core. Dojoにはデバッグ環境が用意されています。
最も簡単なデバッグ方法は、FireFox とアドオンである FireBug を使う方法です。この方法ですと明示的にデバッグモードを指示しなくてもよく、またユーザー関数のコンソール出力も可能です。
<input type="button" value="ERROR" onclick="
console.error('ERRORです')" />
<input type="button" value="WARN" onclick="
console.warn('WARNです')" />
<input type="button" value="INFO" onclick="
console.info('INFOです')" /><br/>
<input type="button" value="DEBUG" onclick="
console.debug('DEBUGです')" />
<input type="button" value="LOG" onclick="
console.log('LOGです')" />
サンプル：