par élément du menu. A chacun de ces

- est associée une classe. Avec cette classe le design de chaque élément est géré en CSS depuis la feuille de style.Ceci est une très bonne méthode de création de menus puisque chaque élément est constitué d'un minimum de code HTML, et ils sont facilement répétables (nécessaire lorsque les menus sont dynamiques). **Défi:** Nous devons remplacer le menu statique par un menu dynamique issu de Typo3! Ceci est la section de contenu que Raphael a placé dans le gabarit pour obtenir un rendu visuel cohérent. Notez le formatage du contenu avec des balises

et
(utilisant la classe "bodytext") – ceci est intéressant puisque le contenu dynamique généré par TYPO3 utilise également ces balises pour le formatage! (Raphael doit déjà avoir une expérience sous TYPO3, n'est-ce pas?) Défi: Nous devons remplacer le contenu de la page par du contenu dynamique issu de TYPO3. Maintenant que les fichiers du tutorial sont en place, nous passons à l'étape suivante – l'installation des extensions nécessaires. .. _Installation-de-Static-info-tables-TemplaVoila-et-de-CSS-Styled-Content: Installation de “Static info tables ”, “TemplaVoila” et de “CSS Styled Content” ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Nous devons maintenant installer TemplaVoila qui est notre moteur de gabarit et de génération de contenu. “CSS Styled Content” est également nécessaire pour le rendu des contenus standards de n'importe quel site classique sous TYPO3. Si vous ne l'avez pas encore fait, importez “ static\_info\_tables ”, “ TemplaVoila ” et “css\_styled\_content“depuis le TER (TYPO3 Extension Repository) en utilisant le gestionnaire d'extensions EM. Lorsque cela est fait, installez les trois extensions : |img-7| |img-8| Lors de l'installation de TemplaVoila vous devriez activer le sélecteur de gabarit Enable Page Template Selector dans l'écran de mis à jour : |img-9| Appuyez sur “Update” et toutes les tables et champs de la base de données seront créés automatiquement ! Après avoir installé TemplaVoila, il faut réactualiser recharger votre backend puisque l'extension contient de nouveaux modules. .. _css-styled-content: “css\_styled\_content” """""""""""""""""""""" Il faut maintenant installer l'extension CSS Styled Content : |img-10| .. _The-Storage-Folder: The Storage Folder ^^^^^^^^^^^^^^^^^^ Nous allons créer un autre élément essentiel de notre site le “Storage Folder”. Normalement les éléments relatifs à une page sont stockés dans la page elle-même comme par exemple les éléments de contenu ou les utilisateur du frontend. Néanmoins il est souvent nécessaire de disposer d'un point central de stockage des éléments relatifs à l'ensemble du site et pas seulement à une seule page – c'est ce que nous appelons le Storage Folder (Dossier de stockage); Il s'agit d'une page définie comme “SysFolder” (dossier système) qui sera utilisée pour stocker ces éléments relatifs à toute une branche de l'arborescence des pages. Les étapes pour réaliser ce dossier système sont : - Créer une page de type “SysFolder” (dossier système) dans l'arborescence des pages. En général cette page est la dernière page du premier niveau dans l'arborescence des pages. - Puis il faut créer une relation dans “General Storage Folder” vers ce dossier dans l'entête de la page racine (root page) du site. |img-11| La copie d'écran précédente montre le dossier système créé. Mais pour le configurer comme “storage folder” du site il faut éditer l'entête de page de “Root page” : |img-12| Et c'est tout. .. _Cration-du-gabarit-TypoScript: Création du gabarit TypoScript ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Puis, il faut créer un gabarit pour la page “Root page”. Pour plus de détails vous pouvez vous référer au “MTB/1” où cette méthode est décrite de manière plus détaillée. Le but est d'obtenir un gabarit avec le contenu suivant : |img-13| |img-14| Le code visible dans “Setup” est appelé “Template TypoScript” - c'est du code de configuration que le moteur de rendu de TYPO3s (frontend engine) (de l'extension “cms”) interprète afin d'afficher la page du site. Dans l'exemple précédent le texte “HELLO WORLD” est affiché. Si vous avez une certaine expérience du TypoScript vous savez que a) le champ Setup peut finir par représenter plusieurs centaines de lignes, b) qu'après un certain temps il devient plus difficile à gérer et c) il faut de bonnes connaissances en TypoScript, généralement le contenu de `TSref `_ . Si vous connaissez la méthode employée avec le tutorial MTB/1 vous savez que la quantité de Typoscript utilisée n'était pas aussi conséquente. En fait nous avions seulement configuré l'extension “automaketemplate” afin de lire le contenu d'un fichier externe en HTML et ensuite nous insérions du contenu dynamique à certains endroits. Cette configuration ne nécessitait qu'une centaines de lignes, les menus mis à part. Ce qui représente beaucoup moins que par le passé. Si vous poursuivez ce document vous verrez que nous n'allons pas ajouter d'autres lignes, nous ne faisons que remplacer les deux dernières : |img-15| Ainsi, la seule chose nécessaire à l'utilisation de TemplaVoila, en ce qui concerne le TypoScript, est le code suivant : :: # Default PAGE object: page = PAGE page.typeNum = 0 page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page (Il faudra néanmoins par la suite rajouter du TypoScript puisque nous devrons définir/construire le menu ...) Enregistrez le code. Si vous consultez le site vous verrez une page avec un message d'erreur indiquant que la configuration n'est pas terminée: |img-16| Il faut maintenant créer un objet gabarit pour TemplaVoila (TO) et l'associer au site. .. _Cration-de-l-objet-gabarit-pour-le-gabarit-du-site-premire-mthode: Création de l'objet gabarit pour le gabarit du site (première méthode) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Allez dans le module File > Filelist, cliquez sur le dossier “templates/main/” et cliquez sur l'icône du fichier “template\_page.html”: |img-17| Ceci vous dirigera vers l'interface de mappage de TemplaVoila : |img-18| Avec cette interface nous allons créer une Data Structure (DS - structure de données) pour le gabarit de la page et mapper ce DS avec les éléments HTML du fichier de gabarit puis pour finir nous allons stocker les informations de mappage dans un Template Object (TO) créé à partir du DS. .. _Data-Structures-DS-et-Template-Objects-TO: Data Structures (DS) et Template Objects (TO) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ De plus amples informations techniques sont disponibles dans Data Structures du document “TYPO3 Core API” ainsi que dans la documentation de “TemplaVoila”. Néanmoins, pour résumer les différences entre DS et TO: - Une Data Structure (DS) liste les champs que l'on peut mapper vers un fichier HTML. - Un Template Object (TO) associe des champs du DS avec des éléments du fichier HTML. Avec cette définition nous voyons qu'un TO fait toujours lié à un DS qui indique au TO quels champs peuvent être mappés et avec quels règles et hiérarchie. Ceci implique également qu'il est possible d'avoir plusieurs TO faisant référence à une même DS – c à d plusieurs gabarits pour les mêmes données ! .. _Cration-de-la-Data-Structure-de-Main-Dish-son: Création de la Data Structure de “Main Dish & son” """""""""""""""""""""""""""""""""""""""""""""""""" Dans ce tutorial la structure de données DS nécessaire pour le fichier gabarit est : Définition de l'élément global contenant la page – ce qui correspond a la balise ! - Menu: Définition du conteneur du menu de gauche - Contenu: Définition du conteneur de la cellule de contenu. Un tel DS pourrait être créé à la main si on connaît la syntax XML du DS, . Néanmoins, TemplaVoila permet la création “graphique” avec une fonction de pointer/cliquer d'une telle structure de données! Ajout d'un élément représentant le menu : |img-19| (Le nom “field\_menu” est préfixé par “field\_” qui est une convention appliquée par défaut. Mais vous pouvez utiliser d'autres noms si vous le souhaitez.) Ceci affiche un formulaire permettant de saisir les détails du nouvel élément : |img-20| Puis en validant avec Add, il reste à définir le nom de l'objet TypoScript identifiant le menu, dans notre cas lib.menu\_1 |img-21| Vous pouvez saisir les informations de façon identique aux copies d'écran. De plus amples détails sont disponibles dans la documentation de TemplaVoila mais les principaux points sont : - Mapping Type: permet de définir la manière dont les éléments sont mappés vers le document HTML. Choisissez “Element” - Editing Type: permet de sélectionner le type de contenu du champs. Dans notre cas nous allons insérer du contenu provenant d'un objet TypoScript – que nous allons définir à l'aide d'un objet HMENU plus tard! - Mapping rules: Comme le menu sera amené à être contenu dans des balises HTML de type
ou etc... nous définissons une règle “\:inner” qui permettra de mapper le menu à l' intérieur* d'un élément. Après avoir validé avec “Add”, “Update” puis “Cancel/Close” vous verrez ceci : |img-22| Puis répétez ce procédé pour le contenu de la page : |img-23| Ici nous sélectionnons “Content Elements” dans Editing Type – ceci permet d'insérer des blocs de contenu par la suite. Après avoir validé avec “Add” et “Cancel/Close” nous disposons maintenant d'une structure de données reflétant nos besoins décrit précédemment – c à d un menu et une cellule de contenu: |img-24| .. _Mappage-du-DS-vers-le-contenu-HTML: Mappage du DS vers le contenu HTML """""""""""""""""""""""""""""""""" Après avoir créé le DS (vous auriez également pu le faire pendant le mappage) vous devez mapper les éléments du DS vers la balise correspondante dans le fichier HTML. Appuyez sur “Map” de l'élément “ROOT”, puis cliquez sur l'icône de la balise “” de la section “Mapping Window”: |img-25| Puis sélectionnez le type de mappage dans la colonne “Action” de l'élément “ROOT” : |img-26| Pour toutes les balises “block-elements” (le nom que je donne aux balises HTML qui ont par paires une de début et une de fin, telles que. ... or
...
, contrairement à ) vous pouvez choisir un mappage INNER ou OUTER. Ceci implique que nous remplaçons le contenu interne de la balise (en excluant la balise) ou l'extérieur de la balise (en incluant la balise). Puisque nous souhaitons placer du contenu dans la balise * en excluant la balise* nous choisissons “INNER”. |img-27| Ce qui donne : |img-28| Le formulaire montre que l'élément “ROOT” a été mapper avec succès vers la balise du gabarit! Et comme l'élément “ROOT” est l'élément parent de base de des éléments menu et contenu nous pouvons maintenant mapper le reste du DS. Cliquez sur le bouton “Map” de l'élément “field\_menu” du DS. Puis sur l'icône de la balise “” contenant le menu provisoire du gabarit HTML : |img-29| Notez que cette fois ci nous n'avons pas d'autre choix que “INNER” : |img-30| Ceci est du au fait que nous avions définie une règle limitant le mode à “INNER” - ceci laissera la balise dans le gabarit HTML et ne remplacera que son contenu par notre menu dynamique. Donc choisissez à nouveau “INNER” pour le mappage de cet élément : |img-31| Il ne reste plus qu'à mapper l'élément “Page content” du DS : |img-32| Comme pour les autres éléments nous utilisons le type “INNER”. Vous devriez obtenir ceci : |img-33| Vous pouvez vérifier votre mappage un cliquant sur les liens de la colonne “HTML-path”. Ceci n'affichera que la section du gabarit HTML concernée : |img-34| .. _Prvisualisation-du-mapping: Prévisualisation du mapping """"""""""""""""""""""""""" Puisque nous avions saisi des données de test (champ Sample Data) dans le DS nous avons la possibilité de prévisualiser le résultat. Appuyez simplement sur le bouton “Preview” : |img-35| Ceci génère la fenêtre “Mapping Window” pour vous : |img-36| .. _Sauvegarde-du-DS-et-TO: Sauvegarde du DS et TO """""""""""""""""""""" Jusqu'à présent toutes les opérations réalisée sont stockées dans les données de votre session d'utilisateur du backend. Pour finir vous devez cliquer sur le bouton “Save” ... |img-37| ... puis - Donner un titre pour le couple DS / TO (ceci pourra être changé par la suite) - Sélectionnez le type de gabarit, dans notre cas il s'agit d'un gabarit de page “Page template” (ceci indique à TYPO3 que ce gabarit s'applique à une page complète). - Sélectionnez le dossier de stockage (Storage Folder) qui contiendra le DS et TO – seul un dossier devrait être disponible.Si vous vous ne pouvez sélectionner aucun storage folder, cela signifie que vous avez commis une erreur au début du tutorial !) |img-38| Si tout est OK vous devriez obtenir : |img-39| Et dans le dossier de stockage “Storage Folder” vous retrouvez le DS et TO que vous venez de créer ! |img-40| .. _Utilisation-du-TO-comme-gabarit-de-page: Utilisation du TO comme gabarit de page ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Pour résumer : - Fichiers de gabarit: Copie des fichiers HTML du graphiste dans “fileadmin/templates/main/” - Extensions: Installation de Static info tables, TemplaVoila et CSS Styled Content - Storage Folder: Configuration du dossier de stockage du site. - Gabarit TypoScript: Création d'un gabarit TypoScript à la racine du site – contenant uniquement un cObjet USER permettant l'utilisation de TemplaVoila. - Création du DS/TO: Création d'une structure de données (DS) et d'un Template Object (TO) pour le gabarit principale La dernière étape consiste à définir le TO créé comme étant le gabarit par défaut des pages. Pour cela il suffit d'éditer l'entête de la page “Root page” : |img-41| Ceci affecte le DS – permettant à TYPO3 de connaître les options de la page (dans notre cas il s'agit : d'un menu et du contenu de page). Puis il faut sauvegarder l'entête de page. Il est maintenant possible de sélectionner le “type de rendu” (c à d le TO): |img-42| Puis sauvegardez une dernière fois - éventuellement en utilisant “Sauvegarder et visualiser” : |img-43| |img-44| Effectivement le gabarit est bien utilisé lors de la génération de la page. Mais il reste encore à : - Configurer css\_styled\_content pour le rendu du contenu - Ajouter le contenu des pages - Créer dynamiquement le menu - Affecter la feuille de style .. _Configuration-de-css-styled-content-pour-le-rendu-du-contenu: Configuration de css\_styled\_content pour le rendu du contenu ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Avant que le contenu des pages puisse être généré nous devons définir un gabarit statique permettant cela. Il en est de même pour les autres développements sous TYPO3; pour cela il faut éditer le gabarit Typoscript et ajouter “CSS Styled Content” : |img-45| Sauvegardez, quittez et videz le cache. .. _Ajout-du-contenu-des-pages: Ajout du contenu des pages ^^^^^^^^^^^^^^^^^^^^^^^^^^ Un des principaux changements qu'apporte TemplaVoila est le nouveau concept d'intégration du contenu des pages. Jusqu'à présent nous utilisions le concept de colonnes d'une page. Ainsi les éléments sont affichés en fonction de la page et de la colonne à laquelle ils appartiennent. Avec TemplaVoila le contenu est toujours associé à une page mais il existe une relation allant de la page (ou d'un élément de niveau supérieur) vers l'élément de contenu! Cette relation à une direction opposée au fonctionnement standard de TYPO3 puisque jusqu'à présent les éléments de contenu faisaient référence à la page et à la colonne qui les contenait! Nous y reviendrons plus tard. Pour l'instant affichons le contenu du nouveau module Page : ATTENTION: Le module de page n'est pas encore terminé. Les copies d'écran risque de ne pas être à jour ! Pour créer du contenu dans une page, il faut cliquer sur l'icône nouveau : |img-46| Ceci permet d'inclure un élément traditionnel (TEXT, TEXT et IMAGE etc ...) : |img-47| Puis nous ajoutons du texte extrait du gabarit HTML : |img-48| Sauvegardez, et vous obtenez : |img-49| Ceci est la méthode TemplaVoila pour ajouter du contenu aux pages. Vous pouvez insérer d'autres contenus, vous pouvez les copier/couper/coller, vous pouvez aussi créer des liens vers des éléments d'une autre page, vous pouvez même imbriquer des éléments comme nous allons le voire par la suite. Vous pouvez visualiser le résultat : |img-50| Pas encore très élégant – mais il manque la feuille de style ... .. _La-nouvelle-mthode-de-gestion-du-contenu-avec-TemplaVoila: La nouvelle méthode de gestion du contenu avec TemplaVoila """""""""""""""""""""""""""""""""""""""""""""""""""""""""" (Pour les développeurs) - Comment TemplaVoila réalise t'il la relation allant des pages vers le contenu ? Par défaut, cette gestion est complètement assurée par le nouveau module “Web > Page” de TemplaVoila que nous venons d'utiliser. Pour comprendre le mécanisme qui se cache derrière cela vous pouvez éditer l'entête d'une page pour découvrir qu'un nouveau champ a été ajouté permettant d'affecter des éléments de contenu à la page : |img-51| Vous pourriez changer la structure affichée graphiquement par le module “Web > Page” en ajoutant des relations vers des éléments de contenu dans cette section Content ! Mais ceci n'est pas suffisamment ergonomique par un utilisateur standard ! FlexForm et la structure de données (DS) qui y est liée Un autre point important est que le contenu de ce champ n'est pas stocké dans un champ spécifique de la base – mais est stocké dans une structure XML dans un nouveau champ “tx\_templavoila\_flex” de la table “pages”qui peut potentiellement contenir d'autres champs définis par le DS. Ceci est une nouveauté fantastique des possibilités qu'offre les structures de données. Le concept est appelé “FlexForms” et ceci n'est qu'une des nombreuses possibilités. La structure de données que nous avons créée ainsi que le TO associé définissent tout cela. Si vous sélectionnez la page “Storage Folder” avec le module List, et en éditant le DS, vous pourrez observer la structure XML du DS : |img-52| |img-53| En étudiant ce code XML vous verrez que pour le champ “field\_content” il existe une section définissant quelques paramètres pour “TCEforms” (lignes 35-46) – en fait il s'agit du code généré par l'utilisation de la relation Content Elements : :: 1: 2: 3: 1 4: 1 5: 6: 7: .... 27: 28: .... 42: 43: 44: group 45: db 46: tt_content 47: 5 48: 200 49: 0 50: 1 51: 1 52: 53: Page content 54: 55: 56: 57: 58: En recherchant dans la base de données (phpMyAdmin) le contenu du champ “tx\_templavoila\_flex” de la page “Root page” nous retrouvons également une structure XML - . Qui ressemble à ceci : :: 1: 2: 3: 4: 5: 6: 7: 3 8: 9: 10: 11: 12: Notez que la valeur contenue entre les balises correspond à l'uid du bloc de contenu “Buy PaperShredder(tm) Gizmo with 30-days money-... ” La génération de l'affichage des blocs de contenu Il ne suffit pas de créer une relation vers les blocs de contenu, il faut également les afficher. Nous allons nous intéresser à leur rendu. Il semble que le Typoscript statique “CSS Styled Content” soit également utilisé avec TemplaVoila. La réponse setrouve également dans la structure de données créée. Observez les lignes 37 à 39 (fond gris clair) : :: .... 28: 29: 30: Page content 31: Map this to the container element for page content 32: 33: [Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content. Here goes my page content.] 34: 35: ce 36: 37: 10= RECORDS 38: 10.source.current=1 39: 10.tables = tt_content 40: 41: Ces lignes contiennent du TypoScript avec lequel nous sommes familier : Il utilise un cObject RECORD, permettant d'afficher les blocs de contenu de la table “tt\_content”, en utilisant les uids de “de l'élément actuel” - celui-ci semble être initialisé par le contenu de la balise affectée par dans le contexte d'exécution du TypoScript (qui se situe dans le plugin “tx\_templavoila\_pi1” comme le montre le code précédent). Pour en savoir plus: Les FlexForms, les Data Structures et tout le reste sont présentés dans le document `“TYPO3 Core API” `_ . .. _Cration-du-menu-dynamique: Création du menu dynamique ^^^^^^^^^^^^^^^^^^^^^^^^^^ Le menu à afficher dans la cellule de gauche est généré avec le même code TypoScript que celui du tutorial MTB/1. Rien ne change avec TemplaVoila; TypoScript reste un excellent moyen pour configurer les menus et la génération d'images. Ainsi, nous allons copier et coller le code du MTB/1 avec une exception ; “temp.menu\_1” est remplacé par “lib.menu\_1” : :: # Menu 1 cObject lib.menu_1 = HMENU # First level menu-object, textual lib.menu_1.1 = TMENU lib.menu_1.1 { # Normal state properties NO.allWrap =
|
NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap =
|
} # Second level menu-object, textual lib.menu_1.2 = TMENU lib.menu_1.2 { # Normal state properties NO.allWrap =
|
NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap =
|
} Copiez ce code dans le champ Setup du gabarit TypoScript : |img-54| Dans le MTB/1 nous faisions référence à ou nous devions copier cet objet HMENU. Ici nous faisons de même – mais la référence est placée au niveau de la structure de données que nous venons de créer ! Nous avions spécifier comme nom d'objet “lib.menu\_1” lors de la création du champ “field\_menu” ! Nous pouvons vérifier cela en éditant à nouveau le DS : |img-55| Dans la section “Data Structure XML” pour l'élément “” nous retrouvons le nom saisi précédemment – ceci est le chemin d'accès à l'objet permettant de générer le menu en TypoScript : |img-56| Observons à nouveau la page : |img-57| Le rendu n'est pas plus esthétique mais le menu est présent ! .. _Affectation-du-stylesheet-et-de-la-balise-body: Affectation du stylesheet et de la balise ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Le dernier point consiste à éditer le TO, chose que nous ne pouvions faire pendant la création du DS et du TO, et à configurer l'inclusion d'éléments de l'entête de la balise du fichier HTML ! Pour cela vous pouvez cliquer sur l'icône TO record (en mode Web > List), et sélectionner “TemplaVoila”: |img-58| vous pouvez également utiliser le module “Web > TemplaVoila” puis sélectionner votre page “Storage Folder” |img-59| ou encore en passant par : |img-60| puis : |img-61| Puis sélectionnez l'option “Select HTML header parts” : |img-62| Vous pouvez selectionner les deux définitions de feuille de style et la balise body. La définition du charset n'est pas utile puisque TYPO3 la génère automatiquement (comme il le fait pour la majorité des balises ). En général il faut inclure tous les types