| blob | 6eac5d2e131d776d8a3bd82bbca88d1b93328839 |
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!-- Reviewed: no -->
3 <!-- EN-Revision: 17166 -->
4 <sect2 id="zend.dojo.form.examples">
5 <title>Dojo Formサンプル</title>
7 <example id="zend.dojo.form.examples.dojoform">
8 <title>Zend_Dojo_Formの利用</title>
10 <para>
11 直接使うにせよ、それを拡張するにせよ、
12 <classname>Zend_Form</classname>でDojoを利用する最も簡単な方法は、
13 <classname>Zend_Dojo_Form</classname>を利用することです。
14 この例では<classname>Zend_Dojo_Form</classname>の拡張と、
15 すべてのdijit要素の使用法を示します。
16 それは４つのサブ・フォームをつくって、TabContainerを利用するためにフォームを飾ります。
17 そして、それ自身のタブの中に各々のサブ・フォームを表示します。
18 </para>
20 <programlisting language="php"><![CDATA[
21 class My_Form_Test extends Zend_Dojo_Form
22 {
23 /**
24 * select要素で使う選択肢
25 */
26 protected $_selectOptions = array(
27 'red' => 'Rouge',
28 'blue' => 'Bleu',
29 'white' => 'Blanc',
30 'orange' => 'Orange',
31 'black' => 'Noir',
32 'green' => 'Vert',
33 );
35 /**
36 * Form初期化
37 *
38 * @return void
39 */
40 public function init()
41 {
42 $this->setMethod('post');
43 $this->setAttribs(array(
44 'name' => 'masterForm',
45 ));
46 $this->setDecorators(array(
47 'FormElements',
48 array('TabContainer', array(
49 'id' => 'tabContainer',
50 'style' => 'width: 600px; height: 500px;',
51 'dijitParams' => array(
52 'tabPosition' => 'top'
53 ),
54 )),
55 'DijitForm',
56 ));
57 $textForm = new Zend_Dojo_Form_SubForm();
58 $textForm->setAttribs(array(
59 'name' => 'textboxtab',
60 'legend' => 'Text Elements',
61 'dijitParams' => array(
62 'title' => 'Text Elements',
63 ),
64 ));
65 $textForm->addElement(
66 'TextBox',
67 'textbox',
68 array(
69 'value' => 'some text',
70 'label' => 'TextBox',
71 'trim' => true,
72 'propercase' => true,
73 )
74 )
75 ->addElement(
76 'DateTextBox',
77 'datebox',
78 array(
79 'value' => '2008-07-05',
80 'label' => 'DateTextBox',
81 'required' => true,
82 )
83 )
84 ->addElement(
85 'TimeTextBox',
86 'timebox',
87 array(
88 'label' => 'TimeTextBox',
89 'required' => true,
90 )
91 )
92 ->addElement(
93 'CurrencyTextBox',
94 'currencybox',
95 array(
96 'label' => 'CurrencyTextBox',
97 'required' => true,
98 // 'currency' => 'USD',
99 'invalidMessage' => 'Invalid amount. ' .
100 'Include dollar sign, commas, ' .
101 'and cents.',
102 // 'fractional' => true,
103 // 'symbol' => 'USD',
104 // 'type' => 'currency',
105 )
106 )
107 ->addElement(
108 'NumberTextBox',
109 'numberbox',
110 array(
111 'label' => 'NumberTextBox',
112 'required' => true,
113 'invalidMessage' => 'Invalid elevation.',
114 'constraints' => array(
115 'min' => -20000,
116 'max' => 20000,
117 'places' => 0,
118 )
119 )
120 )
121 ->addElement(
122 'ValidationTextBox',
123 'validationbox',
124 array(
125 'label' => 'ValidationTextBox',
126 'required' => true,
127 'regExp' => '[\w]+',
128 'invalidMessage' => 'Invalid non-space text.',
129 )
130 )
131 ->addElement(
132 'Textarea',
133 'textarea',
134 array(
135 'label' => 'Textarea',
136 'required' => true,
137 'style' => 'width: 200px;',
138 )
139 );
140 $editorForm = new Zend_Dojo_Form_SubForm();
141 $editorForm->setAttribs(array(
142 'name' => 'editortab',
143 'legend' => 'Editor',
144 'dijitParams' => array(
145 'title' => 'Editor'
146 ),
147 ))
148 $editorForm->addElement(
149 'Editor',
150 'wysiwyg',
151 array(
152 'label' => 'Editor',
153 'inheritWidth' => 'true',
154 )
155 );
157 $toggleForm = new Zend_Dojo_Form_SubForm();
158 $toggleForm->setAttribs(array(
159 'name' => 'toggletab',
160 'legend' => 'Toggle Elements',
161 ));
162 $toggleForm->addElement(
163 'NumberSpinner',
164 'ns',
165 array(
166 'value' => '7',
167 'label' => 'NumberSpinner',
168 'smallDelta' => 5,
169 'largeDelta' => 25,
170 'defaultTimeout' => 1000,
171 'timeoutChangeRate' => 100,
172 'min' => 9,
173 'max' => 1550,
174 'places' => 0,
175 'maxlength' => 20,
176 )
177 )
178 ->addElement(
179 'Button',
180 'dijitButton',
181 array(
182 'label' => 'Button',
183 )
184 )
185 ->addElement(
186 'CheckBox',
187 'checkbox',
188 array(
189 'label' => 'CheckBox',
190 'checkedValue' => 'foo',
191 'uncheckedValue' => 'bar',
192 'checked' => true,
193 )
194 )
195 ->addElement(
196 'RadioButton',
197 'radiobutton',
198 array(
199 'label' => 'RadioButton',
200 'multiOptions' => array(
201 'foo' => 'Foo',
202 'bar' => 'Bar',
203 'baz' => 'Baz',
204 ),
205 'value' => 'bar',
206 )
207 );
208 $selectForm = new Zend_Dojo_Form_SubForm();
209 $selectForm->setAttribs(array(
210 'name' => 'selecttab',
211 'legend' => 'Select Elements',
212 ));
213 $selectForm->addElement(
214 'ComboBox',
215 'comboboxselect',
216 array(
217 'label' => 'ComboBox (select)',
218 'value' => 'blue',
219 'autocomplete' => false,
220 'multiOptions' => $this->_selectOptions,
221 )
222 )
223 ->addElement(
224 'ComboBox',
225 'comboboxremote',
226 array(
227 'label' => 'ComboBox (remoter)',
228 'storeId' => 'stateStore',
229 'storeType' => 'dojo.data.ItemFileReadStore',
230 'storeParams' => array(
231 'url' => '/js/states.txt',
232 ),
233 'dijitParams' => array(
234 'searchAttr' => 'name',
235 ),
236 )
237 )
238 ->addElement(
239 'FilteringSelect',
240 'filterselect',
241 array(
242 'label' => 'FilteringSelect (select)',
243 'value' => 'blue',
244 'autocomplete' => false,
245 'multiOptions' => $this->_selectOptions,
246 )
247 )
248 ->addElement(
249 'FilteringSelect',
250 'filterselectremote',
251 array(
252 'label' => 'FilteringSelect (remoter)',
253 'storeId' => 'stateStore',
254 'storeType' => 'dojo.data.ItemFileReadStore',
255 'storeParams' => array(
256 'url' => '/js/states.txt',
257 ),
258 'dijitParams' => array(
259 'searchAttr' => 'name',
260 ),
261 )
262 );
263 $sliderForm = new Zend_Dojo_Form_SubForm();
264 $sliderForm->setAttribs(array(
265 'name' => 'slidertab',
266 'legend' => 'Slider Elements',
267 ));
268 $sliderForm->addElement(
269 'HorizontalSlider',
270 'horizontal',
271 array(
272 'label' => 'HorizontalSlider',
273 'value' => 5,
274 'minimum' => -10,
275 'maximum' => 10,
276 'discreteValues' => 11,
277 'intermediateChanges' => true,
278 'showButtons' => true,
279 'topDecorationDijit' => 'HorizontalRuleLabels',
280 'topDecorationContainer' => 'topContainer',
281 'topDecorationLabels' => array(
282 ' ',
283 '20%',
284 '40%',
285 '60%',
286 '80%',
287 ' ',
288 ),
289 'topDecorationParams' => array(
290 'container' => array(
291 'style' => 'height:1.2em; ' .
292 'font-size=75%;color:gray;',
293 ),
294 'list' => array(
295 'style' => 'height:1em; ' .
296 'font-size=75%;color:gray;',
297 ),
298 ),
299 'bottomDecorationDijit' => 'HorizontalRule',
300 'bottomDecorationContainer' => 'bottomContainer',
301 'bottomDecorationLabels' => array(
302 '0%',
303 '50%',
304 '100%',
305 ),
306 'bottomDecorationParams' => array(
307 'list' => array(
308 'style' => 'height:1em; ' .
309 'font-size=75%;color:gray;',
310 ),
311 ),
312 )
313 )
314 ->addElement(
315 'VerticalSlider',
316 'vertical',
317 array(
318 'label' => 'VerticalSlider',
319 'value' => 5,
320 'style' => 'height: 200px; width: 3em;',
321 'minimum' => -10,
322 'maximum' => 10,
323 'discreteValues' => 11,
324 'intermediateChanges' => true,
325 'showButtons' => true,
326 'leftDecorationDijit' => 'VerticalRuleLabels',
327 'leftDecorationContainer' => 'leftContainer',
328 'leftDecorationLabels' => array(
329 ' ',
330 '20%',
331 '40%',
332 '60%',
333 '80%',
334 ' ',
335 ),
336 'rightDecorationDijit' => 'VerticalRule',
337 'rightDecorationContainer' => 'rightContainer',
338 'rightDecorationLabels' => array(
339 '0%',
340 '50%',
341 '100%',
342 ),
343 )
344 );
346 $this->addSubForm($textForm, 'textboxtab')
347 ->addSubForm($editorForm, 'editortab')
348 ->addSubForm($toggleForm, 'toggletab')
349 ->addSubForm($selectForm, 'selecttab')
350 ->addSubForm($sliderForm, 'slidertab');
351 }
352 }
353 ]]></programlisting>
354 </example>
356 <example id="zend.dojo.form.examples.decorating">
357 <title>既存のフォームをDojoを使って変更する</title>
359 <para>
360 <methodname>Zend_Dojo::enableForm()</methodname>という静的メソッドを利用して、
361 既存のフォームをDojoを使って変更することもできます。
362 </para>
364 <para>
365 最初の例では既存のフォームの例を修飾して見せています。
366 </para>
368 <programlisting language="php"><![CDATA[
369 $form = new My_Custom_Form();
370 Zend_Dojo::enableForm($form);
371 $form->addElement(
372 'ComboBox',
373 'query',
374 array(
375 'label' => 'Color:',
376 'value' => 'blue',
377 'autocomplete' => false,
378 'multiOptions' => array(
379 'red' => 'Rouge',
380 'blue' => 'Bleu',
381 'white' => 'Blanc',
382 'orange' => 'Orange',
383 'black' => 'Noir',
384 'green' => 'Vert',
385 ),
386 )
387 );
388 ]]></programlisting>
390 <para>
391 あるいは、フォームの初期化でわずかな微調整をすることができます:
392 </para>
394 <programlisting language="php"><![CDATA[
395 class My_Custom_Form extends Zend_Form
396 {
397 public function init()
398 {
399 Zend_Dojo::enableForm($this);
401 // ...
402 }
403 }
404 ]]></programlisting>
406 <para>
407 もちろん、可能ならば、<classname>Zend_Dojo_Form</classname>を継承したクラスで単純に置き換えられるか、
408 置き換えたいでしょう。
409 そのクラスはすでにDojoが有効の<classname>Zend_Form</classname>の選択リストの代わりです。
410 </para>
411 </example>
412 </sect2>
413 <!--
414 vim:se ts=4 sw=4 et:
415 -->