documentation/manual/zh/module_specs/Zend_Dojo-View-Helpers.xml

   1 <sect2 id="zend.dojo.view.dijit">
   2     <title>Dijit-Specific 视图助手 </title>
   3
   4     <para>
   5         引用一下 Dojo 手册：“Dijit 是基于 dojo 之上的一个小部件系统”，Dijit 有
   6         许多布局和表单小部件，用来提供访问、本地化和标准化（和可主题化）的观感。
   7     </para>
   8
   9     <para>
  10         Zend Framework 带有许多视图助手让你在视图脚本里解析和使用 dijits。有三个基本类型：
  11     </para>
  12
  13     <itemizedlist>
  14         <listitem>
  15             <para>
  16                 <emphasis>布局容器</emphasis>:
  17                 这些设计上在视图脚本理使用或由表单装饰器用于表单、子表单和显示组。
  18                 它们封装了 dijit.layout 提供的各种类。每个 dijit 布局视图助手有下面的参数：
  19             </para>
  20
  21             <itemizedlist>
  22                 <listitem><para>
  23                         <code>$id</code>: 容器名或 DOM ID。
  24                 </para></listitem>
  25
  26                 <listitem><para>
  27                         <code>$content</code>: 在布局容器里封装的内容。
  28                 </para></listitem>
  29
  30                 <listitem><para>
  31                         <code>$params</code> (optional): dijit-specific 参数。
  32                         基本上是任何非 HTML 属性，可用于配置 dijit 布局容器。
  33                 </para></listitem>
  34
  35                 <listitem><para>
  36                         <code>$attribs</code> （可选）：任何用于解析容器 div 的附加的 HTML 属性。
  37                         如果在这个数组里传递了键 'id'，它将被用于表单元素 DOM id，并且 <code>$id</code>
  38                         将用于它的名字。
  39                 </para></listitem>
  40             </itemizedlist>
  41
  42             <para>
  43                 如果不传递参数给 dijit 布局视图助手，那么助手将返回自己。
  44                 它允许你抓取内容，通常是更容易的传递内容给布局容器的方法。
  45                 本章的后面将用范例来示范这个功能。
  46             </para>
  47         </listitem>
  48
  49         <listitem>
  50             <para>
  51                 <emphasis>Form Dijit</emphasis>: dijit.form.Form dijit，虽然对于使用 dijit
  52                 表单元素不是完全必要，但是它可以确保如果提交没有根据客户端校验而校验的表单时，
  53                 提交就被终止并且产生校验错误消息。该表单 dijit 视图助手可带有下列参数：
  54             </para>
  55
  56             <itemizedlist>
  57                 <listitem><para>
  58                         <code>$id</code>: 容器名或 DOM ID。
  59                 </para></listitem>
  60
  61                 <listitem><para>
  62                         <code>$attribs</code> （可选）：任何用于解析容器 div 的附加的 HTML 属性。
  63                 </para></listitem>
  64
  65                 <listitem><para>
  66                         <code>$content</code> （可选）：要封装到表单的内容。如果没有，将使用空的字符串。
  67                 </para></listitem>
  68             </itemizedlist>
  69
  70             <para>
  71                 为了和标准的 <code>form()</code> 视图助手保持兼容，参数顺序和其它 dijit 有些不同。
  72             </para>
  73         </listitem>
  74
  75         <listitem>
  76             <para>
  77                 <emphasis> 表单元素 </emphasis>：设计上和 <code>Zend_Form</code> 一起使用，但也
  78                 可以在视图脚本中独立使用。每个 dijit 元素视图助手可以使用下列参数：
  79             </para>
  80
  81             <itemizedlist>
  82                 <listitem><para>
  83                         <code>$id</code>: 元素名或 DOM ID。
  84                 </para></listitem>
  85
  86                 <listitem><para>
  87                         <code>$value</code> （可选）：元素的当前值。
  88                 </para></listitem>
  89
  90                 <listitem><para>
  91                         <code>$params</code> （可选）： dijit-specific 参数。
  92                         基本上是任何用于配置 dijit 的非 HTML 属性。
  93                 </para></listitem>
  94
  95                 <listitem><para>
  96                         <code>$attribs</code> （可选）：任何用于解析 dijit的附加的 HTML 属性。
  97                         如果键 'id' 在这个数组中传递，它将被用于表单元素的 DOM id，
  98                         并且 <code>$id</code> 将被用于它的名字。
  99                 </para></listitem>
 100             </itemizedlist>
 101
 102             <para>
 103                 一些元素要求更多的参数，将在个别元素助手的描述中注明。
 104             </para>
 105         </listitem>
 106     </itemizedlist>
 107
 108     <para>
 109         为了使用这些视图助手，你需要用视图对象来注册路径给 dojo 视图助手。
 110     </para>
 111
 112     <example id="zend.dojo.view.dijit.prefixpath">
 113         <title> 注册 Dojo 视图助手前缀路径 </title>
 114
 115         <programlisting role="php"><![CDATA[
 116 $view->addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper');
 117 ]]></programlisting>
 118     </example>
 119
 120     <sect3 id="zend.dojo.view.dijit.layout">
 121         <title>Dijit 布局元素 </title>
 122
 123         <para>
 124             dijit.layout 元素家族用来生成定制的、可预计的布局。任何关于用法的问题
 125             <ulink
 126                 url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout">
 127             请阅读 Dojo 手册</ulink>。
 128         </para>
 129
 130         <para>
 131             所有的 dijit 布局元素都有签名 <code>string ($id = null, $content = '', array $params =
 132                 array(), array $attribs = array())</code>。
 133             对于所有情况，如果不传递参数，就返回助手对象自己。
 134             访问 <code>captureStart()</code> 和 <code>captureEnd()</code> 方法，它让你
 135             抓取内容而不是传递它给布局容器。
 136         </para>
 137
 138         <itemizedlist>
 139             <listitem>
 140                 <para>
 141                     <emphasis>AccordionContainer</emphasis>：dijit.layout.AccordionContainer。
 142                     垂直堆放所有的 pane ，点击一个 pane 的 titlebar 就会展开并显示特定的 pane。
 143                 </para>
 144
 145                 <programlisting role="php"><![CDATA[
 146 <?= $view->accordionContainer(
 147     'foo',
 148     $content,
 149     array(
 150         'duration' => 200,
 151     ),
 152     array(
 153         'style' => 'width: 200px; height: 300px;',
 154     ),
 155 ); ?>
 156 ]]></programlisting>
 157             </listitem>
 158
 159             <listitem>
 160                 <para>
 161                     <emphasis>AccordionPane</emphasis>: dijit.layout.AccordionPane.
 162                     在 AccordionContainer 内使用。
 163                 </para>
 164
 165                 <programlisting role="php"><![CDATA[
 166 <?= $view->accordionPane(
 167     'foo',
 168     $content,
 169     array(
 170         'title' => 'Pane Title',
 171     ),
 172     array(
 173         'style' => 'background-color: lightgray;',
 174     ),
 175 ); ?>
 176 ]]></programlisting>
 177             </listitem>
 178
 179             <listitem>
 180                 <para>
 181                     <emphasis>BorderContainer</emphasis>：dijit.layout.BorderContainer。
 182                     用象传统程序中的可改变尺寸的 pane 来完成布局。
 183                 </para>
 184
 185                 <programlisting role="php"><![CDATA[
 186 <?= $view->borderContainer(
 187     'foo',
 188     $content,
 189     array(
 190         'design' => 'headline',
 191     ),
 192     array(
 193         'style' => 'width: 100%; height: 100%',
 194     ),
 195 ); ?>
 196 ]]></programlisting>
 197             </listitem>
 198
 199             <listitem>
 200                 <para>
 201                     <emphasis>ContentPane</emphasis>: dijit.layout.ContentPane。
 202                     用在除了 AccordionContainer 以外的任何容器内部。
 203                 </para>
 204
 205                 <programlisting role="php"><![CDATA[
 206 <?= $view->contentPane(
 207     'foo',
 208     $content,
 209     array(
 210         'title'  => 'Pane Title',
 211         'region' => 'left',
 212     ),
 213     array(
 214         'style' => 'width: 120px; background-color: lightgray;',
 215     ),
 216 ); ?>
 217 ]]></programlisting>
 218             </listitem>
 219
 220             <listitem>
 221                 <para>
 222                     <emphasis>SplitContainer</emphasis>：dijit.layout.SplitContainer。
 223                     允许可变尺寸的内容 pane；在 Dojo 里废除转而使用 BorderContainer。
 224                 </para>
 225
 226                 <programlisting role="php"><![CDATA[
 227 <?= $view->splitContainer(
 228     'foo',
 229     $content,
 230     array(
 231         'orientation'  => 'horizontal',
 232         'sizerWidth'   => 7,
 233         'activeSizing' => true,
 234     ),
 235     array(
 236         'style' => 'width: 400px; height: 500px;',
 237     ),
 238 ); ?>
 239 ]]></programlisting>
 240             </listitem>
 241
 242             <listitem>
 243                 <para>
 244                     <emphasis>StackContainer</emphasis>：dijit.layout.StackContainer。
 245                     所有在 StackContainer 里的 pane 放在一个堆栈里，生成按钮或功能一次显示一个。
 246                 </para>
 247
 248                 <programlisting role="php"><![CDATA[
 249 <?= $view->stackContainer(
 250     'foo',
 251     $content,
 252     array(),
 253     array(
 254         'style' => 'width: 400px; height: 500px; border: 1px;',
 255     ),
 256 ); ?>
 257 ]]></programlisting>
 258             </listitem>
 259
 260             <listitem>
 261                 <para>
 262                     <emphasis>TabContainer</emphasis>：dijit.layout.TabContainer。
 263                     所有在 TabContainer 里的 pane 放在一个堆栈里，并带有 tab 的位置，用于切换。
 264                 </para>
 265
 266                 <programlisting role="php"><![CDATA[
 267 <?= $view->stackContainer(
 268     'foo',
 269     $content,
 270     array(),
 271     array(
 272         'style' => 'width: 400px; height: 500px; border: 1px;',
 273     ),
 274 ); ?>
 275 ]]></programlisting>
 276             </listitem>
 277         </itemizedlist>
 278
 279         <para>
 280             下列的抓取方法对所有的布局容器都可用：
 281         </para>
 282
 283         <itemizedlist>
 284             <listitem>
 285                 <para>
 286                     <code>captureStart($id, array $params = array(), array $attribs = array())</code>：
 287                     开始抓取内容到容器。<code>$params</code> 是和容器一起使用的 dijit 参数，
 288                     <code>$attribs</code> 指的是任何一般的 HTML 属性。
 289                 </para>
 290
 291                 <para>
 292                     <emphasis> 只要 ids 没有重复 </emphasis>，容器在抓取的时候可以嵌套。
 293                 </para>
 294             </listitem>
 295
 296             <listitem>
 297                 <para>
 298                     <code>captureEnd($id)</code>：
 299                     完成抓取内容到容器。<code>$id</code> 是指先前和  <code>captureStart()</code>
 300                     调用一起使用的 id。返回一个字符串表示容器和它的内容，就好像传递内容给助手自己。
 301                 </para>
 302             </listitem>
 303         </itemizedlist>
 304
 305         <example id="zend.dojo.view.dijit.layout.borderexample">
 306             <title>BorderContainer 布局 dijit 范例</title>
 307
 308             <para>
 309                 BorderContainers, 特别是当和抓取内容耦合时，对复杂的布局效果特别有用。
 310             </para>
 311
 312             <programlisting role="php"><![CDATA[
 313 $view->borderContainer()->captureStart('masterLayout', array('design' => 'headline'));
 314
 315 echo $view->contentPane(
 316     'menuPane',
 317     'This is the menu pane',
 318     array('region' => 'top'),
 319     array('style' => 'background-color: darkblue;')
 320 );
 321
 322 echo  $view->contentPane(
 323     'navPane',
 324     'This is the navigation pane',
 325     array('region' => 'left'),
 326     array('style' => 'width: 200px; background-color: lightblue;')
 327 );
 328
 329 echo $view->contentPane(
 330     'mainPane',
 331     'This is the main content pane area',
 332     array('region' => 'center'),
 333     array('style' => 'background-color: white;')
 334 );
 335
 336 echo $view->contentPane(
 337     'statusPane',
 338     'Status area',
 339     array('region' => 'bottom'),
 340     array('style' => 'background-color: lightgray;')
 341 );
 342
 343 echo $view->borderContainer()->captureEnd('masterLayout');
 344 ]]></programlisting>
 345         </example>
 346     </sect3>
 347
 348     <sect3 id="zend.dojo.view.dijit.form">
 349         <title>Dijit 表单元素 </title>
 350
 351         <para>
 352             Dojo 的表单校验和输入 dijit 在 dijit.form 树中。
 353             更多关于这些元素的一般用法和可接受的参数，请
 354             <ulink
 355                 url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input">访问
 356                 dijit.form 文档</ulink>.
 357         </para>
 358
 359         <para>
 360             下列 dijit 表单元素在 Zend Framework 里可用。
 361             除非注明，都有签名 <code>string ($id,
 362                 $value = '', array $params = array(), array $attribs =
 363                 array())</code>.
 364         </para>
 365
 366         <itemizedlist>
 367             <listitem>
 368                 <para>
 369                     <emphasis>Button</emphasis>: dijit.form.Button. 显示一个表单按钮
 370                 </para>
 371
 372                 <programlisting role="php"><![CDATA[
 373 <?= $view->button(
 374     'foo',
 375     'Show Me!',
 376     array('iconClass' => 'myButtons'),
 377 ); ?>
 378 ]]></programlisting>
 379             </listitem>
 380
 381             <listitem>
 382                 <para>
 383                     <emphasis>CheckBox</emphasis>：dijit.form.CheckBox.
 384                     显示一个 checkbox。接受可选的第五个参数，<code>$checkedOptions</code> 数组，
 385                     包含：
 386                 </para>
 387
 388                 <itemizedlist>
 389                     <listitem><para>
 390                             按顺序带两个值的索引数组，一个选中的值和一个未选中的值；或者
 391                     </para></listitem>
 392
 393                     <listitem><para>
 394                             带键 'checkedValue' 和 'unCheckedValue'的联合数组。
 395                     </para></listitem>
 396                 </itemizedlist>
 397
 398                 <para>
 399                     如果没有提供 <code>$checkedOptions</code> 就假定为 1 和 0 。
 400                 </para>
 401
 402                 <programlisting role="php"><![CDATA[
 403 <?= $view->checkBox(
 404     'foo',
 405     'bar',
 406     array(),
 407     array(),
 408     array('checkedValue' => 'foo', 'unCheckedValue' => 'bar')
 409 ); ?>
 410 ]]></programlisting>
 411             </listitem>
 412
 413             <listitem>
 414                 <para>
 415                     <emphasis>ComboBox</emphasis>：dijit.layout.ComboBox.
 416                     组合框是一个混合体，包括选择框和带有自动完成的文字框。
 417                     关键是在列表里没有相应的选项的时候可以手工输入，而且是有效的。
 418                     它接受可选的第五个参数：联合数组 <code>$options</code>；如果提供
 419                     了该参数，ComboBox 就当作 <code>select</code> 被解析。也要注意
 420                     <code>$options</code> 数组的 <emphasis>标签值</emphasis> 在表单中返回，
 421                     而不选项值自己。
 422                 </para>
 423
 424                 <para>
 425                     另外，也可以传递关于和元素一起使用的 dojo.data 数据存储的信息。
 426                     如果提供该参数，ComboBox 就当作 <code>input</code> 被解析，
 427                     并且将通过那个数据存储来取出它的选项。
 428                 </para>
 429
 430                 <para>
 431                     为了指定数据存储，请提供下列 <code>$params</code> 键组合之一：
 432                 </para>
 433
 434                 <itemizedlist>
 435                     <listitem>
 436                         <para>
 437                             键 'store'，带有一个数组值；数组应包含下列键：
 438                         </para>
 439
 440                         <itemizedlist>
 441                             <listitem><para>
 442                                 <emphasis>store</emphasis>：表示数据存储的 javascript 变量名
 443                                 （this could be the name you would like for it to use）。
 444                             </para></listitem>
 445
 446                             <listitem><para>
 447                                 <emphasis>type</emphasis>：数据存储类型；例如：'dojo.data.ItemFileReadStore'。
 448                             </para></listitem>
 449
 450                             <listitem><para>
 451                                 <emphasis>params</emphasis> （可选）：一个键/值对的联合数组，用来配置数据存储。
 452                                 'url' 参数是个典型的例子。
 453                             </para></listitem>
 454                         </itemizedlist>
 455                     </listitem>
 456
 457                     <listitem>
 458                         <para>
 459                             键：
 460                         </para>
 461
 462                         <itemizedlist>
 463                             <listitem><para>
 464                                 <emphasis>store</emphasis>：表示数据存储名的字符串。
 465                             </para></listitem>
 466
 467                             <listitem><para>
 468                                 <emphasis>storeType</emphasis>：表示数据存储 dojo.data 类型的字符传（例如 'dojo.data.ItemFileReadStore'）。
 469                             </para></listitem>
 470
 471                             <listitem><para>
 472                                 <emphasis>storeParams</emphasis>：一个键/值对联合数组，用于配置数据存储。
 473                             </para></listitem>
 474                         </itemizedlist>
 475                     </listitem>
 476                 </itemizedlist>
 477
 478                 <programlisting role="php"><![CDATA[
 479 // As a select element:
 480 echo $view->comboBox(
 481     'foo',
 482     'bar',
 483     array(
 484         'autocomplete' => false,
 485     ),
 486     array(),
 487     array(
 488         'foo' => 'Foo',
 489         'bar' => 'Bar',
 490         'baz' => 'Baz',
 491     )
 492 );
 493
 494 // As a dojo.data-enabled element:
 495 echo $view->comboBox(
 496     'foo',
 497     'bar',
 498     array(
 499         'autocomplete' => false,
 500         'store'        => 'stateStore',
 501         'storeType'    => 'dojo.data.ItemFileReadStore',
 502         'storeParams'  => array('url' => '/js/states.json'),
 503     ),
 504 );
 505 ]]></programlisting>
 506             </listitem>
 507
 508             <listitem>
 509                 <para>
 510                     <emphasis>CurrencyTextBox</emphasis>：dijit.form.CurrencyTextBox。
 511                     从 ValidationTextBox 继承，并提供货币的客户端校验。
 512                     它期望 dijit 参数 'currency' 的值是适当的三字符货币代码。
 513                     可以为 ValidationTextBox 和 TextBox 指定任何有效的 dijit 参数。
 514                 </para>
 515
 516                 <programlisting role="php"><![CDATA[
 517 echo $view->currencyTextBox(
 518     'foo',
 519     '$25.00',
 520     array('currency' => 'USD'),
 521     array('maxlength' => 20)
 522 );
 523 ]]></programlisting>
 524
 525                 <note>
 526                     <title>Issues with Builds</title>
 527
 528                     <para>
 529                         目前有这些 <ulink
 530                             url="http://trac.dojotoolkit.org/ticket/7183">
 531                         和 build 层一起使用的 CurrencyTextBox 的已知问题
 532                         </ulink>.
 533                         一个解决办法是确保文档的 Content-Type http-equiv meta tag 把字符集设置为 utf-8，
 534                         可通过调用下列方法来完成：
 535                     </para>
 536
 537                     <programlisting role="php"><![CDATA[
 538 $view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8');
 539 ?>]]></programlisting>
 540
 541                     <para>
 542                         这当然意味着你需要确保 <code>headMeta()</code> 占位符在布局脚本中。
 543                     </para>
 544                 </note>
 545             </listitem>
 546
 547             <listitem>
 548                 <para>
 549                     <emphasis>DateTextBox</emphasis>：dijit.form.DateTextBox.
 550                     从 ValidationTextBox 继承，提供客户端的日期校验和下拉式日历。
 551                     你可以指定任何 dijit 可用的参数给 ValidationTextBox 或 TextBox。
 552                 </para>
 553
 554                 <programlisting role="php"><![CDATA[
 555 echo $view->dateTextBox(
 556     'foo',
 557     '2008-07-11',
 558     array('required' => true)
 559 );
 560 ]]></programlisting>
 561             </listitem>
 562
 563             <listitem>
 564                 <para>
 565                     <emphasis>FilteringSelect</emphasis>：dijit.form.FilteringSelect。
 566                     和 ComboBox 类似，这是个选择/文字混合体，它可以从提供的选项列表
 567                     里读取或者从 dojo.data 数据存储里抓取。和 ComboBox 不一样的地方是
 568                     FilteringSelect 不允许输入不在列表里的选项。另外，它的操作和标准选择
 569                     一样，从选项值里选择而不是从标签里选择，当表单提交时返回它们。
 570                 </para>
 571
 572                 <para>
 573                     请参考上述关于 ComboBox 范例和定义数据存储的可用选项的信息。
 574                 </para>
 575             </listitem>
 576
 577             <listitem>
 578                 <para>
 579                     <emphasis>HorizontalSlider</emphasis> 和
 580                     <emphasis>VerticalSlider</emphasis>：
 581                     dijit.form.HorizontalSlider 和 dijit.form.VerticalSlider.
 582                     滑尺是 UI 小部件，用来在给定范围内选择数值的，这两个一个是水平的，一个是垂直的。
 583                 </para>
 584
 585                 <para>
 586                     至少，它们需要 dijit 参数
 587                     'minimum'、 'maximum' 和 'discreteValues'，来定义值的范围。
 588                     其它通用的选项有：
 589                 </para>
 590
 591                 <itemizedlist>
 592                     <listitem><para>
 593                         'intermediateChanges' 用来表明当 handle 被拖的时候是否需要发出 onChange 事件。
 594                     </para></listitem>
 595
 596                     <listitem><para>
 597                         'clickSelect' 用来允许在滑尺上点击来设置其值。
 598                     </para></listitem>
 599
 600                     <listitem><para>
 601                         'pageIncrement' 通过 pageUp 和 pageDown 来增加/减少值。
 602                     </para></listitem>
 603
 604                     <listitem><para>
 605                         'showButtons' 设置来允许在滑尺的一端显示按钮来操作数值。
 606                     </para></listitem>
 607                 </itemizedlist>
 608
 609                 <para>
 610                     Zend Framework 实现生成一个隐藏的元素来存储滑尺的数值。
 611                 </para>
 612
 613                 <para>
 614                     你可以可选地为滑尺显示尺子或标签，可通过分配一个或多个 dijit 参数
 615                     'topDecoration' 和/或 'bottomDecoration'(水平滑尺） 或 'leftDecoration' 和/或
 616                     'rightDecoration' （垂直滑尺）来完成。它们有下列选项：
 617                 </para>
 618
 619                 <itemizedlist>
 620                     <listitem><para>
 621                         <emphasis>container</emphasis>：容器名称。
 622                     </para></listitem>
 623
 624                     <listitem><para>
 625                         <emphasis>labels</emphasis> （可选）：标签数组。
 626                         在滑尺的一端使用空字符串只为内部值提供标签。
 627                         当指定一个 'Labels' dijit 变量时必需。
 628                     </para></listitem>
 629
 630                     <listitem><para>
 631                         <emphasis>dijit</emphasis> （可选）：
 632                         HorizontalRule、HorizontalRuleLabels、 VerticalRule 或
 633                         VerticalRuleLabels 中的一个，缺省为尺子 dijits 之一。
 634                     </para></listitem>
 635
 636                     <listitem>
 637                         <para>
 638                             <emphasis>params</emphasis> （可选）：
 639                             配置尺子 dijit 的 dijit 参数，参数规范包括：
 640                         </para>
 641
 642                         <itemizedlist>
 643                             <listitem><para>
 644                                 <emphasis>container</emphasis> （可选）：
 645                                 尺子容器的属性和参数的数组。
 646                             </para></listitem>
 647
 648                             <listitem><para>
 649                                 <emphasis>labels</emphasis> （可选）：
 650                                 标签列表容器的属性和参数的数组。
 651                             </para></listitem>
 652                         </itemizedlist>
 653                     </listitem>
 654
 655                     <listitem><para>
 656                         <emphasis>attribs</emphasis> （可选）：
 657                         和尺子/标签一起使用的 HTML 属性，遵循  <code>params</code> 选项格式并
 658                         且是一个带有键 'container' 和 'labels'  的联合数组。
 659                     </para></listitem>
 660                 </itemizedlist>
 661
 662                 <programlisting role="php"><![CDATA[
 663 echo $view->horizontalSlider(
 664     'foo',
 665     1,
 666     array(
 667         'minimum'             => -10,
 668         'maximum'             => 10,
 669         'discreteValues'      => 11,
 670         'intermediateChanges' => true,
 671         'showButtons'         => true,
 672         'topDecoration'       => array(
 673             'container' => 'topContainer'
 674             'dijit'     => 'HorizontalRuleLabels',
 675             'labels'    => array(
 676                 ' ',
 677                 '20%',
 678                 '40%',
 679                 '60%',
 680                 '80%',
 681                 ' ',
 682             ),
 683             'params' => array(
 684                 'container' => array(
 685                     'style' => 'height:1.2em; font-size=75%;color:gray;',
 686                 ),
 687                 'labels' => array(
 688                     'style' => 'height:1em; font-size=75%;color:gray;',
 689                 ),
 690             ),
 691         ),
 692         'bottomDecoration'    => array(
 693             'container' => 'bottomContainer'
 694             'labels'    => array(
 695                 '0%',
 696                 '50%',
 697                 '100%',
 698             ),
 699             'params' => array(
 700                 'container' => array(
 701                     'style' => 'height:1.2em; font-size=75%;color:gray;',
 702                 ),
 703                 'labels' => array(
 704                     'style' => 'height:1em; font-size=75%;color:gray;',
 705                 ),
 706             ),
 707         ),
 708     )
 709 );
 710 ]]></programlisting>
 711             </listitem>
 712
 713             <listitem>
 714                 <para>
 715                     <emphasis>NumberSpinner</emphasis>：dijit.form.NumberSpinner。
 716                     数字输入文本框，按钮用来增减值。
 717                 </para>
 718
 719                 <para>
 720                     期望用于 dijit 参数 'constraints' 的联合数值或者键 'min'、'max' 和 'places'
 721                     （这些也期望 constraints 参数的条目）。
 722                     'places' 可用于指示微调数的增加和减少的数值。
 723                 </para>
 724
 725                 <programlisting role="php"><![CDATA[
 726 echo $view->numberSpinner(
 727     'foo',
 728     5,
 729     array(
 730         'min'    => -10,
 731         'max'    => 10,
 732         'places' => 2,
 733     ),
 734     array(
 735         'maxlenth' => 3,
 736     )
 737 );
 738 ]]></programlisting>
 739             </listitem>
 740
 741             <listitem>
 742                 <para>
 743                     <emphasis>NumberTextBox</emphasis>：dijit.form.NumberTextBox。
 744                     NumberTextBox 可选地依靠给定的限制以本地化方式格式化和显示数字条目，同时也校验数字条目。
 745                 </para>
 746
 747                 <programlisting role="php"><![CDATA[
 748 echo $view->numberTextBox(
 749     'foo',
 750     5,
 751     array(
 752         'places' => 4,
 753         'type'   => 'percent',
 754     ),
 755     array(
 756         'maxlength' => 20,
 757     )
 758 );
 759 ]]></programlisting>
 760             </listitem>
 761
 762             <listitem>
 763                 <para>
 764                     <emphasis>PasswordTextBox</emphasis>：
 765                     和密码输入相关的 dijit.form.ValidationTextBox。
 766                     PasswordTextBox 生成密码输入，并和当前的 dijit 主题匹配，同时也做客户端校验。
 767                 </para>
 768
 769                 <programlisting role="php"><![CDATA[
 770 echo $view->passwordTextBox(
 771     'foo',
 772     '',
 773     array(
 774         'required' => true,
 775     ),
 776     array(
 777         'maxlength' => 20,
 778     )
 779 );
 780 ]]></programlisting>
 781             </listitem>
 782
 783             <listitem>
 784                 <para>
 785                     <emphasis>RadioButton</emphasis>：dijit.form.RadioButton。
 786                      一组选项，但只能选一个，除了视觉上和其它 dijits 保持一致，
 787                      其它方面都和普通的单选（radio，也叫无线电按钮）元素一样。
 788                 </para>
 789
 790                 <para>
 791                     RadioButton 接受可选的第五个参数，<code>$options</code>，
 792                     是个联合数组，值/标签对用作radio选项。
 793                     你可以以 <code>$attribs</code> 键 <code>options</code> 来传递。
 794                 </para>
 795
 796                 <programlisting role="php"><![CDATA[
 797 echo $view->radioButton(
 798     'foo',
 799     'bar',
 800     array(),
 801     array(),
 802     array(
 803         'foo' => 'Foo',
 804         'bar' => 'Bar',
 805         'baz' => 'Baz',
 806     )
 807 );
 808 ]]></programlisting>
 809             </listitem>
 810
 811             <listitem>
 812                 <para>
 813                     <emphasis>SubmitButton</emphasis>：和提交元素相关的 dijit.form.Button。
 814                      参见按钮视图助手有更多的细节。主要的区别是这个按钮可以提交一个表单。
 815                 </para>
 816             </listitem>
 817
 818             <listitem>
 819                 <para>
 820                     <emphasis>Textarea</emphasis>：dijit.form.Textarea.
 821                     除了有很多行以外，和普通的文本区域一样，它们按照用户类型来扩展。
 822                     宽度通过风格来设定。
 823                 </para>
 824
 825                 <programlisting role="php"><![CDATA[
 826 echo $view->textarea(
 827     'foo',
 828     'Start writing here...',
 829     array(),
 830     array('style' => 'width: 300px;')
 831 );
 832 ]]></programlisting>
 833             </listitem>
 834
 835             <listitem>
 836                 <para>
 837                     <emphasis>TextBox</emphasis>：dijit.form.TextBox。
 838                     该元素主要用来在不同的 dijit 元素之间提供一个通用的外观，
 839                     并对其它 TextBox 派生的类 （ValidationTextBox、 NumberTextBox、 CurrencyTextBox、
 840                     DateTextBox 和 TimeTextBox）提供基本功能。
 841                 </para>
 842
 843                 <para>
 844                     普通的 dijit 参数标志包括 'lowercase' （转换成小写）、
 845                     'uppercase' （转换成大写）、
 846                     'propercase' （转换成合适的大小写）和 trim （修剪引导和拖尾的空白字符）；
 847                     它们都接受布尔值。另外，你可以指定参数 'size' 和 'maxLength'。
 848                 </para>
 849
 850                 <programlisting role="php"><![CDATA[
 851 echo $view->textBox(
 852     'foo',
 853     'some text',
 854     array(
 855         'trim'       => true,
 856         'propercase' => true,
 857         'maxLength'  => 20,
 858     ),
 859     array(
 860         'size' => 20,
 861     )
 862 );
 863 ]]></programlisting>
 864             </listitem>
 865
 866             <listitem>
 867                 <para>
 868                     <emphasis>TimeTextBox</emphasis>： dijit.form.TimeTextBox。
 869                     也包含在 TextBox 家族，TimeTextBox 提供一个下拉式时间选择器。
 870                     Dijit 参数让你指定可用的时间增量以及有效的时间的可见范围。
 871                 </para>
 872
 873                 <programlisting role="php"><![CDATA[
 874 echo $view->timeTextBox(
 875     'foo',
 876     '',
 877     array(
 878         'am.pm'            => true,
 879         'visibleIncrement' => 'T00:05:00', // 5-minute increments
 880         'visibleRange'     => 'T02:00:00', // show 2 hours of increments
 881     ),
 882     array(
 883         'size' => 20,
 884     )
 885 );
 886
 887 ]]></programlisting>
 888             </listitem>
 889
 890             <listitem>
 891                 <para>
 892                     <emphasis>ValidationTextBox</emphasis>：dijit.form.ValidateTextBox。
 893                     为文本元素提供客户端校验。从 TextBox 继承。
 894                 </para>
 895
 896                 <para>
 897                     普通的 dijit 参数包括：
 898                 </para>
 899
 900                 <itemizedlist>
 901                     <listitem><para>
 902                         <emphasis>invalidMessage</emphasis>：当检测到一个无效的输入，就显示一条消息。
 903                     </para></listitem>
 904
 905                     <listitem><para>
 906                         <emphasis>promptMessage</emphasis>：工具提示帮助信息。
 907                     </para></listitem>
 908
 909                     <listitem><para>
 910                         <emphasis>regExp</emphasis>：用于校验文本的正则表达式，不需要边界记号。
 911                     </para></listitem>
 912
 913                     <listitem><para>
 914                         <emphasis>required</emphasis>：确定元素是否必需。如果需要就把元素嵌入
 915                          dijit.form.Form，它将被标记为无效并防止提交。
 916                     </para></listitem>
 917                 </itemizedlist>
 918
 919                 <programlisting role="php"><![CDATA[
 920 echo $view->validationTextBox(
 921     'foo',
 922     '',
 923     array(
 924         'required' => true,
 925         'regExp'   => '[\w]+',
 926         'invalidMessage' => 'No spaces or non-word characters allowed',
 927         'promptMessage'  => 'Single word consisting of alphanumeric characters and underscores only',
 928     ),
 929     array(
 930         'maxlength' => 20,
 931     )
 932 );
 933 ]]></programlisting>
 934             </listitem>
 935         </itemizedlist>
 936     </sect3>
 937 </sect2>
 938 <!--
 939 vim:se ts=4 sw=4 et:
 940 -->