全サンプル共通のコントローラーのソースコード
次にコントローラーのソースコードを見てみます。前述のとおり、このソースコードは、全サンプル共通で利用されます。
var cart = new Object();
// コントローラー
cart.EffectiveCartController = Class.create({
initialize: function() {
Event.observe(window, 'load', this.onLoadWindow.bind(this));
},
// ページが読み込まれたとき
onLoadWindow: function() {
// 数量セレクトのハンドラ設定
$$('.item select').each(function(select) {
Event.observe(select, 'change',
this.onChangeQuantity.bind(this));
}.bind(this));
// 削除ボタンのハンドラ設定
$$('.item button').each(function(button) {
Event.observe(button, 'click',
this.onClickDelete.bind(this));
}.bind(this));
},
// 数量が変更されたとき
onChangeQuantity: function(e) {
// 合計金額の変更をビューに依頼
cart.EffectiveCartView.updateSum();
},
// 削除ボタンがクリックされたとき
onClickDelete: function(e) {
//e.targetは<button id="delete1">など正規表現でid値を抜き出す
e.target.id.match(/delete(\d)/);
var id = RegExp.$1;
// 商品の削除と合計金額の変更をビューに依頼
cart.EffectiveCartView.deleteItem(id);
}
});
new cart.EffectiveCartController(); |
■ イベントハンドラで行われていること
コントローラーには、これまでの連載と同様にイベントハンドラの設定および、イベントハンドラを記述します。イベントハンドラ内では、次のように処理を委譲します。
- アプリケーションロジック→モデルのクラスへ委譲
- 描画ロジック→ビューのクラスへ委譲
今回は、「商品数量変更」「削除ボタン押下」の2つのイベントそれぞれのケースでビューを呼び出しています。
prototype.jsのイベントハンドラの設定方法などについては、連載第2回「prototype.jsでYouTubeをインクリメンタルサーチ」でも解説をしていますので、こちらも参照してください。
■ CSSセレクタによるDOM要素検索
下記ソースコードの、「$$()」は、prototype.js 1.6.0で新しく追加された、CSSセレクタによるDOM要素検索の記述です(参考)。
$$('.item select').each(function(select) {
Event.observe(select, 'change', this.onChangeQuantity.bind(this));
}.bind(this)); |
それでは、以降から各サンプルのビューのソースコードを見ながら、script.aculo.usの使用方法について解説を行っていきます。
エフェクトのないサンプルのビュー
まず、冒頭で紹介したエフェクトが何もないビューのソースコードを見てみましょう。
cart.EffectiveCartView = {
// アイテムを削除する
deleteItem: function(id) {
$("item" + id).remove();
this.updateSum();
},
// 合計金額を更新する
updateSum: function() {
var sum = cart.EffectiveCart.getSum();
$("cost").innerHTML = sum;
}
} |
「削除」ボタンを押された場合は、その行を丸ごと消し、その後、合計金額を更新する、という実装になっています。合計金額の更新は、innerHTMLに代入をするだけです。
数量を変更した場合は、合計金額を更新するだけです。モデルクラスのgetSum()メソッドをビューから呼び出して、合計金額を取得しています。
コアエフェクトの使用例
■ サンプル【1】合計金額が変更されたら強調表示する
次に、合計金額が変更されたら、その個所を強調表示してみます。
これは、$("cost")に、合計金額をセットした後、下記のように呼び出すことで実現しています。
updateSum: function() {
var sum = cart.EffectiveCart.getSum();
$("cost").innerHTML = sum;
new Effect.Highlight("cost",
{startcolor:'#9999ff',
endcolor:'#ffffff',
duration: 3,
fps: 10,
delay: 0})
} |
■ コアエフェクトの種類
上記、「Effect.Highlight」などを、script.aculo.usでは、「コアエフェクト」と呼んでいます(参考「Core Effects in script.aculo.us wiki」)。コアエフェクトには次の種類があります。
表1 コアエフェクトの種類
|
コアエフェクト名 |
説明 |
|
Effect.Opacity |
透明度の変化 |
Effect.Scale |
サイズの変化 |
Effect.Morph |
任意のパラメータの変化 |
Effect.Move |
表示位置の変化 |
Effect.Highlight |
背景色の変化 |
Effect.Parallel |
複数パラメータの同時変化(詳しくは後述) |
|
■ コアエフェクトの構文
エフェクトは、次の構文で利用できます。
new Effect.EffectName(element, required-params, [options]); |
- element
エフェクトを適用する対象の要素を指定
- required-params
多くの場合指定が不要だが、一部のエフェクトで必要になる場合がある。どのような値を指定するかは、エフェクトごとに異なる
- options
ハッシュを指定。次の値が指定可能
- duration:エフェクトの長さを秒数で指定
- fps:アニメーション時の、1秒当たりのフレーム数を指定。この値が多きければ大きいほど動きは滑らかになるが、その分負荷が掛かる
- transition:後述
- from:エフェクト開始前のパラメータの値
- to:エフェクト完了後のパラメータの値
- sync:後述
- queue:後述
- delay:エフェクトが開始されるまでの時間を秒数で指定
- direction:transitionの向きを指定。「top-left」「top-right」「bottom-left」「bottom-right」「center」が指定可能。「Grow」と「Shrink」のエフェクトのみで使用される
エフェクトのコールバックの使用例
■ サンプル【2】削除行をフェードアウト後、合計金額を変更
次に、「削除」ボタンを押されたら、その行をフェードアウトした後に、合計金額を変更するようにします。
このような動作にするために、ビューの削除時の描画方法を次のように修正しました。
deleteItem: function(id) {
new Effect.Opacity("item" + id,
{from: 1.0,
to: 0.0,
afterFinish: function() {
$("item" + id).remove();
this.updateSum();
}.bind(this)});
}, |
コアエフェクトのEffect.Opacityを使用して、削除された行の透明度を落とすようにしています。実際の削除処理は、「afterFinish」の中で行っています。この「afterFinish」を「コールバック」といいます。
■ エフェクトのコールバック
エフェクトの引数「option」には、コールバックを指定できます。エフェクトの進行状況に応じて各コールバックの呼ばれるタイミングが違います。
表2 コールバックの種類
|
コールバック名 |
説明 |
|
beforeStart |
エフェクトがスタートする前に呼ばれる |
beforeUpdate |
エフェクトを実行中の描画ループ中の各更新前に呼ばれる |
afterUpdate |
エフェクトを実行中の描画ループ中の各更新後に呼ばれる |
afterFinish |
エフェクトが完了した後に呼ばれる |
|
「サンプル【2】」では、afterFinishコールバックの中で、DOM要素「$("item" + id)」の削除を行っています。これにより、エフェクトが完了してから要素が削除されるようになります。
さらに次ページでは、コンビネーションエフェクト、Queue、Parallelの使用例を解説します。