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

シンプル版はじめてのDojo

前回の管理人のはじめてのDojoはサンプルのコピペを変更しただけのものだったが、それでも SplitContainer の style 属性にサイズを設定しないと動かないのを発見するのに相当苦労した。今回のもの(下記のコード)は余分なファイルやライブラリを使わない、シンプルなものだ。コードも理解できないお約束があまりないはずだ。この単純なコードを動かすのに苦労したのは、SplitContainer に style 属性でサイズを指定しなければならないのを知らなかったからだ。

属性の値をいろいろと変えてみたが、思ったように動作してくれるようになった。Dojo を使うときのコツはウィジェットの属性の意味を知ることのようだが、文書が少ないのでなかなか大変だ。

HTMLを記述するような感覚で Widget を記述できるという Dojo の使いやすさは際立っていると思う。後は、誰かが API の解説や Dojo 入門の日本語の文書を書いてくれるといいのだが、Dojo の便利さが認知されれば、それもそう待たなくてもいいかもしれない。それまでは、サンプルのコピベでしばらく遊んでみよう。

そういう訳で Dojo の記事はこれで終わり。こう自分に言い聞かせておかないと、Dojo には他にも Ajax や JSON を取り扱うための API やドラッグアンドドロップの機能など気になる機能が満載なので泥沼にはまりそうだからだ。

シンプル版のコードは次のようになる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="dj_gecko"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First Dojo</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.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>

<body class="tundra">

<div widgetid="rightPane" dojotype="dijit.layout.SplitContainer" id="rightPane" orientation="horizontal" sizerwidth="5"
activesizing="true" style="width: 100%; height: 600px">
<div title="" widgetid="listPane" id="listPane" dojotype="dijit.layout.ContentPane" sizemin="20" sizeshare="20">
My First Dojo
</div>

<div title="" widgetid="message" id="message" dojotype="dijit.layout.ContentPane" sizemin="20" sizeshare="50">
<center><h1>Hello, There</h1></center>
<center><h2>What a wonderful Dojo world.</h2></center>
</div>
</div>
</body></html>
by tnomura9 | 2007-11-17 06:35 | Dojo | Comments(0)
<< レイアウトコンテナ はじめての Dojo >>