Zend_Dojo-View-Dojo.xml 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- EN-Revision: 17987 -->
  3. <!-- Reviewed: no -->
  4. <sect2 id="zend.dojo.view.dojo">
  5. <title>dojo() View Helfer</title>
  6. <para>
  7. Der <methodname>dojo()</methodname> View Helfer ist dazu gedacht das konfigurieren der Dojo
  8. Umgebung zu vereinfachen, was die folgenden Notwendigkeiten beinhaltet:
  9. </para>
  10. <itemizedlist>
  11. <listitem>
  12. <para>Spezifizieren eines CDN oder lokalen Pfades zu einer Dojo Installation.</para>
  13. </listitem>
  14. <listitem>
  15. <para>Spezifizieren von Pfaden zu eigenen Dojo Modulen.</para>
  16. </listitem>
  17. <listitem>
  18. <para>Spezifizieren von dojo.require Statements.</para>
  19. </listitem>
  20. <listitem>
  21. <para>Spezifizieren von Dijit Stylesheet Themen zur Verwendung.</para>
  22. </listitem>
  23. <listitem>
  24. <para>Spezifizieren von dojo.addOnLoad() Events.</para>
  25. </listitem>
  26. </itemizedlist>
  27. <para>
  28. Die <methodname>dojo()</methodname> View Helfer Implementation ist ein Beispiel einer
  29. Platzhalter Implementation. Das Datenset in Ihm ist persistent zwischen den View Objekten,
  30. und kann direkt im eigenen Layout Skript ausgegeben werden.
  31. </para>
  32. <example id="zend.dojo.view.dojo.usage">
  33. <title>Beispiel für die Verwendung des dojo() View Helfers</title>
  34. <para>
  35. Für dieses Beispiel nehmen wir an das der Entwickler Dojo von einem lokalen Pfad aus
  36. verwenden wird, verschiedene Dijits benötigt, und das Tundra Dijit Thema anpasst.
  37. </para>
  38. <para>
  39. Auf vielen Seiten, kann der Entwickler Dojo nicht einmal verwenden. Deshalb werden wir
  40. uns zuerst auf ein View Skript fokusieren indem Dojo benötigt wird, und dann auf das
  41. Layout Skript, indem wir einiges der Dojo Umgebung einstellen und anschließend
  42. darstellen werden.
  43. </para>
  44. <para>
  45. Zuerst müssen wir unserem View Objekt mitteilen das es die Dojo View Helferpfade
  46. verwenden soll. Das kann in der eigenen Bootstrap Datei getan werden oder in einem
  47. Plugin das früh abläuft; einfach das View Objekt nehmen und das folgende ausführen:
  48. </para>
  49. <programlisting language="php"><![CDATA[
  50. $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
  51. ]]></programlisting>
  52. <para>
  53. Als nächstes das View Skript. In diesem Fall werden die spezifizieren das ein
  54. FilterSelect verwendet werden soll -- welcher einen eigenen Speicher basierend auf
  55. QueryReadStore verwenden wird, und den wir 'PairedStore' nennen und in unserem 'custom'
  56. Modul speichern.
  57. </para>
  58. <programlisting language="php"><![CDATA[
  59. <?php // Datenspeicher für FilteringSelect einstellen ?>
  60. <div dojoType="custom.PairedStore" jsId="stateStore"
  61. url="/data/autocomplete/type/state/format/ajax"
  62. requestMethod="get"></div>
  63. <?php // Eingabeelement: ?>
  64. State: <input id="state" dojoType="dijit.form.FilteringSelect"
  65. store="stateStore" pageSize="5" />
  66. <?php // Notwendige Dojo Elemente einstellen:
  67. $this->dojo()->enable()
  68. ->setDjConfigOption('parseOnLoad', true)
  69. ->registerModulePath('custom', '../custom/')
  70. ->requireModule('dijit.form.FilteringSelect')
  71. ->requireModule('custom.PairedStore'); ?>
  72. ]]></programlisting>
  73. <para>
  74. In unserem Layout Skript, prüfen wir anschließend ob Dojo aktiviert ist, und wenn das
  75. der Fall ist, erledigen wir einige generelle Konfigurationen und fügen Sie hinzu:
  76. </para>
  77. <programlisting language="php"><![CDATA[
  78. <?php echo $this->doctype() ?>
  79. <html>
  80. <head>
  81. <?php echo $this->headTitle() ?>
  82. <?php echo $this->headMeta() ?>
  83. <?php echo $this->headLink() ?>
  84. <?php echo $this->headStyle() ?>
  85. <?php if ($this->dojo()->isEnabled()){
  86. $this->dojo()->setLocalPath('/js/dojo/dojo.js')
  87. ->addStyleSheetModule('dijit.themes.tundra');
  88. echo $this->dojo();
  89. }
  90. ?>
  91. <?php echo $this->headScript() ?>
  92. </head>
  93. <body class="tundra">
  94. <?php echo $this->layout()->content ?>
  95. <?php echo $this->inlineScript() ?>
  96. </body>
  97. </html>
  98. ]]></programlisting>
  99. <para>
  100. An diesem Punkt muß man nur sicherstellen das die Dateien am richtigen Ort vorhanden
  101. sind und das man die Aktion des Endpunktes für das FilteringSelect erstellt hat!
  102. </para>
  103. </example>
  104. <sect3 id="zend.dojo.view.dojo.declarative">
  105. <title>Programtechnische und Deklarative Verwendung von Dojo</title>
  106. <para>
  107. Dojo erlaubt sowohl die <emphasis>deklarative</emphasis> als auch die
  108. <emphasis>programmtechnische</emphasis> Verwendung von vielen Ihrer Features.
  109. <emphasis>Deklarative</emphasis> Verwendung verwendet Standard HTML Elemente mit
  110. nicht-standard Attributen die geparst werden wenn die Seite geladen wird. Wärend das
  111. eine mächtige und einfach verwendbare Syntax ist, kann Sie für viele Entwickler Probleme
  112. bei der Überprüfung einer Seite verursachen.
  113. </para>
  114. <para>
  115. <emphasis>Programmtechnische</emphasis> Verwendung erlaubt dem Entwickler existierende
  116. Elemente zu dekorieren indem Sie anhand von ID oder <acronym>CSS</acronym> Selektoren
  117. geholt werden und dem entsprechenden Objektkonstruktoren in Dojo übergeben werden. Weil
  118. keine nicht-standard HTML Attribute verwendet werden, bleiben Seiten hiermit gültig.
  119. </para>
  120. <para>
  121. In der Praxis, erlauben beide Fälle eine zierliche Degeneration wenn Javascript
  122. ausgeschaltet ist, oder die verschiedenen Dojo Skriptresourcen nicht erreichbar sind. Um
  123. Standards und Dokumentüberprüfungen zu gestatten verwendet Zend Framework standardmäßig
  124. die programmtechnische Verwendung; die verschiedenen Viewhelfer erzeugen Javascript und
  125. übergeben dieses an den <methodname>dojo()</methodname> Viewhelfer für die Einbeziehung
  126. wenn er dargestellt wird.
  127. </para>
  128. <para>
  129. Entwickler die diese Technik verwenden wollen eventuell auch die Option kennenlernen mit
  130. der Sie Ihre eigene programmtechnische Deklaration auf der Seite schreiben können. Ein
  131. Vorteil wäre die Möglichkeit Handler für Dijit Events zu spezifizieren.
  132. </para>
  133. <para>
  134. Um das zu erlauben, wie auch die Möglichkeit die deklarative Syntax zu verwenden, sind
  135. es eine Anzahl von statischen Methoden vorhanden die dieses Verhalten global setzen.
  136. </para>
  137. <example id="zend.dojo.view.dojo.declarative.usage">
  138. <title>
  139. Spezifizieren der deklarativen und programmtechnischen Verwendung von Dojo
  140. </title>
  141. <para>
  142. Um die deklarative Verwendung zu spezifizieren muß einfach die statische
  143. <methodname>setUseDeclarative()</methodname> Methode aufgerufen werden:
  144. </para>
  145. <programlisting language="php"><![CDATA[
  146. Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
  147. ]]></programlisting>
  148. <para>
  149. Wenn man stattdessen die programmtechnische Verwendung verwenden will, muß die
  150. statische <methodname>setUseProgrammatic()</methodname> Methode aufgerufen werden:
  151. </para>
  152. <programlisting language="php"><![CDATA[
  153. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic();
  154. ]]></programlisting>
  155. <para>
  156. Letztendlich, wenn man programmtechnische Regeln selbst erstellen will, sollte man
  157. die programmtechnische Verwendung spezifizieren, aber den Wert '-1' übergeben; in
  158. diesem Fall wird kein Javascript, für die Dekoration von verwendeten Dijits,
  159. erstellt.
  160. </para>
  161. <programlisting language="php"><![CDATA[
  162. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1);
  163. ]]></programlisting>
  164. </example>
  165. </sect3>
  166. <sect3 id="zend.dojo.view.dojo.themes">
  167. <title>Themen</title>
  168. <para>
  169. Dojo erlaubt die Erstellung von Themen für seine Dijits (Widgets). Man kann eines
  170. auswählen indem ein Modulpfad übergeben wird:
  171. </para>
  172. <programlisting language="php"><![CDATA[
  173. $view->dojo()->addStylesheetModule('dijit.themes.tundra');
  174. ]]></programlisting>
  175. <para>
  176. Der Modulpfad wird durch die Verwendung des Zeichens '.' als Trennzeichen vom
  177. Verzeichnis erkannt und der Verwendung des letzten Wertes in der Liste als den Namen der
  178. <acronym>CSS</acronym> Datei die im Themenverzeichnis verwendet wird; im obigen Beispiel
  179. sucht Dojo das Thema in 'dijit/themes/tundra/tundra.css'.
  180. </para>
  181. <para>
  182. Wenn ein Thema verwendet wird ist es wichtig daran zu denken die Themenklasse, zumindest
  183. an den Container der jedes Dijit das verwendet wird umgibt, zu übergeben; im üblichsten
  184. Fällen wird es an den Body übergeben:
  185. </para>
  186. <programlisting language="html"><![CDATA[
  187. <body class="tundra">
  188. ]]></programlisting>
  189. </sect3>
  190. <sect3 id="zend.dojo.view.dojo.layers">
  191. <title>Layer verwenden (eigene Builds)</title>
  192. <para>
  193. Wenn ein dojo.require Statement verwendet wird, wird Dojo standardmäßig eine Anfrage an
  194. den Server zurücksenden um die richtige Javascript Datei zu holen. Wenn man viele Dijits
  195. verwendet, resultiert das in vielen Anfragen an den Server -- was nicht optimal ist.
  196. </para>
  197. <para>
  198. Dojo's Antwort darauf ist es die Möglichkeit anzubieten
  199. <emphasis>eigene Builds</emphasis> zu erstellen. Builds machen verschiedene Dinge:
  200. </para>
  201. <itemizedlist>
  202. <listitem>
  203. <para>
  204. Benötigte Dateien in <emphasis>Layern</emphasis> gruppieren; ein Layer sammelt
  205. alle benötigten Dateien in eine einzelne JS Datei. (Daher der Name dieses
  206. Kapitels)
  207. </para>
  208. </listitem>
  209. <listitem>
  210. <para>
  211. "Interne" nicht-javascript Dateien die von Dijits verwendet werden
  212. (typischerweise Templatedateien). Diese werden auch in der gleichen JS Datei
  213. gruppiert wie der Layer.
  214. </para>
  215. </listitem>
  216. <listitem>
  217. <para>
  218. Die Datei wird an ShrinkSafe übergeben, welches Leerzeichen und Kommentare
  219. entfernt, sowie Variablennamen verkleinert.
  220. </para>
  221. </listitem>
  222. </itemizedlist>
  223. <para>
  224. Einige Dateien können nicht in einen Layer gelegt werden, aber der Buildprozess wird
  225. ein spezielles Releaseverzeichnis mit der Layerdatei und allen anderen Dateien
  226. erstellen. Das erlaubt es eine verkleinerte eigene Distribution für die eigene Site oder
  227. Anwendungen zu erhalten.
  228. </para>
  229. <para>
  230. Um einen Layer zu verwenden, hat der <methodname>dojo()</methodname> Viewhelfer eine
  231. <methodname>addLayer()</methodname> Methode für das hinzufügen von Pfaden zu benötigten
  232. Layern:
  233. </para>
  234. <programlisting language="html"><![CDATA[
  235. $view->dojo()->addLayer('/js/foo/foo.js');
  236. ]]></programlisting>
  237. <para>
  238. Für weitere Informationen über die Erstellung von eigenen Build, schauen Sie bitte
  239. <ulink url="http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds">in
  240. die Dojo Builddokumentation</ulink>.
  241. </para>
  242. </sect3>
  243. <sect3 id="zend.dojo.view.dojo.methods">
  244. <title>Vorhandene Methoden</title>
  245. <para>
  246. Der <methodname>dojo()</methodname> Viewhelfer gibt immer eine Instanz des Dojo
  247. Platzhaltercontainers zurück. Dieses Containerobjekt bietet die folgenden Methoden an:
  248. </para>
  249. <itemizedlist>
  250. <listitem>
  251. <para>
  252. <methodname>setView(Zend_View_Interface $view)</methodname>: Setzt eine
  253. Viewinstanz im Container
  254. </para>
  255. </listitem>
  256. <listitem>
  257. <para>
  258. <methodname>enable()</methodname>: Die Dojo Integration explizit einschalten.
  259. </para>
  260. </listitem>
  261. <listitem>
  262. <para><methodname>disable()</methodname>: Die Dojo Integration ausschalten.</para>
  263. </listitem>
  264. <listitem>
  265. <para>
  266. <methodname>isEnabled()</methodname>: Ermitteln ob die Dojo Integration
  267. eingeschaltet ist oder nicht.
  268. </para>
  269. </listitem>
  270. <listitem>
  271. <para>
  272. <methodname>requireModule($module)</methodname>: Ein
  273. <property>dojo.require</property> Statement konfigurieren.
  274. </para>
  275. </listitem>
  276. <listitem>
  277. <para>
  278. <methodname>getModules()</methodname>: Erkennen welche Module benötigt werden.
  279. </para>
  280. </listitem>
  281. <listitem>
  282. <para>
  283. <methodname>registerModulePath($module, $path)</methodname>: Einen Dojo
  284. Modulpfad registrieren.
  285. </para>
  286. </listitem>
  287. <listitem>
  288. <para>
  289. <methodname>getModulePaths()</methodname>: Eine Liste von registrierten
  290. Modulpfaden erhalten.
  291. </para>
  292. </listitem>
  293. <listitem>
  294. <para>
  295. <methodname>addLayer($path)</methodname>: Einen Layerpfad (eigenen Build) für
  296. die Verwendung hinzufügen.
  297. </para>
  298. </listitem>
  299. <listitem>
  300. <para>
  301. <methodname>getLayers()</methodname>: Eine Liste von allen registrierten
  302. Layerpfaden (eigene Builds) erhalten.
  303. </para>
  304. </listitem>
  305. <listitem>
  306. <para>
  307. <methodname>removeLayer($path)</methodname>: Den Layer der
  308. <varname>$path</varname> entspricht von der Liste der registrierten Layer
  309. (eigene Builds) entfernen.
  310. </para>
  311. </listitem>
  312. <listitem>
  313. <para>
  314. <methodname>setCdnBase($url)</methodname>: Den Basis <acronym>URL</acronym> für
  315. ein CDN setzen; typischerweise ist das
  316. <constant>Zend_Dojo::CDN_BASE_AOL</constant> oder
  317. <constant>Zend_Dojo::CDN_BASE_GOOGLE</constant>, aber es wird der
  318. <acronym>URL</acronym> String vor der Versionsnummer benötigt.
  319. </para>
  320. </listitem>
  321. <listitem>
  322. <para>
  323. <methodname>getCdnBase()</methodname>: Den Basis CDN URL empfangen.
  324. </para>
  325. </listitem>
  326. <listitem>
  327. <para>
  328. <methodname>setCdnVersion($version = null)</methodname>: Setzen selche Version
  329. von Dojo vom CDN verwendet wird.
  330. </para>
  331. </listitem>
  332. <listitem>
  333. <para>
  334. <methodname>getCdnVersion()</methodname>: Die Dojo Version vom CDN erhalten die
  335. verwendet wird.
  336. </para>
  337. </listitem>
  338. <listitem>
  339. <para>
  340. <methodname>setCdnDojoPath($path)</methodname>: Setzt den relativen Pfad zur
  341. dojo.js oder dojo.xd.js Datei am CDN; typischerweise ist das entweder
  342. <constant>Zend_Dojo::CDN_DOJO_PATH_AOL</constant> oder
  343. <constant>Zend_Dojo::CDN_DOJO_PATH_GOOGLE</constant>, aber es wird der
  344. Pfadstring nach der Versionsnummer benötigt.
  345. </para>
  346. </listitem>
  347. <listitem>
  348. <para>
  349. <methodname>getCdnDojoPath()</methodname>: Das letzte Pfadsegment der CDN URL
  350. erhalten das auf die dojo.js Datei zeigt.
  351. </para>
  352. </listitem>
  353. <listitem>
  354. <para>
  355. <methodname>useCdn()</methodname>: Dem Container mitteilen das CDN verwendet
  356. werden soll; aktiviert die Integration implizit.
  357. </para>
  358. </listitem>
  359. <listitem>
  360. <para>
  361. <methodname>setLocalPath($path)</methodname>: Dem Container den Pfad zu einer
  362. lokalen Dojo Installation mitteilen (sollte ein Pfad relativ zum Server sein,
  363. und die dojo.js Datei selbst enthalten); aktiviert die Integration implizit.
  364. </para>
  365. </listitem>
  366. <listitem>
  367. <para>
  368. <methodname>getLocalPath()</methodname>: Erkennen welches lokale Pfad zu Dojo
  369. verwendet
  370. wird.
  371. </para>
  372. </listitem>
  373. <listitem>
  374. <para>
  375. <methodname>useLocalPath()</methodname>: Verwendet die Integration einen
  376. lokalen Dojopfad?
  377. </para>
  378. </listitem>
  379. <listitem>
  380. <para>
  381. <methodname>setDjConfig(array $config)</methodname>: Setzt Dojo/Dijit
  382. Konfigurationswerte (erwartet ein assoziatives Array).
  383. </para>
  384. </listitem>
  385. <listitem>
  386. <para>
  387. <methodname>setDjConfigOption($option, $value)</methodname>: Setzt einen
  388. einzelnen Dojo/Dijit Konfigurationswert.
  389. </para>
  390. </listitem>
  391. <listitem>
  392. <para>
  393. <methodname>getDjConfig()</methodname>: Retourniert alle Dojo/Dijit
  394. Konfigurationswerte.
  395. </para>
  396. </listitem>
  397. <listitem>
  398. <para>
  399. <methodname>getDjConfigOption($option, $default = null)</methodname>:
  400. Retourniert einen einzelnen Dojo/Dijit Konfigurationswert.
  401. </para>
  402. </listitem>
  403. <listitem>
  404. <para>
  405. <methodname>addStylesheetModule($module)</methodname>: Fügt ein Stylesheet
  406. hinzu basierend auf einem Modulthema.
  407. </para>
  408. </listitem>
  409. <listitem>
  410. <para>
  411. <methodname>getStylesheetModules()</methodname>: Retourniert die als Modulthema
  412. registrierten Modulthemen.
  413. </para>
  414. </listitem>
  415. <listitem>
  416. <para>
  417. <methodname>addStylesheet($path)</methodname>: Fügt einen lokalen Stylesheet
  418. zur Verwendung mit Dojo hinzu.
  419. </para>
  420. </listitem>
  421. <listitem>
  422. <para>
  423. <methodname>getStylesheets()</methodname>: Retourniert die lokalen Dojo
  424. Stylesheets.
  425. </para>
  426. </listitem>
  427. <listitem>
  428. <para>
  429. <methodname>addOnLoad($spec, $function = null)</methodname>: Fügt ein Lambda
  430. für dojo.onLoad hinzu das dieses aufruft. Wenn ein Argument übergeben wird,
  431. wird dieses entweder als Funktionsname oder als Javascriptabschluss angenommen.
  432. Wenn zwei Argumente übergeben werden, wird das erste als Name der Variablen der
  433. Objektinstanz angenommen und der zweite entweder als Methodenname in diesem
  434. Objekt oder ein Abschluß um dieses Objekt zu verwenden.
  435. </para>
  436. </listitem>
  437. <listitem>
  438. <para>
  439. <methodname>prependOnLoad($spec, $function = null)</methodname>: genau wie
  440. <methodname>addOnLoad()</methodname>, außer das vor den Anfang des onLoad
  441. Stacks angefügt wird.
  442. </para>
  443. </listitem>
  444. <listitem>
  445. <para>
  446. <methodname>getOnLoadActions()</methodname>: Gibt alle im Container
  447. registrierten dojo.onLoad Aktionen zurück. Das ist ein Array von Arrays.
  448. </para>
  449. </listitem>
  450. <listitem>
  451. <para>
  452. <methodname>onLoadCaptureStart($obj = null)</methodname>: Empfange Daten die
  453. als Lambda für dojo.onLoad() verwendet werden sollen. Wenn $obj angegeben wird,
  454. wird der bekommene JS Code als Abschluß angenommen der mit diesem Javascript
  455. Objekt verwendet werden soll.
  456. </para>
  457. </listitem>
  458. <listitem>
  459. <para>
  460. <methodname>onLoadCaptureEnd($obj = null)</methodname>: Beendet das Empfangen
  461. von Daten für die Verwendung mit dojo.onLoad().
  462. </para>
  463. </listitem>
  464. <listitem>
  465. <para>
  466. <methodname>javascriptCaptureStart()</methodname>: Empfange Javascript das im
  467. Dojo JS inkludiert werden soll (onLoad, require, und andere Anweisungen).
  468. </para>
  469. </listitem>
  470. <listitem>
  471. <para>
  472. <methodname>javascriptCaptureEnd()</methodname>: Beende das Empfangen von
  473. Javascript.
  474. </para>
  475. </listitem>
  476. <listitem>
  477. <para>
  478. <methodname>__toString()</methodname>: Castet den Container zu einem String;
  479. stellt alle HTML Stile und Skriptelemente dar.
  480. </para>
  481. </listitem>
  482. </itemizedlist>
  483. </sect3>
  484. </sect2>
  485. <!--
  486. vim:se ts=4 sw=4 et:
  487. -->