Dojoでリモートのライブラリとローカルの自作コードを両立させる方法

Dojoでネット上にあるライブラリと，自前サーバにある自作コードを両立させて使う方法をメモしておきます．

まずは，状況設定です．「http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js」に置かれているものをライブラリとして使うことにします．一方，次の図の「war/js/rfj」ディレクトリに置かれている「ScrollBar.js」を自作コードとして使うことにします．

この状況下で「ScrollBar.js」ファイルで定義されている「ScrollBar」クラスを「war/scroll_bar_test.html」ファイル内で使うためには，次のようなコードを記します．

<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
  djconfig="parseOnLoad: true,
    baseUrl: './', modulePaths: {'rfj': 'js/rfj'}">
</script>
<script type="text/javascript">
dojo.require("rfj.ScrollBar");

dojo.addOnLoad(function() {
  var scrollBar = new rfj.ScrollBar();
);
</script>

ポイントは，最初のscript要素にあるdjconfig属性の値にあります．ローカルのコードが置かれている場所を「baseUrl: './', modulePaths: {'rfj': 'js/rfj'}」という記述で指定します．

baseUrlには，自作コードへのパスを記す際の起点となるディレクトリをこの記述が記されたHTMLファイルから見た相対パスで記します．今回は，「war/scroll_bar_test.html」ファイルがあるのと同じディレクトリを起点とするので，「./」を指定しています．

modulePathsには，Dojoでいうところのモジュールを置いてあるディレクトリのパスを記します．このパスは，baseUrlで指定したディレクトリからの相対パスとなります．「ScrollBar」クラスが定義されている「ScrollBar.js」ファイルは「war/js/rfj」ディレクトリにあるので，そのディレクトリを「war/scroll_bar_test.html」ファイルのあるディレクトリからの相対パスで記すと，「./js/rfj」となります．

dojox.gfx の createImage で画像が表示されない

dojox.gfx の createImage を使って画像を表示できないという問題の解決方法をメモしておきます．

surface = dojox.gfx.createSurface(parentNode, 400, 300);
image = surface.createImage({x: 0, y: 0, width: 400, height: 300, src: "image.jpg"});
image.rawNode.removeAttribute("fill");

[1]のページを手掛かりに読み進めてみると，上記の関数によって作られる SVG の要素に値が none の fill 属性が設定されていることが原因のようです．この問題はすでに解決済みのようですが，正式版（バージョン1.3.2）にはまだ反映されていないようです．

そういうわけで，とりあえず，上のコードの3行目を追加してみました．これで原因となっている属性を消せるので，画像が表示されるようになります．

[1] Surface createImage fails on Firefox 3.5

Dojoで独自モジュールのクラスを作成する方法

Dojoで独自モジュールのクラスを作成する方法をメモしておきます．なお，以下の内容は，Dojoライブラリに含まれるdojo.jsを${APPHOME}/js/dojo/dojoに配置した状況で，${APPHOME}/jsにmizomemoモジュールのHogeHogeクラスを定義し，そのインスタンスを${APPHOME}/hogehoge.html内で生成する場合の説明です．

1. ${APPHOME}/js/mizomemo/HogeHoge.js の内容を次のようにする．

dojo.provide("mizomemo.HogeHoge");

dojo.declare("mizomemo.HogeHoge", null, {
  // フィールドやメソッドを定義する
});

2. ${APPHOME}/hogehoge.html の内容を次のようにする．

<script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true, modulePaths: {'mizomemo': '../../mizomemo'}"></script>
<script type="text/javascript">
<!--
dojo.require("dojo.parser");
dojo.require("mizomemo.HogeHoge");

dojo.addOnLoad(function() {
  var hogehoge = new mizomemo.HogeHoge();
});
// -->
</script>

[1] Dojoのモジュールシステム

DojoでHTML要素をドラッグアンドドロップする方法

Dojoを使ってHTML要素をドラッグアンドドロップする方法をメモしておきます．

<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function() {
  var movable = new dojo.dnd.Moveable(dojo.byId("movable"));
});
</script>
  :
<div id="movable">...</div>
  :

[1] dojoライブラリでドラッグ＆ドロップ！, http://kanamehackday.blog17.fc2.com/blog-entry-120.html