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

<?xml version="1.0" encoding="UTF-8"?>
<!-- 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: 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 une layout globale pour tout le site dans ce but.
    </para>

    <para>
        Il y a deux designs pattern que le Zend Framework utilise pour les layouts: <ulink
            url="http://martinfowler.com/eaaCatalog/twoStepView.html">Two Step View</ulink> et
        <ulink
            url="http://java.sun.com/blueprints/corej2eepatterns/Patterns/CompositeView.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.
        Plutot que chaque vue inclut tout le design, chacune ne contient que ses propres données.
    </para>

    <para>
        Par contre vous pourriez avoir besoin occasionnelement 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> (resource). 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>:
    </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:
    </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 repertoires,
        vous verrez que ce dossier a été crée 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>:
    </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 ? 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>:
    </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>.
        Dedans, nous allons d'abord nous assurer que la ressource <classname>View</classname> existe, puis nous la
        récupèrerons et la configurerons:
    </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:
    </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 un en-tête
            XHTML, head, title, et body.
        </para>
    </note>
</sect1>