Zend_Dojo-View-Dojo.xml 23 KB

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