Composants et paramétrage du générateur
Le générateur
Renseigner le code et le name avec hwWeb et « Générateur Xhtml »
Lier au .model racine
Choisir le standard
Créer un transparentUiFrame hwWeb.uiframe
Ne changez pas le contenu du fichier créé, il est utilisé pour les services spéciaux (scorm, assessements...) dont nous n'avons pas besoin pour cet exemple.
Créer un transformerList hwWeb.transflist
Créer un template de code main et de type openUiTemplate hwWeb.uitemplate
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.
Déclaration des règles
Créer trois balises sm:transformer
Référencer pour les deux premières les deux transformers : /base/sTxt_web.transf et /base/sTitle_web.transf
Pour la troisième balise, créer par clic droit un item de type Publication -> Générateurs 'web' -> Transformers Web -> compositionXhtmlTransf. Avec le nom helloworld.transf
Enregistrer
Règles de publications
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.
Recopier le paramétrage
Choisir le code du template, c’est celui qui a été défini dans le générateur.
Bien définir le code de la part à afficher, tel qu’il a été défini dans le .model.
Il est aussi possible d’utiliser for codes="*" qui permet de sélectionner toutes les parties existantes dans le .model.
Contenu du for
En contenu du for, on déclare un WHeadingBlock. Lorsque l'on spécifie un class dans un bloc, cela va rajouter dans l'HTML produit un attribut "class=..." que l'on pourrait exploiter à l'étape du stylage.
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.cssqui sera extrait du répertoire de ressourceshwWeb.dossque vous devez créer aussi. - A l'intérieur du body, cliquez sur l'étoile d'insertion et sélectionnez
élémentspour faire les div suivant vos désirs de mise en page. Ajoutez un callMainZone pour que le réseau de transformeurs prenne la main sur la publication du contenu. - Enfin allez au niveau de la balise resources, faites un clic droit sur l'item vide se situant à côté de cette balise puis cliquez sur
Créer un nouvel itemet choisissezRessources -> Dossier de ressources (.doss)
Pour chaque css à utiliser, vous devez spécifier au template d’où vient cette CSS. Dans le cas d’un dossier de ressources lié au template, on choisit templateResources
