|
|
@@ -0,0 +1,222 @@
|
|
|
+<?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 <link> 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>
|