Zend_Dojo-View-Dojo.xml 19 KB

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