2010年2月14日日曜日

Dojo基礎文法最速マスター ~CSS編~

Dojoにはテーマがあります。

<style type="text/css"> @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/soria/soria.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/nihilo/nihilo.css"; @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css"; </style>
最初の1つはいわゆるリセットCSS。残りの3つがテーマ。読み込んだだけでは適用されません。 テーマを適用したい範囲にclass="テーマ名"の属性を付けます。全体に適用したいなら、
<body class="soria">
こんな感じで<body>タグに設定します。
Dojoは読み込まれると<html>タグに次のクラスを設定します。
  • dj_ie / dj_ie6 / dj_ie7 / dj_ie8 / dj_iequirks
  • dj_gecko / dj_ff2 / dj_ff3
  • dj_khtml / dj_safari / dj_chrome
  • dj_opera
  • dj_contentBox / dj_borderBox
このため、ブラウザごとに挙動が違う場合もCSSで簡単に解決できます。 たとえば、IEだけ異なる挙動をする場合、
<style type="text/css"> /* ブラウザ共通 */ .someClass { ...; } /* IEのみ異なる部分を上書き */ .dj_ie .someClass { ...; } </style>
こうすると、CSSの優先順位により!importantしなくてもIEでのみ上書きされます。 CSSだけで解決できるので、JavaScriptで書き換えとかしなくて済みます。

Dojo基礎文法最速マスター ~HTML編~

Dojoにはdojo.parserという機能があり、これがhtmlを編集してくれます。ページ読み込み時にdojo.parserを動作させるには

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djconfig="parseOnLoad: true"> </script>
と読み込み時に設定するだけ。

dojo.parserはdojotype属性に反応します。
<input dojotype="dijit.form.TextBox" jsid="textbox1" type="text" name="textbox" value="てきすと" />
これで、このtextboxにはdojoの追加機能が付与されます。dojoにはこのinputに対応するJavaScriptオブジェクトがあるわけですがjsid="textbox1"と指定されていた場合、JavaScriptのtextbox1という変数に割り当てられます。
よくdocument.getElementById()で毎回検索しているコードを見かけますが、変数に割り当てられているので必要な時はいつでも簡単にアクセスできます。

dojo.parserは入れ子にも対応していて
<form dojotype="dijit.form.Form" jsid="form1"> <input dojotype="dijit.form.TextBox" type="text" name="textbox1" value="てきすと1" /> <input dojotype="dijit.form.TextBox" type="text" name="textbox2" value="てきすと2" /> </form>
今度はformを拡張してJavaScript変数のform1に割り当てています。
どんな機能があるかというと、form1.attr('value')とやると{textbox1:"てきすと1",textbox2:"てきすと2"}が返ってきたり。逆にform1.attr('value', {textbox1:"ほえほえ",textbox2:"はにゃ~ん"})と値を初期化できたり。

クラスはたくさんあって、それぞれ機能が違うのでそこは調べてください☆

Dojo基礎文法最速マスター ~JavaScript編~

何はともあれまずは読み込み。 Google AJAX Libraries APIならダウンロード&インストール不要。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"> </script>
以降はJavaScriptの説明になるので、<script type="text/javascript">~</script>内に書きます。
Dojoは細かくモジュール分けされているので、必要なモジュールは読み込む必要があります。
dojo.require("dijit.form.Button");
などなど。 JavaScriptとhtml読み込み完了後に処理をするにはdojo.addOnLoad()を使います。
dojo.addOnLoad(function(){ ...; // やりたいこと });
JavaScriptについてはほとんど説明することはありません。
というのもこれに続くHTML編とCSS編の説明が必要になるからです。