Zend_Dojo-View-Dojo.xml 20 KB

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