IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction à Tremplin-CMS/core

Présentation des atouts

Date de publication : 23/10/2011. Date de mise à jour : 23/10/2011.

niveau : débutant

Cet article est une introduction à Tremplin-CMS/core : la partie framework du projet Tremplin-CMS.
Son objectif est de vous montrer les principales qualités du framework.

       Version PDF   Version hors-ligne
Viadeo Twitter Facebook Share on Google+        



1. Introduction
1-A. Objet de l'article
1-B. Publique visé
1-C. Le projet Tremplin-CMS
1-D. La communauté Tremplin-CMS
2. Les atouts de Tremplin-CMS
2-A. Objectif de cette partie
2-B. L’usage d’un micro noyau
2-C. Créer des template graphiques facilement
2-D. Créer une libraire d’éléments réutilisables
2-E. Développement par workflow
2-F. Pensé pour le travail en équipe
3. Découverte par la pratique
3-A. Introduction
3-B. Installation de Tremplin-CMS
3-C. Création d’une page
3-D. Création d’un contrôle visuel
3-D-1. Déclaration du contrôle
3-D-2. Création du visuel
3-D-3. Insertion d’un contenu
3-D-4. Teste de notre contrôle
3-E. Utilisation d’un template visuel
3-E-1. Création du template
3-E-2. Utilisation du template
4. Conclusion


1. Introduction


1-A. Objet de l'article

A destination des développeurs web, notamment PHP / JavaScript, cet article a pour but de vous présenter Tremplin-CMS/core.

Il sera composé de l’étude d’exemples courts mettant en valeur certains des principaux atouts de Tremplin-CMS/core.


1-B. Publique visé

Cet article vise un publique de développeurs web, notamment PHP / JavaScript. Il est accessible aux profils ‘débutant’.


1-C. Le projet Tremplin-CMS

Le projet Tremplin-CMS est né du besoin d’une solution de type CMS permettant de réaliser d’importantes économies sur un projet web.

Les principaux axes d’économie auxquels le projet s’attaque sont :

  • Les coûts d’hébergement et d’infrastructure.
  • Les coûts de développement / maintenance.
  • Les coûts liés au design graphique.
Pour atteindre ces objectifs les impératifs suivant ont été travaillés :

  • Déporter le plus possible les traitements vers le navigateur du client.
  • Permettre de réutiliser le plus possible les éléments déjà créés.
  • Être simple, rester simple, rendre simple.
Tremplin-CMS/core représente la partie framework du projet.
Il est totalement indépendant de la partie CMS (non présenté dans l’article).


1-D. La communauté Tremplin-CMS

Le projet possède un site internet en français (www.tremplin-cms.fr).
Ce site possède un forum dédié grâce auquel vous pouvez obtenir des informations complémentaires, participer à la vie du projet et poser vos questions techniques.


2. Les atouts de Tremplin-CMS


2-A. Objectif de cette partie

Dans cette première partie je vais vous présenter, très rapidement, les principaux avantages qu’apporte Tremplin-CMS.

Cela essentiellement afin de répondre aux questions suivantes :

  • Pourquoi un nouveau framework ?
  • Quels bénéfices puis-je en tirer ?
Cette partie présentation sera suivie d’une mise en pratique dont le but est de montrer par l’exemple combien Tremplin-CMS est simple d’apprentissage et d’utilisation.


2-B. L’usage d’un micro noyau

Tremplin est formé d’un micro noyau et d’extensions : coté serveur et coté navigateur (JavaScript).

Le coeur du système a été réduit à l’essentiel et les autres fonctionnalités ont étés déplacées dans des extensions.

Le choix d’un micro noyau présente plusieurs avantages :

  • Il est plus facile à sécuriser.
  • Il est plus facile à comprendre.
  • Il est plus facile à maintenir et faire évoluer.
  • Il fait l’objet d’un support à long terme.
  • Aucune rupture de compatibilité n’est admise.
    A noter cependant qu’aujourd’hui le noyau n’est pas encore finalisé, des ruptures souviendront probablement.
Les extensions présentent aussi plusieurs intérêts :

  • Elles peuvent être facilement réutilisées.
  • Elles peuvent être associées à un numéro de version.
  • Leur système de numérotation permet de repérer directement une version compatible.
    Ce point permet la mise en œuvre d’un mécanisme de mises à jour automatiques.
  • Coté navigateur :
    • Plusieurs versions peuvent cohabiter en mémoire (sauf contraintes spécifiques).
    • Les extensions peuvent être chargées automatiquement.

2-C. Créer des template graphiques facilement

Tremplin a été étudié afin de faciliter le plus possible la création des templates graphiques.
Dans Tremplin un template graphique n’est pas formé d’un gros bloque de code HTML / CSS mais de petits bloques, emboîtés les un dans les autres.
Vous pouvez, en composant les différents bloques visuels (que vous avez créé ou téléchargé) et sans aucune connaissance du HTML / CSS, créer de nombreux templates différents.

Ces bloques visuels sont eux même des extensions. Ils sont principalement de quatre types :

  • Les éléments finaux.
    Ex : une image, un texte.
  • Les ‘Container’, dont la particularité est de disposer un unique élément de manière précise.
    Ex : un conteneur affichant une ombre autour de son contenu.
  • Les ‘Panel’, dont la particularité est de disposer précisément un nombre précis d'éléments.
    Ex : un panneau affichant un titre, un sous-titre, une image et un texte.
  • Les ‘List’, dont la particularité est d’afficher un nombre variable d’éléments.
    Ex : une liste affichant horizontalement ses éléments.
Les bloques visuels ont un autre avantage particulièrement intéressant : ils sont capables de s’adapter automatiquement aux contraintes du navigateur.
Ainsi, lorsque vous composez votre template à l’aide de bloques, vous n’avez à vous soucier de rien.

Les contraintes gérées par les bloques sont :

  • Le type de navigateur (IE6 ou HTML5 ?)
  • Le mode de navigation (souris ou tactile ?)
  • La taille de l’écran (petit, moyen, grand ?)

2-D. Créer une libraire d’éléments réutilisables

Comme entrevu dans les précédant chapitres, Tremplin vous permet de capitaliser sur vos développements précédant en permettant de réutiliser les éléments créés : qu’ils soient des fonctionnalités ou des éléments visuels. Ainsi plus vous développez avec Tremplin, moins cela vous coûte.

Les éléments réutilisables sont les extensions (des fonctionnalités ou des éléments visuels) mais aussi, nous allons le voir juste après, directement des morceaux de code.


2-E. Développement par workflow

Tremplin propose la possibilité de développer sous forme de workflow.

Un workflow est un enchaînement d’actions où chaque action a un unique objectif. L’enchaînement de ces actions forme le workflow.

Les avantages d’un développement par workflow sont :

  • Permettre de représenter visuellement le fonctionnement :
    • De nombreux outils permettent de dessiner / simuler le workflow (ex : DIA).
    • Une représentation visuelle permet de mieux communiquer au sein d’une équipe.
  • Chaque action est associée à un objectif et son code est indépendant du contexte :
    • Ces actions peuvent donc être réutilisées (similaire à des fonctions).
    • Le développement et la maintenance sont facilités (pas d’emmêlement).
    • Une action peut facilement être testée / modifiée : ses effets de bords sont plus simple à déterminer.
  • Permettre de supprimer les difficultés liées aux processus asynchrones :
    • Usage de chronomètres pour une animation.
    • Demande / envoie de données auprès du serveur.
    • Attente de validation d’un formulaire.

2-F. Pensé pour le travail en équipe

Comme vous l’avez compris Tremplin-CMS est basé sur une idée de découpage et réutilisation des éléments : que ce soit les composants visuels, les éléments graphiques ou les processus. Cela permet de réaliser des économies directes en capitalisant sur les développements et les réalisations précédentes.

Mais ce n’est pas là le seul avantage car ce découpage permet aussi de faciliter le travail en équipe, notamment pour le chef de projet :

  • Lors de la phase d’étude le découpage en entités peut se calquer sur la manière de subdiviser une application Tremplin en éléments. De plus dans Tremplin chaque élément est associé à un nom unique et significatif :
    • Permet une correspondance directe élément d’étude / élément développé.
    • Permet de faciliter l’écriture et la recherche des spécifications détaillées.
    • Globalement la communication au sein d’une équipe de développement se trouve simplifiée car les éléments peuvent être désignés sans ambiguïté.
  • Chaque élément correspond à un unique objectif, est indépendant de son contexte et ses interactions sont plus simples à modéliser/maîtriser :
    • L’écriture de tests unitaires s’en trouve grandement facilitée.
    • Des mocks (éléments simulant le fonctionnement) ou des versions temporaires peuvent être utilisés.
      Soit pour les tests unitaires, soit pour développer une partie en priorité / en parallèle.
  • Plus précisément, chaque élément ayant un fort niveau d’autonomie :
    • De nombreux points peuvent être développés / testés en parallèle.
    • La vélocité du développement peut être gérée en ajoutant des développeurs.
    • Chaque élément peut faire office de mesure pour chiffrer l’avancement et la fiabilité de l’application développée.

3. Découverte par la pratique


3-A. Introduction

Cette partie a pour objectif de présenter le développement d’extensions pour Tremplin-CMS.

Nous allons ici créer un composant, très simple, affichant un message composé d’un titre et d’un contenu.

Ce composant sera d’abord monolithique puis verra sa partie visuelle déportée dans un template visuel.

Pour finir nous travaillerons sur l’association de données et verrons les principales possibilités.


3-B. Installation de Tremplin-CMS

La première étape est d’installer Tremplin-CMS.

Pour cela téléchargez l’archive située à l’adresse http://www.tremplin-cms.fr/archives/tremplin-ver-dvp1.rar.

Cette archive contient la version exacte du framework utilisé pour ce tutoriel.

Pour installer le framework rien de plus simple : décompressez l’archive dans un répertoire puis configure un serveur APACHE / PHP 5.3 afin de faire pointer l’adresse http://localhost/tremplin vers la racine du dossier créé.


3-C. Création d’une page

Nous allons ici créer une page. Son but est de permettre de faire office de point d’entrée pour l’exécution de nos tests.

Pour créer une nouvelle page il suffit de créer un nouveau sous-dossier dans le dossier /javascript. Ici nous allons créer un sous-dossier page/tutoriels/dvp1/pageTest1.
Dans ce dossier il faut maintenant créer un fichier vide index.php. Ce fichier est l’unique fichier dont la présence est imposée, même s’il est vide (cela pour des raisons de sécurité).

Nous allons maintenant ajouter un visuel à notre page.

Pour cela il suffit d’ajouter un fichier html.html. Ce fichier contiendra le texte suivant :
1.
<h1>Bonjour de PageTest1</h1> 
Nous allons aussi associer une feuille de style.

Pour cela créer un fichier css.html avec le texte suivant :
1.
2.
3.
<style type="text/css"> 
    h1 { color: red; } 
</style> 
Notre page est maintenant terminée.

Il nous reste à demander à ce qu’elle soit utilisée en page de démarrage.

Pour se faire il vous modifier le fichier index.php situé à la racine du site afin d’ajouter la ligne suivante en tout début :
1.
define('T_STARTPAGENATURE', 'page/tutoriels/dvp1/pageTest1'); 
Cette ligne permet d’imposer l’usage d’une page de démarrage particulière.

Cette page est désignée par sa nature : c’est-à-dire le nom complet du sous-dossier contenant notre page. Vous pouvez maintenant admirer votre première page depuis l’adresse http://localhost/tremplin.


3-D. Création d’un contrôle visuel

Nous allons maintenant créer un simple contrôle visuel affichant un titre et un contenu.

Nous utiliserons la page créée précédemment pour tester notre contrôle.


3-D-1. Déclaration du contrôle

La première étape est, comme pour toutes les extensions s’exécutant coté navigateur, de créer un sous-dossier dans le dossier /javascript avec ici pour nom control/tutoriels/dvp1/infoViewer.

Dans ce dossier créez ensuit un fichier vide nommé index.php.


3-D-2. Création du visuel

Nous allons maintenant créer un visuel, de la même manière que pour notre page de test.

Dans le dossier du contrôle créez un fichier html.html avec le contenu suivant :
1.
2.
3.
4.
<div id="__INSTANCEID" class="__CSSCLASS"> 
   <div id="#__title">[%title%]</div> 
   <div id="#__content">[%content%]</div> 
</div> 
Qu’avons-nous fait ici ? Pour ce qui est du HTML rien de plus simple : deux DIV disposées verticalement.

__INSTANCEID et __CSSCLASS sont des mots ‘magiques’ : __INSTANCEID sera automatiquement remplacé par l’identifiant html associé à l’instance du contrôle et __CSSCLASS par la classe CSS principale associée au contrôle.

[%title%] et [%content%] sont des marqueurs de position. Ils indiquent un emplacement nommé (appelé slot dans Tremplin-CMS) où peut être inséré dynamiquement un contenu.

Ces emplacements ne sont valides que si un identifiant protégé de même nom est trouvé (ici #__title et #__content).

#__title et #__content sont ici des identifiants protégés. Ils se caractérisent par leur préfixe (#__ ou .__). Les identifiant protégés permettent d’éviter les conflits CSS ou d’identifiant HTML : ce qui est très important car nous ne savons pas par avance ce qui sera inséré dans les emplacements ‘title’ et ‘content’.

→ Comment fonctionnent les identifiant protégés ?
Tout simplement en remplaçant, pour un contrôle visuel, les mots #__ et .__ par le nom de la classe CSS principale associée au contrôle (celle-ci est unique pour toutes les instances d’un même contrôle). L’unique contrainte est qu’un contrôle ne peut pas contenir une instance d’un même contrôle, ce qui est un cas rare.

Nous allons maintenant ajouter une feuille de style CSS.

Même principe que précédemment, il suffit de créer un fichier css.html avec le contenu suivant :
1.
2.
3.
4.
5.
<style type="text/css"> 
   #__title { color: red; } 
   #__content { color: blue; } 
   __CSSCLASS { border-style: solid; border-color: black; border-width: 1px; } 
</style> 
Ces quelques lignes sont maintenant simples à comprendre :

  • Les éléments protégés #__titre et #__content sont respectivement associés à la couleur rouge et la couleur bleu.
    En utilisant des éléments protégés nous ne ciblons que les éléments de notre contrôle : sans ambiguïté possible et sans risque d’impact sur les autres éléments visuels.
  • __CSSCLASS est un mot magique automatiquement remplacé par le nom de la classe CSS principale associée au contrôle.
    Ici nous demandons à tracer une bordure noire autour de notre contrôle.

3-D-3. Insertion d’un contenu

Comme nous l’avons vu notre contrôle expose deux zones de contenu (appelés des slots) : title et content.
Nous allons ici insérer du contenu dans ces slots, sans quoi notre contrôle n’affichera rien.

Pour cela il vous faut créer un fichier custom.js.

Ce fichier sera automatiquement chargé et son contenu sera inséré dans le code source de la classe JavaScript formant notre contrôle.

Le contenu est le suivant :
1.
2.
3.
4.
$proto.onTemplateCreated = function()  { 
   this.setSlotContent('title', 'LE titre !'); 
   this.setSlotContent('content', 'LE contenu !'); 
}; 
$proto est ici une variable faisant référence au prototype de la classe représentant notre contrôle.
Nous modifions ici le prototype afin de redéfinir la méthode onTemplateCreated : une méthode appelée automatiquement une fois le visuel créé et prêt à être utilisé.

La méthode setSlotContent permet, comme le sous-entend son nom, d’insérer un contenu dans un emplacement.
Ici nous insérons du texte, mais nous aurions aussi pour insérer un objet DOM, un contrôle visuel, un élément graphique ou même une page.


3-D-4. Teste de notre contrôle

Il ne reste pour qu’à tester notre contrôle. Pour cela nous allons réutiliser la page créée précédemment.

La première étape consiste à demander l’affichage du contrôle.

Pour cela, dans le dossier page/tutoriels/dvp1/pageTest1, créez un fichier custom.js par le contenu suivant :
1.
2.
3.
$proto.createTemplateRoot = function() { 
   return this.createExtension('control/tutoriels/dvp1/infoViewer'); 
} 
Pour rappelle ce fichier sera chargé automatiquement et son contenu sera inséré dans le code source de la classe JavaScript formant la page.

Qu’avons-nous fait ici ? Nous avons surchargé la méthode createTemplateRoot.
Cette méthode a pour but de renvoyer une nouvelle instance de l’élément qui formera le visuel. Ici l’élément renvoyé est le contrôle créé dans la section précédente.

Dernière étape importante : il faut indiquer à Tremplin que notre page utilise notre contrôle.

Ainsi Tremplin va automatiquement pré charger notre contrôle. Pour se faire créez un fichier _infos.php avec le contenu suivant :
1.
2.
3.
<?php 
$this->declareRequirement('control/tutoriels/dvp1/infoViewer'); 
?> 
La déclaration des dépendances se fait coté serveur.
Le fichier _infos.php a pour rôle de regrouper les informations relatives à l’extension, dont les dépendances.

Voilà, vous pouvez maintenant visiter votre page à l’url http://localhost/tremplin et admirer votre premier contrôle.


3-E. Utilisation d’un template visuel

Nous allons maintenant modifier légèrement notre contrôle afin de créer une nouvelle vue.

Pour cela nous allons créer un template visuel puis demander à afficher notre contrôle en utilisant le nouveau template visuel.


3-E-1. Création du template

Commençons par créer une extension de type ‘template’.

Pour cela créez le sous-dossier template/tutoriels/dvp1/infoViewer/t1 puis dans ce dossier un fichier index.php vide.

Nous allons créer notre template en utilisant une méthode différente.

Deux méthodes permettent de créer le visuel d’un contrôle / template :

  • Soit en utilisant un fichier html.html et optionnellement un fichier css.html.
    Il s’agit de la méthode employée précédemment.
  • Soit en composant notre visuel à partir d’éléments préfabriqués.
    Il s’agit de la méthode que nous allons employer.
Pour cela créer un fichier custom.js avec le contenu suivant :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
$proto.createTemplateRoot = function() { 
   // Crée un conteneur entouré d'une ombre. 
   // 
   // Ce conteneur sera renvoyé par cette méthode 
   // afin d'indiquer qu'il s'agit de l'élément formant le visuel. 
   // 
   var shadow = this.createExtension('container/tremplincms/shadow/big/style1'); 
   // 
   // Lui impose une largeur. 
   shadow.setWidth('100px'); 
    // Crée une liste vertical. 
   // Le nom ‘vList' est un alias vers list/tremplincms/standard/vertical. 
   // 
   var vList = this.createExtension('vList'); 
   // 
   // Indique que cette liste forme le contenu de shadow. 
   shadow.setContent(vList); 
    /* Création du titre */ 
    // Crée un conteneur sans décoration. 
   // Ce conteneur nous intéresse pour son slot nommé ‘content'. 
   // 
   var titleContainer = this.createExtension('container/tremplincms/empty'); 
   // 
   // Demande à rendre ce slot publique sous le nom ‘title'. 
   this.publishSlot(titleContainer, 'content', 'title'); 
   // 
   // Ajoute le conteneur dans la liste vertical. 
   vList.append(titleContainer); 
    /* Création du contenu. */ 
    // Procède de la même manière. 
   // 
   var contentContainer = this.createExtension('container/tremplincms/empty'); 
   // 
   // Ici le slot est rendu publique mais en conservant son nom. 
   this.publishSlot(contentContainer, 'content'); 
   vList.append(contentContainer); 
    // Demande à utiliser notre conteneur du template. 
   return shadow; 
}; 
Comme pour notre page nous avons ici surchargé la méthode createTemplateRoot.
Cette méthode renvoie une nouvelle instance de l’élément visuel formant notre template.

Ici le visuel est formé d’une ombre (container/tremplincms/shadow/big/style1) contenant une liste verticale (vList).
Le nom vList est ici un raccourci (alias) pour list/tremplincms/standard/vertical.
Cet alias est défini dans le thème visuel utilisé par défaut.

Dans notre liste verticale nous avons ajouté deux conteneurs container/tremplincms/empty. Ces conteneurs sont démunis de toutes décorations.
Leur utilité ? Faire office de conteneur, car ils exposent tous deux un slot nommé content.

Nous avons donc deux éléments titleContainer et contentContainer. Ces deux éléments exposent chacun un slot de nom content.
Hors par défaut ceux-ci ne sont visibles que par les utilisateurs de titleContainer / contentContainer.
C’est pourquoi nous avons fait appel à la méthode publishSlot : cette méthode permet de rendre visible un slot pour les utilisateurs du contrôle et si nécessaire de lui associer un autre nom.

Notre template est donc créé. Il reste une dernière étape : déclarer les dépendances.

Pour cela il suffit de créer un fichier _infos.php avec le contenu suivant :
1.
2.
3.
4.
5.
$proto.createTemplateRoot = function() { 
    return this.createControlWithTemplate( 
        'control/tutoriels/dvp1/infoViewer', 
        'template/tutoriels/dvp1/infoViewer/t1'); 
}; 

3-E-2. Utilisation du template

En dernière étape nous allons modifier notre page afin de créer une instance de notre contrôle utilisant non pas le template par défaut mais notre nouveau template.
Pour cela dans le dossier page/tutoriels/dvp1/pageTest1 remplacé le contenu du fichier custom.js par le suivant :
1.
2.
3.
4.
5.
$proto.createTemplateRoot = function() { 
   return this.createControlWithTemplate( 
       'control/tutoriels/dvp1/infoViewer', 
       'template/tutoriels/dvp1/infoViewer/t1'); 
}; 
La méthode createControlWithTemplate permet de créer une nouvelle instance d’un contrôle en lui imposant un template particulier.
Une autre possibilité aurait été de créer un alias pour l’association contrôle / template, ce qui aurait permis d’utiliser un nom court (ex : beautifulInfoViewer).

Notre nouvelle version du contrôle est terminée et peut-être admiré depuis l’url http://localhost/tremplin.


4. Conclusion

Cet article vous a permis de découvrir Tremplin-CMS et d’expérimenter la facilité avec laquelle il est possible de créer un nouveau contrôle.
Lors de prochains articles vous verrez comment associer automatiquement des données aux contrôles, comment créer des thèmes visuels et comment créer des contrôles capables de s’adapter automatiquement aux contraintes du navigateur.



               Version PDF   Version hors-ligne

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © Johan PIQUET. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.