Accueil des tutors : Le template de base ¶

Les tutors regroupent un ensemble d'applications qui faciliteront la prise en mains du Jelix framework.

Les applications tutors tournent sous la version stable de Jelix 1.0 et versions antérieures

CE TUTORIEL EST INCOMPATIBLE AVEC Jelix 1.1 ET SUIVANT.

Vous devriez avoir lu, et réalisé en exercice, le mini tutoriel et le tutoriel principal ou être à l'aise avec Jelix. Certaines notions essentielles sont abordées dans ces deux tutoriels. Elles seront reprises ici, mais elles ne seront pas expliquées à nouveau.

Vous pouvez télécharger les source de tutors. Il s'agit de quelques applications à installer. Le Jelix framework n'est pas compris dans ce téléchargement.

Ces tutoriels vous proposent, une démarche à suivre pour réaliser une application Jelix. Je vous recommande de suivre la démarche présentée ici, en consultant les différents fichiers contenus dans le téléchargement. Nous reviendrons plus loin à l'installation de tutors.

Nous voulons réaliser une application qui servira de modèle à toutes les applications tutors. Dans les faits, il s'agit d'un simple menu et d'un template pour tutors. Malgré la simplicité du concept (un menu), se cache plusieurs composantes avec lesquelles vous construirez vos applications.

Pour réaliser cela, nous devons faire:

• une application qui aura une page d'accueil et deux autres pages de contenu;
• une application simple;
• une application avec un layer servant à plusieurs applications;

Nous allons diviser notre travail en quatre parties:

Partie 1

Nous devons faire une mise en place ou créer l'application tutors. C'est l'étape qui nécessite le plus de manipulations. C'est aussi l'étape, la plus simple à réaliser lors de la création d'une application.

Partie 2

Nous devons :

• utiliser un contrôleur avec l'action par défaut;
  • le fichier default.classic.php;
• créer une “réponse html” pour établir les liens vers les fichiers css, les fichiers javascripts et les images;
  • il s'agit du fichier myhtmlResponse.class.php;

A cette liste de fichiers, nous devons en ajouter deux autres :

• le logo de Jelix : logo_jelix_moyen.png;
  • il s'agit du logo jelix moyen de cette page;
• l'icône de Jelix: favicon.ico;
  • pris directement du site officiel de Jelix.

Partie 3

Nous devons :

• utiliser une adaptation du template de l'application des tests unitaires de Jelix;
  • il s'agit des fichiers main.tpl et screen.css. Ces deux fichiers représentent la mise en page et la mise en forme de notre page web;
• utiliser un template qui contiendra un texte, notre contenu;
  • nous allons nommer ce fichier content.tpl.

Partie 4

Nous devons :

• utiliser une zone pour présenter le menu des tutors. Ce menu aura trois aspects ou affichages;
  • ici il s'agit des fichiers : sommaire.zone.php et sommaire.tpl;
• utiliser une autre zone pour présenter deux contenus différents;
  • ici il s'agit des fichiers : contenu.zone.php, content2.tpl et content3.tpl.

Comme vous l'avez peut-être compris, nous pouvons soit utiliser cet article pour créer tutors ou le télécharger de la forge de Jelix.

Pour ceux qui crée, à partir de zéro, l'application tutors
Si vous avez fait le premier choix, vous devez utiliser le script jelix.php. Pour vous aider dans cette démarche, vous trouverez les étapes à suivre dans l'article Étapes lors de la création d'une application Jelix. En tenant compte des informations suivantes;

Nom de l'application : tutors.
Nom du module : tutors.

basePath = “/jelix/tutors/www/” ou selon votre configuration préférée.

Vous devez créer 2 zones:

• Le menu;
  • Nom de la zone : sommaire.zone.php;
  • Nom du template : sommaire.tpl;
• Le contenu;
  • Nom de la zone : contenu.zone.php;
  • Nom du template : content.tpl.

Aucune table, aucun dao et aucun formulaire ne sont utilisés pour ce tutors.

Également, vous devez télécharger le fichier suivant: tutors-www.zip ou tutors-www.tar.gz et le décompresser dans le répertoire /jelix/tutors/www/. Ce fichier contient les fichiers css, images, icônes et index.php de notre application.

Faites un test
Si vous tapez dans votre fureteur http://localhost/jelix/tutors/www/index.php, une page blanche s'affichera. Puisque que vous venez de créer un template nommé content.tpl, vous pouvez l'ajouter à l'action index du contrôleur par défaut.

public function index(){
    $rep = $this->getResponse('html');
 
    $rep->bodyTpl = "content";
 
    return $rep;
}

Pour ceux qui téléchargent l'application tutors
Si vous avez choisi de télécharger l'application zip ou l'application tar.gz, décompressez le fichier dans le répertoire /jelix/. N'oubliez pas :

• de créer son répertoire temporaire
• de modifier la configuration
• et changer les droits d'accès des répertoires en fonction de votre environnement.

Remarques :

• Si votre serveur tourne sous Linux, il faut modifier le fichiers .php pour remplacer les doubles antislash par un simple slash dans les appels de fichier. Deux fichiers doivent être modifiés : tutors/www/index.php et tutors/responses/myhtmlResponse.class.php
• Tutors fonctionne sur Jelix 1.0, mais on peut le faire fonctionner sur jelix 1.1 en modifiant le fichier /tutors/responses/myhtmlResponse.class.php et en remplaçant la ligne

  require_once (JELIX_LIB_RESPONSE_PATH.'jResponseHtml.class.php'); 

  par la ligne :

  require_once (JELIX_LIB_CORE_PATH.'response/jResponseHtml.class.php');

Faites un test
Tapez dans votre fureteur http://localhost/jelix/tutors/www/index.php et vous devriez voir l'application tutors.

Pour tous
Bien sûr, si malgré tous vos efforts vous avez une page vide dans votre fureteur, alors demandez de l'aide dans le forum Projets de la forge en mettant au début du titre de la discussion le mot tutors entre crochets, comme ceci : [tutors] titre de la discussion.

Le répertoire /jelix/tutors/www/ contient le fichier index.php. C'est le point d'entré de notre application avec réponse html. L'auteur à ajouté quelques lignes de code dans ce script. Ces lignes permettent d'inscrire dans le code html, le temps du serveur pour l'exécution du script php de la construction de la page html. Voici ces lignes de code.

// Au début du fichier
$__time_start = microtime(true);
 
...
 
// A la fin du fichier
$__time_stop = microtime(true);
echo "\n\n<!-- Temps du serveur (script php) pour la construction de la page : ".round($__time_stop-$__time_start, 5) ." secondes.-->";

Également le répertoire /jelix/tutors/www/ contient les fichiers css, javascripts et images. Il y différentes façons de créer des liens vers ces ressources. Une des façons est d'utiliser une réponse personnalisée que nous verrons plus loin. Mais ce n'est pas la seule.

Notions avancées
Pour ceux qui sont habiles avec Jelix, sachez que vous pouvez partager un répertoire. Cela est utile pour y entreposer des css, javascripts et images communs à différentes applications.

Si vous pouvez créer un alias dans la configuration de votre serveur apache:

• lisez : Vous pouvez spécifier le document root.

Sinon vous pouvez modifier la structure hiéarchique de Jelix framework:

• lisez : Vous ne pouvez pas spécifier le document root.

Nous sommes rendus à modifier le fichier contrôleur. Vu la simplicité de cette application, il n'y que trois actions qui affichent du texte.

L'action default_index exécute 4 tâches relativement simples:

• appel une réponse html personnalisée;
• affecte une chaîne de caractères à la variable de template “page_title”;
• insère un template dans le template /jelix/tutors/modules/tutors/templates/main.tpl;

Les deux autres actions:

• appel une réponse html personnalisée;
• affecte une chaîne de caractères à la variable de template “page_title”;
• insère une zone dans le template principal;
• initialise une variable qui identifie le menu à afficher..

Emplacements dans tutors

/jelix/tutors/modules/tutors/controllers/

Le contrôleur

Fichier à copier : default.classic.php

Guide du développeur

[http://docs.jelix.org/fr/manuel-1.0/controleurs|Le contrôleur]]

Consulter les fichiers de Jelix framework

Pour le contrôleur : /jelix/lib/jelix/core/jController.class.php

Nous en sommes à poser une autre brique à notre application. Cette brique se nomme une réponse personnalisée.

Une réponse personnalisée nous permet:

• d'utiliser le même thème de page web dans toutes les pages de notre application;
• de créer un lien vers un css, un fichier javascipt ou une image;
• de créer un lien vers le template principal;
• de créer des variables avec des valeurs par défaut;
• d'insérer des scripts;
• d'accéder aux propriétés et méthodes de l'objet jTpl.

Emplacements dans tutors
/jelix/tutors/responses/
Reponse html d'une page
Fichier à copier : myhtmlResponse.class.php
Guide du développeur
Une réponse personnalisée et les templates
Consulter les fichiers de Jelix framework
Pour une réponse html : /jelix/lib/jelix/core/response/jResponseHtml.class.php
Pour le templare : /jelix/lib/jelix/tpl/jTpl.class.php
Important
Pour indiquer à Jelix que vous avez créé une réponse personnalisée, vous devez ouvrir le fichier /jelix/tutors/var/config/index/config.ini.php et ajouter dans la section [responses] la ligne suivante:

[responses]
html = myhtmlResponse

Dans cette réponse html, il est intéressant de noter l'utilisation de la variable $gJConfig. Elle nous permet d'aller chercher, diverses informations de la configuration. Ainsi l'emplacement des fichiers css, javascripts ou images sera toujours connu en utilisant $gJConfig→urlengine['basePath'].

L'application tutors respecte les standards de la W3C, ils n'utilisent pas les balises <table> pour la mise en page et utilisent un fichier css pour la mise en forme. Notre layer sera le fichier template main.tpl.

Le rôle de ce template est d'assurer la mise en page pour les sections de la page d'accueil :

• le sommaire ou menu sous la forme d'une zone;
• un texte sous la forme d'un template ou d'une zone;
• un header et un footer.

Il faut préciser certaines particularités:

• la variable de template $j_basepath du chemin vers le logo Jelix;
  • c'est une variable de template définie par Jelix. Vous pouvez définir vos variables de template.
• la balise <div id=“link-extern”>;
  • le sélecteur css id.link-extern est défini dans la réponse personnalisée.
• la variable de Jelix : @jelix~jelix.framework.name@.
  • ce sélecteur de locale est définie dans la bibliothèque de Jelix. Il s'agit du nom de Jelix dans la langue et le charset que vous avec initialisé dans le fichier de configuration defaultconfig.ini.php.

Emplacement dans tutors
/jelix/tutors/modules/tutors/templates/
Le template principal
Fichier sources à copier : main.tpl
Guide du développeur
Les templates, une réponse personnalisée, localisation et expression dans un template.
Consulter les fichiers de Jelix framework
Pour la localisation : /jelix/lib/jelix/core-modules/jelix/locales/fr_FR/jelix.UTF-8.properties.
Aussi : /jelix/lib/core/jLocal.class.php.
Pour les variables de template : /jelix/lib/tpl/jtpl.class.php.

L'action default_index() contient un example très simple d'insertion de template. Le contenu du template content.tpl est placé dans la variable de template “content” et le template main.tpl affichera le template content.tpl.

Emplacement dans tutors
/jelix/tutors/modules/tutors/templates/
Le template inséré dans un autre template
Fichiers sources à copier : content.tpl
Guide du développeur
Les templates
Consulter les fichiers de Jelix framework
Pour les propriétés et méthodes du template : /jelix/lib/jelix/tpl/jTpl.class.php

Ce tutoriel se termine par deux exemples simples d'utilisation de zones.

• la zone sommaire gère le choix d'affichage pour le menu;
• la zone contenu affiche un template selon un de ses paramètres.

Emplacements dans tutors
/jelix/tutors/modules/tutors/templates/ et /jelix/tutors/modules/tutors/zones/
Le menu géré par une zone
Fichiers sources à copier : sommaire.tpl et sommaire.zone.php
Le contenu géré par une zone
Fichiers sources à copier : content2.tpl, content3.tpl et contenu.zone.php

Guide du développeur
Les zones

Consulter les fichiers de Jelix framework
Pour les propriétés et méthodes du template : /jelix/lib/jelix/tpl/jTpl.class.php
Pour la classe de base d'une zone : /jelix/lib/jelix/utils/jZone.class.php
Pour un appel direct d'un plugin : /jelix/lib/jelix/plugins/tpl/common/cfunction.zone.php

Pour exécuter ce tutoriel sur votre serveur local, vous devez taper : http://localhost/jelix/tutors/www/index.php.

Les tutors ont été créés par turowbye.

Mais il faut mentionner particulièrement la participation de laurentj, bballizlife et doms.