SHOEISHA iD

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

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

Zend Framework入門

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

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

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

Dijitウェブフォーム要素

 Dojo Toolkitにはウェブフォームの要素として使えるDijitがあり、Zend_Dojoからはそれらのうち18個を生成するためのメソッドが準備されています。これらにはSpinnerのように通常のHTMLでは実現できないようなものや、NumberTextBoxのように入力のチェックをしてくれるものなどがあります。これらを利用したサンプルはhttp://localhost/index/formで表示されます。

 なお、今回はDijitウェブフォーム要素をDijitウェブフォーム内で使う方法を中心に説明しますが、Dijitのウェブフォーム要素は単体でページ内の部品として使うこともできます。この場合にはZend_Dojoビューヘルパのメソッドを利用して作成することになります。その場合の引数は、すべてのメソッドで共通となります。

Dijitウェブフォーム要素を作成するメソッドの引数(共通)
引数 説明
$id オブジェクトのID
$value オブジェクトの初期値
$params Dijitオブジェクトとしてのパラメータの配列
$attribs それ以外のタグ属性の配列
(返り値) このオブジェクトをHTMLに変換したもの

 例えば前編のサンプルでも利用したComboBoxですが、これをもう少し詳しく見てみます(リスト5)。

[リスト5]Dijitウェブフォーム要素の作成の例
$combobox = $view->combobox(//クラス名
    'combobox',//オブジェクトのID       (1)
    'alpha',   //オブジェクトの初期値   (2)
    array('store' => 'cboxStore',
        'storeType' => 'dojo.data.ItemFileReadStore',
        'storeParams' => array(
            'url' => $url,
        ),  //Dijit関係のパラメータ(3)
        'searchAttr' => 'name'
    ),
    //それ以外の属性         (4)
);

 ここで(1)がこのComboBoxのID、(2)はComboBoxの初期値となっています。(3)で与えられた配列にはこのComboBoxのDijitとしてパラメータが配列で与えられています。(4)ですが、それ以外の属性についてはこの場合は必要なかったので省略されています。(3)(4)については、省略された場合には空の配列(array())が標準の値となります。

Dijit対応のウェブフォームの作成

 ここまでは、Dijitウェブフォーム要素を単体で利用する方法についての説明でした。次に、ここまでのDijitウェブフォーム要素とZend_Formを連携させる方法(つまり、Dijitを使うことを前提にしたウェブフォームを作成する方法)について説明します。これには2つ方法があります。

  1. 専用のクラス、Zend_Dojo_Formを使う
  2. 通常のZend_Formのインスタンスを作成し、Zend_Dojoクラスの静的メソッドenableFormでZend_Dojoに対応させる

  ちなみに、Zend_Dojoに必要なデコレータなどの設定を手動で行う方法もあります。これは(1)の方法が内部でやっていることと同じで、あまりメリットがないので考えないことにします。

 これらの方法をリスト6に示します。

[リスト6]Dijit対応のウェブフォームの作成
$this->view->dojo()->requireModule('dijit.form.Form');
//Zend_Dojoに対応した専用クラスを使う(1)
$form = new Zend_Dojo_Form;
//通常のZend_FormをDojo対応に設定する(2)
//$form = new Zend_Form;
//Zend_Dojo::enableForm($form);

 Zend_Dojo_FormクラスはZend_Formクラスをそのまま置き換えられるように設計されているため、通常はどちらの方法を使っても問題はありません。ただし、既にZend_Formと互換のある別のカスタムクラスを利用している場合には(1)の方法は使えませんので(2)の方法を使う必要があります。

 このように作成したウェブフォームのインスタンスのaddElementメソッドを利用してDijitウェブフォーム要素を作成することができます。

[リスト7]Dijitウェブフォーム要素の作成例
$form->addElement('Button',     //クラス名
    'okButton',                    //オブジェクトのID
    array('label' => 'ボタン'), //Dijitパラメータ
    //(ここのValueでオブジェクトの初期値を指定することができます)
);

 それでは、Dijitの各ウェブフォーム要素の紹介をします。

ボタン

 まずはボタン関係のDijitウェブフォーム要素4つの紹介をします。これらのDijitウェブフォーム要素はデザインが洒落ていますが、機能としては通常のHTMLのものと同じです。

ボタンを作るためのDigitの一覧
クラス名 必要なモジュール 説明
Button dijit.form.Button 通常のHTMLのボタン
SubmitButton dijit.form.Button 送信ボタン(これはDijitの機能ではなく、Zend_Dojoの機能)
CheckBox dijit.form.CheckBox 選択されている・いないの二つの状態を持つボタン
RadioButton dijit.form.CheckBox 複数の選択肢から排他的に一つを選ぶためのボタン

 これらのボタンDijitのサンプルを図5に示します。

図5:ボタンDijitのサンプル
図5:ボタンDijitのサンプル

 これらのうち、CheckBoxとRadioButtonを利用する例がリスト8です。

[リスト8]CheckBoxとRadioButtonの例
$dojo->requireModule('dijit.form.CheckBox');
$form->addElement('CheckBox',
    'ifreadbook',
    array('label'=>'CheckBox',
          'checkedValue' => 'read',//(1)
          'uncheckedValue' => 'unread',//(2)
          'checked' => true,//(3)
    )
);
$form->addElement('RadioButton',
    'RadioButton',
    array('label'=>'RadioButton',
          'multiOptions'=>array('alpha'=>'A',
                                   'beta'=>'B'),//(3)
          'value'=>'beta',
    )
);

 リスト8の(1)はこのCheckBoxがチェックされていた場合の、(2)はされていなかった場合に送信される値となっています。また(3)の「multiOptions」はこのRadioButtonの各選択肢の値と表示の配列で、この場合はalphaとbetaが選択肢の値、AとBが表示される選択肢となります。

ボタン系Dijitで使うDijitパラメータ
クラス名 パラメータ名 説明
共通 label ラベル
CheckBox chekedValue ボタンがチェックされているときの値
uncheckedValue ボタンがチェックされていないときの値
checked 初期状態でチェックされているか(true, false)
RadioButton multiOptions 各オプションについての、選択時の値と表示される内容が格納された配列

次のページ
文章入力

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

  • 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 Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング