glow.events
イベント操作に関するメソッドが用意されている。
- addListener … イベントリスナを登録
- fire … 指定したオブジェクトに対して特定のイベントを発生させる
- removeAllListeners … 指定したエレメントからすべてのイベントリスナを削除する
- removeListener … addListenerで登録したイベントリスナを削除する
glow.forms
HTMLフォームに入力されたデータのバリデートにあたり、有用なクラスが用意されている。
- Form … バリデートテストするためのオブジェクトを生成する
- ValidateResult … バリデート実行後の結果(errorCount, eventName, fields)にアクセスするためのクラス
サンプルコードは次のとおり。
form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Hello, Glow! / glow.forms.Form</title>
<script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
<script type="text/javascript">
<!--
glow.ready
(
function()
{
var myFirstForm = new glow.forms.Form("#registUserForm");
myFirstForm.addTests
(
'name', // ユーザ名
[
'required', // required: 入力必須
{
message: 'ユーザ名はかならず入力してください'
}
]
).
addTests
(
'mail', // メールアドレス
[
'required', // required: 入力必須
{
message: 'メールアドレスはかならず入力してください'
}
],
[
'isEmail', // isEmail: メールアドレスのフォーマットであること
{
message: '不正な形式のメールアドレスです'
}
]
).
addTests
(
'age', // 年齢
[
'required', // required: 入力必須
{
message: '年齢はかならず入力してください'
}
],
[
'isNumber', // isNumber: 数値であること
{
message: '年齢は半角数値で入力してください'
}
]
);
}
);
-->
</script>
</head>
<body>
<h1>ユーザ登録</h1>
<form id="registUserForm">
<table>
<tr>
<th>氏名</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="text" name="mail"></td>
</tr>
<tr>
<th>年齢</th>
<td><input type="text" name="age"></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
</body>
</html>
フォームはユーザの登録画面を意識している。全フィールド入力必須、メールアドレスは正しいメールアドレス形式であること、年齢は数値であることをチェックしている。Webブラウザで動作を確認しよう。
フォームのサブミット時にあらかじめ設定したバリデートをおこなう。設定できるバリデートの種類はglow.forms.testsを参照されたい |
このようにわずかなコードで簡単にバリデートをおこなえるようになる。ぜひ使いこなせるようになっておきたい機能だ。
glow.lang
オブジェクトのクローン生成や文字列操作といった有用なメソッドが用意されている。
- apply … あるオブジェクトから別のオブジェクトにプロパティをコピーする
- clone … オブジェクトを複製する
- extend … クラスの継承をおこなう
- hasOwnProperty … 指定した名前のプロパティがオブジェクトに存在しているかを特定
- interpolate … オブジェクトを指定したテンプレート表記で展開する
- map … 配列の各要素にたいして指定した関数を実行、その結果を返す
- replace … 文字列を置換する。正規表現での指定のほかに、関数も指定可能
- toArray … オブジェクトを配列にする
- trim … 文字列の前後にある空白を取りのぞく
glow.net
サーバ間とのデータ通信にやくだつメソッドが用意されている。
- get … 指定したURLにGETリクエストを発行する
- loadScript … 指定したURLにリクエストを発行し、結果をスクリプトとしてロードしページ最下部に追加する
- post … 指定したURLにPOSTリクエストを発行する
glow.tweens
アニメーションのセットとして、14種のメソッドが用意されている。各種の動作については、デモが豊富なUsing Tweensを参照されたい。
やや駆け足気味だが、Glowの基礎機能とも呼べるモジュール群を紹介した。続いてGlowに用意されている、便利なウィジェット集を紹介していこう。