Gabarit

<table class=“nostyle”>
<tr><td style=“border:1px solid black;margin:4px;padding:4px;”>
```
<?php
namespace ITRocks\Demo\Templating;
 
class Movie
{
	public string $title = 'Le retour du jeudi';
	public int $year = 1983;
}
```
</td><td>
+
</td><td style=“border:1px solid black;margin:4px;padding:4px;”>
```
<h1>{title}</h1>
Année : {year}
```
</td><td>
=
</td><td style=“border:1px solid black;margin:4px;padding:4px;”>
*Le retour du jedi*<br>
Année : 1983
</td></tr>
<tr><td>/Un objet/</td><td>+</td><td>/Un gabarit/</td><td>=</td><td>/Une page HTML/</td></tr>
</table>
<p>

it.rocks permet d’utiliser différents systèmes de Gabarits HTML, mais intègre son propre moteur de templating HTML.

Le système de template intégré Html_Template répond aux problématiques suivantes, essayant ainsi de pallier aux manques observés dans d’autres systèmes de templates dans ces domaines :
- Les templates doivent pouvoir être validés W3C.
- Les templates doivent pouvoir être consultés indépendamment de l’application, dans un navigateur, pour donner un aperçu le plus fidèle possible du rendu final.
- Les templates ne doivent pas embarquer de calculs ou de logique métier, mais que l’organisation des données destinées à l’affichage.
- Le code des templates destiné à être remplacé par les données de l’application doit être le plus compact et clair possible.
Ces pré-requis permettent notamment de faciliter le travail des designers-intégrateurs, qui pourront alors manipuler des fichiers HTML lisibles et validés ; l’<b>indépendance</b> des différents corps de métiers qui travaillent ensembles à la conception d’applications web en est donc améliorée.

A contrario, pour aider le développeur à limiter l’usage du template à sa plus stricte fonction, à savoir la structuration des données dans un document HTML, les fonctionnalités en sont volontairement limitées : la préparation des données reste la responsabilité du contrôleur et de la vue, côté logiciel, et ne doit pas apparaître au niveau du templating.

Fonctionnement de base et syntaxe

Un template HTML est un patron, une maquette de la page qu’on veut avoir.
On crée simplement un fichier HTML au format standard, avec tous les composantes d’une page HTML valide au sens de la norme W3C.
Les données de l’application seront insérées à des points marqués avec une syntaxe particulière, spécialement étudiée pour permettre la lisibilité du template HTML sans appliquer les données réelles.
En l’occurrence les données suivantes sont envoyées au moteur de templating lors de la génération de la page définitive, et sont donc utilisables dans le patron :
- un objet racine fait office de référentiel pour les données templatées, permettant la lecture de propriétés ou de résultats de méthodes
- des données supplémentaires peuvent être ajoutées par le contrôleur où la vue appelants,
- toute classe du projet disposant de propriétés ou de méthodes statiques peuvent également être utilisées,
- une librairie de fonctions dédiées au moteur de templating permet de résoudre certaines problématique, par exemple le parcours de toutes les propriétés d’un objet, pour rendre vos templates plus dynamiques.
De manière générale, la syntaxe adoptée :
- {data} permet d’insérer une donnée récupérée depuis l’application.
- <!—donnee_conditionnelle_ou_boucle—> permet de délimiter une portion de code HTML conditionnée au renseignement d’une donnée, de l’utiliser plusieurs fois si la donnée est un tableau, ou tout simplement de rentrer dans le référentiel d’un objet pour éviter de le repréciser à chaque insertion de donnée dans ce bloc.
Exemple de page HTML :
```
<!doctype html>
<html>
<head>
	<title>Minimal HTML page template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	Data : {data}
	<ul>
		
		<li>{sub_data}</li>
		
	</ul>
</body>
</html>
```
Cet exemple peut s’appliquer sur un objet racine dont la classe est :
```
class Example_Class
{
 
	/** @var string */
	public string $data = "test";
 
	/** @var Other_Class[] */
	public array $multi_data;
 
	public function __construct()
	{
		$this->multi_data = [new Other_Class('one'), new Other_Class('two')];
	}
 
}
 
class Other_Class
{
 
	/** @var string */
	public string $sub_data;
 
	/** @param $sub_data string */
	public function __construct(string $sub_data)
	{
		$this->sub_data = $sub_data;
	}
 
}
```
On voit dans cet exemple de gabarit que {data} fait référence à la propriété $data de l’objet de référence. <!—multi_data—> fait référence à la propriété $multi_data . S’agissant d’un tableau, le bloc de code HTML entre <!—multi_data—> et <!—end—> est répété pour chaque valeur. À l’intérieur de ce bloc de code, le référentiel devient l’instance de Other_Class correspondate, ainsi {sub_data} fait référence à la propriété $sub_data de la classe Other_Class .

Le page HTML résultat du croisement de ce gabarit et de ces objets sera alors :
```
<!doctype html>
<html>
<head>
	<title>Minimal HTML page template</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	Data : test
	<ul>
		<li>one</li>
		<li>two</li>
	</ul>
</body>
</html>
```
Utilisation avancée

Consultez la référence sur les gabarits dans Référence Gabarits.

Les autres fonctionnalités en résumé :
- Le système de templating navigue dans la structure de l’objet référent. Toutefois il est parfois nécessaire d’accéder à des données liées à la structure de l’objet, ou remonter dans les objets référents de niveaux supérieurs.
- Certaines notations permettent également de supprimer des caractères précédents ou suivants devenus inutiles si la valeur parsée est vide.
- Le moteur de gabarits intégré permet également d’appeler les contrôleurs d’autres vues pour les inclure.
- Enfin votre contrôleur de vue peut envoyer d’autres données que l’objet référent, également utilisables dans votre gabarit.
  Exemples :
-  : parse le bloc HTML pour chaque propriété de l’objet référent, chaque propriété étant une instance de Reflection_Property_Value.
-  {..data}  : remonte à la propriété $data le l’objet référent en dehors de la boucle/condition actuelle.
- <input name="name" value="{?value}"> : retire l’attribut value si la valeur de $value est vide, avec comme résultat <input name="value"> dans ce cas.
- {/Other_Class_Name/otherFeature} : sera remplacé par le résultat de l’appel du contrôleur de vue otherFeature de la classe Other_Class_Name .
- {parameter} : si l’objet n’a pas de propriété $parameter , le paramètre nommé parameter et renseigné par le contrôleur de vue sera parsé ici.
Pour plus d’informations, consultez la Référence Gabarits.

Wiki - 1 output

Notifications

Connected user

Gabarit

Fonctionnement de base et syntaxe

Utilisation avancée