カテゴリ:Dojo( 32 )

ウェブアプリケーションの作り方

作れるものならウェブアプリケーションも作ってみたい。しかし、勉強するのは面倒だ。コピベでやれないだろうか。

どうやらできるようなのだ。

まずデスクトップに右クリックで新しいファイルを作り、datetextbox.html という名前にしておく。それから、これをエディタで開いておく。

次に、Dojo Book のこのページを開き、dijit.form.DateTextBox のデモスクリプトをコピーして、先ほどのエディターに貼り付ける。

エディタを終了させて、デスクトップのファイルのアイコンをダブルクリックすると、なんと言うことのないテキストエリアのフォームが表示される。ところが、このテキストエリアをクリックするとあら不思議カレンダーのポップアップが現れる。このカレンダーの日付をクリックするとテキストエリアに日付データが入力されるという次第。

Dojo は、JavaScript のツールキットだ。できたプログラムはクライアントサイドで動くので、WWWサーバがなくても、ローカルの環境で動作させることができる。インターネットエクスプローラではアクティブコンテンツを許可にしないといけない。

もちろんこのファイルはWWWサーバの文書ディレクトリに入れておくと、リモートのブラウザから実行することもできる。

ウェブアプリケーション一丁上がり!!
[PR]
by tnomura9 | 2008-06-13 13:24 | Dojo | Comments(0)

Dojo でプロトタイピング

Dojo の勉強に電子カルテを作っているがとても面白い。

Dojo の機能のうちで最もうれしいのは、画面設計が非常に簡単なのと、ItemFileReadStore で構造的なデータの操作が非常に簡単に出来ることだ。

とくに、ItemFileReadStore の使い勝手の良さは、感涙ものだ。なにしろ、サーバーからのデータの取り込みでやることは、JSONファイルを記述するだけなのだ。そうして、プログラムするときには気づかないが、ItemFileReadStore は、非同期なのだ、データストアーにクエリーを発行しないうちはサーバーからのデータの取り込みは行われない。したがって、初期の画面の表示はかなり速い。使っているほうはそうと知らないうちに Ajax をやっていたことになる。

今のところ、Dojoを使ってASP的なことをするには、サーバーへのデータの書込の情報が足りない。実際にはやられているようだが、セキュリティの面からもあまり情報が多くはないほうがいいのかもしれない。

もちろん、やろうと思ったらそう難しくはないかもしれない。PHPとの連携プログラムは簡単に出来そうだ。また、ItemFileReadStore にはクエリーをサーバーに発行してデータを取り込むタイプもあるし、サーバーとの連携用の extension point もある。

しかし、読み出しだけであってもAjaxの利点を生かしたページを作ったり、プロトタイプを作ってみるためには、JSONファイルを記述するだけで済んでしまうのはなんともありがたいのだ。

遊びで作り始めた電子カルテだがプロトタイプを作ってみて、いろいろなことが分かってきた。実は、現場では電子カルテは厄介者なのだ。電子カルテを使いたくないばかりに早期退職するメディカルスタッフも多くいるし。紙ののカルテに比べて入力の手間が倍以上かかる。また、患者さんのベッドサイドへ気軽に持っていくというような機動性もない。入力に気をとられて、パソコンの画面ばかりを見ることになるので、患者さんにも不評だ。現在の医療現場の混乱に一役買っているのではないかと思うこともある。

しかし、電子カルテのプロトタイプを自分で作ってみて、電子カルテの良い面も見えてきた。検索が速いので、カルテが見つからずに探し回るということがない。ひとつのデータから色々な帳票が自動的にできる。たとえば、患者検索のデータはそのままカルテの記入や紹介状に利用できる。検査のオーダーをすると、データの結果表やタイムテーブルが自動的にできる。薬を処方すると、薬歴情報や副作用情報が同時に作成される。

それでも市販の電子カルテを使いたいという気持ちになれないのは、現場の人間が求めるものと、プログラムの専門家が設計したユーザーインタフェースにまだかなりのすれ違いがあるからではないだろうか。

カルテを作成する作業は切符を販売するような作業と違って、作業の種類も多く入力もどうしても複雑になりがちだ。コンピュータでそれを実現しようとすると目がちかちかするようなボタンとメニューで画面が埋め尽くされてしまう。ひとつの病気を扱うのに、診察所見や写真の情報や血液検査の結果や、体温などの生理学的な数値や、病歴やこれまでの経過など参照する情報は多岐に渡る。これらの情報を表示したり入力したりするのにはパソコンの画面は狭すぎるのだ。

こうして、作業の複雑さに対応するコントロールのためのスペースが画面の大部分を占め、肝心な情報は真ん中のほうの狭いスペースに押し込められてしまう結果になる。また、コントロールを隠してプルダウンメニューにするとそれを覚える手間とメニューをいちいち開く手間が馬鹿にならない。

Dojo の TabContainer と SplitContainer と AccordionContainer はそのような状況を改善してくれるかもしれない。これらの操作性はちょうど紙を重ねて使っているのと同じ直感的な操作性を与えながら、画面の狭さを補っている。タブレットコンピュータでペンを使って操作できればもっといい。左手で患者さんの脈を取りながら、右手でカルテを記入するというのはよくある動作だからだ。

プログラムを作るほうは現場の人間が何を欲しているのか、どういうことに不便を感じるのか完全に理解するのは難しいのだ。これらの感覚は言葉や論理では表現できにくいからだ。現場の人間がこういうものがほしいというプロトタイプをつくり、プログラマがセキュリティなどの技術的な問題を厳密に解決するというパターンが最も望ましいのではないだろうか。

いままでは、現場の人間がプロトタイプであれプログラムを作るというのは不可能だったが、Dojoの画面のレイアウトの直感的な分かりやすさや、JASONファイルを用いたデータ取り込みの容易さは、現場の人間がある程度動くプロトタイプを作るということを可能にしてくれるのではないかと思う。
[PR]
by tnomura9 | 2007-12-03 00:03 | Dojo | Comments(0)

dojo.data の使い方 その7(ItemFileWriteStore)

ItemFileReadStore に読み込まれたデータは read only だ。読み出しはできるが、データの内容を変更することはできない。

ItemFileWriteStore オブジェクトは、ItemFileReadStore の機能を受け継ぎながら、data store にデータの書込や削除ができる。

データの書込は、store.newItem() 関数で新しい item を作成し、store.save() 関数でそれを確定するという手順で行う。

データの削除は、store.fetch() 関数で、削除する item を取り出し、store.deleteItem(item) 関数で削除を実行し、store.save() 関数で確定するという手順になる。

次のサンプルは item の挿入と、削除を行う。

ファイル名: data_step6.html (alert,onClickは全角英数 contries2.jsonを使用)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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("dojo.data.ItemFileWriteStore")
dojo.require("dijit.form.Button");

    </script>

<script type="text/javascript">
var gotList = function(items, request){
    var datalist = "";
    for (var i = 0; i < items.length; i++){
     datalist += store.getValue(items[i], 'name') + '<br>';
    }
    dojo.byId('display').innerHTML = datalist;
}

function saveFailed(){
    alert("Save failed.");
}

function addItem() {
    store.newItem({abbr: 'us', name: 'United States of America', capital: 'Washington DC'});
    store.save({onComplete: foo, onError: saveFailed});
};

var delItem = function (items, request) {
    for (var i = 0; i < items.length; i++){
        store.deleteItem(items[i]);
    }
    store.save({onComplete: foo, onError: saveFailed});
}

function deleteItem() {
    store.fetch({query: {name:"Egypt"}, queryOptions: {ignorecase: true}, onComplete: delItem});
}

function foo() {
    store.fetch({query: {name:"*"}, onComplete: gotList});
}

dojo.addOnLoad(foo);
</script>
</head>

<body class="tundra">
<div dojoType="dojo.data.ItemFileWriteStore" url="countries2.json" jsId="store"></div>
<button dojoType="dijit.form.Button" onClick="addItem()">Add Item</button>
<button dojoType="dijit.form.Button" onClick="deleteItem()">Del Item</button>
<div id="display" align="center"></div>
</body>
</html>

ファイル名: countries2.json

{ identifier: 'abbr',
    label: 'name',
    items: [
        { abbr:'ec', name:'Ecuador',         capital:'Quito' },
        { abbr:'eg', name:'Egypt',             capital:'Cairo' },
        { abbr:'sv', name:'El Salvador',     capital:'San Salvador' },
        { abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
        { abbr:'er', name:'Eritrea',         capital:'Asmara' },
        { abbr:'ee', name:'Estonia',         capital:'Tallinn' },
        { abbr:'et', name:'Ethiopia',         capital:'Addis Ababa' }
]}
[PR]
by tnomura9 | 2007-12-01 21:33 | Dojo | Comments(0)

dojo.data の使い方 その6(sort)

dojo.data のデータのソートは簡単だ。fetch() 関数の引数のオブジェクトの sort 属性にソートしたいキーの属性名を設定するだけだ。次のデータは item に name と ailse の二つの attribute がある。

ファイル名: pantry_spices.json

{ identifier: 'name',
items: [
        { name: 'Adobo', aisle: 'Mexican' },
        { name: 'Balsamic vinegar', aisle: 'Condiments' },
        { name: 'Basil', aisle: 'Spices' },
        { name: 'Bay leaf', aisle: 'Spices' },
        { name: 'Beef Bouillon Granules', aisle: 'Soup' },
        { name: 'Vinegar', aisle: 'Condiments' },
        { name: 'White cooking wine', aisle: 'Condiments' },
        { name: 'Worcestershire Sauce', aisle: 'Condiments' }]}

このデータを aisle で降順にソートするプログラムが次のサンプルだ。出力は FireBug のコンソールに出るので、F12 キーを押してコンソールを表示しておく必要がある。

ファイル名: data_step6.html (onClick,alert は全角英数)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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("dojo.data.ItemFileReadStore")
dojo.require("dijit.form.Button");

    </script>

<script type="text/javascript">
//Define a callback that fires when all the items are returned.
var gotList = function(items, request){
    for (var i = 0; i < items.length; i++){
     console.debug(pantryStore.getValue(items[i], "aisle") + " : " + pantryStore.getValue(items[i],"name"));
    }
}
var gotError = function(error, request){
    alert("The request to the store failed. " + error);
}
function foo() { pantryStore.fetch({sort: [{attribute: "aisle", descending: "true"}], onComplete: gotList, onError: gotError,}); }
</script>
</head>

<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore" url="pantry_spices.json" jsId="pantryStore"></div>
<button dojoType="dijit.form.Button" onClick="foo()">Click me!</button>
</body>
</html>
[PR]
by tnomura9 | 2007-12-01 16:31 | Dojo | Comments(0)

dojo.data の使い方 その5(階層性のデータ)

dojo.data は階層性のデータも扱うことができる。

次のサンプルJSONデータは、children という attribute に子アイテムのリストを設定している。

ファイル名: poptarts.txt

{ label: 'name',
    identifier: 'name',
    items: [
        { name:'Fruit', type:'category'},
        { name:'Cinammon', type: 'category',
            children: [
                { name:'Cinammon Roll', type:'poptart' },
                { name:'Brown Sugar Cinnamon', type:'poptart' },
                { name:'French Toast', type:'poptart' }
            ]
        },
        { name:'Chocolate', type: 'category'}
    ]
}

この例では子 item を設定するための attribute 名は children になっているが、べつにこの名前でなくても良い。しかし、この名前になっていると、Tree オブジェクトでこの JSON ファイルを利用するときに階層性のデータを表示することが出来る。上のJSONファイルを読み込んで次のような dojo.data.ItemFileReadStore を作成した後、

<div dojoType="dojo.data.ItemFileReadStore"
url="poptarts.txt" jsid="popStore" />

次のようにTreeオブジェクトに上の dojo.data オブジェクトを関連付ける。つまり、Tree オブジェクトの store 属性に dojo.data オブジェクト名を、labelAttr 属性に dojo.data の label 属性の値を設定する。

<div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>

Tree を表示するサンプルプログラムは次のようになる。

ファイル名: tree.html (poptarts.txt が必要)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/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>
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
        dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
        <div dojoType="dojo.data.ItemFileReadStore"
             url="poptarts.txt" jsid="popStore" />
        <div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>
</body>
</html>
[PR]
by tnomura9 | 2007-12-01 15:19 | Dojo | Comments(0)

dojo.data の使い方 その4

前回のサンプルプログラムでは、fetch() 関数を呼んだ後、onComplete イベントが発生したときにコールバック関数を読み出すようにしていた。この場合、コールバック関数には引数として item のリストである items が渡される。

これと違って fetch() 関数を読んだ後、onItem イベントは item がひとつ検索されるたびに発生する。したがって、onItem イベントに結び付けられたコールバック関数は、item がひとつ得られるたびに処理を行うことが出来る。

非同期のプログラムを作成するときは、このようにイベントを契機に動作するコールバック関数をたくさん作ることになる。

onItem イベントで働くコールバック関数を使ったサンプルは次のようになる。

ファイル名: data_step4.html (alert,document,onClick は全角英数。動作には pantry_spices.json ファイルが必要。)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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("dojo.data.ItemFileReadStore")
dojo.require("dijit.form.Button");

    </script>

<script type="text/javascript">

//Define the onComplete callback to write COMPLETED to the page when the fetch has finished returning items.
var done = function(items, request){
    dojo.byId('results').appendChild(document.createTextNode("COMPLETED"));
}

//Define the callback that appends a textnode into the document each time an item is returned.
gotItem = function(item, request) {
    dojo.byId('results').appendChild(document.createTextNode(pantryStore.getValue(item, "name")));
    dojo.byId('results').appendChild(document.createElement("br"));
}

//Define a simple error handler.
var gotError = function(error, request){
    alert("The request to the store failed. " + error);
}

//Invoke the search
function foo() { pantryStore.fetch({onComplete: done, onItem: gotItem, onError: gotError}); }



</script>
</head>

<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore" url="pantry_spices.json" jsId="pantryStore"></div>
<button dojoType="dijit.form.Button" onClick="foo()">Click me!</button>
<div id="results"></div>
</body>
</html>
[PR]
by tnomura9 | 2007-11-30 21:38 | Dojo | Comments(0)

dojo.data の使い方 その3

ItemFileReadStore オブジェクトで検索結果で複数の item を得たい場合は、fetch インスタンス関数を使う。

fetch() 関数は引数に8つの引数 onBegin, onItem, onComplete, onError, start, count, sort および scope を渡すことが出来るが、全部の値を渡す必要はない。必要なものだけを {onComplete: call_back_onComplete, onError: call_back_onError, query: {attribute_name: "keyword" }} のような JavaScript オブジェクトとして渡す。

クエリーの形式は簡単で、{atribute_name: "keyword" } の形式のオブジェクトで表現する。attribute_name は複数指定すると AND 検索することができる。同じ attribute_name で値を違えて指定しても、そのうちのひとつだけが有効になる。

fetch() 関数は非同期で働くので、検索結果の item のリストはコールバック関数に渡される。サンプルプログラムは次のようになる。

ファイル名: data_step3.html (onClick,alert は全角英数なので、コピペのときは半角英数に置き換える必要がある。動作には pantry_spices.json ファイルが必要。)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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("dojo.data.ItemFileReadStore")
dojo.require("dijit.form.Button");

    </script>

<script type="text/javascript">
//Define a callback that fires when all the items are returned.
var gotList = function(items, request){
    var itemsList = "";
    for (var i = 0; i < items.length; i++){
     itemsList += pantryStore .getValue(items[i], "name") + " ";
    }
    alert("All items are: " + itemsList);
}
var gotError = function(error, request){
    alert("The request to the store failed. " + error);
}
function foo() { pantryStore.fetch({onComplete: gotList, onError: gotError, query: {aisle: 'Condiments'}}); }
</script>
</head>

<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore" url="pantry_spices.json" jsId="pantryStore"></div>
<button dojoType="dijit.form.Button" onClick="foo()">Click me!</button>
</body>
</html>
[PR]
by tnomura9 | 2007-11-30 06:24 | Dojo | Comments(0)

dojo.data の使い方 その2

今回は identifier 属性の値で一意的な item を検索する fetchItemByIdentity() 関数を使う。

サンプルプログラムでは結果を FireBug のコンソールに出力するので、FireFoxにFireBugをインストールしなければならない。

FireBugは、JavaScript のオブジェクトの内容を確認したり、デバッグ用のブレークポイントを設定したり、ファイルのアクセス履歴を表示したりなど、多機能で JavaScript のプログラムの開発や、Ajax を開発するためには必須の FireFox のアドオンだ。

FireBug のインストールは、FireFox の「ツール」->「アドオン」->「新しい拡張機能を入手」->『開発者向けツール」->「FireBug日本語版」からダウンロードできる。

fetchItemByIdentity() 関数は ItemFileReadStore オブジェクトのインスタンス関数で、引数に、検索する identifier と、検索結果が見つかったときの onItem イベントで呼ばれるコールバック関数を設定した JavaScript オブジェクトを渡す。onItem イベントが発生すると item はコールバック関数に渡され、ItemFileReadStore オブジェクトの getValue インスタンス関数で item 内の指定した atribute の値を取り出す。

attribute の値を取り出すのに、onItem イベントに対するコールバック関数を設定するという二段構えの手続きになっていてややこしいが、サーバーが応答してくるまでの時間を待たずに他の作業に移ることができる。非同期通信の利点だ。

サンプルプログラムは次のようになる。

ファイル名: data_step2.html (セキュリティのため onClick は全角英数)。その1で使用した pantry_spices.json が必要。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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.Button");
dojo.require("dojo.data.ItemFileReadStore");

    </script>
<script type="text/javascript">
    function onItem(item) {
     console.debug('Vinegar is in aisle ' + pantryStore.getValue(item,"aisle"));
    }
    function getItem() {pantryStore.fetchItemByIdentity({identity: "Vinegar", onItem: onItem}); }
</script>
</head>
<body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore" url="pantry_spices.json" jsId="pantryStore">
<button dojoType="dijit.form.Button"
onClick="getItem()">Click me!</button>
</div>
</body>
</html>
[PR]
by tnomura9 | 2007-11-29 17:57 | Dojo | Comments(0)

dojo.dataの使い方 その1

dojo.data の使い方は、The Book of Dojo の Using Datastores の章に詳しい。しかし、残念ながら、サンプルはコピペでは動かない。そこで、サンプルを変更して動作確認をしたスクリプトを順に掲載する。

今回は、A Simple Data Source のもの。この節では、JSON ファイルのデータを ItemFileReadStore オブジェクトに読み込むための方法を示している。ItemFileReadStore に読み込むための JSON ファイルは、次のような形式になっている。

ファイル名: pantry_spices.json

{ identifier: 'name',
items: [
        { name: 'Adobo', aisle: 'Mexican' },
        { name: 'Balsamic vinegar', aisle: 'Condiments' },
        { name: 'Basil', aisle: 'Spices' },
        { name: 'Bay leaf', aisle: 'Spices' },
        { name: 'Beef Bouillon Granules', aisle: 'Soup' },
        { name: 'Vinegar', aisle: 'Condiments' },
        { name: 'White cooking wine', aisle: 'Condiments' },
        { name: 'Worcestershire Sauce', aisle: 'Condiments' }]}

identifier は一意のデータを持っている attribute 名を示す。実際のデータは、'item' attribute で指定される item のリストだ。item がSQLの row に attribute が column に対応するテーブル形式になっている。

これを読み込んで、ItemFileReadStore オブジェクトとして使用するためには、次のサンプルように HTML の body tag の直下に dojoType="dojo.data.ItemFileReadStore" タイプのオブジェクトを作る。オブジェクトの url 属性には JSON ファイルの url を、jsId 属性には、このオブジェクトを引用する場合の変数名を設定する。

オブジェクトのデータは、Tree オブジェクトや、FilteringSelect オブジェクトで利用することができる。オブジェクトから直接にデータを取り出す方法は次回から述べる。

ファイル名: data_step1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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/dojo.css"
    </style>
    <style type="text/css">
        /* NOTE: for a full screen layout, must set body size equal to the viewport. */
        html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </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("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.FilteringSelect");
    </script>
</head>
<body class="tundra">

<div dojoType="dojo.data.ItemFileReadStore" jsId="pantryStore"
        url="pantry_spices.json"></div>
<div
     name="pantry_item" dojoType="dijit.form.FilteringSelect"
     store="pantryStore"
     searchAttr="name" value="Vinegar" autoComplete="true"
></div>
</body>
</html>
[PR]
by tnomura9 | 2007-11-29 07:48 | Dojo | Comments(0)

Dojo の感想

やっと、ひととおり Dojo がどういうものかをさらってみることができた。印象に残ったのは、オブジェクト指向のウィジェットとHTML形式の記述法の相性のよさだ。業務でプログラムをしている人にとっては馴染みの感覚なのだろうが、自分にとっては今までにないプログラミングの経験だった。

汎用性のあるオブジェクトのカスタマイズと、HTMLによる自由度の高い階層構造の記述の相乗効果で高機能なクライアントがさくさくと出来上がってしまうのには驚かされた。オブジェクト+階層構造はコンピュータと相性がいいのかもしれない。

しかし、個々の部品を階層的に配置して、それぞれの部品についてイベントを契機としたプログラミングをするというのは、古い Mac を使っていた人には、ハイパーカードでおなじみの感覚だ。マシンの非力さと、プログラムを一覧できない不便さもあって、あまりたいしたプログラムはできなかったが、ハイパーカードの発想がいかに先進的なものだったかがいまさらに感じられる。

Dojoはつい最近 1.0.0 がリリースされたばかりで、The Book of Dojo がほとんど唯一の文書だが(ただし、非常に良いドキュメンテーションだ)、これから爆発的に普及していくのではないかという予感がする。
[PR]
by tnomura9 | 2007-11-25 01:00 | Dojo | Comments(3)