人気ブログランキング | 話題のタグを見る

スライダー

だいぶ Dojo の発想が分かってきた。要するに HTML の div 要素や span 要素をオブジェクトにしてしまおうということだ。div 要素の dojoType 属性にウィジェットのクラスを設定することで、その div 要素をウィジェットにすることができる。また、ここのウィジェットのインスタンスは Dom の id 属性で指定できる。例えば、

<div dojoType="dijit.someWidget" id="WidgetId"></div>

というウィジェットを指定するには、dojo.byId('WidgetId') で指定できる。そうすると、たとえば、dojo.byId('WidgetId').value などでそのウィジェットのインスタンス変数の値を取り出すことができる。

要するに、Dojoでは div の dojoType 属性にクラス名を設定することで、a = new ClassName のようにクラスからインスタンスを作るのと同じことをさせているのだ。そういう見方をすると、ウィジェットのカスタマイズは、ウィジェットのフィールドの設定でできるし、ウィジェットのコントロールはウィジェットのクラスの関数でできることがわかる。ウィジェットを操作するのにほとんど JavaScript のコーディングなしで済ませることができる。

このような方法の利点は、リッチクライアントの設計を HTML を作る要領でできるということだ。どうしてそれが便利なのかというと、画面の設計をするときにいちいち JavaScript の置き場所を考えないでも良いし、また、コンテナを使った画面のレイアウトの設計の場合のように、階層性を持ったオブジェクトの構造が簡単に記述できる。つまり、HTML 本来の階層構造を記述する能力を取り込んでいるのだ。

Dojo は JavaScript のオブジェクト指向の性質をフルに活用して、それ自身高度にオブジェクト指向なツールキットに仕上げている。なんかすごくかっこいい設計だ。

次のサンプル slider.html はその辺の仕組みを利用して、スライダーの値を表示できるようにしている。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Slider Example 1</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Slider");
</script>
</head>
<body class="tundra">
<h1 align="center">Domo of The Sliders</h1>
<div id="horizontalSlider" dojoType="dijit.form.HorizontalSlider"
value="0" minimum="-10" maximum="10" discreteValues="11"
intermediateChanges="true"
onChange="dojo.byId('horizontalSlider').value = arguments[0];dojo.byId('showValue').innerHTML = arguments[0];"
></div>
<h1 align="center"><div id="showValue">0</div></h1>
<div id="horizontalSlider2" dojoType="dijit.form.HorizontalSlider"
value="0" minimum="-10" maximum="10"
intermediateChanges="true"
onChange="dojo.byId('horizontalSlider2').value = arguments[0];dojo.byId('showValue2').innerHTML = arguments[0];"
></div>
<h1 align="center"><div id="showValue2">0</div></h1>
</body></html>
by tnomura9 | 2007-11-20 22:40 | Dojo | Comments(0)
<< FireBug 速習 Dojo ウィジェット >>