Google AJAX Libraries APIをDojoで使う

javascript dojo

Google AJAX Libraries API便利。(解説記事)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>

<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dijit/themes/soria/soria.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/"
</style>

<script type="text/javascript">
var djConfig={parseOnLoad: true, isDebug: true}
</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("dojo", "1.1.1");
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Button");

function onSubmitClick() {
  var select = dojo.byId("hogeSelect");
  console.debug(select.value);
}
</script>
</head>
<body class="soria">
  <h1>Google AJAX Library Test (Dojo1.1.1)</h1>
  <form dojoType="dijit.form.Form" id="form1">
    <h2>Dummy form</h2>
	<select id="hogeSelect" dojoType="dijit.form.ComboBox">
	  <option value="hoge">hoge</option>
	  <option value="fuga">fuga</option>
      <option value="shige">shige</option>
    </select>
    <button dojoType=dijit.form.Button type="button" onclick="onSubmitClick()">Submit</button>
    <button dojoType=dijit.form.Button type="reset">Reset</button>
  </form>
</body>
</html>

Dojoを使う場合たいがいテーマのCSSをimportでURL指定するのであまりgoogle.loadの意味はない。
(直後でscriptタグ閉じておかないとdojo.requireでぬるぽガッするし。)

素直に*.xd.jsを読んだほうがすっきり。djConfigもそこに書けるしね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js"
 djConfig="parseOnLoad: true, isDebug: true"></script>

以上のサンプルページ。