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 件のコメント:

  1. 匿名2009年3月16日 23:25

    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の場合は、デバッグを出さないようにしてます。

    返信削除
  2. admin2009年3月16日 23:49

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

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

    返信削除