テキスト入力
テキストの入力のためのDijitウェブフォーム要素は8つ準備されていますが、これのほとんどが入力された値が適正か(期待された条件を満たしているか)を調べる機能を持っています。
クラス名 | 必要なモジュール | 説明 |
TextBox | dijit.form.TextBox | 基本的なテキストボックス |
ValidationTextBox | dijit.form.ValidationTextBox | 入力が与えられた正規表現にマッチするか調べるテキストボックス |
PasswordTextBox | dijit.form.ValidationTextBox | パスワード入力用テキストボックス(これはDijitの機能ではなく、Zend_Dojoの機能) |
DateTextBox | dijit.form.DateTextBox | 日付入力用のテキストボックス |
TimeTextBox | dijit.form.TimeTextBox | 時間入力用のテキストボックス |
NumberSpinner | dijit.form.NumberSpinner | 数値入力用のテキストボックスで、数値増減用のボタンが付いている |
NumberTextBox | dijit.form.NumberTextBox | 数値入力用のテキストボックス |
CurrencyTextBox | dijit.form.CurrencyTextBox | 金額入力用のテキストボックス |
これらのクラスはすべてTextBoxを継承しており、ValidationTextBox以下のすべてのDijitウェブ要素はValidationTextBoxを継承しています。また、CurrencyTextBoxはNumberTextBoxを、TimeTextBoxはDateTextBoxをそれぞれ継承しています。
まず、通常テキスト入力のDijit(TextBox、PasswordTextBox)のサンプルを図10に示します。これらは、デザインがテーマにあったものになっているものの、機能としては通常のフォームと同じになっています。
次に、高機能なテキスト入力Dijitを紹介してきます。ValidationTextBoxは入力された値が正しいかどうかを、与えられた正規表現と比較してチェックします(図11)。このサンプルでは正しい値は「codezine is best.+」と与えられており、これにマッチしない値を入力すると図11の右側のようにエラーが表示されます。
次の2つは時刻や日付を入力するためのDijitです。まず、DateTextBoxは日付を入力するためのDijitです(図12)。クリックすると、カレンダーが表示され(図12の左)、また、無効な日付のチェックも行います(図12の右)。
TimeTextBoxは時刻を入力するためのDijitです(図13)。クリックすると時間が表示され(図13左)、また無効な時刻のチェックも行います(図13右)。
最後に数字を入力するためのDijitを3つ紹介します。NumberTextBoxは数字を入力するためのDijitです(図14)。このサンプルでは百分率(パーセント)での入力のみを受け付けるようにしてあります。
NumberSpinnerも数字を入力するためのDijitですが、右側に数値を上下させるためのボタンがあります(図15)。
CurrencyTextBoxは金額を入力するためのDijitです(図16)。このDijitには入力する通貨を指定することができ(サンプルでは英ポンド)、その通貨で表現できない値は受け付けないようになっています(英ポンドの最小の単位は1ペニー=0.01ポンドなので、それより細かい値がエラーになっています)。
これらのうちValidationTextBoxを利用した例がリスト12です。
$dojo->requireModule('dijit.form.ValidationTextBox'); $form->addElement('ValidationTextBox','ValidationTextBox', array('label'=>'ValidationTextBox', 'regExp' => 'codezine is best.+',//(1) 'invalidMessage' => '入力が不正です'//(2) ) );
ValidationTextBoxでは(1)のように与えられた正規表現を利用して、入力された値が正しい値かを調べます。ここで、正しくない値が入力された場合には(2)で指示されたメッセージを表示します。これらの機能は子クラスにも継承されているため、ほとんどすべてのテキストボックス用のDijitウェブフォーム要素で利用できます。
クラス名 | パラメータ名 | 説明 |
共通 | label | ラベル |
trim | 先頭と末端の空白文字列を切るかどうか | |
lowercase | 入力された文字列を小文字にするか | |
propercase | 入力された文字列の、各単語の先頭を大文字、それ以外を小文字にするか | |
maxlength | 文字列の最大長さ | |
ValidationTextBox | regExp | 正しい文字列を指定する正規表現 |
invalidMessage | 不正な入力の際に表示するバルーンの内容 | |
CurrencyTextBox | currency | 3文字の通貨コードで表された通貨の種類 |
formatLength | 表示の長さ(short、medeum、long、fullの何れか) | |
DateTextBox | amPm | 12時間制か |
TimeTextBox | timePattern | 時間の表示形式 |
visibleRange | 表示されている時間の範囲 | |
visibleIncrement | 時間選択時に、候補として表示される時間の間隔 | |
clickableIncrement | 時間選択時に、候補となる時間の間隔 | |
NumberTextBox | type | 数字の種類(decimal、percent、currencyのいずれか) |
NumberSpinner | smallDelta | ボタン・矢印キーによってどれだけ値が変化するか |
largeDelta | PageUp・PageDownキーによってどれだけ値が変化するか | |
defaultTimeout | どれだけの時間ボタンを押しっぱなしにした場合に連打モードになるか | |
timeoutChangeRate | 連打モード中、連打の間の時間をどの程度変化させるか(0より小さい値にすると、長く押せば押す程連打が速くなる) | |
min | 指定可能な最小値 | |
max | 指定可能な最大値 |