Zend_View-Helpers-HeadScript.xml 9.5 KB

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