IV. La Vue (les gabarits)▲
IV-A. Mise en place de la Vue▲
Le composant Vue du Zend Framework, sans surprise, est nommé Zend_View. Ce composant nous aidera à séparer le code d'affichage du code des méthodes d'action.
$view = new Zend_View();
$view->setScriptPath('/chemin/vers/fichiers-de-vue');
echo $view->render('view.php');Il est évident que si nous devions utiliser ce squelette dans chacune de nos méthodes d'action, nous serions en train de répéter le code de préparation qui n'a pas d'intérêt pour l'action. Nous devrions plutôt initialiser la Vue autre part, puis accéder depuis chaque méthode d'action à notre objet déjà créé.
Les concepteurs du Zend Framework ont prévu ce type de problème, ainsi une solution est prévue pour nous dans un « action helper » (assistant d'action). Zend_Controller_Action_Helper_ViewRenderer crée une propriété de vue ($this->view) pour que nous puissions l'utiliser et rend également un script de vue. Pour le rendu, l'assistant demande à l'objet Zend_View de regarder dans views/scripts/{nom du contrôleur}/{nom de l'action}.phtml et le contenu (évalué/rendu) est au corps de l'objet Response. Cet objet est utilisé pour rassembler les en têtes, le corps et les exceptions générées comme résultat de l'utilisation du système MVC. Le contrôleur primaire envoie les headers suivis du contenu du corps à la fin de la répartition (dispatch).
Pour intégrer la Vue à notre application, nous devons initialiser la Vue avec la méthode init(). Nous devons également créer des scripts de Vue avec du code de test d'affichage.
Voici les modifications à IndexController :
<?php
class IndexController extends Zend_Controller_Action
{
function indexAction()
{
$this->view->title = "Mes albums";
}
function ajouterAction()
{
$this->view->title = "Ajouter un nouvel album";
}
function modifierAction()
{
$this->view->title = "Modifier un album";
}
function supprimerAction()
{
$this->view->title = "Supprimer un album";
}
}Dans chaque méthode, nous assignons une propriété $title et c'est tout !
L'affichage effectif n'est pas fait pour le moment, car il est pris en charge par le contrôleur primaire à la fin de la répartition.
Nous devons maintenant ajouter nos quatre scripts d'action à notre application. Ces scripts sont connus comme des « gabarits » (templates) et la méthode render() s'attend à ce que chaque gabarit s'appelle en fonction de son action et qu'il porte l'extension « .phtml » pour montrer que c'est un gabarit. Le script doit être dans un sous dossier dont le nom dépend du contrôleur, ainsi les quatre scripts sont :
<html>
<head>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html><html>
<head>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html><html>
<head>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html><html>
<head>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<h1><?php echo $this->escape($this->title); ?></h1>
</body>
</html>Tester les quatre actions devrait afficher les titres en gras.
IV-B. Code HTML en commun▲
Il devient très vite évident que nous avons beaucoup de code HTML répété dans nos Vues. C'est un problème très classique, et le composant Zend_Layout est conçu pour y remédier. Il nous permet de déplacer tout le code HTML des en-têtes et pieds de page vers un script de « mise en page » (layout) qui se charge alors d'inclure le code de la Vue en cours d'exécution.
Les modifications suivantes sont nécessaires. Premièrement, nous devons décider où conserver nos scripts de mise en page. L'emplacement recommandé est à l'intérieur du répertoire « application », il faut alors créer un répertoire « layouts » dans le répertoire « tutoriel-zf/application ».
Nous devons initier le système Zend_Layout dans le bootstrap index.php :
...
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');
Zend_Layout::startMvc(array('layoutPath'=>'./application/layouts'));
// run!
$frontController->dispatch();La méthode startMvc() effectue quelques opérations en arrière-plan afin de mettre en place un plugin pour le front controller, afin de s'assurer que le composant Zend_Layout évalue le script de mise en page avec les scripts de Vue d'action à l'intérieur à la fin de la répartition.
Nous avons maintenant besoin d'un script de mise en page. Par défaut, il est appelé layout.phtml et il se situe dans le répertoire « layouts » :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<div id="content">
<h1><?php echo $this->escape($this->title); ?></h1>
<?php echo $this->layout()->content; ?>
</div>
</body>Remarquez que nous avons écrit notre code en XHTMLet que c'est du code HTML standard pour afficher une page. Puisque le titre de la page dans la balise <h1> est utilisé dans toutes les pages, nous l'avons placé dans le fichier de mise en page et nous utilisons le helper escape() pour nous assurer qu'il est correctement encodé.
Pour obtenir que le script de l'action courante s'affiche, nous utilisons echo pour afficher le contenu de la variable $content à l'aide du helper layout() : echo $this->layout()->content; Cela signifie que les scripts de Vue sont exécutés avant le script de mise en page.
Nous pouvons maintenant nous défaire des quatre scripts de vue puisque nous n'avons rien de particulier à y placer. Nous pouvons vider leur contenu.
Si vous essayez à nouveau les 4 URL, vous ne devriez voir aucune différence ! La différence majeure est que, cette fois, tout le travail est effectué dans la mise en page.
IV-C. Ajout de styles▲
Bien qu'il s'agisse d'un tutoriel simple, nous aurons besoin d'un fichier CSS pour que notre application paraisse un minimum présentable ! Cela pose en fait un problème mineur, car nous ne savons pas réellement comment référencer la CSS puisque l'URI n'indique pas le bon répertoire racine. Pour y remédier, nous utilisons la méthode getBaseUrl() qui est dans la requête et nous l'envoyons à la Vue. Cela nous donne la partie de l'URI que nous ne connaissons pas.
Les « assistants de Vue » (view helpers) sont situés dans le répertoire « application/views/helpers », sont appelés {Nom de l'assistant}.php (la première lettre doit être en majuscules) et la classe qui y réside doit être appelée « Zend_View_Helper_{Nom de l'assistant} » (de nouveau, la première lettre est en majuscules). Il doit y avoir une fonction appelée « {nom de l'assistant}() » (première lettre en minuscules - n'oubliez pas !). Dans notre cas, le script s'appelle BaseUrl.php et il contient :
<?php
class Zend_View_Helper_BaseUrl
{
function baseUrl()
{
$fc = Zend_Controller_Front::getInstance();
return $fc->getBaseUrl();
}
}Ce n'est pas une méthode complexe. Nous récupérons simplement une instance du front controller et nous retournons la valeur de sa méthode getBaseUrl().
Nous devons ajouter le fichier CSS à la section <head> du fichier layout.phtml :
...
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><?php echo $this->escape($this->title); ?></title>
<link rel="stylesheet" type="text/css" media="screen"
href="<?php echo $this->baseUrl();?>/public/css/site.css" />
</head>
...Enfin, quelques styles :
body,html {
font-size:100%;
margin: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000;
background-color: #fff;
}
h1 {
font-size:1.4em;
color: #800000;
background-color: transparent;
}
#content {
width: 770px;
margin: 0 auto;
}
label {
width: 100px;
display: block;
float: left;
}
#formbutton {
margin-left: 100px;
}
a {
color: #800000;
}Cela devrait donner un rendu un peu meilleur !