Zend_Dojo-View-Dojo.xml 20 KB

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