[javascript] Dojo: Hello World!
http://dojo.jot.com/Tutorials/HelloWorld
2. Getting Started
<html> <head> <title>Dojo: Hello World!</title> <script type="text/javascript" src="/js/dojo/dojo.js"></script> </head> <body> </body> </html>
dojo.jsがブラウザから見えることを確認。
3. Creating a Button Widget
Dojoのボタンは3つの状態を使用可能（mouseOut, mouseOver, and mouseDown）。
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>最初のdojo.requireはwidgetの管理関数群をインクルードするようにDojoに命令する（すべてのwidgetをロードするってことじゃないよ！）。2番目のdojo.requireはButton widgetをロードするようにDojoに命令する。2番目のやつを書かないとボタンのコードはDojoに評価されないから単なるHTMLのボタンになる。
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
dojoType属性はページがロードされるときに要素をどうやって処理するかをDojoに伝えるために使う。widgetIdは普通にidでも機能に影響はない。
4. Connecting an Event to the Widget
クリックしたときに何かしたいって？単にonClickイベントハンドラを使ってもいいけどDojoのイベントシステムを使おう！
まずはイベントモジュールをインクルードする。
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>event.*は必要なイベント関数をインクルードするようにDojoに指示する。
<title>Dojo: Hello World!</title>
<script type="text/javascript" src="/js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function onClickHelloButton() {
alert('You pressed the Hello button');
}
function init() {
var helloButton = dojo.widget.byId('helloButton');
//var helloButton = document.getElementById('helloButton');
dojo.event.connect(helloButton, 'onClick', 'onClickHelloButton');
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<button dojoType="Button" id="helloButton">Hello World!</button>
</body>
</html>dojo.addOnLoad(init);は正常にロードできたときにinit関数を呼ぶようにDojoに指示する。dojo.widget.byId('helloButton');はButtonWidgetへの参照を取得する。document.getElementByIdはうまく動かないので注意（DojoがDOMをいじくるから）。試しに使ってみたら
FATAL: bad srcObj for srcFunc: onClick
って表示された。
5. Reading Data from the Server
dojo.io.bindを使えばいい。
dojo.require("dojo.io.*");コールバック関数を定義。
function helloCallback(type, data, evt) {
if (type == 'error') {
alert('Error when retrieving data from the server!');
}
else {
alert(data);
}
}
- type
- 成功すると'load'失敗すると'error'
- data
- サーバーから送られてきたデータ
- evt
- Dojoのイベントオブジェクト
ボタンクリックをサーバーリクエストに関連付け。
function onClickHelloButton() {
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
});
} HTMLと同じところにresponse.txtを作成。
Welcome to the Dojo Hello World Tutorial.
ようこそDojoこんにちは世界チュートリアルへ。
日本語も大丈夫。
6. Sending Data to the Server Using GET
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
<br>
Please enter your name: <input type="text" id="name"> function onClickHelloButton() {
dojo.io.bind({
url: 'getresponse.cgi',
handler: helloCallback,
content: {
name: dojo.byId('name').value
}
});
}サーバーに渡すパラメータをcontentに指定する。dojo.io.bindはデフォルトでGETになる。
サーバー側はこうした。
#!/usr/bin/perl
use strict;
use warnings;
use CGI;
my $q = CGI->new();
$q->charset('utf-8');
do_work($q);
sub do_work {
my $q = shift;
my $name = $q->param('name');
my $method = lc( $ENV{REQUEST_METHOD} );
print $q->header();
if ( $method eq 'get' ) {
print "[get] Hello $name, welcome to the world of Dojo!";
}
else {
print '[post] Hello $name, welcome to the world of Dojo!";
}
}
1;ちゃんとGETで来てることを確認。
でも日本語を入力すると
につじ
とかになる。えっと、、なんでだっけ？
7. Sending Data to the Server Using POST
POSTするフォーム。
<form id="myForm" method="POST">
Please enter your name: <input type="text" name="name">
</form>contentの代わりにformNodeを使用。
function onClickHelloButton() {
dojo.io.bind({
url: 'getresponse.cgi',
handler: helloCallback,
formNode: dojo.byId('myForm')
});
}
-
- -
http://takatoshi.dyndns.org/~takatoshi/examples/dojo/helloworld.html
-
- -
ここも参照。
http://manual.dojotoolkit.org/io.html
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book8
