Maple: Ajax
DHTML ほとんど書けないよ〜という貴方も少し背伸びをすればみんな憧れ Ajax！という胡散臭い形でなんとかしてみようという試みです。
コードずらずらで長ったらしいのでご注意を。
まずは Ajax 抜きに足し算プログラムを用意。内容としてはなんてことはない、二つの数字を入力してそれを足すだけのプログラム。
● SumDefault_Form
module
<?php
class SumDefault_Form
{
function execute()
{
return 'success';
}
}
?>
maple.ini
[View] success = SumDefault/form.tpltemplate
<html> <head></head> <body> <form method="POST" action="index.php"> <input type="hidden" name="action" value="SumDefault_Done"> <input type="text" name="foo" id="foo" size="3"> + <input type="text" name="bar" id="bar" size="3"> <input type="submit" value="="> </body> </html>
● SumDefault_Done
module
<?php
class SumDefault_Done
{
var $foo;
var $bar;
var $baz;
function execute()
{
$this->baz = $this->foo + $this->bar;
return 'success';
}
}
?>
maple.ini
[View] success = SumDefault/done.tpltemplate
<html>
<head></head>
{$action.foo|escape:"html"} + {$action.bar|escape:"html"} = {$action.baz|escape:"html"}
</body>
</html>
その1. HTML_AJAX を使ってみる
PEAR に登場した HTML_AJAX を Maple 内部で使ってみるというパターン。ということで早速 Maple Filter を作ったのである。
Filter_HTMLAjax.class.php
コードチェンジはこんな感じ。非 Ajax からの変更箇所を朱色にしてみた。
● SumAjax1_Form
module
<?php
class SumAjax1_Form
{
function execute()
{
return 'success';
}
}
?>
maple.ini
[View] success = SumAjax1/form.tpltemplate
<html>
<head>
<script type='text/javascript' src="index.php?action=SumAjax1_Done"></script>
{literal}
<script type='text/javascript'>
var sum = new sumajax1_done();
function add() {
var baz = document.getElementById('baz');
baz.value = sum.add(document.getElementById('foo').value,
document.getElementById('bar').value);
}
</script>
{/literal}
</head>
<body>
<input type="text" name="foo" id="foo" size="3">
+
<input type="text" name="bar" id="bar" size="3">
<input type="submit" onClick="add();" value="=">
<input type="text" name="baz" id="baz" size="3">
</body>
</html>
● SumAjax1_Done
module
<?php
class SumDefault_Done
{
var $foo;
var $bar;
var $baz;
function execute()
{
$this->baz = $this->foo + $this->bar;
return 'success';
}
function add($foo, $bar)
{
$this->foo = $foo;
$this->bar = $bar;
$this->execute();
return $this->baz;
}
}
?>
maple.ini
[HTMLAjax]
簡単に書くと、Filter_HTMLAjax を、非同期通信先のアクションに記述し、またそのアクションに、javascript の関数として突付けるラッパーメソッドを別途準備。execute() メソッドの中身を一切変えずに適応可能。
あとは実際に行動を起こすテンプレートに、ボタンを押した際に実行する javascript の関数を準備。この関数の中で使用している add() が、Done クラス内にある add() メソッドとイコールになっている (HTML_AJAX がそのようにしてくれる。)
一見するとほとんど知識なく適応が可能なもの、実は Maple 内部では少々気持ち悪い動作になっていて (HTMLAjax フィルタの途中で、後に存在しているアクションを無視して直接返していたりとか) あんまりよろしくない。
加えて今ならばもっとよいものがあるだろう！ということで次。
その2. prototype.js を使ってみる
prototype.js に Ajax オブジェクトが既に存在しているので、これを使う。これも早速 Filter 作成。Core については後述、というか、実際どう使っているかは、サンプルソースを見れば恐らく一目。
Filter_Prototype.class.php
● SumAjax2_Form
module
<?php
class SumAjax2_Form
{
function execute()
{
return 'success';
}
}
?>
maple.ini
[Prototype] add.action = SumAjax2_Done add.parameter = foo,bar add.result = response [View] success = SumAjax2/form.tpltemplate
<html>
<head>
<script type='text/javascript' src="../prototype-1.4.0.js"></script>
<script type='text/javascript'>
{$Prototype->makeAjaxRequest('add', 'index.php')}
</script>
</head>
<body>
<input type="text" name="foo" id="foo" size="3">
+
<input type="text" name="bar" id="bar" size="3">
<input type="button" onClick="add();" value="=">
<span id="response"></span>
</body>
</html>
● SumAjax2_Done
module
<?php
class SumAjax2_Done
{
var $foo;
var $bar;
var $baz;
function execute()
{
$this->baz = $this->foo + $this->bar;
return 'success';
}
}
?>
maple.ini
[View] success = SumAjax2/done.tpltemplate
<input type="text" value="{$action.baz|escape:"html"}" size="3">
prototype.js には、サーバレスポンスが整形済みの HTML の内容を特定のブロックに描写するという機構が簡単に利用できてしまうので、これを使ってみた。javascript を本気でグリグリいじってデザインできてしまう人ならば関係なさそうだけども、そうじゃない人にとっては結構有り難い機能で、テンプレートを使用してそこで整形し、その内容を返せばあとは勝手に指定した場所に埋め込んでくれる。
Core モジュールとして作成した Prototype.class.php は、リクエストパラメータを作り、サーバへリクエストし、指定した場所へ格納するという一連の流れを行う javascript 関数を作るために準備してみた。あとは SumAjax2_Form の maple.ini を見てもらえれば分かるとおり、ある関数においてそのパラメータ名、投げる先のアクション、レスポンス内容の格納先を指定するということをしてる。本気で DHTML のクライアントプログラムを作るならば、やっぱり自分で script を書かなければならないけれども、簡単な (しかもよくあるような) サーバクライアント通信を非同期で行いたいだけならば、これだけでいいような気がせんでもないですが、如何せん使わないと何ともいえなさそう。
ということでその１、その２とありまして、基本 2 だけで OK な感じですが、2 を作る時間のウン(十?) 倍、1 にかけてしまったので、とりあえずやってみたアピールだけはしっかりと。prototype.js 最高だね。
トラックバック(0)
このブログ記事を参照しているブログ一覧: Maple: Ajax
このブログ記事に対するトラックバックURL: http://hatotech.org/mt-admin/mt-tb.cgi/581
コメントする