Cela fait maintenant 5 mois que je travaille avec Zend Framework. J'ai des idées d'articles intéressants dont voici le premier : les placeholders utilisés avec Zend_Layout et Zend_View.

Pour information : Zend_View est une class permettant d'afficher une view dans un contexte MVC, elle est directement liée à une Zend_Controller_Action et permet d'afficher des données à l'utilisateur final. Zend_Layout est le système de template natif de ZF, il permet de définir un layout (application/views/scripts/layout.phtml) dans lequel la view principale sera affichée. Exemple :

  1. <?php echo '<?' ?>xml version="1.0" encoding="utf-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5. <title>My Website</title>
  6. </head>
  7. <body>
  8. <div id="header"></div>
  9. <div id="nav"></div>
  10. <div id="content">
  11.  
  12. <?php echo $this->layout()->content; ?>
  13.  
  14. </div>
  15. <div id="footer"></div>
  16.  
  17. </body>
  18. </html>

Ceci est un layout comprennant les élements XHTML de base et présente 4 block : header, nav, content, footer qui serviront à la mise en page. Le problème qui se pose est celui-ci : . C'est là que les placeholders interviennent (traduire par "emplacements réservés").

De base, ZF propose un placeholder de base accessible depuis une view ou depuis un layout par <?php $this->placeholder('myPlaceholder') ?>. Il y a aussi les placeholders prédéfinis HeadLink, HeadMeta, HeadScript, HeadStyle, HeadTitle. Voici le layout précédent adapté :

  1. <?php
  2. // application/views/scripts/layout.phtml
  3. $this->headTitle()->prepend('My Website');
  4. $this->headTitle()->setSeparator(' - ');
  5.  
  6. echo '<?' ?>xml version="1.0" encoding="utf-8" ?>
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  9. <head>
  10. <title><?php echo $this->headTitle() ?></title>
  11.  
  12. <?php echo $this->headStyle() ?>
  13.  
  14. <?php echo $this->headScript() ?>
  15.  
  16. </head>
  17. <body>
  18. <div id="header"></div>
  19. <div id="nav"><?php echo $this->placeholder('nav') ?></div>
  20. <div id="content">
  21.  
  22. <?php echo $this->layout()->content; ?>
  23.  
  24. </div>
  25. <div id="footer"></div>
  26.  
  27. </body>
  28. </html>

On remarque l'ajout de 4 placeholders. Voici comment y accéder depuis une view :

  • Définition directe du contenu via les méthodes :
    • $this->headTitle('My Title');
    • $this->headTitle->prepend('text');
    • $this->headTitle->append('text');
  • Enregistrement :
    • $this->placeholder('myPlacerholder')->captureStart('APPEND');
    • $this->placeholder('myPlaceholder')->captureEnd();
  1. <?php
  2. // application/views/scripts/articles/show.phtml
  3. $this->headTitle("Showing article");
  4. $this->placeholder('nav')->captureStart();
  5. ?>
  6.  
  7. <a href="...">Index</a> - <a href="...">Articles</a> - <a href="">Visualisation</a>
  8.  
  9. <?php
  10. $this->placeholder('nav')->captureEnd();
  11. $this->headScript()->captureStart();
  12. ?>
  13.  
  14. /* Some javascripts specifics to this page... */
  15.  
  16. <?php
  17. $this->headScript()->captureEnd();
  18. ?>

Ce que l'on a fait dans cette view :

  • On a définit un titre pour la page, comme spécifié dans le layout le titre final de la page sera : "My Website - Showing article"
  • Le placeholder de navigation sera complété par quelques liens.
  • Le placeholder pour les scripts contiendra des petits scripts spécifiques à la page

Je tiens à préciser que les placeholders prédéfinis ajouteront automatiquement les balises xhtml. Pour terminer : un layout utilisant headStyle d'un façon très pratique (utilisation de 2 types de médias css : print et screen) :

  1. <?php $this->headStyle()->captureStart() ?>
  2.  
  3. @import url(<?php echo $front->getBaseUrl() ?>/css/generic.css);
  4. @import url(<?php echo $front->getBaseUrl() ?>/css/global.css);
  5. @import url(<?php echo $front->getBaseUrl() ?>/js/lib/jquery-ui-1.5.2/jquery-ui-themeroller.css);
  6. img.ui-datepicker-trigger{position:relative; left:-21px; top:2px;}
  7.  
  8. <?php
  9. $this->headStyle()->captureEnd();
  10. $this->headStyle()->captureStart(Zend_View_Helper_Placeholder_Container_Abstract::APPEND, array('media' => 'print')) ?>
  11.  
  12. @import url(<?php echo $front->getBaseUrl() ?>/css/generic.css);
  13. @import url(<?php echo $front->getBaseUrl() ?>/css/print.css);
  14.  
  15. <?php
  16. $this->headStyle()->captureEnd();
  17. echo $this->headStyle();
  18. ?>

Convaincu ? Vous utilisez une autre technique ? J'espère que cet article vous aura été profitable, 2 autres sont en préparation.