Zend_Dojo-View-Helpers.xml 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- EN-Revision: 16101 -->
  3. <!-- Reviewed: no -->
  4. <sect2 id="zend.dojo.view.dijit">
  5. <title>Dijit-Spezifische View Helfer</title>
  6. <para>
  7. Aus dem Dojo Handbuch: "Dijit ist ein Widget System das über Dojo gelegt wurde.". Dijit
  8. enthält eine Vielzahl von Layout und Formular Widgets die erstellt wurden um
  9. Zugriffsfeatures, Lokalisation, und standardtisiertes (und themenbasierendes) Look-and-Feel
  10. zu bieten.
  11. </para>
  12. <para>
  13. Zend Framework wird mit einer Vielzahl an View Helfern ausgeliefert die es erlauben Dijits
  14. in eigenen View Skripten darzustellen und anzupassen. Es gibt drei Basistypen:
  15. </para>
  16. <itemizedlist>
  17. <listitem>
  18. <para>
  19. <emphasis>Layout Container</emphasis>: Diese wurden erstellt um in View Skripten
  20. verwendet, oder von Formular Dekoratoren für Formulare, Unterformulare oder
  21. Anzeigegruppen konsumiert zu werden. Sie hüllen die verschiedenen angebotenen
  22. Klassen in dijit.layout ein. Jeder Dijit Layout Viewhelfer erwartet die folgenden
  23. Argumente:
  24. </para>
  25. <itemizedlist>
  26. <listitem><para>
  27. <code>$id</code>: Der Name des Containers oder die DOM ID.
  28. </para></listitem>
  29. <listitem><para>
  30. <code>$content</code>: Der Inhalt der vom Layout Container umhüllt werden
  31. soll.
  32. </para></listitem>
  33. <listitem><para>
  34. <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich
  35. kann jedes nicht-HTML Attribut verwendet werden um den Dijit Layout
  36. Container zu konfigurieren.
  37. </para></listitem>
  38. <listitem><para>
  39. <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das
  40. verwendet werden soll um den Container DIV darzustellen. Wenn der Schlüssel
  41. 'id' an dieses Array übergeben wird, wird es für die ID des DOM Formular
  42. Elements verwendet und <code>$id</code> wird für seinen Namen verwendet.
  43. </para></listitem>
  44. </itemizedlist>
  45. <para>
  46. Wenn an den Dijit Layout Viewhelfer keine Argumente übergeben werden, wird der
  47. Helfer selbst zurückgegeben. Das erlaubt es den Inhalt zu erhalten, was oft der
  48. einfachste Weg ist um Inhalt an den Layout Container zu übergeben. Beispiele für
  49. diese Funktionalität werden später in diesem Kapitel gezeigt.
  50. </para>
  51. </listitem>
  52. <listitem>
  53. <para>
  54. <emphasis>Form Dijit</emphasis>: Auch wen das dijit.form.Form Dijit für die
  55. Verwendung von Dijit Form Elementen nicht vollständig notwendig ist, stellt es
  56. sicher das, wenn ein Versuch unternommen wird ein Formular zu übertragen das die
  57. Client-seitigen Prüfungen nicht besteht, die Übertragung angehalten und eine
  58. Prüffehlermeldung geworfen wird. Der Form Dijit Viewhelfer erwartet die folgenden
  59. Argumente:
  60. </para>
  61. <itemizedlist>
  62. <listitem><para>
  63. <code>$id</code>: Der Name des Containers oder der DOM ID.
  64. </para></listitem>
  65. <listitem><para>
  66. <code>$attribs</code> (Optional): Alle zusätzliche HTML Attribute die
  67. verwendet werden sollten um das Container DIV darzustellen.
  68. </para></listitem>
  69. <listitem><para>
  70. <code>$content</code> (Optional): Der Inhalt der im Formular umschlossen
  71. wird. Wenn keiner übergeben wird, wird ein leerer String verwendet.
  72. </para></listitem>
  73. </itemizedlist>
  74. <para>
  75. Die Reihenfolge der Argumente variiert von den anderen Dijits um die Kompatibilität
  76. mit dem standard <code>form()</code> Viewhelfer zu haben.
  77. </para>
  78. </listitem>
  79. <listitem>
  80. <para>
  81. <emphasis>Form Elemente</emphasis>: Diese wurden designed um von
  82. <classname>Zend_Form</classname> verwendet zu werden, können aber auch selbstständig
  83. in Viewsktipten verwendet werden. Jedes Dijit Element Viewhelfer erwartet die
  84. folgenden Elemente:
  85. </para>
  86. <itemizedlist>
  87. <listitem><para>
  88. <code>$id</code>: Der Name des Elements oder die DOM ID.
  89. </para></listitem>
  90. <listitem><para>
  91. <code>$value</code> (Optional): Der aktuelle Wert des Elements.
  92. </para></listitem>
  93. <listitem><para>
  94. <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich
  95. können alle nicht-HTML Attribute für die Konfiguration des Dijits verwendet
  96. werden.
  97. </para></listitem>
  98. <listitem><para>
  99. <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das
  100. verwendet werden soll um das Dijit darzustellen. Wenn der Schlüssel 'id' an
  101. dieses Array übergeben wird, wird es für die ID des DOM Formular Elements
  102. verwendet und <code>$id</code> wird für seinen Namen verwendet.
  103. </para></listitem>
  104. </itemizedlist>
  105. <para>
  106. Einige Elemente benötigen mehr Argumente; diese werden in den Beschreibungen der
  107. individuellen Elementhelfer erklärt.
  108. </para>
  109. </listitem>
  110. </itemizedlist>
  111. <para>
  112. Um diese Viewhelfer zu verwendenn, muß der Pfad zu den Dojo Viewhelfern im View Objekt
  113. registriert werden.
  114. </para>
  115. <example id="zend.dojo.view.dijit.prefixpath">
  116. <title>Registrierung des Präfix Pfades zu den Dojo Viewhelfern</title>
  117. <programlisting language="php"><![CDATA[
  118. $view->addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper');
  119. ]]></programlisting>
  120. </example>
  121. <sect3 id="zend.dojo.view.dijit.layout">
  122. <title>Dijit Layout Elemente</title>
  123. <para>
  124. Die Familie der dijit.layout Elemente sind für die Erstellung von eigenen,
  125. vorhersagbaren Layouts für die eigene Site. Für alle Fragen über die generelle
  126. Verwendung <ulink
  127. url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout">lesen Sie
  128. hierüber im Dojo Handbuch nach</ulink>.
  129. </para>
  130. <para>
  131. Alle Dijit Layoutelemente haben die Signatur <code>string ($id = null, $content = '',
  132. array $params = array(), array $attribs = array())</code>. In allen Fällen wird,
  133. wenn man keine Argumente übergibt, das Helferobjekt selbst zurückgegeben. Das gibt einem
  134. Zugriff auf die <code>captureStart()</code> und <code>captureEnd()</code> Methoden,
  135. welche es erlauben Inhalte zu holen statt diese an den Layout Container zu übergeben.
  136. </para>
  137. <itemizedlist>
  138. <listitem>
  139. <para>
  140. <emphasis>AccordionContainer</emphasis>: dijit.layout.AccordionContainer. Fügt
  141. alle Ausschnitte vertikal zusallen; das Klicken auf die Überschrift eines
  142. Ausschnittes expandiert diesen und zeigt den betreffenden Ausschnitt an.
  143. </para>
  144. <programlisting language="php"><![CDATA[
  145. <?php echo $view->accordionContainer(
  146. 'foo',
  147. $content,
  148. array(
  149. 'duration' => 200,
  150. ),
  151. array(
  152. 'style' => 'width: 200px; height: 300px;',
  153. ),
  154. ); ?>
  155. ]]></programlisting>
  156. </listitem>
  157. <listitem>
  158. <para>
  159. <emphasis>AccordionPane</emphasis>: dijit.layout.AccordionPane. Für die
  160. Verwendung im AccordionContainer.
  161. </para>
  162. <programlisting language="php"><![CDATA[
  163. <?php echo $view->accordionPane(
  164. 'foo',
  165. $content,
  166. array(
  167. 'title' => 'Titel des Ausschnittes',
  168. ),
  169. array(
  170. 'style' => 'background-color: lightgray;',
  171. ),
  172. ); ?>
  173. ]]></programlisting>
  174. </listitem>
  175. <listitem>
  176. <para>
  177. <emphasis>BorderContainer</emphasis>: dijit.layout.BorderContainer. Ermöglicht
  178. Layouts mit optional größenveränderbaren Ausschnitten wie man Sie in
  179. traditionellen Anwendungen oft sieht.
  180. </para>
  181. <programlisting language="php"><![CDATA[
  182. <?php echo $view->borderContainer(
  183. 'foo',
  184. $content,
  185. array(
  186. 'design' => 'headline',
  187. ),
  188. array(
  189. 'style' => 'width: 100%; height: 100%',
  190. ),
  191. ); ?>
  192. ]]></programlisting>
  193. </listitem>
  194. <listitem>
  195. <para>
  196. <emphasis>ContentPane</emphasis>: dijit.layout.ContentPane. Wird in allen
  197. Containern ausser AccordionContainer verwendet.
  198. </para>
  199. <programlisting language="php"><![CDATA[
  200. <?php echo $view->contentPane(
  201. 'foo',
  202. $content,
  203. array(
  204. 'title' => 'Titel des Ausschnittes',
  205. 'region' => 'left',
  206. ),
  207. array(
  208. 'style' => 'width: 120px; background-color: lightgray;',
  209. ),
  210. ); ?>
  211. ]]></programlisting>
  212. </listitem>
  213. <listitem>
  214. <para>
  215. <emphasis>SplitContainer</emphasis>: dijit.layout.SplitContainer. Erlaubt
  216. Ausschnitte mit größenveränderbarem Inhalt; sollte in Dojo nicht mehr verwendet
  217. werden, stattdessen BorderContainer.
  218. </para>
  219. <programlisting language="php"><![CDATA[
  220. <?php echo $view->splitContainer(
  221. 'foo',
  222. $content,
  223. array(
  224. 'orientation' => 'horizontal',
  225. 'sizerWidth' => 7,
  226. 'activeSizing' => true,
  227. ),
  228. array(
  229. 'style' => 'width: 400px; height: 500px;',
  230. ),
  231. ); ?>
  232. ]]></programlisting>
  233. </listitem>
  234. <listitem>
  235. <para>
  236. <emphasis>StackContainer</emphasis>: dijit.layout.StackContainer. Alle
  237. Ausschnitte eines StackContainers werden in einem Stack platziert; erstelle
  238. Buttons oder Funktionalität um einen auf einmal zu erhalten.
  239. </para>
  240. <programlisting language="php"><![CDATA[
  241. <?php echo $view->stackContainer(
  242. 'foo',
  243. $content,
  244. array(),
  245. array(
  246. 'style' => 'width: 400px; height: 500px; border: 1px;',
  247. ),
  248. ); ?>
  249. ]]></programlisting>
  250. </listitem>
  251. <listitem>
  252. <para>
  253. <emphasis>TabContainer</emphasis>: dijit.layout.TabContainer. Alle Ausschnitte
  254. eines TabContainers werden in einem Stack platziert, wobei Tabs auf einer Seite
  255. positioniert werden um zwischen Ihnen zu wählen.
  256. </para>
  257. <programlisting language="php"><![CDATA[
  258. <?php echo $view->tabContainer(
  259. 'foo',
  260. $content,
  261. array(),
  262. array(
  263. 'style' => 'width: 400px; height: 500px; border: 1px;',
  264. ),
  265. ); ?>
  266. ]]></programlisting>
  267. </listitem>
  268. </itemizedlist>
  269. <para>
  270. Die folgenden Erfassungsmethoden sind für alle Layout Container vorhanden:
  271. </para>
  272. <itemizedlist>
  273. <listitem>
  274. <para>
  275. <code>captureStart($id, array $params = array(), array $attribs =
  276. array())</code>: Beginnt die Erfassung von Inhalt um Ihn in einem Container
  277. einzufügen. <code>$params</code> referiert auf die Dijit Parameters die mit dem
  278. Container verwendet werden, wärend <code>$attribs</code> auf alle generellen
  279. HTML Attribute die verwendet werden, zeigt.
  280. </para>
  281. <para>
  282. Container können für die Erfassung gekoppelt werden, <emphasis>solange keine IDs
  283. doppelt vorhanden sind</emphasis>.
  284. </para>
  285. </listitem>
  286. <listitem>
  287. <para>
  288. <code>captureEnd($id)</code>: Beendet die Erfassung von Inhalten die in den
  289. Container übernommen werden. <code>$id</code> sollte auf eine Id zeigen die
  290. vorher bei dem Aufruf von <code>captureStart()</code> verwendet wurde. Gibt
  291. einen String zurück der den Container und seinen Inhalt repräsentiert, wie wenn
  292. man einfach den Inhalt an den Helfer selbst übergeben hätte.
  293. </para>
  294. </listitem>
  295. </itemizedlist>
  296. <example id="zend.dojo.view.dijit.layout.borderexample">
  297. <title>Beispiel eines BorderContainer Layout Dijits</title>
  298. <para>
  299. BorderContainers, speziell wenn Sie mit der Fähigkeit gekoppelt werden Inhalte zu
  300. erfassen, sind nützlich um komplexe Layouteffekte zu erhalten.
  301. </para>
  302. <programlisting language="php"><![CDATA[
  303. $view->borderContainer()->captureStart('masterLayout',
  304. array('design' => 'headline'));
  305. echo $view->contentPane(
  306. 'menuPane',
  307. 'Das ist der Menü Ausschnitt',
  308. array('region' => 'top'),
  309. array('style' => 'background-color: darkblue;')
  310. );
  311. echo $view->contentPane(
  312. 'navPane',
  313. 'Das ist der Navigations Ausschnitt',
  314. array('region' => 'left'),
  315. array('style' => 'width: 200px; background-color: lightblue;')
  316. );
  317. echo $view->contentPane(
  318. 'mainPane',
  319. 'Das ist der Hauptabschnitt',
  320. array('region' => 'center'),
  321. array('style' => 'background-color: white;')
  322. );
  323. echo $view->contentPane(
  324. 'statusPane',
  325. 'Status area',
  326. array('region' => 'bottom'),
  327. array('style' => 'background-color: lightgray;')
  328. );
  329. echo $view->borderContainer()->captureEnd('masterLayout');
  330. ]]></programlisting>
  331. </example>
  332. </sect3>
  333. <sect3 id="zend.dojo.view.dijit.form">
  334. <title>Dijit Formularelemente</title>
  335. <para>
  336. Dojo's Formularprüfung und Eingabe Dijits sind im dijit.form Baum. Für zusätzliche
  337. Informationen über die generelle Verwendung dieser Elemente, sowie der akzeptierten
  338. Parameter <ulink
  339. url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input">besuchen
  340. Sie bitte die dijit.form Dokumentation</ulink>.
  341. </para>
  342. <para>
  343. Die folgenden Dijit Formularelemente sind im Zend Framework vorhanden. Ausser wo es
  344. beschrieben wird, haben alle die Signatur <code>string ($id, $value = '', array $params
  345. = array(), array $attribs = array())</code>.
  346. </para>
  347. <itemizedlist>
  348. <listitem>
  349. <para>
  350. <emphasis>Button</emphasis>: dijit.form.Button. Zeigt einen Formular Button.
  351. </para>
  352. <programlisting language="php"><![CDATA[
  353. <?php echo $view->button(
  354. 'foo',
  355. 'Zeig mich!',
  356. array('iconClass' => 'myButtons'),
  357. ); ?>
  358. ]]></programlisting>
  359. </listitem>
  360. <listitem>
  361. <para>
  362. <emphasis>CheckBox</emphasis>: dijit.form.CheckBox. Zeigt eine Checkbox an.
  363. Akzeptiert ein optionales fünftes Argument, das Array
  364. <code>$checkedOptions</code>, welches das folgende enthalten kann:
  365. </para>
  366. <itemizedlist>
  367. <listitem><para>
  368. ein indiziertes Array mit zwei Werten, einen angehackten Wert und einem
  369. nicht angehackten Wert, in dieser Reihenfolge; oder
  370. </para></listitem>
  371. <listitem><para>
  372. ein assoziatives Array mit den Schnüsseln 'checkedValue' und
  373. 'unCheckedValue'.
  374. </para></listitem>
  375. </itemizedlist>
  376. <para>
  377. Wenn <code>$checkedOptions</code> nicht vorhanden ist, wird 1 und 0 angenommen.
  378. </para>
  379. <programlisting language="php"><![CDATA[
  380. <?php echo $view->checkBox(
  381. 'foo',
  382. 'bar',
  383. array(),
  384. array(),
  385. array('checkedValue' => 'foo', 'unCheckedValue' => 'bar')
  386. ); ?>
  387. ]]></programlisting>
  388. </listitem>
  389. <listitem>
  390. <para>
  391. <emphasis>ComboBox</emphasis>: dijit.layout.ComboBox. Komboboxen sind ein Hybrid
  392. zwischen einem Select und einer Textbox mit automatischer Vervollständigung. Der
  393. grundsätzliche Unterschied ist das man eine Option eingeben kann die nicht in
  394. der Liste der vorhandenen Optionen ist, und trotzdem eine gültige Eingabe
  395. angenommen wird. Sie akzeptiert ein optionales fünftes Argument, ein
  396. assoziatives Array <code>$options</code>; wenn es angegeben wird, wird ComboBox
  397. als <code>select</code> dargestellt. Es ist auch zu beachten das die
  398. verschiedenen <emphasis>Labelwerte</emphasis> des <code>$options</code> Arrays
  399. im Formular zurückgegeben werden -- nicht die Werte selbst.
  400. </para>
  401. <para>
  402. Alternativ kann eine Information übergeben werden die einen dojo.data
  403. Datenspeicher bezeichnet der mit diesem Element zu verwenden ist. Wenn er
  404. angegeben wird, wird die ComboBox als Texteingabe (<code>input</code>)
  405. dargestellt, und wird seine Optionen über den Datenspeicher holen.
  406. </para>
  407. <para>
  408. Um einen Datenspeicher zu spezifizieren, muß eine der folgenden
  409. <code>$params</code> Schlüsselkombinationen angegeben werden:
  410. </para>
  411. <itemizedlist>
  412. <listitem>
  413. <para>
  414. Der Schlüssel 'store' mit einem Arraywert; das Array sollte die
  415. folgenden Schlüssel enthalten:
  416. </para>
  417. <itemizedlist>
  418. <listitem><para>
  419. <emphasis>store</emphasis>: Der Name der Javascript Variable die den
  420. Datenspeicher repräsentiert (das könnte der Name sein den man für
  421. Ihn verwenden will).
  422. </para></listitem>
  423. <listitem><para>
  424. <emphasis>type</emphasis>: Der Typ des Datenspeichers der verwendet
  425. werden soll; z.B., 'dojo.data.ItemFileReadStore'.
  426. </para></listitem>
  427. <listitem><para>
  428. <emphasis>params</emphasis> (Optional): Ein assoziatives Array von
  429. Schlüssel/Werte Paaren die zu verwenden sind um den Datenspeicher zu
  430. konfigurieren. Der 'url' Parameter ist ein typisches Beispiel.
  431. </para></listitem>
  432. </itemizedlist>
  433. </listitem>
  434. <listitem>
  435. <para>
  436. Die Schlüssel:
  437. </para>
  438. <itemizedlist>
  439. <listitem><para>
  440. <emphasis>store</emphasis>: Ein String der den Namen des
  441. Datenspeicher zeigt der zu verwenden ist.
  442. </para></listitem>
  443. <listitem><para>
  444. <emphasis>storeType</emphasis>: Ein String der den dojo.data.type
  445. des Datenspeichers anzeigt der zu verwenden ist (z.B.
  446. 'dojo.data.ItemFileReadStore').
  447. </para></listitem>
  448. <listitem><para>
  449. <emphasis>storeParams</emphasis>: Ein assoziatives Array von
  450. Schlüssel/Wertepaaren mit denen der Datenspeicher konfiguriert wird.
  451. </para></listitem>
  452. </itemizedlist>
  453. </listitem>
  454. </itemizedlist>
  455. <programlisting language="php"><![CDATA[
  456. // Als Select Element:
  457. echo $view->comboBox(
  458. 'foo',
  459. 'bar',
  460. array(
  461. 'autocomplete' => false,
  462. ),
  463. array(),
  464. array(
  465. 'foo' => 'Foo',
  466. 'bar' => 'Bar',
  467. 'baz' => 'Baz',
  468. )
  469. );
  470. // Als dojo-aktiviertes Element:
  471. echo $view->comboBox(
  472. 'foo',
  473. 'bar',
  474. array(
  475. 'autocomplete' => false,
  476. 'store' => 'stateStore',
  477. 'storeType' => 'dojo.data.ItemFileReadStore',
  478. 'storeParams' => array('url' => '/js/states.json'),
  479. ),
  480. );
  481. ]]></programlisting>
  482. </listitem>
  483. <listitem>
  484. <para>
  485. <emphasis>CurrencyTextBox</emphasis>: dijit.form.CurrencyTextBox. Abgeleitet von
  486. ValidationTextBox, und bietet Clientseitige Prüfung von Wärgungen. Es erwartet
  487. das der Dijit Parameter 'currency' mit einem entsprechenden 3-zeichen
  488. Währungscode angegeben wird. Man kann auch anderen Dijit Parameter spezifizieren
  489. die für ValidationTextBox und TextBox gültig sind.
  490. </para>
  491. <programlisting language="php"><![CDATA[
  492. echo $view->currencyTextBox(
  493. 'foo',
  494. '$25.00',
  495. array('currency' => 'USD'),
  496. array('maxlength' => 20)
  497. );
  498. ]]></programlisting>
  499. <note>
  500. <title>Probleme mit Builds</title>
  501. <para>
  502. es gibt aktuell <ulink
  503. url="http://trac.dojotoolkit.org/ticket/7183">bekannte Probleme bei der
  504. Verwendung der CurrencyTextBox mit Build Layern</ulink>. Ein bekannter
  505. Work-Around ist sicherzustellen das das http-equiv Metatag des Content-Types
  506. des Dokument auf das Zeichenset utf-8 gestellt wird, was mit folgendem
  507. Aufruf gemacht wird:
  508. </para>
  509. <programlisting language="php"><![CDATA[
  510. $view->headMeta()->appendHttpEquiv('Content-Type',
  511. 'text/html; charset=utf-8');
  512. ]]></programlisting>
  513. <para>
  514. Das bedeutet natürlich, das man sicherstellen muß das der
  515. <code>headMeta()</code> Platzhalter im Layout Skript ausgegeben wird.
  516. </para>
  517. </note>
  518. </listitem>
  519. <listitem>
  520. <para>
  521. <emphasis>DateTextBox</emphasis>: dijit.form.DateTextBox. Wird von
  522. ValidationTextBox abgeleitet, und bietet sowohl Client-seitige Prüfungen von
  523. Daten, als auch einen Dropdown Kalender für die Auswahl von Daten. Man kann
  524. jeden Dijit Parameter spezifizieren der für ValidationTextBox oder TextBox
  525. vorhanden ist.
  526. </para>
  527. <programlisting language="php"><![CDATA[
  528. echo $view->dateTextBox(
  529. 'foo',
  530. '2008-07-11',
  531. array('required' => true)
  532. );
  533. ]]></programlisting>
  534. </listitem>
  535. <listitem>
  536. <para>
  537. <emphasis>Editor</emphasis>: dijit.Editor. Bietet einen WYSIGYG Editor über den
  538. Benutzer Inhalte erstellen oder bearbieten können. <code>dijit.Editor</code> ist
  539. ein pluginfähiger, erweiterbarer Editor mit einer Vielzahl an Parametern die für
  540. die Anpassung verwendet werden können; siehe <ulink
  541. url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text">in
  542. die dijit.Editor Dokumentation</ulink> für weitere Details.
  543. </para>
  544. <programlisting language="php"><![CDATA[
  545. echo $view->editor('foo');
  546. ]]></programlisting>
  547. </listitem>
  548. <listitem>
  549. <para>
  550. <emphasis>FilteringSelect</emphasis>: dijit.form.FilteringSelect. Wie die
  551. ComboBox ist das ein Select/Text Hybrid der entweder eine angegebenen Liste von
  552. Optionen darstellen kann, oder jene vom dojo.data Datenspeicher. Anders als
  553. ComboBox, erlaubt FilteringSelect keine Eingabe einer Option die nicht in seiner
  554. Liste vorhanden ist. Zusätzlich funktioniert es Sie ein Standatrd Select in dem
  555. die Optionswerte, nicht die Label, zurückgegeben werden wenn das Formular
  556. übertragen wird.
  557. </para>
  558. <para>
  559. Bitte beachten Sie die obigen Informationen über die ComboBox für Beispiele und
  560. mögliche Optionen für die Definition von Datenspeichern.
  561. </para>
  562. </listitem>
  563. <listitem>
  564. <para>
  565. <emphasis>HorizontalSlider</emphasis> und <emphasis>VerticalSlider</emphasis>:
  566. dijit.form.HorizontalSlider und dijit.form.VerticalSlider. Schieber sind UI
  567. Widgets für die Auswahl von Zahlen in einem gegebenen Bereich; es gibt eine
  568. horizontale und eine vertikale Variante.
  569. </para>
  570. <para>
  571. Grundsätzlich benötigen Sie die Dijit Parameter 'minimum', 'maximum' und
  572. 'discreteValues'. Diese definieren den Bereich der Werte. Andere übliche
  573. Optionen sind:
  574. </para>
  575. <itemizedlist>
  576. <listitem><para>
  577. 'intermediateChanges' kann gesetzt werden um zu zeigen ob ein onChange Event
  578. ausgelöst wird wenn der Gleiter genommen wird.
  579. </para></listitem>
  580. <listitem><para>
  581. 'clickSelect' kann gesetzt werden um das Klicken an einem Platz im Schieber
  582. zu erlauben um den Wert zu setzen.
  583. </para></listitem>
  584. <listitem><para>
  585. 'pageIncrement' kann den Wert spezifizieren mit dem addiert/subtrahiert wird
  586. wenn pageUp und pageDown verwendet werden.
  587. </para></listitem>
  588. <listitem><para>
  589. 'showButtons' kann gesetzt werden um die Darstellung von Buttons auf beiden
  590. Seiten des Schiebers, für die Veränderung des Wertes, zu erlauben.
  591. </para></listitem>
  592. </itemizedlist>
  593. <para>
  594. Die Zend Framework Implementation erstellt ein verstecktes Element um den Wert
  595. des Schiebers zu speichern.
  596. </para>
  597. <para>
  598. Optional kann es gewünscht sein einen Maßstab oder ein Label für den Gleiter zu
  599. zeigen. Um das zu tun, muß ein oder mehrere der Dijit Parameter 'topDecoration'
  600. und/oder 'bottomDecoration' (HorizontalSlider) oder 'leftDecoration' und/oder
  601. 'rightDecoration' (VerticalSlider) hinzufügen. Jede von Ihnen erwartet die
  602. folgenden Optionen:
  603. </para>
  604. <itemizedlist>
  605. <listitem><para>
  606. <emphasis>container</emphasis>: Der Name des Containers.
  607. </para></listitem>
  608. <listitem><para>
  609. <emphasis>labels</emphasis> (Optional): Ein Array von Labels das verwendet
  610. wird. Leere Strings können an beiden Seiten verwendet werden um Labels nur
  611. für die inneren Werte anzugeben. Wird benötigt wenn eine der 'Labels'
  612. Dijitvarianten spezifiziert wird.
  613. </para></listitem>
  614. <listitem><para>
  615. <emphasis>dijit</emphasis> (Optional): Entweder HorizontalRule,
  616. HorizontalRuleLabels, VerticalRule, oder VerticalRuleLabels, standardmäßig
  617. einer der Rule Dijits.
  618. </para></listitem>
  619. <listitem>
  620. <para>
  621. <emphasis>params</emphasis> (optional): Dijit Parameter für die
  622. Konfiguration des Rule Dijits das verwendet wird. Spezifische Parameter
  623. für diese Dijits sind:
  624. </para>
  625. <itemizedlist>
  626. <listitem><para>
  627. <emphasis>container</emphasis> (Optional): Ein Array von Parametern
  628. und Attributen für den Rule Container.
  629. </para></listitem>
  630. <listitem><para>
  631. <emphasis>labels</emphasis> (Optional): Ein Array von Parametern und
  632. Attributen für die Labels des Containers.
  633. </para></listitem>
  634. </itemizedlist>
  635. </listitem>
  636. <listitem><para>
  637. <emphasis>attribs</emphasis> (Optional): HTML Attribute die mit den
  638. Maßstäben/Labels verwendet werden. Diese sollten dem Format der
  639. <code>params</code> Option folgen und können ein assoziatives Array mit den
  640. Schlüsseln 'container' und 'labels' sein.
  641. </para></listitem>
  642. </itemizedlist>
  643. <programlisting language="php"><![CDATA[
  644. echo $view->horizontalSlider(
  645. 'foo',
  646. 1,
  647. array(
  648. 'minimum' => -10,
  649. 'maximum' => 10,
  650. 'discreteValues' => 11,
  651. 'intermediateChanges' => true,
  652. 'showButtons' => true,
  653. 'topDecoration' => array(
  654. 'container' => 'topContainer'
  655. 'dijit' => 'HorizontalRuleLabels',
  656. 'labels' => array(
  657. ' ',
  658. '20%',
  659. '40%',
  660. '60%',
  661. '80%',
  662. ' ',
  663. ),
  664. 'params' => array(
  665. 'container' => array(
  666. 'style' => 'height:1.2em; font-size=75%;color:gray;',
  667. ),
  668. 'labels' => array(
  669. 'style' => 'height:1em; font-size=75%;color:gray;',
  670. ),
  671. ),
  672. ),
  673. 'bottomDecoration' => array(
  674. 'container' => 'bottomContainer'
  675. 'labels' => array(
  676. '0%',
  677. '50%',
  678. '100%',
  679. ),
  680. 'params' => array(
  681. 'container' => array(
  682. 'style' => 'height:1.2em; font-size=75%;color:gray;',
  683. ),
  684. 'labels' => array(
  685. 'style' => 'height:1em; font-size=75%;color:gray;',
  686. ),
  687. ),
  688. ),
  689. )
  690. );
  691. ]]></programlisting>
  692. </listitem>
  693. <listitem>
  694. <para>
  695. <emphasis>NumberSpinner</emphasis>: dijit.form.NumberSpinner. Eine Textbox für
  696. nummerische Eingaben mit Buttons für das Inkrementieren und Dekrementieren.
  697. </para>
  698. <para>
  699. Erwartet entweder ein Assoziatives Array für den Dijit Parameter 'constraints',
  700. oder einfach die Schlüssel 'min', 'max' und 'places' (das würden auch die
  701. erwarteten Einträge des Constraints Parameters sein). 'places' kann verwendet
  702. werden um anzugeben um wieviel der NumberSpinner erhöht oder erniedrigt wird.
  703. </para>
  704. <programlisting language="php"><![CDATA[
  705. echo $view->numberSpinner(
  706. 'foo',
  707. 5,
  708. array(
  709. 'min' => -10,
  710. 'max' => 10,
  711. 'places' => 2,
  712. ),
  713. array(
  714. 'maxlenth' => 3,
  715. )
  716. );
  717. ]]></programlisting>
  718. </listitem>
  719. <listitem>
  720. <para>
  721. <emphasis>NumberTextBox</emphasis>: dijit.form.NumberTextBox. NumberTextBox
  722. bietet die Möglichkeit die Nummerneinträge auf lokalisiertem Weg zu formatieren
  723. und anzuzeigen, optional gegen angegebene Abhängigkeiten.
  724. </para>
  725. <programlisting language="php"><![CDATA[
  726. echo $view->numberTextBox(
  727. 'foo',
  728. 5,
  729. array(
  730. 'places' => 4,
  731. 'type' => 'percent',
  732. ),
  733. array(
  734. 'maxlength' => 20,
  735. )
  736. );
  737. ]]></programlisting>
  738. </listitem>
  739. <listitem>
  740. <para>
  741. <emphasis>PasswordTextBox</emphasis>: dijit.form.ValidationTextBox bindet eine
  742. Passworteingabe. PasswordTextBox bietet die Möglichkeit Passworteingaben zu
  743. erstellen die das aktuelle Dijitthema verwenden, sowie Clientseitige Prüfungen
  744. erlauben.
  745. </para>
  746. <programlisting language="php"><![CDATA[
  747. echo $view->passwordTextBox(
  748. 'foo',
  749. '',
  750. array(
  751. 'required' => true,
  752. ),
  753. array(
  754. 'maxlength' => 20,
  755. )
  756. );
  757. ]]></programlisting>
  758. </listitem>
  759. <listitem>
  760. <para>
  761. <emphasis>RadioButton</emphasis>: dijit.form.RadioButton. Ein Set von Optionen
  762. von denen nur eine ausgewählt werden kann. Dieses Verhalten entspricht auf jedem
  763. Fall dem normaler Radio Buttons, hat aber das Look-and-Feel das mit dem anderer
  764. Dijit konsistent ist.
  765. </para>
  766. <para>
  767. RadioButton akzeptiert ein optionales fünftes Argument, <code>$options</code>,
  768. ein assoziatives Array von Werte/Label Paaren das als Radiooptionen verwendet
  769. wird. Diese können auch als <code>$attribs</code> Schlüssel
  770. <code>Optionen</code> angegeben werden.
  771. </para>
  772. <programlisting language="php"><![CDATA[
  773. echo $view->radioButton(
  774. 'foo',
  775. 'bar',
  776. array(),
  777. array(),
  778. array(
  779. 'foo' => 'Foo',
  780. 'bar' => 'Bar',
  781. 'baz' => 'Baz',
  782. )
  783. );
  784. ]]></programlisting>
  785. </listitem>
  786. <listitem>
  787. <para>
  788. <emphasis>SimpleTextarea</emphasis>: dijit.form.SimpleTextarea. Diese
  789. funktionieren wie normale Textareas, werden aber gestylt indem das aktuelle
  790. dijit Thema verwendet wird. Es müssen weder die rows noch die columns Attribute
  791. spezifiziert werden; verwende stattdessen <code>ems</code> oder Prozente für die
  792. Breite und Höhe.
  793. </para>
  794. <programlisting language="php"><![CDATA[
  795. echo $view->simpleTextarea(
  796. 'foo',
  797. 'Bitte ab hier schreiben...',
  798. array(),
  799. array('style' => 'width: 90%; height: 5ems;')
  800. );
  801. ]]></programlisting>
  802. </listitem>
  803. <listitem>
  804. <para>
  805. <emphasis>SubmitButton</emphasis>: Ein dijit.form.Button bindet ein Submit
  806. Eingabeelement. Siehe den Button Viewhelfer für weitere Details; der
  807. grundsätzliche Unterschied ist der, das dieser Button ein Formular übertragen
  808. kann.
  809. </para>
  810. </listitem>
  811. <listitem>
  812. <para>
  813. <emphasis>Textarea</emphasis>: dijit.form.Textarea. Diese funktionieren wie
  814. normale Textareas, ausgenommen das Sie statt dem Setzen einer Anzahl von Reihen
  815. als Benutzertypen expandieren. Die Breite sollte über Styleeinstellungen
  816. spezifiziert werden.
  817. </para>
  818. <programlisting language="php"><![CDATA[
  819. echo $view->textarea(
  820. 'foo',
  821. 'Start writing here...',
  822. array(),
  823. array('style' => 'width: 300px;')
  824. );
  825. ]]></programlisting>
  826. </listitem>
  827. <listitem>
  828. <para>
  829. <emphasis>TextBox</emphasis>: dijit.form.TextBox. Diese Element ist primär
  830. vorhanden um das übliche Look-and-Feel zwischen den verschiedenen Dijit
  831. Elementen zu bieten, und um die Basisfunktionalität der anderen von TextBox
  832. abgeleiteten Klassen (ValidationTextBox, NumberTextBox, CurrencyTextBox,
  833. DateTextBox, und TimeTextBox) zu bieten.
  834. </para>
  835. <para>
  836. Übliche Dijitparameter enthalten 'lowercase' (Casten auf kleinschreibung),
  837. 'uppercase' (Casten auf GROßSCHREIBUNG), 'propercase' (Casten auf ProperCase),
  838. und 'trim' (entferne führende und schließende Leerezeichen); alle akzeptieren
  839. boolsche Werte. Zusätzlich kann es gewünscht sein die Parameter 'size' und
  840. 'maxLength' zu spezifizieren.
  841. </para>
  842. <programlisting language="php"><![CDATA[
  843. echo $view->textBox(
  844. 'foo',
  845. 'Irgendein Text',
  846. array(
  847. 'trim' => true,
  848. 'propercase' => true,
  849. 'maxLength' => 20,
  850. ),
  851. array(
  852. 'size' => 20,
  853. )
  854. );
  855. ]]></programlisting>
  856. </listitem>
  857. <listitem>
  858. <para>
  859. <emphasis>TimeTextBox</emphasis>: dijit.form.TimeTextBox. Auch aus der TextBox
  860. Familie, bietet TimeTextBox eine Drop Down Auswahl für Zeiten die verschiebbar
  861. ist und die vom Benutzer ausgewählt werden kann. Dijit Parameter erlaubes es die
  862. Zeit zu spezifizieren die im Select vorhanden ist sowie auch den sichtbaren
  863. Bereich der Zeiten.
  864. </para>
  865. <programlisting language="php"><![CDATA[
  866. echo $view->timeTextBox(
  867. 'foo',
  868. '',
  869. array(
  870. 'am.pm' => true,
  871. 'visibleIncrement' => 'T00:05:00', // 5-Minuten addieren
  872. 'visibleRange' => 'T02:00:00', // Zeigt 2 Stunden die hinzugefügt werden können
  873. ),
  874. array(
  875. 'size' => 20,
  876. )
  877. );
  878. ]]></programlisting>
  879. </listitem>
  880. <listitem>
  881. <para>
  882. <emphasis>ValidationTextBox</emphasis>: dijit.form.ValidateTextBox. Bietet
  883. Client-seitige Prüfungen für Textelemente. Ist von TextBox abgeleitet.
  884. </para>
  885. <para>
  886. Übliche Dijit Parameter enthalten:
  887. </para>
  888. <itemizedlist>
  889. <listitem><para>
  890. <emphasis>invalidMessage</emphasis>: Eine Nachricht die angezeigt wird wenn
  891. eine ungültige Eingabe erkannt wurde.
  892. </para></listitem>
  893. <listitem><para>
  894. <emphasis>promptMessage</emphasis>: Eine Tooltip Hilfenachricht die
  895. verwendet wird.
  896. </para></listitem>
  897. <listitem><para>
  898. <emphasis>regExp</emphasis>: Ein regulärer Ausdruck der für die Prüfung des
  899. Textes verwendet wird. Reguläre Ausdrücke benötigen keine Begrenzungen.
  900. </para></listitem>
  901. <listitem><para>
  902. <emphasis>required</emphasis>: Ob das Element benötigt wird oder nicht. Wenn
  903. das der Fall ist, und das Element in einem dijit.form.Form eingebettet ist,
  904. wird es als ungültig markiert und die Übertragung verhindert.
  905. </para></listitem>
  906. </itemizedlist>
  907. <programlisting language="php"><![CDATA[
  908. echo $view->validationTextBox(
  909. 'foo',
  910. '',
  911. array(
  912. 'required' => true,
  913. 'regExp' => '[\w]+',
  914. 'invalidMessage' => 'Keine Leerzeichen oder nicht-Wort Zeichen erlaubt',
  915. 'promptMessage' => 'Nur ein einzelnes Wort das aus ' .
  916. 'alphanummerischen Zeichen und Unterstrichen besteht',
  917. ),
  918. array(
  919. 'maxlength' => 20,
  920. )
  921. );
  922. ]]></programlisting>
  923. </listitem>
  924. </itemizedlist>
  925. </sect3>
  926. <sect3 id="zend.dojo.view.dijit.custom">
  927. <title>Eigene Dijits</title>
  928. <para>
  929. Wenn man viel in Dojo herumtaucht, wird man sehr bald selbst eigene Dijits schreiben,
  930. oder experimentelle Dijits von Dojox verwenden. Wärend Zend Framework nicht jeden Dijit
  931. direkt unterstützen kann, bietet es einiges an direkter rudimentärer Unterstützung für
  932. jeden Dijit, und es bietet einiges an rudimentärer Unterstützung für beliebige Dijit
  933. Typen über den <code>CustomDijit</code> View Helfer.
  934. </para>
  935. <para>
  936. Die API des <code>CustomDijit</code> View Helfers ist genauso wie die jedes anderen
  937. Dijits, mit einem grundsätzlichen Unterschied: Das dritten "params" Argument
  938. <emphasis>muss</emphasis> das Attribut "dojotype" enthalten. Der Wert dieses Attributs
  939. sollte die Dijit Klasse sein die man verwenden will.
  940. </para>
  941. <para>
  942. <code>CustomDijit</code> erweitert den Basis <code>DijitContainer</code> View Helfer,
  943. welches er erlaubt Inhalte zu fangen (durch Verwendung der
  944. <code>captureStart()</code>/<code>captureEnd()</code> Methodenpaare).
  945. <code>captureStart()</code> erwartet auch das man das "dojoType" Attribut als sein
  946. "params" Argument übergibt.
  947. </para>
  948. <example id="zend.dojo.view.dijit.custom.example">
  949. <title>Verwendung von CustomDijit um ein dojox.layout.ContentPane darzustellen</title>
  950. <para>
  951. <code>dojox.layout.ContentPane</code> ist eine Next-Generation Erweiterung von
  952. <code>dijit.layout.ContentPane</code> und bietet ein Superset der Möglichkeiten
  953. dieser Klasse. Bis seine Funktionalitäten stabil sind, wird es weiterhin in Dojox
  954. leben. Wenn man es trotzdem im heutigen Zend Framework verwenden will, kann man
  955. den <code>CustomDijit</code> View Helfer verwenden.
  956. is a next-generation
  957. iteration of <code>dijit.layout.ContentPane</code>, and provides
  958. a superset of that class's capabilities. Until it's
  959. functionality stabilizes, it will continue to live in Dojox.
  960. However, if you want to use it in Zend Framework today, you can,
  961. using the <code>CustomDijit</code> view helper.
  962. </para>
  963. <para>
  964. Grundsätzlich kann man das folgende tun:
  965. </para>
  966. <programlisting language="php"><![CDATA[
  967. <?php echo $this->customDijit(
  968. 'foo',
  969. $content,
  970. array(
  971. 'dojoType' => 'dojox.layout.ContentPane',
  972. 'title' => 'Eigene Ebene',
  973. 'region' => 'center'
  974. )
  975. ); ?>
  976. ]]></programlisting>
  977. <para>
  978. Wenn man stattdessen Inhalte fangen will, sollte einfach die
  979. <code>captureStart()</code> Methode verwendet, und der "dojoType" als "params"
  980. Argument übergeben werden:
  981. </para>
  982. <programlisting language="php"><![CDATA[
  983. <?php $this->customDijit()->captureStart(
  984. 'foo',
  985. array(
  986. 'dojoType' => 'dojox.layout.ContentPane',
  987. 'title' => 'Eigene Ebene',
  988. 'region' => 'center'
  989. )
  990. ); ?>
  991. Das ist der Inhalt der Ebene
  992. <?php echo $this->customDijit()->captureEnd('foo'); ?>
  993. ]]></programlisting>
  994. <para>
  995. Man kann <code>CustomDijit</code> auch einfach erweitern um Unterstützung für
  996. eigene Dijits zu bieten. Wenn man, als Beispiel,
  997. <code>dijit.layout.ContentPane</code> erweitern will um eine eigene
  998. <code>foo.ContentPane</code> Klasse zu erstellen, kann man den folgenden Helfer
  999. erstellen um Ihn zu unterstützen:
  1000. </para>
  1001. <programlisting language="php"><![CDATA[
  1002. class My_View_Helper_FooContentPane
  1003. extends Zend_Dojo_View_Helper_CustomDijit
  1004. {
  1005. protected $_defaultDojoType = 'foo.ContentPane';
  1006. public function fooContentPane(
  1007. $id = null, $value = null,
  1008. array $params = array(), array $attribs = array()
  1009. ) {
  1010. return $this->customDijit($id, $value, $params, $attribs);
  1011. }
  1012. }
  1013. ]]></programlisting>
  1014. <para>
  1015. Solange der eigene Dijit der gleichen grundsätzlichen API wie offizielle Dijits
  1016. folgt, sollte die Verwendung oder Erweiterung von <code>CustomDijit</code> korrekt
  1017. funktionieren.
  1018. </para>
  1019. </example>
  1020. </sect3>
  1021. </sect2>
  1022. <!--
  1023. vim:se ts=4 sw=4 et:
  1024. -->