Raccourcis : Contenu - rubriques - sous rubriques
EN FR
Guide du développeur
Jelix 1.3.9

Section: Générer une page HTML

^ Les réponses: générer du contenu Générer du texte brut »
Changer de langue : EN

− Table des matières

Pour générer du xhtml/html, vous indiquez l'alias "html" ou "basichtml" à la méthode getResponse(). Vous récupérez alors respectivement une instance de l'objet jResponseHtml ou jResponseBasicHtml. Voici un exemple :


   $rep = $this->getResponse('html');

Xhtml ou html

jResponseHtml ou jResponseBasicHtml est utilisé pour renvoyer par défaut une réponse au format XHTML. Mais le HTML est possible, en l'indiquant via la méthode setXhtmlOutput() :


$rep->setXhtmlOutput(true);  // Réponse au format xhtml
$rep->setXhtmlOutput(false); // Réponse au format html

Par la suite, vous pouvez savoir si la réponse renverra du html ou du xhtml en appelant la méthode isXhtml().

Avec une réponse "html" (et non "basichtml"), vous pouvez aussi changer le doctype si vous le souhaitez, en surchargeant la méthode outputDoctype(), qui doit faire un echo du doctype souhaité.

Renvoyer le contenu d'une page statique

Depuis Jelix 1.3, un nouvel objet réponse est apparu : jResponseBasicHtml. Il permet de renvoyer simplement une page HTML complète stockée dans un fichier. Ce fichier doit être un simple fichier PHP, cela ne doit pas être un template pour jTpl.

Il doit contenir tout le code HTML de la page, et trois instructions qui affichent les variables suivantes :

  • $HEADBOTTOM : avant la balise de fin </head>
  • $BODYTOP : aprés la balise d'ouverture <body>
  • $BODYBOTTOM : avant la balise de fin </body>

Ces variables contiennent du code HTML qui a été indiqué lors des appels des méthodes addHeadContent() et addContent() de l'objet jResponseBasicHtml. Elles ont pu être appelé par des contrôleurs, des classes techniques, des plugins. C'est pourquoi il faut indiquer ces variables.

Voici un exemple de fichier statique :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_EN" lang="en_EN">
  <head>
     <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
      <title>Hello From Jelix !</title>
      <?php echo $HEADBOTTOM; ?>
  </head>
  <body>
      <?php echo $BODYTOP; ?>
     <h1>Hello YOU !</h1>
     <p>This is a sample html page generated by Jelix</p>
      <?php echo $BODYBOTTOM; ?>
  </body>
</html>

Dans votre contrôleur, vous devez indiquer où jResponseBasicHtml peut trouver ce fichier, en donnant son chemin complet dans la propriété $htmlFile. Notez que l'objet jCoordinator possède une méthode permettant de récupérer le chemin d'un module. Il est ainsi aisée de récupérer un fichier d'un module, par exemple se trouvant dans un sous-répertoire static/ du module :


   $rep = $this->getResponse('basichtml');
   $rep->htmlFile = $GLOBALS['gJCoord']->getModulePath('unModule'). 'static/hello.php';

Générer du contenu dynamique

Pour renvoyer du contenu dynamique, il est préférable d'utiliser la classe jResponseHtml, donc de récupérer la réponse de type "html". Cette classe implémente des méthodes et propriétés supplémentaires par rapport à la réponse "basichtml", pour manipuler le contenu (X)HTML. Elle est de ce fait bien plus facilement utilisable par les divers composants (zones, templates, classes techniques, contrôleurs..) voulant agir sur la réponse.

Le source HTML d'une page est découpé en deux parties : la partie <head>, et la partie <body> :

jResponseHTML s'occupe de générer le contenu de la balise <head>, à partir des informations données au travers de ses méthodes. Par contre la génération du contenu de la partie <body> est de votre ressort, avec l'aide éventuellement d'un template. Voyons tout ça en détails.

Modification de l'entête HTML

Pour modifier le contenu de la balise <head>, vous avez plusieurs méthodes et propriétés. Vous pouvez ainsi modifier le titre du document, le "favicon", les urls des feuilles de styles et des scripts javascripts à lier au document, du CSS ou du javascript à inclure directement dans le <head>, ou encore les mots clés associés, la description de la page, et autres metas. Voyons un exemple qui montre l'ensemble de ces possibilités :


$rep->title = "Le titre de mon document";

// génère une balise <script src="lib.js"....>
$rep->addJSLink('lib.js');

// génère une balise <script>alert....</script> qui sera incluse dans <head>
$rep->addJSCode('alert("essai");');

// génère une balise <link>
$rep->addCSSLink('maFeuille.css');

// génère une balise <style>
$rep->addStyle('span', 'font-weight:bold;');

// ajoute une balise meta pour la description
$rep->addMetaDescription('description');

// ajoute une balise meta pour les mots clés
$rep->addMetaKeywords('motclé motclé motclé');

// Ajoute un auteur
$resp->addMetaAuthor('Laurent');

// modifie le nom du generateur
$resp->addMetaGenerator('My Super App 1.0');

Notez que pour les méthodes addCSSLink et addJSLink, vous pouvez indiquer un paramètre supplémentaire qui doit être un tableau associatif, décrivant les attributs supplémentaires à mettre.


$rep->addCSSLink('maFeuille.css', 
                  array('title'=>'design bleu',
                        'rel'=>'alternate stylesheet',
                        'media'=>'all'));

Si vous voulez injecter du contenu spécifique dans la balise <head>, vous pouvez le faire via la méthode addHeadContent()


$rep->addHeadContent('<link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed.php" />')

Si à un moment ou à un autre, vous voulez annuler les modifications faites dans le head (par exemple, vous êtes dans une zone qui est appelée par un module tiers que vous ne voulez pas/pouvez pas modifier), vous pouvez appeler la méthode clearHtmlHeader(). Cette fonction vous permet d'effacer une partie du header de votre document html, en indiquant quoi effacer : 'CSSLink', 'Styles', 'JSLink', 'JSCode' et/ou 'Others'.


$rep->clearHtmlHeader(array('CSSLink', 'Styles'));

Cela effacera les liens CSS (addCSSLink) et les balises <style> (addStyle).

Générer le contenu principal de la page HTML

jResponseHtml génère la balise <body>, mais c'est vous qui en contrôlez ses attributs et son contenu.

Pour définir les attributs de la balise <body>, vous pouvez utiliser la propriété bodyTagAttributes.


$rep->bodyTagAttributes = array('onload'=>'bodyonload()', 
                                'class'=>'maincontent');

Pour générer le contenu même de la balise body, vous avez deux choix : soit utiliser un template, soit utiliser la méthode addContent().

Générer avec un template

Pour utiliser un template, jResponseHtml propose deux propriétés :

  • bodyTpl, qui doit contenir le sélecteur du template à utiliser
  • body qui contient un objet jTpl permettant de "paramétrer" le template.

Exemple :


$rep->bodyTpl = 'myapp~main';

$rep->body->assign('person','Laurent');

Le contenu généré par le moteur de template sera intégré entre les balises <body> et </body>.

Pour en savoir plus sur l'utilisation des templates, consultez le chapitre sur les templates.

Il se peut que vous ayez besoin d'ajouter du contenu en plus de celui produit par le template. Pour cela vous utiliserez la méthode addContent(). Elle prend en paramètre une chaîne pour le contenu, et un booléen (facultatif) pour indiquer si on veut que le contenu soit ajouté avant (true) ou après (false, valeur par défaut) le contenu du template.


$rep->addContent('Mon contenu HTML après le template');
$rep->addContent('Mon contenu HTML avant le template', true);

Notez que le contenu à ajouter peut être aussi le contenu de zones


$rep->addContent(jZone::get('monmodule~uneZone'));

Générer avec un template principal et des "sous-templates"

Bien souvent, les pages d'un site ont un gabarit commun, et seules certaines zones changent (notamment le contenu principal) en fonction de l'action. Il y aura donc un template principal , défini comme on l'a vu précédemment, qui ne contiendra que le contenu commun à toutes les pages, et dans chaque action on utilisera un autre template (un "sous-template") pour générer le contenu spécifique, dont on injectera le résultat dans le template principal. Ce travail peut être fait avec un template directement, ou au moyen d'une zone.

Et pour éviter que dans chaque action on définisse à chaque fois le template principal, les élements communs (feuilles de style etc), on créera un objet réponse HTML qui héritera de jResponseHtml.

Pour savoir comment faire, lire la section sur la personnalisation de réponse commune.

Générer sans template

Si vous ne voulez pas utiliser de template pour le body, alors il faut laisser la propriété $bodyTpl à vide, et utiliser seulement la méthode addContent() :


$rep->addContent('contenu pour mon body');

Autres paramètres pour les réponses html et basichtml

Comme jResponseHtml et jResponseBasicHtml sont dérivés de jReponse, vous pouvez influer sur les entêtes HTTP, comme le code "status", et bien sûr ajouter d'autres en-têtes.


 $rep->setHttpStatus  ("404", "Not Found");
 $rep->addHttpHeader  ("Date-modified", "....");

Il y a aussi une autre propriété : $xhtmlContentType. Cette propriété définit si le contenu xHTML doit être envoyé avec un en-tête HTTP Content-Type spécifique : application/xhtml+xml. Bien sûr, une vérification des capacités du navigateur à recevoir du xhtml est faite, et si le navigateur ne peut pas recevoir du xHTML, la réponse sera envoyée avec le Content-Type text/html comme pour le HTML classique.


$rep->xhtmlContentType = true ;

Activer des plugins

Depuis Jelix 1.3, les classes jResponseHtml et jResponseBasicHtml ont un système de plugin. Ces plugins permettent d'enrichir ou agir automatiquement sur le contenu de toutes les pages HTML du site. C'est ainsi qu'il existe par exemple un plugin pour afficher une barre de debug, ou encore un autre pour "minifier" les fichiers CSS et Javascript.

Ces plugins sont des plugins de type "htmlresponse", ils doivent se trouver dans un répertoire htmlresponse/ d'un dépot de plugin. Et pour les activer, il faut indiquer les noms des plugins utilisé dans l'option plugins de la section jResponseHtml de la configuration générale. Exemple :


[jResponseHtml]
plugins = debugbar, minify

Compression des fichiers css et javascript

Jelix est fourni avec Minify, qui permet de compresser et concaténer automatiquement les fichiers CSS et Javascript d'une page HTML.

Dans Jelix 1.2, cette fonctionnalité était incluse directement dans la classe jResponseHtml, mais depuis Jelix 1.3, elle a été déplacée dans un plugin, et sa mise en œuvre est légèrement différente. Note : ce plugin ne fonctionne pas avec jResponseBasicHtml.

Pour activer le plugin minify, il faut indiquer son nom dans l'option plugins comme indiqué précédemment. Et vous avez une série d'options qui vous permet de contrôler le comportement de Minify.


[jResponseHtml]

;concatene et compress les fichier CSS
minifyCSS = on

;concatene et compress les fichier JS
minifyJS = on

; liste des fichiers CSS qui ne doivent pas être compressé
minifyExcludeCSS = "file1.css,file2.css"

; liste des fichiers JS qui ne doivent pas être compressé
minifyExcludeJS = "jelix/wymeditor/jquery.wymeditor.js"

; chemin du point d'entrée de Minify, relatif au basePath
minifyEntryPoint = minify.php

Tout d'abord, vous devez activer la compression en mettant minifyCSS et/ou minifyJS à "on". Vous pouvez indiquer de ne pas compresser certains fichiers en les listant dans minifyExcludeCSS et/ou minifyExcludeJS. Gardez "jelix/wymeditor/jquery.wymeditor.js" dans minifyExcludeJS, car Wymeditor n'aime pas être concaténé avec d'autres fichiers js.

Les chemins des fichiers indiqués doivent être

  • soit relatifs au basePath (sans / au début)
  • soit des chemins absolus par rapport au domaine (démarrant donc par /)

N'indiquez pas d'URLs complètes, elles sont automatiquement exclues.

La dernière chose à faire est d'installer un script minify.php dans www/. Copiez simplement le fichier lib/jelix-scripts/templates/www/minify.php.tpl en votre_appli/www/minify.php. Il y a quelques options supplémentaires pour Minify que vous pouvez changer dans ce fichier (voyez la documentation de Minify), et c'est tout. Si vous voulez nommer ce fichier autrement, indiquez son nom dans l'option minifyEntryPoint.

^ Les réponses: générer du contenu Générer du texte brut »
Changer de langue : EN
Ce manuel est distribué selon les termes de la licence Creative Commons by-nc-sa 3.0. Vous pouvez donc reproduire, modifier, distribuer et communiquer ce manuel au public en respectant les conditions suivantes : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.