SHOEISHA iD

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

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

Zend Framework入門

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

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

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

文章入力

 文章を入力するためのDijitウェブフォーム要素のEditorとTextareaを紹介します。

文章入力のためのDigitの一覧
クラス名 必要なモジュール 説明
Editor dijit.Editor リッチなテキストも編集できるテキストエリア
Textarea dijit.form.Textarea 入力された文章によって長さが伸びるテキストエリア

 文章入力Dijitのサンプルを図6に示します。

図6:文章入力Dijitのサンプル
図6:文章入力Dijitのサンプル

 これらを利用するサンプルがリスト9です。

[リスト9]Dijit対応のウェブフォームの作成
//文章を入力するためのDijit
$dojo->requireModule('dijit.Editor');
$form->addElement('Editor','Editor',
    array('label'=>'Editor'
    )
);

$dojo->requireModule('dijit.form.Textarea');
$form->addElement('Textarea','Textarea',
    array('label'=>'Textarea',
          'style'=>'width:10em;'//(1)
    )
);

 Textareaの縦の幅は自動的に調整されるため、指定することはできませんが、リスト9の(1)のように横の幅は指定することができます。

文章入力系Dijitで使うDijitパラメータ
クラス名 パラメータ名 説明
共通 label ラベル
style テキストエリア内のテキストのスタイル

スライダー

 数値を入力するためのDijitウェブフォーム要素であるスライダーの紹介をします。スライダーは最小値と最大値の間のある数を選ぶためのウェブフォーム要素で、目盛の上をボタンのようなものをスライドさせることで値を選びます。

スライダーのDigitの一覧
クラス名 必要なモジュール 説明
HorizontalSlider dijit.form.Slider 水平スライダー
VerticalSlider dijit.form.Slider 垂直スライダー

 スライダーのサンプルを図7に示します。

図7:スライダーDijitのサンプル
図7:スライダーDijitのサンプル

 スライダーを利用した例がリスト10です。一見して分かるとおり、指定できるパラメータがたくさんありますが、この中でも特に「minimum」「maximum」「discreteValues」の3つのパラメータは必須となっています。

[リスト10]スライダーの利用例
$dojo->requireModule('dijit.form.Slider');
$form->AddElement('VerticalSlider',
    'VerticalSlider',
    array(
        'label'                    => 'VerticalSlider',
        'style'                    => 'height: 200px; width: 5em;',
        'minimum'                  => -10, //
        'maximum'                  => 10,  //必須パラメータ (1)
        'discreteValues'           => 5,   //
        'value'                    => 5,
        'intermediateChanges'      => true,
        'showButtons'              => true,
        //ここからは目盛などの左右の飾りの指定(2)
        'leftDecorationDijit'      => 'VerticalRule',
        'leftDecorationContainer'  => 'leftContainer',
        'leftDecorationLabels'     => array(
            '', '20%', '40%', '60%', '80%', '',
        ),
        'leftDecorationParams'     => array(
            'count'=>'5',
            'style'=>'width:1.2em;font-size:75%;',
)));

 また、リスト10の(2)以降はスライダーの両側につける目盛などの飾りの指定を行っています。この例ではスライダーの左側につける飾りの指定を行っていますが、垂直スライダーの場合にはこの他にも右側にも飾りをつけることができます。

スライダー入力系Dijitで使うDijitパラメータ
パラメータ名 説明
label ラベル
minimum スライダーの最小値
maximum スライダーの最大値
discreteValues スライダーがいくつの異なる値を取れるか
value 初期値
intermediateChanges スライダーの値を変化させている間(ドラッグしている間)もJavaScriptのonChangeを呼び出すか
showButtons スライダーの端点に、値を上下させるためのボタンを表示するか

 また、左右につける「飾り」についてはそれぞれ、leftDecoration~、rightDecoration~というDijitパラメータで指定します。同様に、HorizontalSliderの場合には、topDecotaion~、bottomDecoration~で上下につける飾りについて指定します。

テキスト選択

 ComboBoxとFilteringSelectは与えられたいくつかの選択肢から値を選ぶためのDijitウェブフォーム要素です。FilteringSelectは与えられた値以外から選べないのに対し、ComboBoxはユーザーからの任意の入力も受け付けます。

テキスト選択のためのDigitの一覧
クラス名 必要なモジュール 説明
ComboBox dijit.form.ComboBox ユーザーからの任意の入力も受け付けるテキスト選択
FilteringSelect dijit.form.FilteringSelect 与えられた値以外の値はエラーにするテキスト選択

 まず、CobmoBoxのサンプルを図8に示します。

図8:テキスト選択Dijitのサンプル
図8:テキスト選択Dijitのサンプル

 このように、ComboBoxではメニューからテキストを選択することもできますし、新しい候補を直接入力することもできます。一方で、FilteringSelectでは、あらかじめメニューにある値以外は無効となります(図9)。

図9:テキスト選択Dijitのサンプル
図9:テキスト選択Dijitのサンプル

 このうち、FilteringSelectを利用した例がリスト11です。

[リスト11]FilteringSelectを利用する例
        $dojo->requireModule('dijit.form.FilteringSelect');
        $form->addElement('FilteringSelect','FilteringSelect',
                          array('label'=>'FilteringSelect',
                                'value'=>'alpha',
                                'autocomplete'=>false,//(1)
                                'multiOptions'=>array('alpha'=>'A', 'beta'=>'B'),
                               )
                          );

 リスト11の(1)でautocompleteをfalseにしていますが、ここの値がtrueの場合、ユーザーが値を入力する際に、その入力に合う候補を表示します。

テキスト選択系Dijitで使うDijitパラメータ
パラメータ名 説明
label ラベル
value 初期値
autocomplete ユーザーが入力している最中に、候補を表示するか
multiOptions 選択肢、選択時の値と表示される内容が格納された配列
storeId (ストアを利用する場合指定)ストアの名前
storeType (ストアを利用する場合指定)ストアの種類
storeParams (ストアを利用する場合指定)ストアに渡すパラメータの配列、ストアに「dojo.data.ItemFileReadStore」を利用する場合にはデータの置かれているURLを与える
dijitParams (ストアを利用する場合指定)その他のDijitのパラメータ、 ストアに「dojo.data.ItemFileReadStore」を利用する場合は利用するデータ鍵を指定する

次のページ
テキスト入力

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング