Générateur HTML

Si vous avez réussi la partie précédente "Générateur OD" qui est vivement recommandée en tant que pré-requis à celle-ci, vous n'aurez aucun mal à faire un générateur HTML.

Mise en place

Schéma de fonctionnement

Les éléments du schéma pour un générateur HTML sont très semblables à notre précédente réalisation pour la publication OD.

Les différences entre générateurs HTML et OD

Pour effectuer une comparaison (appliquée à notre exemple helloworld) :

Le type et le contenu de tous les items sont spécifique à la publication HTML (et évidement, vous ne pouvez pas faire de copier-coller entre les 2 ou les mélanger).
L'odStyle est remplacé par un dossier contenant un fichier CSS.
Un item uiservice fait son apparition.

Composants du générateur

hwWeb.generator

Créez un webSiteGenerator à partir du wspdef, voici son contenu :

Dans un webSiteGenerator, le template correspond à un layout de page (l'agencement des éléments HTML à l'intérieur de la page). Chaque template est associé à un code.

hwWeb.uiframe

Créez l'uiframe, de type TransparentUiFrame, mais ne changez pas son contenu. Il est utilisé pour les services spéciaux (scorm, assessements...) dont nous n'avons pas besoin pour cet exemple.

hwWeb.transflist

Placez y sTitle_web.transf et sTxt_web.transf du modelet base, et créez le compositionXhtmlTransf pour notre helloworld.model.

helloworld.transf

La structure souple d'un site web nécessite de déclarer chaque nouvelle page et d'associer cette page à un template, en reprenant le même code que celui spécifié dans le webSiteGenerator.
Nous retrouvons ensuite le même mécanisme for codes="hello". Pour ce document qui n'utilise qu'un seul type de partie, nous pouvons aussi écrire for codes="*".
En contenu du for, on déclare un WHeadingBlock. Lorsque l'on spécifie un commonClass dans un bloc, cela va rajouter dans l'HTML produit un attribut "class=..." que l'on pourrait exploiter à l'étape du stylage.

hwWeb.uitemplate

En écrivant un openUiTemplate, vous décrivez assez librement la structure de votre page web :

En entête, spécifiez un nom de fichier du type main.css qui sera extrait du répertoire de ressources hwWeb.doss que vous devez créer aussi.
A l'intérieur du body, créez des "éléments" pour faire les div suivant vos désirs de mise en page et ajoutez un callMainZone pour que le réseau de transformeurs prenne la main sur la publication du contenu.

Stylage

main.css

A l'intérieur du répertoire .doss que vous avez spécifié dans le template, vous allez créer avec votre éditeur de texte favori le fichier main.css. Cette partie fait appel à vos connaissances HTML et CSS, mais voici un petit exemple :

Tester plus vite les résultats des CSS

Vous pouvez faire une génération HTML dans SCENARItest, et modifier le fichier CSS dans cette génération pour voir les modifications en "temps réel", puis une fois satisfait du résultat, recopiez ce fichier CSS dans votre répertoire .doss de builder. Soyez juste prudent car les générations sont écrasées à chaque nouvelle régénération.

Retrouvez plus vite les noms des classes dans le document

Si vous utilisez firefox, vous avez la chance de pouvoir profiter d'extensions bénéfiques à tout développeur web, en voici 2 exemples :

Web Developer : une fois installé, tapez ctrl+shift+f puis cliquez sur un élément de la page pour voir ses propriétés et sa classe.

Firebug : ouvrez le par l'icone dans la barre d'état, choisissez l'onglet HTML, inspect, et cliquez sur un élément de la page.