2009年3月5日木曜日

Googleの CDNを使って Dojoを使う例

google.load()を使った動的ロードだとロードされるまでの画面表示が辛いので、静的ロードにする。



CSS
@importではなく、link要素にしてみた。
@importを使う例が多いけど、違いは何だろう?

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/soria/soria.css" />
<!-- or
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css" />
-->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css" />


JavaScript

これでdjConfig属性が効いているのかは知らない
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button"); //必要なものを読み込む
</script>


HTML
<body class="soria">
<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
</body>


html要素を拡張していくという発想が面白い。VBライク?


参考:
Hello World - Dojo for the Attention-Impaired | The Dojo Toolkit
Developer's Guide - AJAX Libraries API - Google Code
tnomuraのブログ : Dojo の基本的な使い方
【特集】詳解! Dojo Toolkit 1.0(Dijit編) - ウィジェットプログラミングのツボ (4) イベント処理もマークアップで!(1) (中略)マイコミジャーナル

2 件のコメント:

Logue さんのコメント...

djConfigはdojoを読み込むスクリプトタグの前に
var djConfig{ debug:true };
みたいな形で入れる必要があるみたいです。

ここにまとめておいたので参考までにどうぞ。
http://logue.be/dojo/CDN%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AE%E6%B3%A8%E6%84%8F.html

ちなみに、HTAアプリケーションを作る上で、自分はこの性質を逆手にとって、拡張子がhtaの場合は、デバッグを出さないようにしてます。

floatingdays さんのコメント...

Logueさん、コメントありがとうございます。
google.load()を使った動的読み込みの場合は前にdjConfig{}する必要があるみたいですね。
自分が書いた例のように静的にJavaScriptファイルを読み込む場合はこれでも行けるのかな?と思い書いてみたわけです。
が、やっぱり駄目なんですかね?

そのうち時間ができたら調べてみます~

ブログ アーカイブ

tags