だいぶ 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)
|
カテゴリ
新型コロナウイルス 主インデックス Haskell 記事リスト 圏論記事リスト 考えるということのリスト 考えるということ ラッセルのパラドックス Haskell Prelude Ocaml ボーカロイド 圏論 jQuery デモ HTML Python ツールボックス XAMPP Ruby ubuntu WordPress 脳の話 話のネタ リンク 幸福論 キリスト教 心の話 メモ 電子カルテ Dojo JavaScript C# NetWalker ed と sed HTML Raspberry Pi C 言語 命題論理 以前の記事
最新のトラックバック
最新のコメント
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||