Zend_Dojo-View-Dojo.xml 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- Reviewed: no -->
  3. <sect2 id="zend.dojo.view.dojo">
  4. <title>dojo() Ayudante de Vista</title>
  5. <para>
  6. El ayudante de vista <code>dojo()</code> está destinado a simplificar
  7. el establecimiento del medio ambiente de Dojo, incluyendo las siguientes
  8. responsabilidades:
  9. </para>
  10. <itemizedlist>
  11. <listitem><para>Especificar bien un CDN o un path local para instalar
  12. Dojo.</para></listitem>
  13. <listitem><para>
  14. Especificando paths a módulos Dojo personalizados.
  15. </para></listitem>
  16. <listitem><para>
  17. Especificando sentencias dojo.require.
  18. </para></listitem>
  19. <listitem><para>
  20. Especificando hojas de estilo dijit a usar.
  21. </para></listitem>
  22. <listitem><para>
  23. Especificando eventos dojo.addOnLoad().
  24. </para></listitem>
  25. </itemizedlist>
  26. <para>
  27. La implementación del ayudante de vista <code>dojo()</code> es un
  28. ejemplo de implementación de un marcador de posición.
  29. El conjunto de datos en él, persiste entre los objetos vista y puede
  30. ser directamente activado con en "echo" de PHP desde su script.
  31. </para>
  32. <example id="zend.dojo.view.dojo.usage">
  33. <title>dojo() Ejemplo de Uso del Ayudante de Vista</title>
  34. <para>
  35. En este ejemplo, asumamos que el desarrollador estará usando Dojo
  36. desde un path local, se necesitarán varios dijits, y se utilizará
  37. el tema de dijit Tundra.
  38. </para>
  39. <para>
  40. En muchas páginas, el desarrollador no podrá utilizar Dojo para nada.
  41. Así, vamos a centrarnos primero en un view script donde Dojo es
  42. necesario y luego en el layout script, en donde vamos a configurar
  43. algo del medio ambiente de Dojo y luego lo mostraremos.
  44. </para>
  45. <para>
  46. En primer lugar, tenemos que decir nuestro objeto vista que utilice
  47. el path del ayudante de vista de Dojo. Esto puede hacerse en el
  48. arranque o en un plugin de ejecución temprana; simplemente apoderarse
  49. de su objeto vista y ejecutar lo siguiente:
  50. </para>
  51. <programlisting role="php"><![CDATA[
  52. $view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
  53. ]]></programlisting>
  54. <para>
  55. El paso siguiente, el view script. En este caso, vamos a
  56. especificar que vamos a estar utilizando un FilteringSelect --
  57. que consumirá un almacén personalizado basado en QueryReadStore,
  58. al que llamamos 'PairedStore' y almacenado en nuestro módulo
  59. 'custom'.
  60. </para>
  61. <programlisting role="php"><![CDATA[
  62. <?php // establecer el data store para FilteringSelect ?>
  63. <div dojoType="custom.PairedStore" jsId="stateStore"
  64. url="/data/autocomplete/type/state/format/ajax"
  65. requestMethod="get"></div>
  66. <?php // Elemento de entrada: ?>
  67. State: <input id="state" dojoType="dijit.form.FilteringSelect"
  68. store="stateStore" pageSize="5" />
  69. <?php // establecer elementos requeridos por dojo:
  70. $this->dojo()->enable()
  71. ->setDjConfigOption('parseOnLoad', true)
  72. ->registerModulePath('custom', '../custom/')
  73. ->requireModule('dijit.form.FilteringSelect')
  74. ->requireModule('custom.PairedStore'); ?>
  75. ]]></programlisting>
  76. <para>
  77. En nuestro script de esquema, vamos entonces a comprobar si Dojo
  78. está habilitado, y si es así, haremos algunas configuraciones más
  79. generales y lo ensamblaremos:
  80. </para>
  81. <programlisting role="php"><![CDATA[
  82. <?php echo $this->doctype() ?>
  83. <html>
  84. <head>
  85. <?php echo $this->headTitle() ?>
  86. <?php echo $this->headMeta() ?>
  87. <?php echo $this->headLink() ?>
  88. <?php echo $this->headStyle() ?>
  89. <?php if ($this->dojo()->isEnabled()){
  90. $this->dojo()->setLocalPath('/js/dojo/dojo.js')
  91. ->addStyleSheetModule('dijit.themes.tundra');
  92. echo $this->dojo();
  93. }
  94. ?>
  95. <?php echo $this->headScript() ?>
  96. </head>
  97. <body class="tundra">
  98. <?php echo $this->layout()->content ?>
  99. <?php echo $this->inlineScript() ?>
  100. </body>
  101. </html>
  102. ]]></programlisting>
  103. <para>
  104. En este punto, sólo necesita asegurarse de que sus archivos están
  105. en el lugar correcto y que ha creado el punto final de acción
  106. para su FilteringSelect!
  107. </para>
  108. </example>
  109. <sect3 id="zend.dojo.view.dojo.declarative">
  110. <title>Uso Programático y Declarativo de Dojo</title>
  111. <para>
  112. Dojo permite usar a ambos <emphasis>declarative</emphasis> y
  113. <emphasis>programmatic</emphasis> en muchas de sus características.
  114. El uso de <emphasis>Declarative</emphasis> utiliza elementos HTML
  115. con atributos no estándar que se parsean cuando la página se está
  116. cargado. Mientras que ésta es una sintaxis poderosa y simple de
  117. utilizar, para muchos desarrolladores esto puede causar problemas
  118. con la validación de páginas.
  119. </para>
  120. <para>
  121. El uso de <emphasis>Programmatic</emphasis> permite al desarrollador
  122. decorar los elementos existentes tirando de ellos por ID o
  123. selectores CSS y pasarlos a los constructores apropiados de objetos
  124. en Dojo. Debido a que no se usan atributos HTML no standard,
  125. las páginas continúan con la validación.
  126. </para>
  127. <para>
  128. En la práctica, ambos casos de uso permiten una degradación elegante
  129. cuando javascript está desactivado o los diversos recursos de
  130. Dojo script están fuera de alcance. Para promover las normas y
  131. validación de documentos, Zend Framework hace uso de los usos
  132. programáticos por defecto; los diversos ayudantes de vista generarán
  133. javascript y lo empujan al ayudante de vista <code>dojo()</code>
  134. para su inclusión cuando sean presentados.
  135. </para>
  136. <para>
  137. Utilizando esta técnica los desarrolladores pueden también desear
  138. explorar la posibilidad de escribir sus propia decoración
  139. programática de la página. Uno de los beneficios sería la
  140. posibilidad de especificar handlers para eventos dijit.
  141. </para>
  142. <para>
  143. Para permitir esto, así como la posibilidad de usar sintaxis
  144. declarativa, hay disponibles una serie de métodos estáticos para
  145. establecer globamente este comportamiento.
  146. </para>
  147. <example id="zend.dojo.view.dojo.declarative.usage">
  148. <title>Especificando el Uso Declarativo y Programático de Dojo</title>
  149. <para>
  150. Para especificar el uso declarativo, simplemente llame al
  151. método estático <code>setUseDeclarative()</code>:
  152. </para>
  153. <programlisting role="php"><![CDATA[
  154. Zend_Dojo_View_Helper_Dojo::setUseDeclarative();
  155. ]]></programlisting>
  156. <para>
  157. Si decide más bien utilizar el uso programático, llame al
  158. método estático <code>setUseProgrammatic()</code>:
  159. </para>
  160. <programlisting role="php"><![CDATA[
  161. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic();
  162. ]]></programlisting>
  163. <para>
  164. Por último, si quiere crear sus propias normas programáticas,
  165. debe especificar el uso programático, pero al pasarle el valor
  166. '-1'; en esta situación, no se creará ningún javascript para
  167. decorar cualquier dijit usado.
  168. </para>
  169. <programlisting role="php"><![CDATA[
  170. Zend_Dojo_View_Helper_Dojo::setUseProgrammatic(-1);
  171. ]]></programlisting>
  172. </example>
  173. </sect3>
  174. <sect3 id="zend.dojo.view.dojo.themes">
  175. <title>Temas</title>
  176. <para>
  177. Dojo permite la creación de los temas de su dijits (widgets).
  178. Puede seleccionar uno pasándolo en un path de módulo:
  179. </para>
  180. <programlisting role="php"><![CDATA[
  181. $view->dojo()->addStylesheetModule('dijit.themes.tundra');
  182. ]]></programlisting>
  183. <para>
  184. La ruta del módulo es descubierta por utilizar el carácter '.'
  185. como separador de directorio y utilizando el último valor en la
  186. lista como el nombre del archivo CSS en ese directorio del tema a
  187. usar; en el ejemplo de arriba, Dojo buscará el tema en
  188. 'dijit/themes/tundra/tundra.css'.
  189. </para>
  190. <para>
  191. Cuando se utiliza un tema, es importante recordar pasar la calse
  192. del tema a, por lo menos un contenedor rodeando cualquier dijits que
  193. se utilice; el caso de uso más común es pasárselo en el body:
  194. </para>
  195. <programlisting role="html"><![CDATA[
  196. <body class="tundra">
  197. ]]></programlisting>
  198. </sect3>
  199. <sect3 id="zend.dojo.view.dojo.layers">
  200. <title>Usando Layers (Construcciones Personalizadas)</title>
  201. <para>
  202. Por defecto, cuando utilice uns sentencia dojo.require,
  203. dojo hará una solicitud de retorno al servidor para agarrar al
  204. archivo javascript apropiado. Si hay muchos dijits en el lugar,
  205. esto se traduce en muchas peticiones al servidor -- lo que no es óptimo.
  206. </para>
  207. <para>
  208. La respuesta de Dojo a esto es proporcionar la capacidad de crear
  209. <emphasis>custom builds (construcciones personalizadas</emphasis>.
  210. Las contrucciones hacen varias cosas:
  211. </para>
  212. <itemizedlist>
  213. <listitem><para>
  214. Grupos de archivos necesarios en <emphasis>layers</emphasis>;
  215. una capa (layer) agrupa a todos archivos necesarios en un único
  216. archivo JS. (De ahí el nombre de esta sección.)
  217. </para></listitem>
  218. <listitem><para>
  219. "Interns" no son archivos javascript usados por dijits
  220. (típicamente, archivos de plantilla). También están agrupados
  221. en el mismo archivo JS como la capa.
  222. </para></listitem>
  223. <listitem><para>
  224. Pasa el archivo a través de ShrinkSafe, que elimina espacios en
  225. blanco y comentarios, así como acorta nombres de variables.
  226. </para></listitem>
  227. </itemizedlist>
  228. <para>
  229. Algunos archivos pueden no ser superpuestos, pero el proceso creará
  230. una versión especial del directorio con la archivo capa y todos los
  231. otros archivos. Esto le permite tener una distribución reducida
  232. adaptada a su sitio o necesidades de aplicación.
  233. </para>
  234. <para>
  235. Para usar una capa, el ayudante de vista <code>dojo()</code> tiene
  236. el método <code>addLayer()</code> para añadir paths de capas requeridas:
  237. </para>
  238. <programlisting role="html"><![CDATA[
  239. $view->dojo()->addLayer('/js/foo/foo.js');
  240. ]]></programlisting>
  241. <para>
  242. Para más información sobre la creación de construcciones
  243. personalizadas, por favor <ulink
  244. url="http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds">
  245. consulte la docuemntación de Build de Dojo</ulink>.
  246. </para>
  247. </sect3>
  248. <sect3 id="zend.dojo.view.dojo.methods">
  249. <title>Métodos Disponibles</title>
  250. <para>
  251. El ayudante de vista <code>dojo()</code> siempre devuelve una
  252. instancia del contenedor del marcador de posición dojo.
  253. Ese objeto contenedor dispone de los siguientes métodos:
  254. </para>
  255. <itemizedlist>
  256. <listitem><para><code>setView(Zend_View_Interface $view)</code>:
  257. establecer una instancia de vista en el contenedor.
  258. </para></listitem>
  259. <listitem><para><code>enable()</code>: habilitar explícitamente la
  260. integración de Dojo.</para></listitem>
  261. <listitem><para><code>disable()</code>: deshabilitar la
  262. integración de Dojo.</para></listitem>
  263. <listitem><para><code>isEnabled()</code>: determinar cuándo la
  264. integración de Dojo está habilitada o no.</para></listitem>
  265. <listitem><para><code>requireModule($module)</code>: establecer una
  266. sentencia <code>dojo.require</code></para></listitem>
  267. <listitem><para><code>getModules()</code>: determinar qué módulos
  268. han sido requeridos.</para></listitem>
  269. <listitem><para><code>registerModulePath($module, $path)</code>:
  270. registrar un path de un módulo personalizado de Dojo.
  271. </para></listitem>
  272. <listitem><para><code>getModulePaths()</code>: obtener la lista de
  273. los paths de módulos registrados.</para></listitem>
  274. <listitem><para><code>addLayer($path)</code>: añadir una capa
  275. (construcción personalizada) del path a utilizar.
  276. </para></listitem>
  277. <listitem><para><code>getLayers()</code>: conseguir una lista de
  278. todos los paths de capas registrados (construcción personalizada).
  279. </para></listitem>
  280. <listitem><para><code>removeLayer($path)</code>: eliminar la capa
  281. que concuerde con <code>$path</code> de la lista de capas
  282. registradas (construcción personalizada).</para></listitem>
  283. <listitem><para><code>setCdnBase($url)</code>: establecer la URL
  284. base para un CDN; típicamente, una de las
  285. <classname>Zend_Dojo::CDN_BASE_AOL</classname> o
  286. <classname>Zend_Dojo::CDN_BASE_GOOGLE</classname>, pero sólo
  287. necesita ser el string del URL antes del número de versión.
  288. </para></listitem>
  289. <listitem><para><code>getCdnBase()</code>: recuperar el CDN de la url
  290. base a utilizar.</para></listitem>
  291. <listitem><para><code>setCdnVersion($version = null)</code>:
  292. establecer cuál es la versión de Dojo a utilizar desde el CDN.
  293. </para></listitem>
  294. <listitem><para><code>getCdnVersion()</code>: recuperar que versión
  295. de Dojo será utilizada desde el CDN.</para></listitem>
  296. <listitem><para><code>setCdnDojoPath($path)</code>: establecer el
  297. path relativo a un archivo dojo.js o dojo.xd.js sobre un CDN;
  298. típicamente, uno de los
  299. <classname>Zend_Dojo::CDN_DOJO_PATH_AOL</classname> o
  300. <classname>Zend_Dojo::CDN_DOJO_PATH_GOOGLE</classname>,
  301. pero sólo debe ser el string del path detrás del número de
  302. versión.</para></listitem>
  303. <listitem><para><code>getCdnDojoPath()</code>: recuperar el último
  304. segmento del path del CDN de la url apuntando al archivo
  305. dojo.js.</para></listitem>
  306. <listitem><para><code>useCdn()</code>: decirle al contenedor que
  307. utilice el CDN; implícitamente permite integración.
  308. </para></listitem>
  309. <listitem><para><code>setLocalPath($path)</code>: decirle al
  310. contenedor el path a una instalación local de Dojo
  311. (deberá ser una ruta relativa al servidor, y contener el
  312. propio archivo dojo.js); implícitamente permite integración.
  313. </para></listitem>
  314. <listitem><para><code>getLocalPath()</code>: determinar qué ruta
  315. local a Dojo está siendo utilizada.</para></listitem>
  316. <listitem><para><code>useLocalPath()</code>: ¿la integración está
  317. utilizando un path local de Dojo?</para></listitem>
  318. <listitem><para><code>setDjConfig(array $config)</code>: conjunto
  319. de valores de configuración dojo/dijit
  320. (espera un array asociativo).</para></listitem>
  321. <listitem><para><code>setDjConfigOption($option, $value)</code>:
  322. establecer un único valor de configuración para dojo/dijit.
  323. </para></listitem>
  324. <listitem><para><code>getDjConfig()</code>: obtener todos los
  325. valores de configuración de dojo/dijit.</para></listitem>
  326. <listitem><para><code>getDjConfigOption($option, $default =
  327. null)</code>: conseguir un único valor de configuración de
  328. dojo/dijit.</para></listitem>
  329. <listitem><para><code>addStylesheetModule($module)</code>: agregar
  330. una hoja de estilo sobre la base del tema de un módulo.
  331. </para></listitem>
  332. <listitem><para><code>getStylesheetModules()</code>: obtener hojas
  333. de estilo registradas como temas de módulos.
  334. </para></listitem>
  335. <listitem><para><code>addStylesheet($path)</code>: agregar una hoja
  336. de estilo local para su uso con Dojo.</para></listitem>
  337. <listitem><para><code>getStylesheets()</code>: obtener hojas de
  338. estilo locales Dojo.</para></listitem>
  339. <listitem><para><code>addOnLoad($spec, $function = null)</code>:
  340. agregar un lambda para dojo.onLoad para llamadas.
  341. Si se pasa un argumento, se supone que que puede ser tanto
  342. el nombre de una función o dar por terminado javascript.
  343. Si se pasan dos argumentos, el primero se supone que es el
  344. nombre de la variable de la instancia de un objeto y el
  345. segundo ya sea un nombre de método en ese objeto o un cierre
  346. a utilizar con ese objeto.</para></listitem>
  347. <listitem><para><code>prependOnLoad($spec, $function = null)</code>:
  348. exactamente como <code>addOnLoad()</code>, excluyendo
  349. agregar al principio el comienzo de onLoad stack.
  350. </para></listitem>
  351. <listitem><para><code>getOnLoadActions()</code>: recuperar todas las
  352. acciones dojo.onLoad registradas con el contenedor. Esto
  353. será un array de arrays.</para></listitem>
  354. <listitem><para><code>onLoadCaptureStart($obj = null)</code>:
  355. capturar los datos que se utilizarán como lambda para
  356. dojo.onLoad(). Si se provee $obj, los códigos JS capturados
  357. serán considerados un cierre a utilizar con ese objeto
  358. Javascript.</para></listitem>
  359. <listitem><para><code>onLoadCaptureEnd($obj = null)</code>:
  360. finalizar la captura de datos para su uso con dojo.onLoad().
  361. </para></listitem>
  362. <listitem><para><code>javascriptCaptureStart()</code>:
  363. captura javascript arbitrario para ser incluido en Dojo JS
  364. (onLoad, require, etc. statements).</para></listitem>
  365. <listitem><para><code>javascriptCaptureEnd()</code>: finalizar la
  366. captura de javascript.</para></listitem>
  367. <listitem><para><code>__toString()</code>: emitir el contenedor a
  368. un string; muestra todo el estilo HTML y elementos del script.
  369. </para></listitem>
  370. </itemizedlist>
  371. </sect3>
  372. </sect2>
  373. <!--
  374. vim:se ts=4 sw=4 et:
  375. -->