Zend_Dojo-View-Helpers.xml 45 KB

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