documentation/manual/fr/tutorials/quickstart-create-layout.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- EN-Revision: 21825 -->
   3 <!-- Reviewed: no -->
   4 <sect1 id="learning.quickstart.create-layout">
   5     <title>Créer une layout</title>
   6
   7     <para>
   8         Vous avez remarqué que les scripts de vue dans les sections précédentes étaient des
   9         fragments de <acronym>HTML</acronym>, pas des pages complètes. C'est le design&#160;:
  10         nous voulons que nos actions retournent du contenu uniquement relatif à elles mêmes et
  11         non de l'application en général.
  12     </para>
  13
  14     <para>
  15         Maintenant nous devons introduire le contenu généré dans une page entière
  16         <acronym>HTML</acronym>. Nous utiliserons un layout global pour tout le site dans ce but.
  17     </para>
  18
  19     <para>
  20         Il y a deux designs pattern que le Zend Framework utilise pour les layouts&#160;: <ulink
  21             url="http://martinfowler.com/eaaCatalog/twoStepView.html">Two Step View</ulink> et
  22         <ulink
  23             url="http://java.sun.com/blueprints/corej2eepatterns/Patterns/CompositeView.html">Composite
  24             View</ulink>. <emphasis>Two Step View</emphasis> est souvent associé au pattern <ulink
  25             url="http://www.martinfowler.com/eaaCatalog/transformView.html">Transform View</ulink>
  26         l'idée de base est que les vues de l'application créent une représentation qui est ensuite
  27         injectée dans une vue plus globale. Le pattern <emphasis>Composite View</emphasis>
  28         traite avec une vue fabriquée à partir de plusieurs vues applicatives.
  29     </para>
  30
  31     <para>
  32         Dans Zend Framework, <link linkend="zend.layout">Zend_Layout</link> combine les idées de
  33         ces patterns. Plutôt que chaque vue inclue tout le design, chacune ne contient que ses
  34         propres données.
  35     </para>
  36
  37     <para>
  38         Par contre vous pourriez avoir besoin occasionnellement d'informations globales dans la vue
  39         générale. Heureusement, le Zend Framework propose une variété de conteneurs appelés
  40         <emphasis>placeholders</emphasis> pour permettre de stocker de telles informations depuis
  41         les scripts de vue des actions.
  42     </para>
  43
  44     <para>
  45         Pour démarrer avec <classname>Zend_Layout</classname>, nous devons d'abord informer le
  46         bootstrap de l'objet <classname>Layout</classname> (ressource). On peut activer cela au
  47         moyen de la commande <command>zf enable layout</command>:
  48     </para>
  49
  50     <programlisting language="shell"><![CDATA[
  51 % zf enable layout
  52 Layouts have been enabled, and a default layout created at
  53 application/layouts/scripts/layout.phtml
  54 A layout entry has been added to the application config file.
  55 ]]></programlisting>
  56
  57     <para>
  58         Comme le suggère la commande, <filename>application/configs/application.ini</filename>
  59         est mis à jour et contient maintenant les informations suivantes dans la section
  60         <constant>production</constant>&#160;:
  61     </para>
  62
  63     <programlisting language="ini"><![CDATA[
  64 ; application/configs/application.ini
  65
  66 ; Add to [production] section:
  67 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
  68 ]]></programlisting>
  69
  70     <para>
  71         Le fichier <acronym>INI</acronym> final devrait ressembler à ceci&#160;:
  72     </para>
  73
  74     <programlisting language="ini"><![CDATA[
  75 ; application/configs/application.ini
  76
  77 [production]
  78 ; PHP settings we want to initialize
  79 phpSettings.display_startup_errors = 0
  80 phpSettings.display_errors = 0
  81 includePaths.library = APPLICATION_PATH "/../library"
  82 bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
  83 bootstrap.class = "Bootstrap"
  84 appnamespace = "Application"
  85 resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
  86 resources.frontController.params.displayExceptions = 0
  87 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
  88
  89 [staging : production]
  90
  91 [testing : production]
  92 phpSettings.display_startup_errors = 1
  93 phpSettings.display_errors = 1
  94
  95 [development : production]
  96 phpSettings.display_startup_errors = 1
  97 phpSettings.display_errors = 1
  98 ]]></programlisting>
  99
 100     <para>
 101         Cette directive indique à l'application de chercher les scripts de layout dans
 102         <filename>application/layouts/scripts</filename>. Si vous examinez votre structure de
 103         répertoires, vous verrez que ce dossier a été créé pour vous, avec le fichier
 104         <filename>layout.phtml</filename>.
 105     </para>
 106
 107     <para>
 108         Nous voulons aussi nous assurer que nous avons une déclaration de DocType XHTML pour notre
 109         application. Pour activer cela, nous devons ajouter une ressource à notre bootstrap.
 110     </para>
 111
 112     <para>
 113         La manière la plus simple d'ajouter une ressource au bootstrap est de définir une méthode
 114         protégée qui commence par <methodname>_init</methodname>. Dans notre cas, nous voulons
 115         initialiser le doctype et donc nous créons une méthode
 116         <methodname>_initDoctype()</methodname>&#160;:
 117     </para>
 118
 119     <programlisting language="php"><![CDATA[
 120 // application/Bootstrap.php
 121
 122 class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
 123 {
 124     protected function _initDoctype()
 125     {
 126     }
 127 }
 128 ]]></programlisting>
 129
 130     <para>
 131         Dans cette méthode, nous devons renseigner la vue au sujet du doctype. Mais d'où va
 132         provenir notre objet de vue&#160;? La solution simple consiste à initialiser la ressource
 133         <classname>View</classname> et la récupérer dans la méthode de bootstrap pour l'utiliser.
 134     </para>
 135
 136     <para>
 137         Pour initialiser la vue, ajoutez la ligne suivante dans le fichier
 138         <filename>application/configs/application.ini</filename>, dans la section
 139         <constant>production</constant>&#160;:
 140     </para>
 141
 142     <programlisting language="ini"><![CDATA[
 143 ; application/configs/application.ini
 144
 145 ; Add to [production] section:
 146 resources.view[] =
 147 ]]></programlisting>
 148
 149     <para>
 150         Ceci indique de charger la vue avec aucune option (les '[]' indiquent que la clé "view" est
 151         un tableau et nous ne lui passons rien du tout).
 152     </para>
 153
 154     <para>
 155         Maintenant que nous possédons une vue, retournons à notre méthode
 156         <methodname>_initDoctype()</methodname>. A l'intérieur, nous allons d'abord nous assurer
 157         que la ressource <classname>View</classname> existe, puis nous la récupèrerons et la
 158         configurerons&#160;:
 159     </para>
 160
 161     <programlisting language="php"><![CDATA[
 162 // application/Bootstrap.php
 163
 164 class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
 165 {
 166     protected function _initDoctype()
 167     {
 168         $this->bootstrap('view');
 169         $view = $this->getResource('view');
 170         $view->doctype('XHTML1_STRICT');
 171     }
 172 }
 173 ]]></programlisting>
 174
 175     <para>
 176         Maintenant que <classname>Zend_Layout</classname> est initialisé et que le Doctype est
 177         réglé, créons notre vue globale de layout&#160;:
 178     </para>
 179
 180     <programlisting language="php"><![CDATA[
 181 <!-- application/layouts/scripts/layout.phtml -->
 182 <?php echo $this->doctype() ?>
 183 <html xmlns="http://www.w3.org/1999/xhtml">
 184 <head>
 185   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 186   <title>Zend Framework Quickstart Application</title>
 187   <?php echo $this->headLink()->appendStylesheet('/css/global.css') ?>
 188 </head>
 189 <body>
 190 <div id="header" style="background-color: #EEEEEE; height: 30px;">
 191     <div id="header-logo" style="float: left">
 192         <b>ZF Quickstart Application</b>
 193     </div>
 194     <div id="header-navigation" style="float: right">
 195         <a href="<?php echo $this->url(
 196             array('controller'=>'guestbook'),
 197             'default',
 198             true) ?>">Guestbook</a>
 199     </div>
 200 </div>
 201
 202 <?php echo $this->layout()->content ?>
 203
 204 </body>
 205 </html>
 206 ]]></programlisting>
 207
 208     <para>
 209         Nous récupérons le contenu de l'application au moyen de l'aide de vue
 210         <methodname>layout()</methodname> et nous accédons à la clé "content". Vous pouvez utiliser
 211         d'autres segments de l'objet de réponse, mais dans la plupart des cas ce n'est pas
 212         nécessaire.
 213     </para>
 214
 215     <para>
 216         Notez aussi l'utilisation du placeholer <methodname>headLink()</methodname>. C'est un moyen
 217         simple de générer du <acronym>HTML</acronym> pour les éléments &lt;link&gt; et ca permet de
 218         les garder sous le coude au travers de l'application. Si vous devez ajouter des feuilles
 219         CSS c'est aussi possible.
 220     </para>
 221
 222     <note>
 223         <title>Checkpoint</title>
 224
 225         <para>
 226             Allez maintenant sur "http://localhost" et regarder le code source rendu. Vous devriez
 227             voir votre entête XHTML et vos sections head, title et body.
 228         </para>
 229     </note>
 230 </sect1>