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

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 24249 -->
<!-- Reviewed: no -->
<sect1 id="learning.quickstart.create-layout">
    <title>Créer une layout</title>

    <para>
        Vous avez remarqué que les scripts de vue dans les sections précédentes étaient des
        fragments de <acronym>HTML</acronym>, pas des pages complètes. C'est le design&#160;:
        nous voulons que nos actions retournent du contenu uniquement relatif à elles mêmes et
        non de l'application en général.
    </para>

    <para>
        Maintenant nous devons introduire le contenu généré dans une page entière
        <acronym>HTML</acronym>. Nous utiliserons un layout global pour tout le site dans ce but.
    </para>

    <para>
        Il y a deux designs pattern que le Zend Framework utilise pour les layouts&#160;: <ulink
            url="http://martinfowler.com/eaaCatalog/twoStepView.html">Two Step View</ulink> et
        <ulink
            url="http://www.oracle.com/technetwork/java/compositeview-137722.html">Composite
            View</ulink>. <emphasis>Two Step View</emphasis> est souvent associé au pattern <ulink
            url="http://www.martinfowler.com/eaaCatalog/transformView.html">Transform View</ulink>
        l'idée de base est que les vues de l'application créent une représentation qui est ensuite
        injectée dans une vue plus globale. Le pattern <emphasis>Composite View</emphasis>
        traite avec une vue fabriquée à partir de plusieurs vues applicatives.
    </para>

    <para>
        Dans Zend Framework, <link linkend="zend.layout">Zend_Layout</link> combine les idées de
        ces patterns. Plutôt que chaque vue inclue tout le design, chacune ne contient que ses
        propres données.
    </para>

    <para>
        Par contre vous pourriez avoir besoin occasionnellement d'informations globales dans la vue
        générale. Heureusement, le Zend Framework propose une variété de conteneurs appelés
        <emphasis>placeholders</emphasis> pour permettre de stocker de telles informations depuis
        les scripts de vue des actions.
    </para>

    <para>
        Pour démarrer avec <classname>Zend_Layout</classname>, nous devons d'abord informer le
        bootstrap de l'objet <classname>Layout</classname> (ressource). On peut activer cela au
        moyen de la commande <command>zf enable layout</command>:
    </para>

    <programlisting language="shell"><![CDATA[
% zf enable layout
Layouts have been enabled, and a default layout created at
application/layouts/scripts/layout.phtml
A layout entry has been added to the application config file.
]]></programlisting>

    <para>
        Comme le suggère la commande, <filename>application/configs/application.ini</filename>
        est mis à jour et contient maintenant les informations suivantes dans la section
        <constant>production</constant>&#160;:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

; Add to [production] section:
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
]]></programlisting>

    <para>
        Le fichier <acronym>INI</acronym> final devrait ressembler à ceci&#160;:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

[production]
; PHP settings we want to initialize
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
appnamespace = "Application"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
resources.frontController.params.displayExceptions = 0
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"

[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
]]></programlisting>

    <para>
        Cette directive indique à l'application de chercher les scripts de layout dans
        <filename>application/layouts/scripts</filename>. Si vous examinez votre structure de
        répertoires, vous verrez que ce dossier a été créé pour vous, avec le fichier
        <filename>layout.phtml</filename>.
    </para>

    <para>
        Nous voulons aussi nous assurer que nous avons une déclaration de DocType XHTML pour notre
        application. Pour activer cela, nous devons ajouter une ressource à notre bootstrap.
    </para>

    <para>
        La manière la plus simple d'ajouter une ressource au bootstrap est de définir une méthode
        protégée qui commence par <methodname>_init</methodname>. Dans notre cas, nous voulons
        initialiser le doctype et donc nous créons une méthode
        <methodname>_initDoctype()</methodname>&#160;:
    </para>

    <programlisting language="php"><![CDATA[
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
    }
}
]]></programlisting>

    <para>
        Dans cette méthode, nous devons renseigner la vue au sujet du doctype. Mais d'où va
        provenir notre objet de vue&#160;? La solution simple consiste à initialiser la ressource
        <classname>View</classname> et la récupérer dans la méthode de bootstrap pour l'utiliser.
    </para>

    <para>
        Pour initialiser la vue, ajoutez la ligne suivante dans le fichier
        <filename>application/configs/application.ini</filename>, dans la section
        <constant>production</constant>&#160;:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

; Add to [production] section:
resources.view[] =
]]></programlisting>

    <para>
        Ceci indique de charger la vue avec aucune option (les '[]' indiquent que la clé "view" est
        un tableau et nous ne lui passons rien du tout).
    </para>

    <para>
        Maintenant que nous possédons une vue, retournons à notre méthode
        <methodname>_initDoctype()</methodname>. A l'intérieur, nous allons d'abord nous assurer
        que la ressource <classname>View</classname> existe, puis nous la récupèrerons et la
        configurerons&#160;:
    </para>

    <programlisting language="php"><![CDATA[
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        $view->doctype('XHTML1_STRICT');
    }
}
]]></programlisting>

    <para>
        Maintenant que <classname>Zend_Layout</classname> est initialisé et que le Doctype est
        réglé, créons notre vue globale de layout&#160;:
    </para>

    <programlisting language="php"><![CDATA[
<!-- application/layouts/scripts/layout.phtml -->
<?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Zend Framework Quickstart Application</title>
  <?php echo $this->headLink()->appendStylesheet('/css/global.css') ?>
</head>
<body>
<div id="header" style="background-color: #EEEEEE; height: 30px;">
    <div id="header-logo" style="float: left">
        <b>ZF Quickstart Application</b>
    </div>
    <div id="header-navigation" style="float: right">
        <a href="<?php echo $this->url(
            array('controller'=>'guestbook'),
            'default',
            true) ?>">Guestbook</a>
    </div>
</div>

<?php echo $this->layout()->content ?>

</body>
</html>
]]></programlisting>

    <para>
        Nous récupérons le contenu de l'application au moyen de l'aide de vue
        <methodname>layout()</methodname> et nous accédons à la clé "content". Vous pouvez utiliser
        d'autres segments de l'objet de réponse, mais dans la plupart des cas ce n'est pas
        nécessaire.
    </para>

    <para>
        Notez aussi l'utilisation du placeholer <methodname>headLink()</methodname>. C'est un moyen
        simple de générer du <acronym>HTML</acronym> pour les éléments &lt;link&gt; et ca permet de
        les garder sous le coude au travers de l'application. Si vous devez ajouter des feuilles
        CSS c'est aussi possible.
    </para>

    <note>
        <title>Checkpoint</title>

        <para>
            Allez maintenant sur "http://localhost" et regarder le code source rendu. Vous devriez
            voir votre entête XHTML et vos sections head, title et body.
        </para>
    </note>
</sect1>