第7回ではタスクの管理に必要な機能を実装しました。今回はタスクの追加を簡易的にAjax化してみます。
タスクの追加をAjax化する
CakePHPにはWebアプリケーションのAjax化を支援するAJAXヘルパーというヘルパーがあります。これを使うことでよくあるAjax処理をJavaScriptをまったく記述せずに実装することができます。
必要なJavaScriptライブラリの入手
AJAXヘルパーではJavaScriptライブラリのPrototypeとscript.
/app/
builder.js
controls.js
dragdrop.js
effects.js
prototype.js
scriptaculous.js
slider.js
unittest.js
Tasksコントローラの修正
Ajax化にあたって，
app/
<?php
class TasksController extends AppController {
var $name = 'Tasks';
var $uses = array('Task');
var $helpers = array(
'Javascript',
'Ajax',
);
function index() {
$this->set('yet_tasks', $this->Task->findAllByStatus('yet', null,
'Task.created ASC'));
$this->set('done_tasks', $this->Task->findAllByStatus('done',
null, 'Task.modified DESC'));
}
function add() {
if (empty($this->data)) return;
$this->Task->save($this->data, true, array('content', 'created',
'modified'));
$this->set('yet_tasks', $this->Task->findAllByStatus('yet', null,
'Task.created ASC'));
$this->layout = 'ajax';
}
function done($id) {
if ($this->Task->findById($id)) {
$this->Task->id = $id;
$this->Task->save(array('status' => 'done'));
}
$this->redirect('/tasks');
}
function edit($id) {
$task = $this->Task->findById($id);
if (!$task) {
$this->redirect('/tasks');
return;
}
if (!empty($this->data)) {
$task['Task']['content'] = $this->data['Task']['content'];
$this->Task->save($task);
}
$this->set('task', $task);
}
function del($id) {
$this->Task->del($id);
$this->redirect('/tasks');
}
}
この変更のポイントは2つです。TasksControllerクラスに追加したメンバ変数の$helpersでは、JavaScriptヘルパーとAjaxヘルパーの使用を明示しています。今まで使用してきたHTMLヘルパーは明示しなくても自動的に定義されていましたが，
var $helpers = array(
'Javascript',
'Ajax',
);
addアクションの最後の行ではレイアウトをAjax用に変更しています。CakePHPで用意されたajaxレイアウトはアクションのビュー出力以外の要素を一切表示しないためAjax用の出力に適したレイアウトとなっています。
$this->layout = 'ajax';
