| blob | 09698a9c90366ce338faf14da3bca56dc3d4989e |
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!-- Reviewed: no -->
3 <sect2 id="zend.dojo.form.examples">
4 <title>Dojo Form Examples</title>
6 <example id="zend.dojo.form.examples.dojoform">
7 <title>Using Zend_Dojo_Form</title>
9 <para>
10 The easiest way to utilize Dojo with <classname>Zend_Form</classname> is to
11 utilize <classname>Zend_Dojo_Form</classname>, either through direct usage or
12 by extending it. This example shows extending <classname>Zend_Dojo_Form</classname>, and
13 shows usage of all dijit elements. It creates four sub forms, and
14 decorates the form to utilize a TabContainer, showing each sub form
15 in its own tab.
16 </para>
18 <programlisting language="php"><![CDATA[
19 class My_Form_Test extends Zend_Dojo_Form
20 {
21 /**
22 * Options to use with select elements
23 */
24 protected $_selectOptions = array(
25 'red' => 'Rouge',
26 'blue' => 'Bleu',
27 'white' => 'Blanc',
28 'orange' => 'Orange',
29 'black' => 'Noir',
30 'green' => 'Vert',
31 );
33 /**
34 * Form initialization
35 *
36 * @return void
37 */
38 public function init()
39 {
40 $this->setMethod('post');
41 $this->setAttribs(array(
42 'name' => 'masterForm',
43 ));
44 $this->setDecorators(array(
45 'FormElements',
46 array('TabContainer', array(
47 'id' => 'tabContainer',
48 'style' => 'width: 600px; height: 500px;',
49 'dijitParams' => array(
50 'tabPosition' => 'top'
51 ),
52 )),
53 'DijitForm',
54 ));
55 $textForm = new Zend_Dojo_Form_SubForm();
56 $textForm->setAttribs(array(
57 'name' => 'textboxtab',
58 'legend' => 'Text Elements',
59 'dijitParams' => array(
60 'title' => 'Text Elements',
61 ),
62 ));
63 $textForm->addElement(
64 'TextBox',
65 'textbox',
66 array(
67 'value' => 'some text',
68 'label' => 'TextBox',
69 'trim' => true,
70 'propercase' => true,
71 )
72 )
73 ->addElement(
74 'DateTextBox',
75 'datebox',
76 array(
77 'value' => '2008-07-05',
78 'label' => 'DateTextBox',
79 'required' => true,
80 )
81 )
82 ->addElement(
83 'TimeTextBox',
84 'timebox',
85 array(
86 'label' => 'TimeTextBox',
87 'required' => true,
88 )
89 )
90 ->addElement(
91 'CurrencyTextBox',
92 'currencybox',
93 array(
94 'label' => 'CurrencyTextBox',
95 'required' => true,
96 // 'currency' => 'USD',
97 'invalidMessage' => 'Invalid amount. ' .
98 'Include dollar sign, commas, ' .
99 'and cents.',
100 // 'fractional' => true,
101 // 'symbol' => 'USD',
102 // 'type' => 'currency',
103 )
104 )
105 ->addElement(
106 'NumberTextBox',
107 'numberbox',
108 array(
109 'label' => 'NumberTextBox',
110 'required' => true,
111 'invalidMessage' => 'Invalid elevation.',
112 'constraints' => array(
113 'min' => -20000,
114 'max' => 20000,
115 'places' => 0,
116 )
117 )
118 )
119 ->addElement(
120 'ValidationTextBox',
121 'validationbox',
122 array(
123 'label' => 'ValidationTextBox',
124 'required' => true,
125 'regExp' => '[\w]+',
126 'invalidMessage' => 'Invalid non-space text.',
127 )
128 )
129 ->addElement(
130 'Textarea',
131 'textarea',
132 array(
133 'label' => 'Textarea',
134 'required' => true,
135 'style' => 'width: 200px;',
136 )
137 );
138 $editorForm = new Zend_Dojo_Form_SubForm();
139 $editorForm->setAttribs(array(
140 'name' => 'editortab',
141 'legend' => 'Editor',
142 'dijitParams' => array(
143 'title' => 'Editor'
144 ),
145 ))
146 $editorForm->addElement(
147 'Editor',
148 'wysiwyg',
149 array(
150 'label' => 'Editor',
151 'inheritWidth' => 'true',
152 )
153 );
155 $toggleForm = new Zend_Dojo_Form_SubForm();
156 $toggleForm->setAttribs(array(
157 'name' => 'toggletab',
158 'legend' => 'Toggle Elements',
159 ));
160 $toggleForm->addElement(
161 'NumberSpinner',
162 'ns',
163 array(
164 'value' => '7',
165 'label' => 'NumberSpinner',
166 'smallDelta' => 5,
167 'largeDelta' => 25,
168 'defaultTimeout' => 1000,
169 'timeoutChangeRate' => 100,
170 'min' => 9,
171 'max' => 1550,
172 'places' => 0,
173 'maxlength' => 20,
174 )
175 )
176 ->addElement(
177 'Button',
178 'dijitButton',
179 array(
180 'label' => 'Button',
181 )
182 )
183 ->addElement(
184 'CheckBox',
185 'checkbox',
186 array(
187 'label' => 'CheckBox',
188 'checkedValue' => 'foo',
189 'uncheckedValue' => 'bar',
190 'checked' => true,
191 )
192 )
193 ->addElement(
194 'RadioButton',
195 'radiobutton',
196 array(
197 'label' => 'RadioButton',
198 'multiOptions' => array(
199 'foo' => 'Foo',
200 'bar' => 'Bar',
201 'baz' => 'Baz',
202 ),
203 'value' => 'bar',
204 )
205 );
206 $selectForm = new Zend_Dojo_Form_SubForm();
207 $selectForm->setAttribs(array(
208 'name' => 'selecttab',
209 'legend' => 'Select Elements',
210 ));
211 $selectForm->addElement(
212 'ComboBox',
213 'comboboxselect',
214 array(
215 'label' => 'ComboBox (select)',
216 'value' => 'blue',
217 'autocomplete' => false,
218 'multiOptions' => $this->_selectOptions,
219 )
220 )
221 ->addElement(
222 'ComboBox',
223 'comboboxremote',
224 array(
225 'label' => 'ComboBox (remoter)',
226 'storeId' => 'stateStore',
227 'storeType' => 'dojo.data.ItemFileReadStore',
228 'storeParams' => array(
229 'url' => '/js/states.txt',
230 ),
231 'dijitParams' => array(
232 'searchAttr' => 'name',
233 ),
234 )
235 )
236 ->addElement(
237 'FilteringSelect',
238 'filterselect',
239 array(
240 'label' => 'FilteringSelect (select)',
241 'value' => 'blue',
242 'autocomplete' => false,
243 'multiOptions' => $this->_selectOptions,
244 )
245 )
246 ->addElement(
247 'FilteringSelect',
248 'filterselectremote',
249 array(
250 'label' => 'FilteringSelect (remoter)',
251 'storeId' => 'stateStore',
252 'storeType' => 'dojo.data.ItemFileReadStore',
253 'storeParams' => array(
254 'url' => '/js/states.txt',
255 ),
256 'dijitParams' => array(
257 'searchAttr' => 'name',
258 ),
259 )
260 );
261 $sliderForm = new Zend_Dojo_Form_SubForm();
262 $sliderForm->setAttribs(array(
263 'name' => 'slidertab',
264 'legend' => 'Slider Elements',
265 ));
266 $sliderForm->addElement(
267 'HorizontalSlider',
268 'horizontal',
269 array(
270 'label' => 'HorizontalSlider',
271 'value' => 5,
272 'minimum' => -10,
273 'maximum' => 10,
274 'discreteValues' => 11,
275 'intermediateChanges' => true,
276 'showButtons' => true,
277 'topDecorationDijit' => 'HorizontalRuleLabels',
278 'topDecorationContainer' => 'topContainer',
279 'topDecorationLabels' => array(
280 ' ',
281 '20%',
282 '40%',
283 '60%',
284 '80%',
285 ' ',
286 ),
287 'topDecorationParams' => array(
288 'container' => array(
289 'style' => 'height:1.2em; ' .
290 'font-size=75%;color:gray;',
291 ),
292 'list' => array(
293 'style' => 'height:1em; ' .
294 'font-size=75%;color:gray;',
295 ),
296 ),
297 'bottomDecorationDijit' => 'HorizontalRule',
298 'bottomDecorationContainer' => 'bottomContainer',
299 'bottomDecorationLabels' => array(
300 '0%',
301 '50%',
302 '100%',
303 ),
304 'bottomDecorationParams' => array(
305 'list' => array(
306 'style' => 'height:1em; ' .
307 'font-size=75%;color:gray;',
308 ),
309 ),
310 )
311 )
312 ->addElement(
313 'VerticalSlider',
314 'vertical',
315 array(
316 'label' => 'VerticalSlider',
317 'value' => 5,
318 'style' => 'height: 200px; width: 3em;',
319 'minimum' => -10,
320 'maximum' => 10,
321 'discreteValues' => 11,
322 'intermediateChanges' => true,
323 'showButtons' => true,
324 'leftDecorationDijit' => 'VerticalRuleLabels',
325 'leftDecorationContainer' => 'leftContainer',
326 'leftDecorationLabels' => array(
327 ' ',
328 '20%',
329 '40%',
330 '60%',
331 '80%',
332 ' ',
333 ),
334 'rightDecorationDijit' => 'VerticalRule',
335 'rightDecorationContainer' => 'rightContainer',
336 'rightDecorationLabels' => array(
337 '0%',
338 '50%',
339 '100%',
340 ),
341 )
342 );
344 $this->addSubForm($textForm, 'textboxtab')
345 ->addSubForm($editorForm, 'editortab')
346 ->addSubForm($toggleForm, 'toggletab')
347 ->addSubForm($selectForm, 'selecttab')
348 ->addSubForm($sliderForm, 'slidertab');
349 }
350 }
351 ]]></programlisting>
352 </example>
354 <example id="zend.dojo.form.examples.decorating">
355 <title>Modifying an existing form to utilize Dojo</title>
357 <para>
358 Existing forms can be modified to utilize Dojo as well, by use of
359 the <methodname>Zend_Dojo::enableForm()</methodname> static method.
360 </para>
362 <para>
363 This first example shows decorating an existing form instance:
364 </para>
366 <programlisting language="php"><![CDATA[
367 $form = new My_Custom_Form();
368 Zend_Dojo::enableForm($form);
369 $form->addElement(
370 'ComboBox',
371 'query',
372 array(
373 'label' => 'Color:',
374 'value' => 'blue',
375 'autocomplete' => false,
376 'multiOptions' => array(
377 'red' => 'Rouge',
378 'blue' => 'Bleu',
379 'white' => 'Blanc',
380 'orange' => 'Orange',
381 'black' => 'Noir',
382 'green' => 'Vert',
383 ),
384 )
385 );
386 ]]></programlisting>
388 <para>
389 Alternately, you can make a slight tweak to your form
390 initialization:
391 </para>
393 <programlisting language="php"><![CDATA[
394 class My_Custom_Form extends Zend_Form
395 {
396 public function init()
397 {
398 Zend_Dojo::enableForm($this);
400 // ...
401 }
402 }
403 ]]></programlisting>
405 <para>
406 Of course, if you can do that... you could and should simply alter
407 the class to inherit from <classname>Zend_Dojo_Form</classname>, which is a drop-in
408 replacement of <classname>Zend_Form</classname> that's already Dojo-enabled...
409 </para>
410 </example>
411 </sect2>
412 <!--
413 vim:se ts=4 sw=4 et:
414 -->