dojo入門

■ dojoとは

dojo は、Ajaxを簡単に利用するためのオープンソースJavaScriptライブラリです。下記のページから入手することができます。Academic Free License v2.1 と BSD License のどちらかのライセンスで利用することができます。Internet Explorer、Firefox、Safari、Konquerror、Opera（コアAPIのみ）などのブラウザの仕様の差異をあまり考慮することなくプログラミングすることが可能になります。

■ まずは使ってみよう

下記の様なフォルダ構成でサンプルを作成していきます。

├sample
│└sample.htm
└dojo
　├dijit ... Dojoウィジェット
　├dojo ... DojoコアAPI
　├dojox ... Dojo拡張API
　└util ... ユーティリティ

■ 基本的なサンプル

<html>
 <head>
  <title>Dojo: Test</title>
  <script type="text/javascript" src="../dojo/dojo/dojo.js"
   djConfig="parseOnLoad: true">
  </script>
 </head>
 <body>
  <script type="text/javascript">
   function test() {
    var o = dojo.byId("abc");
    dojo.style(o, "color", "red");
   }
  </script>
  <button onClick="test()">Click</button>
  <div id="abc">Hello!!</div>
 </body>
</html>

■ ウィジェットのサンプル

<html>
 <head>
  <title>Dojo: Hello World!</title>
  <script type="text/javascript" src="../dojo/dojo/dojo.js"
   djConfig="parseOnLoad: true">
  </script>
  <script type="text/javascript">
   dojo.require("dijit.form.Button");
  </script>
  <style type="text/css">
   @import "../dojo/dijit/themes/tundra/tundra.css";
   @import "../dojo/dojo/resources/dojo.css";
  </style>
 </head>
 <body class="tundra">
  <button dojoType="dijit.form.Button" id="helloButton">
   Hello World!
   <script type="dojo/method" event="onClick">
    alert('You pressed the button');
   </script>
  </button>
 </body>
</html>

■ djConfig

baseUrl
debugAtAllCosts
debugContainerId
extraLocale
isDebug
locale
modulePaths

■ dojoのAPI

■要素・属性・クラス・スタイルシート
dojo.body()
dojo.byId(id, doc)
dojo.attr(node, name, value)
dojo.style(node, style, value)
dojo.addClass(node, class)
dojo.hasClass(node, class)
dojo.removeAttr(node, name)
dojo.removeClass(node, classStr)
dojo.place(node, refNode, position)
dojo.clone(node)
dojo.isDescendant(node, ancestor)
■イベント
dojo.connect(obj, event, context, method, dontFix)
dojo.disconnect(handle)
dojo.addOnLoad(function)
dojo.addOnUnload(function)
■モジュール
dojo.require(moduleName, omitModuleCheck)
■配列
dojo.indexOf(array, value, fromIndex, findLast)
dojo.lastIndexOf(array, value, fromIndex)
dojo.forEach(arr, callback, thisObject)
dojo.every(arr, callback, thisObject)
dojo.some(arr, callback, thisObject)
dojo.map(arr, callback, thisObject)
dojo.filter(arr, callback, thisObject)
■カラー
dojo.blendColors(start, end, weight, obj)
dojo.colorFromArray(a, obj)
dojo.colorFromHex(color, obj)
dojo.colorFromRgb(color, obj)
dojo.colorFromString(str, obj)
dojo.colors.makeGrey(g, a)
■エフェクト・アニメーション
dojo.fadeIn(args)
dojo.fadeOut(args)
dojo.anim(node, properties, duration, easing, onEnd, delay)
dojo.fx.Toggler(args)
dojo.fx.chain(animations)
dojo.fx.combine(animations)
dojo.fx.slideTo(args)
dojo.fx.wipeIn(args)
dojo.fx.wipeOut(args)
■判定
dojo.isAlien(it)
dojo.isArray(it)
dojo.isArrayLike(it)
dojo.isFunction(it)
dojo.isObject(it)
dojo.isString(it)
dojo.isAIR
dojo.isBrowser
dojo.isFF
dojo.isGears
dojo.isIE
dojo.isKhtml
dojo.isMozilla
dojo.isOpera
dojo.isQuirks
dojo.isRhino
dojo.isSafari
dojo.isSpidermonkey
■データ変換
dojo.formToJson(formNode, prettyPrint)
dojo.formToObject(formNode)
dojo.formToQuery(formNode)
dojo.fromJson(json)
dojo.toJson(it, prettyPrint, _indentStr)
■通貨記号
dojo.currency.format(value, options)
dojo.currency.parse(expression, options)
dojo.currency.regexp(options)
■通信
dojo.xhrGet(args)
dojo.xhrPost(args)
dojo.xhrDelete(args)
dojo.xhrPut(args)
dojo.xhr(method, args, hasBody)
dojo.rawXhrPost(args)
dojo.rawXhrPut(args)
■クッキー
dojo.cookie(name, value, props)
■ヒストリ
dojo.back.init()
dojo.back.addToHistory(args)
dojo.back.setInitialState(args)
dojo.back.getHash
dojo.back.goBack
dojo.back.goForward
dojo.back.setHash
■ビヘイビア
dojo.behavior.add(behaviorObj)
dojo.behavior.apply()
■国際化
dojo.cldr.monetary.getData(code)
dojo.cldr.supplemental.getFirstDayOfWeek(locale)
dojo.cldr.supplemental.getWeekend(locale)
dojo.cldr.nls
dojo.i18n.getLocalization(packageName, bundleName, locale)
dojo.i18n.normalizeLocale(locale)
■データ
dojo.data.api.Identity()
dojo.data.api.Notification()
dojo.data.api.Read()
dojo.data.api.Request()
dojo.data.api.Write()
dojo.data.util.filter.patternToRegExp(pattern, ignoreCase)
dojo.data.util.simpleFetch.fetch(request)
dojo.data.util.sorter.basicComparator(a, b)
dojo.data.util.sorter.createSortFunction(sortSpec, store)
dojo.data.ItemFileReadStore(keywordParameters)
dojo.data.ItemFileWriteStore(keywordParameters)
■日付
dojo.date.add(date, interval, amount)
dojo.date.compare(date1, date2, portion)
dojo.date.difference(date1, date2, interval)
dojo.date.getDaysInMonth(dateObject)
dojo.date.getTimezoneName(dateObject)
dojo.date.isLeapYear(dateObject)
dojo.date.locale.addCustomFormats(packageName, bundleName)
dojo.date.locale.format(dateObject, options)
dojo.date.locale.getNames(item, type, use, locale)
dojo.date.locale.isWeekend(dateObject, locale)
dojo.date.locale.parse(value, options)
dojo.date.locale.regexp(options)
dojo.date.stamp.fromISOString(formattedString, defaultTime)
ojo.date.stamp.toISOString(dateObject, options)
■ドラッグアンドドロップ
dojo.dnd.Avatar(manager)
dojo.dnd.Container(node, params)
dojo.dnd.Manager()
dojo.dnd.Moveable(node, params)
dojo.dnd.Mover(node, e, host)
dojo.dnd.Selector(node, params)
dojo.dnd.Source(node, params)
dojo.dnd.Target(node, params)
dojo.dnd.TimedMoveable(node, params)
dojo.dnd.autoScroll(e)
dojo.dnd.autoScrollNodes(e)
dojo.dnd.getCopyKeyState(e)
dojo.dnd.getUniqueId()
dojo.dnd.getViewport()
dojo.dnd.isFormElement(e)
dojo.dnd.manager()
dojo.dnd.autoscroll
dojo.dnd.boxConstrainedMover
dojo.dnd.common
dojo.dnd.constrainedMover
dojo.dnd.H_AUTOSCROLL_VALUE
dojo.dnd.H_TRIGGER_AUTOSCROLL
dojo.dnd.parentConstrainedMover
dojo.dnd.V_AUTOSCROLL_VALUE
dojo.dnd.V_TRIGGER_AUTOSCROLL
dojo.dnd.move.boxConstrainedMoveable(node, params)
dojo.dnd.move.constrainedMoveable(node, params)
dojo.dnd.move.constrainedMover(fun, within)
dojo.dnd.move.parentConstrainedMoveable(node, params)
dojo.dnd.move.boxConstrainedMover(box, within)
dojo.dnd.move.parentConstrainedMover(area, within)
■I/O
dojo.io.iframe.create(fname, onloadstr, uri)
dojo.io.iframe.setSrc(iframe, src, replace)
dojo.io.iframe.doc
dojo.io.script.attach(id, url, frameDocument)
dojo.io.script.get(args)
dojo.io.script.remove(id)
■数字
dojo.number.format(value, options)
dojo.number.parse(expression, options)
dojo.number.regexp(options)
dojo.number.round(value, places, multiple)
■パーサー
dojo.parser.instantiate(nodes)
dojo.parser.parse(rootNode)
■正規表現
dojo.regexp.buildGroupRE(arr, re, nonCapture)
dojo.regexp.escapeString(str, except)
dojo.regexp.group(expression, nonCapture)
■RPC
dojo.rpc.JsonpService(args, requiredArgs)
dojo.rpc.JsonService(args)
dojo.rpc.RpcService(args)
■文字列
dojo.trim(str)
dojo.string.trim(str)
dojo.string.pad(str, n, ch, end)
dojo.string.substitute(template, map, transform, thisObject)
■未整理
dojo.AdapterRegistry(returnWrappers)
dojo.animateProperty(args)
dojo.Color(color)
dojo.Deferred(canceller)
dojo.DeferredList(list, fireOnOneCallback, fireOnOneErrback, consumeErrors, canceller)
dojo.loaded()
dojo.NodeList()
dojo.connectPublisher(topic, obj, event)
dojo.contentBox(node, box)
dojo.coords(node, includeScroll)
dojo.declare(className, superclass, props)
dojo.delegate(obj, props)
dojo.deprecated(behaviour, extra, removal)
dojo.eval(scriptFragment)
dojo.exists(name, obj)
dojo.exit(exitcode)
dojo.experimental(moduleName, extra)
dojo.extend(constructor, props...)
dojo.fixEvent(evt, sender)
dojo.getComputedStyle(node)
dojo.getObject(name, create, context)
dojo.hasAttr(node, name)
dojo.hitch(scope, method...)
dojo.marginBox(node, box)
dojo.mixin(obj, props...)
dojo.moduleUrl(module, url)
dojo.objectToQuery(map)
dojo.partial(method...)
dojo.platformRequire(modMap)
dojo.provide(resourceName)
dojo.publish(topic, args)
dojo.query(query, root)
dojo.queryToObject(str)
dojo.registerModulePath(module, prefix)
dojo.requireIf(condition, resourceName)
dojo.requireLocalization(moduleName, bundleName, locale, availableFlatLocales)
dojo.setContext(globalObject, globalDocument)
dojo.setObject(name, value, context)
dojo.setSelectable(node, selectable)
dojo.stopEvent(evt)
dojo.subscribe(topic, context, method)
dojo.toggleClass(node, classStr, condition)
dojo.unloaded()
dojo.unsubscribe(handle)
dojo.withDoc(documentObject, callback, thisObject, cbArguments)
dojo.withGlobal(globalObject, callback, thisObject, cbArguments)
dojo.xdRequireLocalization(moduleName, bundleName, locale, availableFlatLocales)
dojo._loadUri()
dojo.baseUrl
dojo.boxModel
dojo.config
dojo.doc
dojo.dojo
dojo.global
dojo.jaxer
dojo.keys
dojo.locale
dojo.nls
dojo.NodeList-fx
dojo.nonDebugProvide
dojo.OpenAjax
dojo.requireAfterIf
dojo.resources
dojo.tests
dojo.toJsonIndentStr
dojo.version
console.debug()

■APIリファレンス

◆要素、属性、クラス、スタイルシート
dojo.byId(id, [doc])
id で指定したIDを持つ要素を取得します。
<div id="abc">AAA</div>
<script type="text/javascript">
var obj = dojo.byId("abc");
alert(obj.innerHTML);
</script>
</div>
dojo.body()
ボディ要素を取得します。
var obj = dojo.body();
dojo.attr(node, name, [value])
要素の属性を取得・設定します。node には dojo.byId() などで取得したノードや、要素の id 属性で指定した ID を指定します。引数が 2個の場合は属性の値を読み出します。
alert(dojo.attr("img2", "src"));
dojo.attr("img2", "src", "sample.gif");
dojo.style(node, style, [value])
要素のスタイルシートを取得・設定します。node には dojo.byId() などで取得したノードや、要素の id 属性で指定した ID を指定します。引数が 2個の場合はスタイルシートの値を読み出します。
var obj = dojo.byId("abc");
alert(dojo.style(obj, "color"));
dojo.style("abc", "color", "red");
dojo.addClass(node, class)
要素にクラスを追加して割り当てます。
<style type="text/css">
  .red { color: red; }
  .bold { font-weight: bold; }
</style>
<script type="text/javascript">
function test() {
  dojo.addClass("a", "red");
  dojo.addClass("a", "bold");
}
</script>
<div id="a">AAA</div>
<button onClick="test()">Click</button>
dojo.hasClass(node, class)
要素が指定したクラスを持っているか調べます。
if (dojo.hasClass("msg2", "red")) { ... }
◆ モジュール
dojo.require(moduleName, [omitModuleCheck])
必要なモジュールを読み込みます。例えば、dojo.string.xxxx() を利用するにはあらかじめ、下記のように dojo.string モジュールを読み込んでおく必要があります。
dojo.require("dojo.string");
◆ ブラウザ判断
dojo.isIE
ブラウザが IE（Internet Explorer）かどうか調べます。IE でなければ 0 を、IE であれば、6、7 などの IE のメジャーバージョン番号を返します。
if (dojo.isIE >= 7) { ... }
◆ イベントハンドラ
dojo.addOnLoad(function)
dojo.addOnUnload(function)
ページが読み込まれたときや別のページに移る際に実行するハンドラを指定します。
dojo.addOnLoad(function() { alert("Hello!"); });
dojo.addOnUnload(function() { alert("bye!"); });
dojo.connect(obj, event, [context], method, [dontFix])
要素 obj に対して event で指定したイベントが発生した際に、method で指定したハンドラを呼び出します。obj に null を指定すると window オブジェクトがターゲットとなります。context には、ハンドラ実行中の this オブジェクトを指定します。
<body onload="init()">
<script type="text/javascript">
function init() {
  var btn = dojo.byId("btn2");
  dojo.connect(btn, "onclick", function (ev) {
    alert(ev.target.innerHTML);
  });
}
</script>
<button id="btn2">Click</button>
</body>
dojo.disconnect(handle)
dojo.connect() で指定したハンドラを解除します。
var handle = dojo.connect(obj, "onclick", function (ev) { });
dojo.disconnect(handle);
◆ エフェクト
dojo.fadeOut({ node, duration, easing })
dojo.fadeIn({ node, duration, easing })
要素をフェードアウト・フェードインします。
<div id="msg1">Hello World!!</div>
<button onClick="fade_out()">FadeOut</button>
<button onClick="fade_in()">FadeIn</button>
<script type="text/javascript">
function fade_out() {
  dojo.fadeOut({node : "msg1", duration : 1000}).play();
}
function fade_in() {
  dojo.fadeIn({node : "msg1", duration : 1000}).play();
}
</script>
◆ 文字列
dojo.trim(str)
dojo.string.trim(str)
文字列の前後の空白文字を取り除きます。
alert("[" + dojo.trim("  ABC   ") + "]");

dojo.require("dojo.string");
alert("[" + dojo.string.trim("  ABC   ") + "]");
dojo.string.pad(str, n, ch, [end])
文字列 str が n 文字になるように、文字列の前に文字 ch をパディングします。end に true を指定すると文字列の後ろにパディングします。
dojo.require("dojo.string");
alert("[" + dojo.string.pad("1234", 4, "0") + "]");
◆ HTTP通信
dojo.xhrGet({ url, load, ... })
url で指定したコンテンツを非同期に取得します。load には取得が完了した際に呼び出されるハンドラを指定します。
<script type="text/javascript">
function hello() {
  dojo.xhrGet({
    url: "test.txt",
    load: function(response, ioArgs) {
      dojo.byId("div1").innerHTML = response;
    }
  });
}
</script>
<button onClick="hello()">Click Me</button>
<div id="div1"></div>
◆ ドラッグ＆ドロップ
dojo.dnd.Moveable(obj)
obj で指定したオブジェクトをマウスでドラッグ＆ドロップ可能にします。
<script type='text/javascript'>
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function () {
  new dojo.dnd.Moveable(dojo.byId("img1"));
});
</script>
<img id="img1" src="sample.gif">

■参考URL

Copyright (C) 2003 杜甫々
初版：2003年9月3日
http://www.tohoho-web.com/mysql.htm