Dijit固有のフォーム要素
注意:このドキュメントでは、英語版のリビジョン 21357,21358 の更新内容をスキップしています。
ビュー・ヘルパーが提供される各々のフォームdijitには、
対応するZend_Form要素があります。
dijitパラメータを操作するための以下のメソッドがそれらすべてにあります:
setDijitParam($key, $value):
dijitパラメータを一つセットします。
dijitパラメータがすでに存在すれば、上書きされます。
setDijitParams(array $params):
一度にいくつかのdijitパラメータをセットします。
渡されたパラメータにマッチする既存のパラメータは上書きされます。
hasDijitParam($key):
与えられたdijitパラメータが定義されたか存在している場合はTRUEを返します。
それ以外はFALSEを返します。
getDijitParam($key):
与えられたdijitパラメータを返します。
利用できない場合は NULL値を返します。
getDijitParams():
dijitパラメータを全て返します。
removeDijitParam($key):
与えられたdijitパラメータを除去します。
clearDijitParams():
現行定義されたdijitパラメータを全て消去します。
Dijitパラメータは、dijitParams public プロパティに保存されます。
このように、あなたは単にこのプロパティを要素の上に置くことによって、
既存のフォーム要素をdijit使用可能にすることができます;
あなたは、単にパラメータを操作するのを容易にするために、
上記のアクセッサを持っていません。
その上、dijit固有の要素は以下に該当するデコレーターの独特な一覧を実装します:
addDecorator('DijitElement')
->addDecorator('Errors')
->addDecorator('HtmlTag', array('tag' => 'dd'))
->addDecorator('Label', array('tag' => 'dt'));
]]>
実質的に、Dijit要素が、標準的なViewHelperデコレーターの代わりに使われます。
最後に、ベースDijit要素により、
確実にDojoビュー・ヘルパー・パスがビューの上に置かれることになります。
Dijit要素、DijitMultiの変化はMulti abstract フォーム要素の機能を提供します。
そして、開発者が 'multiOptions' を指定できるようにします。
- 一般的に select の option またはラジオ のoptionです。
以下のdijit要素は、標準的なZend Framework配布において出荷されます。
ボタン
標準的なボタン要素に
由来していないので、
同じ機能を実装して、ドロップインの代わりとして使うことができます。
以下の機能が公開されます:
名前が提供されないならば、
getLabel()はボタン・ラベルとして要素名を利用します。
さらに、翻訳メッセージにマッチした翻訳アダプターが利用できれば、
それは名前を翻訳します。
isChecked()は、
提出される値がラベルにマッチするかどうか決定します;
もしマッチするなら、それはTRUEを返します。
これは、フォームが提出されたとき、どのボタンが使われたかについて決定することに役立ちます。
さらに、デコレーターのDijitElement及び
DtDdWrapperだけがボタン要素のために使われます。
ボタンdijit要素の使用例
addElement(
'Button',
'foo',
array(
'label' => 'Button Label',
)
);
]]>
チェックボックス
標準的なチェックボックス要素
に由来していないので、
それは同じ機能を実装します。
これは、以下のメソッドが公開されることを意味します
setCheckedValue($value):
要素がチェックされたときに使う値を設定します。
getCheckedValue():
チェックされたときに要素で使う値を取得します。
setUncheckedValue($value):
チェックされていないときに要素で使う値を設定します。
getUncheckedValue():
チェックされていないときに要素で使う値を取得します。
setChecked($flag):
要素をチェック済みにするか否か設定します。
isChecked():
要素が現在チェック済みか判断します。
チェックボックスdijit要素の使用例
addElement(
'CheckBox',
'foo',
array(
'label' => 'A check box',
'checkedValue' => 'foo',
'uncheckedValue' => 'bar',
'checked' => true,
)
);
]]>
コンボボックス及びフィルタリング選択
コンボボックス
dijitビュー・ヘルパー・文書
にみられるように、コンボボックスは選択とテキスト入力の混合です。
そして、自動補完及び、提示された選択肢の代わりを指定できるようにします。
フィルタリング選択は同じことですが、任意の入力を許しません。
ラベル値を返すコンボボックス
コンボボックスはラベル値を返します。
期待に反するオプション値は返しません。
この理由から、コンボボックスはInArrayバリデーターを自動登録しません。
(FilteringSelectsがそうするけれども)
コンボボックスとフィルタリング選択フォーム要素は、
dojo.dataデータ・ストア(使用された場合)を指定することだけでなく、
選ばれた選択肢を調べて、セットするためにアクセッサとミューテーターを提供します。
それらはDijitMultiから拡張します。
そして、それはsetMultiOptions()及びsetMultiOption()メソッドによって
選ばれた選択肢を指定できます。
さらに、以下のメソッドを利用できます:
getStoreInfo():
現行で設定されているデータストア情報を全て取得します。
現行で設定されたデータがなければ、空の配列を返します。
setStoreId($identifier):
ストアの識別変数を設定します。
(通常、Dojoで 'jsId' 属性によって言及されます)
これは、有効なjavascript変数の名前でなければなりません。
getStoreId():
ストアの識別変数名を取得します。
setStoreType($dojoType):
使用するデータストアクラスを設定します;
例えば "dojo.data.ItemFileReadStore"
getStoreType():
使用するdojoデータストアクラスを取得します。
setStoreParams(array $params):
データ・ストア・オブジェクトを構成するために使われるパラメータをいずれも設定します。
例えば、 dojo.data.ItemFileReadStore データストアでは
dojo.dataオブジェクトを返す場所を指す 'url' パラメータを期待します。
getStoreParams():
現行で設定されているデータストアパラメータをいずれも取得します;
もしなければ、空の配列を返します。
setAutocomplete($flag):
ユーザーが要素から離れるとき、選ばれた項目が使われるかどうかを示します。
getAutocomplete():
自動補完フラグの値を取得します。
dojo.dataストアが要素で登録されなければ、
登録された選択肢の配列のキーを検証するInArrayバリデーターを
この要素はデフォルトで登録します。
setRegisterInArrayValidator(false)を呼び出すことでも、
registerInArrayValidator設定キーにFALSE値を渡すことでも、
このふるまいを抑制できます。
コンボボックスdijit要素を選択肢入力として使う
addElement(
'ComboBox',
'foo',
array(
'label' => 'ComboBox (select)',
'value' => 'blue',
'autocomplete' => false,
'multiOptions' => array(
'red' => 'Rouge',
'blue' => 'Bleu',
'white' => 'Blanc',
'orange' => 'Orange',
'black' => 'Noir',
'green' => 'Vert',
),
)
);
]]>
コンボボックスdijit要素をデータ・ストアと一緒に使う
addElement(
'ComboBox',
'foo',
array(
'label' => 'ComboBox (datastore)',
'storeId' => 'stateStore',
'storeType' => 'dojo.data.ItemFileReadStore',
'storeParams' => array(
'url' => '/js/states.txt',
),
'dijitParams' => array(
'searchAttr' => 'name',
),
)
);
]]>
前述の例はComboBoxの代わりに
FilteringSelectを使用します。
通貨テキストボックス
通貨テキストボックスは、主に通貨入力をサポートするためにあります。
通貨はローカライズされるかもしれず、小数も非小数もサポートできます。
内部的には、通貨テキストボックスは
数値テキストボックスや
バリデーションテキストボックスおよび
テキストボックスに由来します;
それらのクラスのメソッドが全て利用可能です。
さらに、下記の制約メソッドを使用できます:
setCurrency($currency):
使用する通貨種類を設定します;
ISO-4217
仕様に従うでしょう。
getCurrency():現行の通貨種類を取得します。
setSymbol($symbol): 3文字からなるISO-4217
通貨記号を設定します。
getSymbol():
現行の通貨記号を取得します。
setFractional($flag):
通貨で小数を許すかどうか設定します。
getFractional():
小数フラグの状態を取得します。
通貨テキストボックスdijit要素の使用例
addElement(
'CurrencyTextBox',
'foo',
array(
'label' => 'Currency:',
'required' => true,
'currency' => 'USD',
'invalidMessage' => 'Invalid amount. ' .
'Include dollar sign, commas, and cents.',
'fractional' => false,
)
);
]]>
日付テキストボックス
日付テキストボックスは、
カレンダー・ドロップダウンで日付(クライアント側日付確認とフォーマッティングだけでなく)
を選ぶために提供します。
内部的に、日付テキストボックスは
バリデーションテキストボックス
およびテキストボックス
に由来します;
それらのクラスのメソッドが全て利用可能です。さらに、
個別の制約を設定するために下記のメソッドを使用できます:
setAmPm($flag)及びgetAmPm():
時刻でAM/PM 文字列を使うかどうか
setStrict($flag)及びgetStrict():
入力を確認した時にマッチする厳しい正規表現を使うかどうか。
デフォルトはFALSEですが、空白文字やいくつかの省略形を許します。
setLocale($locale)及びgetLocale():
指定した要素で使うロケールを設定または取得します。
setDatePattern($pattern)及び
getDatePattern():
日付をフォーマットする
unicode 日付形式パターンを提示または取得します。
setFormatLength($formatLength)及び
getFormatLength():
使用する形式の長さの種類を提示または取得します;
"long"、"short"、"medium"または"full"のどれか一つです。
setSelector($selector)及び
getSelector():
セレクタのスタイルを提示または取得します;
"date" や "time" のどちらかでしょう。
日付テキストボックスdijit要素の使用例
addElement(
'DateTextBox',
'foo',
array(
'label' => 'Date:',
'required' => true,
'invalidMessage' => 'Invalid date specified.',
'formatLength' => 'long',
)
);
]]>
エディタ
エディタはリッチなHTML内容を作成して、
編集するために利用できるWYSIWYGエディタを提供します。
dijit.Editorはプラグイン可能で、
必要に応じてカスタム・プラグインで拡張されるかもしれません;
詳しくは
dijit.Editorドキュメントをご覧下さい。
エディタ・フォーム要素は、
下記のいくつかのアクセッサとミューテーターを
いろいろなdijitパラメータを操作するために提供します:
captureEventsは、
編集エリア自体と連携するイベントです。
捕獲したイベントを操作するために以下のアクセッサとミューテーターを利用できます:
addCaptureEvent($event)
addCaptureEvents(array $events)
setCaptureEvents(array $events)
getCaptureEvents()
hasCaptureEvent($event)
removeCaptureEvent($event)
clearCaptureEvents()
eventsは、
onClickやonKeyUpなどのような標準的なDOMイベントです。
イベントを操作するために以下のアクセッサとミューテーターを利用できます:
addEvent($event)
addEvents(array $events)
setEvents(array $events)
getEvents()
hasEvent($event)
removeEvent($event)
clearEvents()
pluginsはエディターにツールバーのための追加のツールや、
許可する追加スタイルなどの機能を加えます。
プラグインを操作するために以下のアクセッサとミューテーターを利用できます:
addPlugin($plugin)
addPlugins(array $plugins)
setPlugins(array $plugins)
getPlugins()
hasPlugin($plugin)
removePlugin($plugin)
clearPlugins()
editActionIntervalは、
アンドゥ操作のためにイベントをまとめるために使われます。
デフォルトでこの値は3秒です。
setEditActionInterval($interval)メソッドが値を設定するために使われるかもしれません。
一方で、getEditActionInterval()が値を取得します。
focusOnLoadは、
ページが読み込まれたとき、
この指定のエディタがフォーカスを受けるかどうか判断するために使われます。
デフォルトでこれはFALSEです。
メソッドsetFocusOnLoad($flag)が値を設定するために使われるかもしれません。
一方で、getFocusOnLoad()が値を取得します。
heightはエディターの高さを指定します;
デフォルトでこれは300pxです。
メソッドsetHeight($height)が値を設定するために使われるかもしれません。
一方で、getHeight()が値を取得します。
inheritWidthは、
エディタが親コンテナの幅と単純にデフォルトの100%幅のどちらを使うか決定するために使われます。
デフォルトでこれはFALSEです。
(すなわち、画面の幅一杯を満たします)
メソッドsetInheritWidth($flag)が値を設定するために使われるかもしれません。
一方で、getInheritWidth()が値を取得します。
minHeightはエディターの高さの最小値を設定します;
デフォルトでこれは1emです。
メソッドsetMinHeight($height)が値を設定するために使われるかもしれません。
一方で、getMinHeight()が値を取得します。
styleSheetsは、
どの追加CSSスタイルシートがエディタの表示に影響を及ぼすために使われるか示します。
デフォルトでは何も登録されず、それはページ・スタイルを継承します。
エディタ・スタイルシートを操作するために以下のアクセッサとミューテーターを利用できます:
addStyleSheet($styleSheet)
addStyleSheets(array $styleSheets)
setStyleSheets(array $styleSheets)
getStyleSheets()
hasStyleSheet($styleSheet)
removeStyleSheet($styleSheet)
clearStyleSheets()
エディタdijit要素の使用例
addElement('editor', 'content', array(
'plugins' => array('undo', '|', 'bold', 'italic'),
'editActionInterval' => 2,
'focusOnLoad' => true,
'height' => '250px',
'inheritWidth' => true,
'styleSheets' => array('/js/custom/editor.css'),
));
]]>
エディタ Dijit は既定で div を使います
エディタ dijit は既定で HTML の DIV を使います。
dijit._editor.RichText 資料は、
HTML の TEXTAREA の上にビルドされたそれを持つことが
セキュリティに影響するかもしれないことを示します。
言うことには、TEXTAREAに上品に退化できる
エディタ・ウィジェットを望む機会があるかもしれません。
そのような場面では、 degrade プロパティを TRUE
に設定することによってそうすることができます。
true,
));
// フォームを通じた構築
$form->addElement('editor', 'content', array(
'degrade' => true,
));
// または初期化後
$editor->degrade = true;
]]>
水平スライダー
水平スライダーは、
ある範囲で数値を選択するためのスライダーUI部品を提供します。
内部的には、それはフォームによって送信されるhidden要素の値をセットします。
水平スライダーは、抽象的なスライダーdijit要素に由来します。
さらに、スライダー罫線と罫線ラベルをセットして設定するための、
いろいろなメソッドがあります。
setTopDecorationDijit($dijit)及び
setBottomDecorationDijit($dijit):
スライダーの上側か下側で使うdijitの名前をセットします。
これは、接頭辞 "dijit.form." を含んではいけません。
むしろ final 名だけ
- "HorizontalRule" または "HorizontalRuleLabels" のうちの1つ -
を含まなければなりません。
setTopDecorationContainer($container)及び
setBottomDecorationContainer($container):
罫線コンテナ要素のために使用する名前を指定します;
例えば、'topRule' や 'topContainer'など。
setTopDecorationLabels(array $labels)及び
setBottomDecorationLabels(array $labels):
RuleLabels dijit型のうちの1つで使用するラベルをセットします。
これらは、インデックスを付けられた配列でなければなりません;
与えられたラベル位置(例えば始めまたは終わり)をスキップするために、
一つの空の場所を指定します。
setTopDecorationParams(array $params)及び
setBottomDecorationParams(array $params):
与えられた罫線、
またはRuleLabels dijitを構成するときに使うdijitパラメータです。
setTopDecorationAttribs(array $attribs)及び
setBottomDecorationAttribs(array $attribs):
与えられた罫線、
またはRuleLabels HTML要素コンテナのために指定するHTML属性です。
getTopDecoration()及び
getBottomDecoration():
上記のミューテーターによって提示されたように、
与えられた罫線またはRuleLabels定義のためにすべてのメタデータを取得します。
水平スライダーdijit要素の使用例
下記では、-10から10の間の整数を選択する水平スライダーを生成します。
上側には20%、40%、60%そして80%で印をつけられたラベルがあります、
下側には、0、50%そして100%の罫線があります。
値が変わるたびに、値を保存しているhidden要素は更新されます。
addElement(
'HorizontalSlider',
'horizontal',
array(
'label' => 'HorizontalSlider',
'value' => 5,
'minimum' => -10,
'maximum' => 10,
'discreteValues' => 11,
'intermediateChanges' => true,
'showButtons' => true,
'topDecorationDijit' => 'HorizontalRuleLabels',
'topDecorationContainer' => 'topContainer',
'topDecorationLabels' => array(
' ',
'20%',
'40%',
'60%',
'80%',
' ',
),
'topDecorationParams' => array(
'container' => array(
'style' => 'height:1.2em; font-size=75%;color:gray;',
),
'list' => array(
'style' => 'height:1em; font-size=75%;color:gray;',
),
),
'bottomDecorationDijit' => 'HorizontalRule',
'bottomDecorationContainer' => 'bottomContainer',
'bottomDecorationLabels' => array(
'0%',
'50%',
'100%',
),
'bottomDecorationParams' => array(
'list' => array(
'style' => 'height:1em; font-size=75%;color:gray;',
),
),
)
);
]]>
数スピナー
数スピナーは、数値を入力するためのテキスト要素です;
設定された量によって値を増加させたり、減少させるための要素を含みます。
下記のメソッドが利用できます:
setDefaultTimeout($timeout)及び
getDefaultTimeout():
ボタンが押されたままのときと、値が変更されるときの間の既定のタイムアウトを
ミリ秒単位で設定または取得します。
setTimeoutChangeRate($rate)及び
getTimeoutChangeRate():
ボタンが押されたままのとき、変化がなされる割合をミリ秒単位で設定または取得します。
setLargeDelta($delta)及び
getLargeDelta():
ボタンが押されたままのとき、数値が変わるべき量を設定または取得します。
setSmallDelta($delta)及び
getSmallDelta():
ボタンが一度押されたとき、数が変わるべきデルタを設定または取得します。
setIntermediateChanges($flag)及び
getIntermediateChanges():
ボタンが押されたままのとき、
各々の値が変化するごとに表示されるべきかどうか示すフラグを設定または取得します。
setRangeMessage($message)及び
getRangeMessage():
利用できる値の範囲を指示しているメッセージを設定または取得します。
setMin($value)及びgetMin():
使用可能な最小値を設定または取得します。
setMax($value)及びgetMax():
使用可能な最大値を設定または取得します。
数スピナーdijit要素の使用例
addElement(
'NumberSpinner',
'foo',
array(
'value' => '7',
'label' => 'NumberSpinner',
'smallDelta' => 5,
'largeDelta' => 25,
'defaultTimeout' => 500,
'timeoutChangeRate' => 100,
'min' => 9,
'max' => 1550,
'places' => 0,
'maxlength' => 20,
)
);
]]>
数テキストボックス
数テキストボックスは、数を入力するためのテキスト要素です;
数スピナーとは異なり、数は手で入力します。
バリデーションと制約は、
数が特定の範囲または形式にとどまることを確実とするために提示できます。
内部的には、数テキストボックスはバリデーションテキストボックス
及びテキストボックスに由来します;
それらのクラスのメソッドが全て利用可能です。さらに、
個別の制約を設定するために下記のメソッドを使用できます:
setLocale($locale)及びgetLocale():
このdijitを利用するために指定されたまたは代替のロケールを指定または取得します。
setPattern($pattern)及び
getPattern():
数をフォーマットするために使う数値パターン形式
を設定または取得します。
setType($type)及びgetType():
使用する数の形式型を取得します。
('decimal'、'percent'または'currency'のいずれかであるべきです)。
setPlaces($places)及びgetPlaces():
サポートする小数位の数を設定または取得します。
setStrict($flag)及びgetStrict():
空白文字及び数字以外の文字についてどの程度ゆるやかに許されるか示す
厳密性フラグの値を設定または取得します。
数テキストボックスdijit要素の使用例
addElement(
'NumberTextBox',
'elevation',
array(
'label' => 'NumberTextBox',
'required' => true,
'invalidMessage' => 'Invalid elevation.',
'places' => 0,
'constraints' => array(
'min' => -20000,
'max' => 20000,
),
)
);
]]>
パスワードテキストボックス
パスワードテキストボックスは、
パスワード入力のみに結び付けられたバリデーションテキストボックスです;
その唯一の目的は、dijitテーマを与えられたテキスト入力を
クライアント側バリデーションを提示するパスワードのためにできるようにすることです。
内部的には、パスワードテキストボックスはバリデーションテキストボックス
及びテキストボックス
に由来します;
それらのクラスのメソッドが全て利用可能です。
パスワードテキストボックスの使用例
addElement(
'PasswordTextBox',
'password',
array(
'label' => 'Password',
'required' => true,
'trim' => true,
'lowercase' => true,
'regExp' => '^[a-z0-9]{6,}$',
'invalidMessage' => 'Invalid password; ' .
'must be at least 6 alphanumeric characters',
)
);
]]>
ラジオボタン
ラジオボタンは、他のDojo dijitと一貫したルック&フィールを提示するために、
標準的なラジオ入力要素をラップします。
ラジオボタンはDijitMultiから拡張します。
そして、setMultiOptions()及びsetMultiOption()メソッドによって
選ばれた選択肢を指定できます。
デフォルトでこの要素は、
配列に対して登録された選択肢のキーを確認するInArrayバリデーターを登録します。
setRegisterInArrayValidator(false)または
registerInArrayValidatorのどちらを呼び出しても、
設定キーにFALSE値を渡すことによってこのふるまいを抑制できます。
ラジオボタンdijit要素の使用例
addElement(
'RadioButton',
'foo',
array(
'label' => 'RadioButton',
'multiOptions' => array(
'foo' => 'Foo',
'bar' => 'Bar',
'baz' => 'Baz',
),
'value' => 'bar',
)
);
]]>
シンプルテキストエリア
シンプルテキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。
しかし、それは列または行の設定をサポートしません。
その代わり、textarea幅は、標準的なCSS幅を使用して指定されるべきです。
テキストエリアとは異なり、自動的に成長しません。
シンプルテキストエリアdijit要素の使用例
addElement(
'SimpleTextarea',
'simpletextarea',
array(
'label' => 'SimpleTextarea',
'required' => true,
'style' => 'width: 80em; height: 25em;',
)
);
]]>
スライダーabstract要素
スライダーは
水平スライダー
及び
垂直スライダー
の両方に由来するabstract要素です。
スライダーを構成するために、いくつかの一般的なメソッドを公開します:
setClickSelect($flag)及び
getClickSelect():
スライダーをクリックしたら値を変更するかどうか示すフラグを設定または取得します。
setIntermediateChanges($flag)及び
getIntermediateChanges():
各々のスライダー変化イベントにdijitが通知を送るかどうか示すフラグを設定または取得します。
setShowButtons($flag)及び
getShowButtons():
どちらかの端にボタンが表示されるかどうか示すフラグを設定または取得します。;
もし表示されるなら、スライダーの値を変えるために、ユーザーはボタンをクリックできます。
setDiscreteValues($value)及び
getDiscreteValues():
スライダーによって表される不連続な値の数を設定または取得します。
setMaximum($value)及びgetMaximum():
スライダーの最大値を設定します。
setMinimum($value)及びgetMinimum():
スライダーの最小値を設定します。
setPageIncrement($value)及び
getPageIncrement():
スライダーがキーボード・イベントで変わる量を設定します。
使用例は、各々の具体的な拡張クラスで提供されます。
サブミットボタン
SubmitButtonという名前のDijitはありませんが、
どんなjavascriptとの結合も追加で必要とせずに、フォームを送信できるボタンdijitを提供するために、
1つをここに含めます。
それは、まさにボタンdijitのように動作します。
サブミットボタンdijit要素の使用例
addElement(
'SubmitButton',
'foo',
array(
'required' => false,
'ignore' => true,
'label' => 'Submit Button!',
)
);
]]>
テキストボックス
テキストボックスは、
主に他のdijitsに調和したルック&フィールで入力されるテキストを提供するために含まれます。
しかし、以下のメソッドで表されるいくらかのマイナーなフィルタリングとバリデーション機能も含みます:
setLowercase($flag)及び
getLowercase():
入力を小文字にキャストすべきかどうか示すフラグを設定または取得します。
setPropercase($flag)及び
getPropercase():
入力をProper Case(訳注:先頭を大文字、他を小文字にすること)にキャストすべきかどうか示すフラグを設定または取得します。
setUppercase($flag)及びgetUppercase():
入力を大文字にキャストすべきかどうか示すフラグを設定または取得します。
setTrim($flag)及びgetTrim():
先立つまたは後続する空白を除去すべきかどうか示すフラグを設定または取得します。
setMaxLength($length)及び
getMaxLength():
入力の長さの上限を設定または取得します。
テキストボックスdijit要素の使用例
addElement(
'TextBox',
'foo',
array(
'value' => 'some text',
'label' => 'TextBox',
'trim' => true,
'propercase' => true,
)
);
]]>
テキストエリア
テキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。
しかし、それは列または行の設定をサポートしません。
その代わり、textareaの幅は、標準的なCSS幅を使用して指定されるべきです;
列は、完全に省略されます。
テキストが追加されるたびに、textareaは垂直に伸びます。
テキストエリアdijit要素の使用例
addElement(
'Textarea',
'textarea',
array(
'label' => 'Textarea',
'required' => true,
'style' => 'width: 200px;',
)
);
]]>
時刻テキストボックス
時刻テキストボックスは、
時刻を選ぶためにドロップダウンを提示するテキスト入力です。
ドロップダウンは指定された増分で、時刻の特定のウインドウを示すように構成されるかもしれません。
内部的には、時刻テキストボックスは日付テキストボックス、
バリデーションテキストボックス
及びテキストボックスに由来します;
それらのクラスのメソッドが全て利用可能です。さらに、
個別の制約を設定するために下記のメソッドを使用できます:
setTimePattern($pattern)及び
getTimePattern():
時刻をフォーマットするためのunicode時間形式パターン
を設定または取得します。
setClickableIncrement($format)及び
getClickableIncrement():
Time Pickerでクリックできる全ての要素で
増分値を示すISO_8601
文字列を設定または取得します。
setVisibleIncrement($format)及び
getVisibleIncrement():
時刻選択にて見える増分を設定します;
ISO_8601フォーマットに従わなければなりません。
setVisibleRange($format)及び
getVisibleRange():
時刻選択にていつでも見える時刻の範囲を設定または取得します;
ISO_8601フォーマットに従わなければなりません。
時刻テキストボックスdijit要素の使用例
以下は、時刻に2時を表示する、増分が10分毎の時刻テキストボックスをつくります。
addElement(
'TimeTextBox',
'foo',
array(
'label' => 'TimeTextBox',
'required' => true,
'visibleRange' => 'T04:00:00',
'visibleIncrement' => 'T00:10:00',
'clickableIncrement' => 'T00:10:00',
)
);
]]>
バリデーションテキストボックス
バリデーションテキストボックスは、
バリデーションと制約をテキスト入力に加える能力を提供します。
内部的には、テキストボックスに由来します。
dijitパラメータを操作するために、以下のアクセッサとミューテーターを加えます:
setInvalidMessage($message)及び
getInvalidMessage():
値がバリデーションされないときに表示するtooltipメッセージを設定または取得します。
setPromptMessage($message)及び
getPromptMessage():
要素の使用方法のために表示されるtooltipメッセージを設定または取得します。
setRegExp($regexp)及びgetRegExp():
要素を確認するために使用する正規表現を取得します。
正規表現は、バウンダリ(PHPのpreg* ファミリーの関数と異なります)を必要としません。
setConstraint($key, $value)及び
getConstraint($key):
要素を確認するときに使う追加制約を設定または取得します;
サブクラスで主に使われます。
制約は、dijitパラメータの 'constraints' キーに保存されます。
setConstraints(array $constraints)及び
getConstraints():
要素を確認するときに使う個々の制約を設定または取得します;
サブクラスで主に使われます。
hasConstraint($key):
与えられた制約が存在するかどうか調べます。
removeConstraint($key)及び
clearConstraints():
要素のために個別またはすべての制約を取り除きます。
バリデーションテキストボックスdijit要素の使用例
以下は、
単語文字(すなわち、空白や大部分の句読点は無効です)だけから成る
一つのストリングを必要とするバリデーション・テキストボックスをつくります。
addElement(
'ValidationTextBox',
'foo',
array(
'label' => 'ValidationTextBox',
'required' => true,
'regExp' => '[\w]+',
'invalidMessage' => 'Invalid non-space text.',
)
);
]]>
垂直スライダー
垂直スライダーは水平スライダー
の兄弟分で、あらゆる点でその要素のように動作します。
唯一本当に違うところは、
'top*' 及び 'bottom*' メソッドが 'left*' and 'right*' で置き換えられ、
HorizontalRule 及び HorizontalRuleLabels を使う代わりに、
VerticalRule 及び VerticalRuleLabels が使われることです。
垂直スライダーdijit要素の使用例
下記では、-10から10の間の整数を選択する垂直スライダーを生成します。
左側には20%、40%、60%そして80%で印をつけられたラベルがあります、
右側には、0、50%そして100%の罫線があります。
値が変わるたびに、値を保存しているhidden要素は更新されます。
addElement(
'VerticalSlider',
'foo',
array(
'label' => 'VerticalSlider',
'value' => 5,
'style' => 'height: 200px; width: 3em;',
'minimum' => -10,
'maximum' => 10,
'discreteValues' => 11,
'intermediateChanges' => true,
'showButtons' => true,
'leftDecorationDijit' => 'VerticalRuleLabels',
'leftDecorationContainer' => 'leftContainer',
'leftDecorationLabels' => array(
' ',
'20%',
'40%',
'60%',
'80%',
' ',
),
'rightDecorationDijit' => 'VerticalRule',
'rightDecorationContainer' => 'rightContainer',
'rightDecorationLabels' => array(
'0%',
'50%',
'100%',
),
)
);
]]>