Zend_View-Helpers-HeadScript.xml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- EN-Revision: 24249 -->
  3. <!-- Reviewed: no -->
  4. <sect3 id="zend.view.helpers.initial.headscript">
  5. <title>L'aide de vue HeadScript</title>
  6. <para>
  7. L'élément HTML <code>&lt;script&gt;</code> est utilisé pour à la fois pour fournir des
  8. éléments de scripts côté-client dans le code HTML et aussi pour lier une ressource distante
  9. contenant du script côté-client. L'aide de vue <code>HeadScript</code> vous permet de gérer
  10. ces deux cas.
  11. </para>
  12. <para>
  13. L'aide de vue <code>HeadScript</code> supportent les méthodes suivantes pour
  14. paramétrer ou ajouter des scripts :
  15. </para>
  16. <itemizedlist>
  17. <listitem>
  18. <para>
  19. <code>appendFile($src, $type = 'text/javascript', $attrs =
  20. array())</code>
  21. </para>
  22. </listitem>
  23. <listitem>
  24. <para>
  25. <code>offsetSetFile($index, $src, $type = 'text/javascript', $attrs =
  26. array())</code>
  27. </para>
  28. </listitem>
  29. <listitem>
  30. <para>
  31. <code>prependFile($src, $type = 'text/javascript', $attrs =
  32. array())</code>
  33. </para>
  34. </listitem>
  35. <listitem>
  36. <para><methodname>setFile($src, $type = 'text/javascript', $attrs = array())</methodname></para>
  37. </listitem>
  38. <listitem>
  39. <para>
  40. <code>appendScript($script, $type = 'text/javascript', $attrs =
  41. array())</code>
  42. </para>
  43. </listitem>
  44. <listitem>
  45. <para>
  46. <code>offsetSetScript($index, $script, $type = 'text/javascript', $attrs =
  47. array())</code>
  48. </para>
  49. </listitem>
  50. <listitem>
  51. <para>
  52. <code>prependScript($script, $type = 'text/javascript', $attrs =
  53. array())</code>
  54. </para>
  55. </listitem>
  56. <listitem>
  57. <para>
  58. <code>setScript($script, $type = 'text/javascript', $attrs =
  59. array())</code>
  60. </para>
  61. </listitem>
  62. </itemizedlist>
  63. <para>
  64. Dans le cas des méthodes de type <code>*File()</code>, <varname>$src</varname> est
  65. l'emplacement distant du script à charger ; c'est généralement sous la forme d'une <acronym>URL</acronym> ou
  66. d'un chemin de fichier. Pour les méthode de type <code>*Script()</code>,
  67. <varname>$script</varname> sont les directives de script côté-client que vous souhaitez utiliser
  68. dans l'élément.
  69. </para>
  70. <note>
  71. <title>Paramétrez des commentaires conditionnels</title>
  72. <para>
  73. <code>HeadScript</code> vous permet d'englober vos balises de script avec des
  74. commentaires conditionnels, ce qui permet de les masquer pour des navigateurs
  75. spécifiques. Pour ajouter les balises conditionnelles, fournissez le paramètre
  76. <code>conditional</code> en tant que partie du paramètre <varname>$attrs</varname> lors de
  77. l'appel de la méthode.
  78. </para>
  79. <example id="zend.view.helpers.initial.headscript.conditional">
  80. <title>Headscript avec des commentaires conditionnels</title>
  81. <programlisting language="php"><![CDATA[
  82. // adding scripts
  83. $this->headScript()->appendFile('/js/prototype.js',
  84. 'text/javascript',
  85. array('conditional' => 'lt IE 7');
  86. ]]></programlisting>
  87. </example>
  88. </note>
  89. <para>
  90. <code>HeadScript</code> vous permet aussi de capturer des scripts ; ceci peut être
  91. utile si vous voulez créer du script côté-client par programmation, et ensuite le placer
  92. n'importe où. Une utilisation de ceci est montré dans un exemple ci-dessous.
  93. </para>
  94. <para>
  95. Enfin, vous pouvez aussi utiliser la méthode <methodname>headScript()</methodname> pour rapidement
  96. ajouter des éléments de script ; le prototype dans ce cas est <code>headScript($mode =
  97. 'FILE', $spec, $placement = 'APPEND')</code>. Le <varname>$mode</varname> est soit "FILE", soit
  98. "SCRIPT", suivant si vous liez un script ou que vous en définissiez un. <varname>$spec</varname>
  99. est soit le script à lier ou la source du script elle-même. <varname>$placement</varname> est
  100. "APPEND", "PREPEND", ou "SET".
  101. </para>
  102. <para>
  103. <code>HeadScript</code> surcharge chacun des <methodname>append()</methodname>,
  104. <methodname>offsetSet()</methodname>, <methodname>prepend()</methodname>, et <methodname>set()</methodname> pour imposer
  105. l'utilisation des méthodes spéciales énumérées ci-dessus. En interne, il stocke chaque
  106. élément sous la forme d'un <code>stdClass</code>, qui peut être ensuite sérialisé grâce à la
  107. méthode <methodname>itemToString()</methodname>. Ceci vous permet de réaliser des vérifications sur les
  108. éléments dans la pile, et optionnellement de les modifier en modifiant simplement l'objet
  109. retourné.
  110. </para>
  111. <para>
  112. L'aide <code>HeadScript</code> est une implémentation concrète de l'<link
  113. linkend="zend.view.helpers.initial.placeholder">aide Conteneur</link>.
  114. </para>
  115. <note>
  116. <title>Utilisez InlineScript pour les scripts dans le corps ("body") du HTML</title>
  117. <para>
  118. L'aide de vue, <link
  119. linkend="zend.view.helpers.initial.inlinescript">InlineScript</link>, similaire à
  120. <code>HeadScript</code> devrait être utilisée quand vous souhaitez inclure des scripts
  121. dans le corps ("<classname>body</classname>") du HTML. Placer ces scripts en fin du
  122. document est une bonne pratique pour accélérer l'envoi de votre page, particulièrement
  123. pour les scripts tiers d'analyse.
  124. </para>
  125. </note>
  126. <note>
  127. <title>Les attributs arbitraires sont désactivées par défaut</title>
  128. <para>
  129. Par défaut, <code>HeadScript</code> affichera seulement les attributs de
  130. <code>&lt;script&gt;</code> approuvés par le W3C. Ceux-ci inclus "<code>type</code>",
  131. "<code>charset</code>", "<code>defer</code>", "<code>language</code>", et
  132. "<code>src</code>". Cependant, certaines bibliothèques javascript, notamment <ulink
  133. url="http://www.dojotoolkit.org/">Dojo</ulink>, utilise des attributs personnalisés dans
  134. le but de modifier le comportement. Pour autoriser ce type d'attribut, vous pouvez les
  135. activer grâce à la méthode <methodname>setAllowArbitraryAttributes()</methodname> :
  136. </para>
  137. <programlisting language="php"><![CDATA[
  138. $this->headScript()->setAllowArbitraryAttributes(true);
  139. ]]></programlisting>
  140. </note>
  141. <example id="zend.view.helpers.initial.headscript.basicusage">
  142. <title>Utilisation basique de l'aide HeadScript</title>
  143. <para>
  144. Vous devriez ajouter une nouvelle balise de script à chaque fois. Comme noté
  145. ci-dessus, ceux-ci peuvent être des liens vers des ressources externes ou vers les
  146. scripts eux-mêmes.
  147. </para>
  148. <programlisting language="php"><![CDATA[
  149. // ajout de scripts
  150. $this->headScript()->appendFile('/js/prototype.js')
  151. ->appendScript($onloadScript);
  152. ]]></programlisting>
  153. <para>
  154. L'ordre est souvent important avec les scripts côté-client ; vous devez vous
  155. assurer de charger les librairies dans un ordre spécifique en fonction de leurs
  156. dépendances ; utilisez à la fois les directives <code>append</code>,
  157. <code>prepend</code>, et <code>offsetSet</code> pour vous aider dans cette tâche
  158. :
  159. </para>
  160. <programlisting language="php"><![CDATA[
  161. // mettre les scripts dans l'ordre
  162. // placer celui-ci à un offset particulier pour s'assurer
  163. // de le charger en dernier
  164. $this->headScript()->offsetSetFile(100, '/js/myfuncs.js');
  165. // utiliser les effets de scriptaculous (append utilise
  166. // l'index suivant, c-à-d. 101)
  167. $this->headScript()->appendFile('/js/scriptaculous.js');
  168. // mais dans tous les cas, le script de base prototype
  169. // doit être chargé en premier :
  170. $this->headScript()->prependFile('/js/prototype.js');
  171. ]]></programlisting>
  172. <para>
  173. Quand vous êtes finalement prêt à afficher tous les scripts dans votre layout,
  174. faîtes simplement un <code>echo</code> de l'aide :
  175. </para>
  176. <programlisting language="php"><![CDATA[
  177. <?php echo $this->headScript() ?>
  178. ]]></programlisting>
  179. </example>
  180. <example id="zend.view.helpers.initial.headscript.capture">
  181. <title>Capturer les scripts en utilisant l'aide HeadScript</title>
  182. <para>
  183. Parfois vous devez générer des scripts côté-client par programme. Même si vous
  184. pouvez employer la concaténation de chaînes, les "heredocs", ou tout autre équivalent,
  185. il est souvent plus facile de faire juste la création des scripts et de les entourer par
  186. des balises <acronym>PHP</acronym>. <code>HeadScript</code> vous permet de le faire, et capture ainsi
  187. l'élément dans la pile :
  188. </para>
  189. <programlisting language="php"><![CDATA[
  190. <?php $this->headScript()->captureStart() ?>
  191. var action = '<?php echo $this->baseUrl ?>';
  192. $('foo_form').action = action;
  193. <?php $this->headScript()->captureEnd() ?>
  194. ]]></programlisting>
  195. <para>Les suppositions suivantes sont considérées :</para>
  196. <itemizedlist>
  197. <listitem>
  198. <para>
  199. Les déclarations de scripts sont ajoutées à la pile. Si vous souhaitez
  200. qu'elles remplacent la pile ou qu'elles soient ajoutées en début de pile, vous
  201. devez fournir "SET" ou "PREPEND", en tant que premier argument de
  202. <methodname>captureStart()</methodname>.
  203. </para>
  204. </listitem>
  205. <listitem>
  206. <para>
  207. Le type <acronym>MIME</acronym> est considéré comme étant "text/javascript" ; si vous
  208. souhaitez spécifier un type différent, vous devez le fournir en tant que
  209. deuxième argument de <methodname>captureStart()</methodname>.
  210. </para>
  211. </listitem>
  212. <listitem>
  213. <para>
  214. Si vous souhaitez spécifier un quelconque attribut additionnel pour la
  215. balise <code>&lt;script&gt;</code>, fournissez-le sous la forme d'un tableau en
  216. troisième argument de <methodname>captureStart()</methodname>.
  217. </para>
  218. </listitem>
  219. </itemizedlist>
  220. </example>
  221. </sect3>