SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Zend Framework入門

Zend Framework入門(18):
ウィジェットDijitでビュー開発を効率化しよう - Zend_Dojo(後編)-

Zend Frameworkによる実践的なPHPアプリケーション開発 18

  • X ポスト
  • このエントリーをはてなブックマークに追加

テキスト入力

 テキストの入力のためのDijitウェブフォーム要素は8つ準備されていますが、これのほとんどが入力された値が適正か(期待された条件を満たしているか)を調べる機能を持っています。

テキスト入力のためのDigitの一覧
クラス名 必要なモジュール 説明
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に示します。これらは、デザインがテーマにあったものになっているものの、機能としては通常のフォームと同じになっています。

図10:通常のテキスト入力Dijitのサンプル
図10:通常のテキスト入力Dijitのサンプル

 次に、高機能なテキスト入力Dijitを紹介してきます。ValidationTextBoxは入力された値が正しいかどうかを、与えられた正規表現と比較してチェックします(図11)。このサンプルでは正しい値は「codezine is best.+」と与えられており、これにマッチしない値を入力すると図11の右側のようにエラーが表示されます。

図11:ValidationTextBoxのサンプル
図11:ValidationTextBoxのサンプル

 次の2つは時刻や日付を入力するためのDijitです。まず、DateTextBoxは日付を入力するためのDijitです(図12)。クリックすると、カレンダーが表示され(図12の左)、また、無効な日付のチェックも行います(図12の右)。

図12:DateTextBoxのサンプル
図12:DateTextBoxのサンプル

 TimeTextBoxは時刻を入力するためのDijitです(図13)。クリックすると時間が表示され(図13左)、また無効な時刻のチェックも行います(図13右)。

図13:TimeTextBoxのサンプル
図13:TimeTextBoxのサンプル

 最後に数字を入力するためのDijitを3つ紹介します。NumberTextBoxは数字を入力するためのDijitです(図14)。このサンプルでは百分率(パーセント)での入力のみを受け付けるようにしてあります。

図14:NumberTextBoxのサンプル
図14:NumberTextBoxのサンプル

 NumberSpinnerも数字を入力するためのDijitですが、右側に数値を上下させるためのボタンがあります(図15)。

図15:NumberSpinnerのサンプル
図15:NumberSpinnerのサンプル

 CurrencyTextBoxは金額を入力するためのDijitです(図16)。このDijitには入力する通貨を指定することができ(サンプルでは英ポンド)、その通貨で表現できない値は受け付けないようになっています(英ポンドの最小の単位は1ペニー=0.01ポンドなので、それより細かい値がエラーになっています)。

図16:CurrencyTextBoxのサンプル
図16:CurrencyTextBoxのサンプル

 これらのうちValidationTextBoxを利用した例がリスト12です。

[リスト12]テキストボックスを利用した例
$dojo->requireModule('dijit.form.ValidationTextBox');
$form->addElement('ValidationTextBox','ValidationTextBox',
    array('label'=>'ValidationTextBox',
          'regExp' => 'codezine is best.+',//(1)
          'invalidMessage' => '入力が不正です'//(2)
    )
);

 ValidationTextBoxでは(1)のように与えられた正規表現を利用して、入力された値が正しい値かを調べます。ここで、正しくない値が入力された場合には(2)で指示されたメッセージを表示します。これらの機能は子クラスにも継承されているため、ほとんどすべてのテキストボックス用のDijitウェブフォーム要素で利用できます。

テキスト入力系Dijitで使う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 指定可能な最大値

次のページ
レイアウトとウェブフォームを併せて使う

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Zend Framework入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 風田 伸之(カゼタ ノブユキ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3763 2009/04/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング