Futuristic Template Building (FTB1 FR) Extension Key: doc_tut_ftb1_fr Copyright 2005, Raphael GEYER (), <typo3@ameos.com> traduction de Futuristic Template Building (FTB) de Kasper Skårhøj et Robert Lemke This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.com Table of Contents Futuristic Template Building (FTB2)...1 Introduction... 1 Qu'apporte cette extension?...1 But... 2 L'extension TemplaVoila... 2 Dédicace...2 L'extension...2 ATTENTION logiciel en version beta... 3 Intégration d'une page de gabarit en HTML - avec TemplaVoila... 4 Introduction... 4 Le gabarit HTML... 4 Installation de Static info tables, TemplaVoila et de CSS Styled Content... 6 The Storage Folder...7 Création du gabarit TypoScript...8 Création de l'objet gabarit pour le gabarit du site (première méthode)... 9 Data Structures (DS) et Template Objects (TO)... 10 Utilisation du TO comme gabarit de page...16 Configuration de css_styled_content pour le rendu du contenu... 17 Ajout du contenu des pages...17 Création du menu dynamique... 21 Affectation du stylesheet et de la balise <body>...23 Résumé... 27 Création de gabarits de page supplémentaires... 29 Modification d'un couple DS/TO existant...29 Gabarit d'impression...31 Gabarit alternatif pour une section du site... 36 Création d'une page à deux colonnes... 42 Des icônes pour les TOs et les DSs...46 Les éléments de contenu flexibles Flexible Content Elements... 48 Création d'un élément flexible de base (FCE)...49 Créer un élément de contenu grille...56 Création d'un second gabarit pour le FCE à 2 colonnes... 59 Les éléments de contenu utilisant des objets répétés. 62 Création d'un élément flexible de type liste...72 Divers... 79 Utilisation du TypoScript dans les Structures de Données DS... 79 Informations concernant le mappage... 85 Reste à faire de TemplaVoila... 87 Introduction Qu'apporte cette extension? Cette extension est un tutorial réactualisé, par, de Création de gabarits futuristique écrit par Kasper Skårhøj et Robert Lemke permettant la création d'un site de gestion de contenu sous TYPO3 basé sur un gabarit HTML et utilisant l'extension TemplaVoila (ext key: templavoila ). Ce tutorial est basé sur le même contenu que Futuristic Template Building, Part 1 il reprend les mêmes éléments, mais présente l'interface actualisée de Templavoila et décrit une utilisation plus avancée de cette extension. Ce document est recommandé aux développeurs débutants et avancés. Néanmoins, avant de débuter il est conseillé de suivre les tutoriaux Débuter avec Typo3 et Modern Template Building, Part 1 de manière à connaître les bases de TYPO3. Le site que vous allez être guidé afin de réaliser ceci : Futuristic Template Building (FTB1 FR) - 1
But Le but de ce tutorial est de vous présenter un nouveau concept de réalisation des gabarits en utilisant l'extension templavoila basée sur les notions de FlexForms et Data Structures. La méthode traditionnelle d'intégration du contenu dans des colonnes sera également remplacé par une intégration arborescence et imbriquée. L'extension TemplaVoila L'extension TemplaVoila a été développée par Kasper Skårhøj et Robert Lemke pour un projet d'une grande entreprise française, Dassault Systemes. TemplaVoila et le résultat de l'innovation permettant la résolution de problèmes rencontrés lors du projet En particulier le fait que TemplaVoila permette de créer des structures de pages plus flexible que la méthode traditionnelle utilisant la notion de colonnes. De plus, elle intègre la notion de gabarits liés aux éléments de contenu et ceci en utilisant une méthode plus flexible basée sur une interface graphique. Finalement le développement de TemplaVoila a également fait évoluer le corps de TYPO3, en particulier le concept de FlexForms qui permet, dans le backend, de créer des formulaires hiérarchiques et de stocker leurs contenu en XML. Dédicace Kasper dédie la version anglaise du document Futuristic Template Building à ses amis de Dassault Systemes en France. L'extension Tous les fichiers de ce tutorial sont contenus dans l'extension TYPO3 (doc_tut_ftb1_fr). En général les extensions contiennent des scripts et des ressources qui étendent les possibilités de TYPO3. Néanmoins cette extension n'interagit pas avec le corps de typo3 si vous l'installée elle permet uniquement de transférer les fichiers vers votre serveur et d'ajouter les fichiers du tutorial à votre serveur et d'ajouter ce document en ligne sur typo3.org. Ainsi pour suivre ce tutorial : il faut installer le dummy-package (voir la section Les bases du tutorial Modern Template Building, Part 1 ) Futuristic Template Building (FTB1 FR) - 2
puis il faut importer l'extension "doc_tut_ftb1_fr" du TER (TYPO3 Extension Repository) avec le gestionnaire d'extensions (Extension Manager) et vous aurez tous les fichiers à porté de main sur votre serveur. Ce tutorial peut également être lu en ligne ou vous pouvez le télécharger sous le format openoffice SXW et Acrobat PDF depuis typo3.org. ATTENTION logiciel en version beta Bien que TemplaVoila soit utilisé en production cette extension n'est pas encore terminée. Vous devez être conscient en lisant ce document que certains éléments risquent de changer et que ce document sera amené à être profondément révisé lors de la publication de la version 1.0.0 de TemplaVoila. Notez également que la version de 3.8.0 de TYPO3 est nécessaire à ce tutorial! Futuristic Template Building (FTB1 FR) - 3
Intégration d'une page de gabarit en HTML - avec TemplaVoila Introduction Ce chapitre présente l'intégration du gabarit présenté dans Modern Template Building, Part 1 mais en utilisant TemplaVoila à la place de l'extension Auto-parse Template. Ceci permet de démontrer toute la puissance de TemplaVoila! En introduction des principes que nous allons suivre veuillez lire en premier le chapitre Implementation of a CMS in Modern Template Building, Part 1. Installation du dummy-package et de l'arborescence des pages? En premier vous devez posséder une base vierge de TYPO3 généralement le dummy-package est ce qu'il vous faut. Puis vous devrez créer l'arborescence de pages présentée dans le chapitre The Basics du Modern Template Building, Part 1 (MTB/1). Vous n'êtes pas obligé de suivre le restant du chapitre The Basics dans MTB/1 il suffit de créer la structure des pages. Vous devriez obtenir une arborescence de pages ressemblant à ceci : Le gabarit HTML L'équipe web travail pour un nouveau client - Main Dish & Son - et Raphael, l'artiste de l'équipe, a réalisé le gabarit sous forme de fichier HTML standard: Futuristic Template Building (FTB1 FR) - 4
Ce fichier HTML template_page.html est placé dans le dossier "fileadmin/templates/main/" relatif à l'installation de TYPO3. Pour suivre ce tutorial vous devez copier le dossier "templates/" de cette extension dans le dossier "fileadmin/. Vous devez pour cela importer l'extension doc_tut_ftb1_fr" depuis le TER! Revenons au travail de Raphael; le gabarit HTML est une simple page HTML. Mais lorsque TYPO3 importe ce fichier il est important de rendre certaines parties dynamiques. Ceci inclue le menu de gauche et la section de contenu située au centre et à droite. Etudions le code de cette page. Avec TYPO3 c'est simple il suffit d'aller dans le module File > Filelist, de cliquer sur le titre du dossier principale et de cliquer sur le titre de la page : Ceci ouvre le fichier dans un navigateur. L'observation du code source de la page HTML montre un simple document validé XHTML faisant référence à un fichier de style et utilisant un tableau pour positionner les éléments dans la page : Futuristic Template Building (FTB1 FR) - 5
Quelques commentaires concernant ce gabarit HTML et les défis à relever : 1. Cette section de l'entête du document doit être reprise puisqu'elle permet de faire référence à la feuille de style utilisée. Défi: Nous devons nous assurer que cette section soit extraite et régénérée par le moteur de rendu! 2. Le menu de gauche est réalisé en utilisant une balise <div> par élément du menu. A chacun de ces <div>- 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! 3. 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 <h1> et <p> (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 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. Futuristic Template Building (FTB1 FR) - 6
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 : Lors de l'installation de TemplaVoila vous devriez activer le sélecteur de gabarit Enable Page Template Selector dans l'écran de mis à jour : 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 Il faut maintenant installer l'extension CSS Styled Content : 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. La copie d'écran précédente montre le dossier système créé. Mais pour le configurer comme storage folder du site il faut Futuristic Template Building (FTB1 FR) - 7
éditer l'entête de page de Root page : Et c'est tout. 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 : 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 Futuristic Template Building (FTB1 FR) - 8
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 : 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: Il faut maintenant créer un objet gabarit pour TemplaVoila (TO) et l'associer au site. 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 : Ceci vous dirigera vers l'interface de mappage de TemplaVoila : Futuristic Template Building (FTB1 FR) - 9
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) 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! 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 <body>! 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, <T3DataStructure>. Néanmoins, TemplaVoila permet la création graphique avec une fonction de pointer/cliquer d'une telle structure de données! Futuristic Template Building (FTB1 FR) - 10
Ajout d'un élément représentant le menu : (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 : Puis en validant avec Add, il reste à définir le nom de l'objet TypoScript identifiant le menu, dans notre cas lib.menu_1 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 <div> ou <td> 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 : Puis répétez ce procédé pour le contenu de la page : Futuristic Template Building (FTB1 FR) - 11
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: 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 <body> de la section Mapping Window : Puis sélectionnez le type de mappage dans la colonne Action de l'élément ROOT : 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. <td>...</td> or <div>...</div>, contrairement à <img...>) 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 <body> en excluant la balise <body> nous choisissons INNER. Futuristic Template Building (FTB1 FR) - 12
Ce qui donne : Le formulaire montre que l'élément ROOT a été mapper avec succès vers la balise <body> 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 <td> contenant le menu provisoire du gabarit HTML : Notez que cette fois ci nous n'avons pas d'autre choix que INNER : 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 : Il ne reste plus qu'à mapper l'élément Page content du DS : Futuristic Template Building (FTB1 FR) - 13
Comme pour les autres éléments nous utilisons le type INNER. Vous devriez obtenir ceci : 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 : 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 : Ceci génère la fenêtre Mapping Window pour vous : Futuristic Template Building (FTB1 FR) - 14
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...... 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!) Si tout est OK vous devriez obtenir : Futuristic Template Building (FTB1 FR) - 15
Et dans le dossier de stockage Storage Folder vous retrouvez le DS et TO que vous venez de créer! 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 : 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): Puis sauvegardez une dernière fois - éventuellement en utilisant Sauvegarder et visualiser : Futuristic Template Building (FTB1 FR) - 16
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 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 : Sauvegardez, quittez et videz le cache. 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 : Futuristic Template Building (FTB1 FR) - 17
Ceci permet d'inclure un élément traditionnel (TEXT, TEXT et IMAGE etc...) : Puis nous ajoutons du texte extrait du gabarit HTML : Sauvegardez, et vous obtenez : Futuristic Template Building (FTB1 FR) - 18
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 : Pas encore très élégant mais il manque la feuille de style... 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 : Futuristic Template Building (FTB1 FR) - 19
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 : 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: <T3DataStructure> 2: <meta type="array"> 3: <langchildren type="integer">1</langchildren> 4: <langdisable type="integer">1</langdisable> 5: </meta> 6: <ROOT type="array"> 7: <tx_templavoila type="array">... 27: </field_menu> 28: <field_content type="array">... 42: <TCEforms type="array"> 43: <config type="array"> 44: <type>group</type> 45: <internal_type>db</internal_type> 46: <allowed>tt_content</allowed> 47: <size>5</size> Futuristic Template Building (FTB1 FR) - 20
48: <maxitems>200</maxitems> 49: <minitems>0</minitems> 50: <multiple>1</multiple> 51: <show_thumbs>1</show_thumbs> 52: </config> 53: <label>page content</label> 54: </TCEforms> 55: </field_content> 56: </el> 57: </ROOT> 58: </T3DataStructure> 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 - <T3FlexForm>. Qui ressemble à ceci : 1: <?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> 2: <T3FlexForms> 3: <data type="array"> 4: <sdef type="array"> 5: <ldef type="array"> 6: <field_content type="array"> 7: <vdef>3</vdef> 8: </field_content> 9: </ldef> 10: </sdef> 11: </data> 12: </T3FlexForms> Notez que la valeur contenue entre les balises <vdef> 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: <field_content type="array"> 29: <tx_templavoila type="array"> 30: <title>page content</title> 31: <description>map this to the container element for page content</description> 32: <sample_data type="array"> 33: <numindex index="0">[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.]</numindex> 34: </sample_data> 35: <etype>ce</etype> 36: <TypoScript> 37: 10= RECORDS 38: 10.source.current=1 39: 10.tables = tt_content 40: </TypoScript> 41: </tx_templavoila> 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 <vdef> 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. 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 : Futuristic Template Building (FTB1 FR) - 21
# 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 = <div class="menu1-level1-no"> NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = <div class="menu1-level1-act"> } # Second level menu-object, textual lib.menu_1.2 = TMENU lib.menu_1.2 { # Normal state properties NO.allWrap = <div class="menu1-level2-no"> NO.stdWrap.htmlSpecialChars = 1 # Enable active state and set properties: ACT = 1 ACT.stdWrap.htmlSpecialChars = 1 ACT.allWrap = <div class="menu1-level2-act"> } </div> </div> </div> </div> Copiez ce code dans le champ Setup du gabarit TypoScript : 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 : Futuristic Template Building (FTB1 FR) - 22
Dans la section Data Structure XML pour l'élément <field_menu> 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 : Observons à nouveau la page : Le rendu n'est pas plus esthétique mais le menu est présent! Affectation du stylesheet et de la balise <body> 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 <body> du fichier HTML! Futuristic Template Building (FTB1 FR) - 23
Pour cela vous pouvez cliquer sur l'icône TO record (en mode Web > List), et sélectionner TemplaVoila : vous pouvez également utiliser le module Web > TemplaVoila puis sélectionner votre page Storage Folder ou encore en passant par : puis : Puis sélectionnez l'option Select HTML header parts : Futuristic Template Building (FTB1 FR) - 24
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 <meta>). En général il faut inclure tous les types <style>, <link> and <script> que vous trouverez! Pour finir appuyez sur Save. Puis après avoir vidé le cache vous pouvez visualiser votre site : Et... Voila! Futuristic Template Building (FTB1 FR) - 25
L'affichage du code source donne Futuristic Template Building (FTB1 FR) - 26
Ceci montre l'inclusion de l'entête et de la balise <body> issue du gabarit HTML tout en laissant TYPO3 contrôler les inclusions automatiques telles que le charset, la balise title et sa valeur et la section JavaScript qui dépend de facteurs tels que le type de menus etc... Résumé Résumons le procédé que nous avons suivi : Le fichiers de gabarit : Placez les fichiers HTML conçus par le graphiste dans fileadmin/templates/main/ Le graphiste peut créer n'importe quelle charte graphique tant qu'elle reste valide, correctement imbriquée et relativement propre (sinon l'interface de mappage risque de rencontrer certains problèmes). Extensions : Installer Static info tables, TemplaVoila et CSS Styled Content Pas de problèmes, tout est sous licence GPL! Storage Folder : Configurez un dossier système de stockage pour le site. Sert également dans d'autres cas vous pouvez aussi y stocker les utilisateurs du front end! Gabarit TypoScript : Nous avons créé un gabarit TypoScript très simple se trouvant à la racine du site : Celui-ci contient un cobject USER permettant l'utilisation du plugin tx_templavoila_pi1 de TemplaVoila il inclue le gabarit TypoScript statique CSS Styled Content Contient un objet HMENU lib.menu_1 Futuristic Template Building (FTB1 FR) - 27
DS/TO : Création d'une structure de données (DS) et d'un objet gabarit (TO) pour le gabarit de la page principale En premier : Créer le DS et le TO Puis : Inclure certaines balises du <head> et la balise <body>. Affectation du gabarit : Edition de l'entête de page de la page racine du site, et affectation du Page Template Data Structure et du Template Object. Ajout du contenu de page : Création du contenu en utilisant le module Web > Page de TemplaVoila. Futuristic Template Building (FTB1 FR) - 28
Création de gabarits de page supplémentaires Après avoir créer notre premier gabarit, nous avons aborder la création de gabarits répondant à d'autres besoins, parmi lesquels : Les gabarits d'impression les gabarits différents pour les sous pages Les gabarits utilisant 2 colonnes (c à d avec d'autres DS) Tous ces points peuvent être réalisés en utilisant le même procédé, nous n'allons donc aborder que les points qui diffèrent et insister sur les quelques changements. Modification d'un couple DS/TO existant En premier nous allons créer un gabarit d'impression basé sur le fichier HTML template_page_print.html. Cependant, en observant le lien en bas de page Back to normal version, il nous rappelle que nous n'avions pas mapper son équivalent dans le fichier template_page.html. Pour cela nous devons modifier le DS afin d'y ajouter la possibilité de mapper ce lien. Nous avons deux options : Modifier l'xml du DS à la main. Ceci n'est pas évident et nécessite une bonne connaissance du format de la structure de données, mais ceci permettra également de modifier d'autres éléments non accessibles par l'interface graphique. Modifier DS en recréant le couple DS/TO créé précédemment. Ceci est simple, mais supprime toutes les modifications manuelles ayant éventuellement été réalisée! Utilisons la deuxième méthode. Pour cela, nous pouvons procéder de la même manière que pour ajouter les balises des feuilles de style et du <body> (Affectation du stylesheet et de la balise <body>) et sélectionner Modify DS / TO : Après avoir validé la fenêtre d'avertissement : Ajoutez un nouveau champ appelé field_printversionurl et appuyez sur Add. Puis remplissez le formulaire en sélectionnant le Mapping Type Attribute puisque nous souhaitons modifier le contenu d'une balise HTML (<a href=... >), choisissez également TypoScript Object Path comme Editing Type et si vous le souhaitez, vous pouvez affecter Mapping rules à a:attr:href afin de limiter le mappage à l'attribut href d'une balise <a>. Futuristic Template Building (FTB1 FR) - 29
Validez avec Add et utilisez lib.print_url comme nom d'objet et validez avec Update puis Cancel/Close : Puis mappez ce nouveau champ : Utilisez le seul choix possible pour ATTRIBUTE href (= #) : Futuristic Template Building (FTB1 FR) - 30
Puis sauvegardez, avec Save et pour mettre à jour le couple DS/TO il faut le sélectionner dans Select TO et valider avec UPDATE TO (and DS) et confirmer votre choix : Ceci sauvegarde / recréé la structure de données (DS) et l'objet de gabarit (TO). Il faut se souvenir que : Toutes les éventuelles modifications manuelles de l'xml du DS XML doivent être refaites Tous les mappages de l'entête ou du body sont perdus, il faut les réaffecter. Tous les TO utilisant ce DS peuvent éventuellement mapper ce nouveau champ. Génération du lien d'impression Pour générer le contenu du lien nous allons tout simplement le créer par l'intemédiaire d'un coject en TypoScript, en passant par lib.print_url : #Print Version URL: lib.print_url = TEXT lib.print_url.value = index.php?id={page:uid}&print=1&no_cache=1 lib.print_url.htmlspecialchars = 1 lib.print_url.insertdata = 1 [globalvar = GP:print > 0] lib.print_url.value = index.php?id={page:uid} [global] Ce code créé une URL pointant vers la page courante en y ajoutant, en autre, le paramètre &print=1. Par la suite si le paramètre &print est affecté (>0), le typoscript est donc utilisé lors de la génération d'une page d'impression utilisant de gabarit associé, l'url générée pointe sur la page standard et non celle d'impression. Ce code génère donc l'url pointant vers la page d'impression et inversement dans une page d'impression il génère l'url de la page standard. Gabarit d'impression Le gabarit HTML d'impression, préparé par le graphiste, se trouve dans le fichier template_page_print.html : Futuristic Template Building (FTB1 FR) - 31
Ce gabarit est supposé être compatible avec le gabarit principal, template_page.html, bien que la section du menu n'y est pas mapper. C'est pourquoi nous utilisons le même DS que pour le gabarit principale. Ceci implique que nous n'allons pas créer un nouveau DS et TO, comme précédemment, nous allons seulement créer un nouveau TO utilisant le même DS mais pointant et mappant un nouveau fichier HTML! Pour finir l'intégration de la version imprimable du site nous devons encore : Créer un TO, utilisant le gabarit HTML d'impression et le DS précédent. Et le configurer en gabarit enfant du gabarit principale. Mapper le TO avec TemplaVoila. Création du TO Création d'un nouveau TO en utilisant le module Web > List : ou création d'un nouveau TO en utilisant le module Web > TemplaVoila : Futuristic Template Building (FTB1 FR) - 32
Puis saisissez l'information concernant le TO: Sélectionnez ce gabarit comme sous gabarit du gabarit principal! Ceci empêche son utilisation directe, puisqu'il s'agit d'une version spéciale d'un autre gabarit et sa sélection est assurée automatiquement par TemplaVoila. Sélectionnez le gabarit HTML dans File reference. Utilisez le type de rendu Printer Friendly - ceci indique à TemplaVoila qu'il faut automatiquement utiliser ce gabarit si le paramètre &print=1 est affecté et d'utiliser le gabarit principale dans les autres cas. Puis sauvegarder et quitter. Cliquez à nouveau sur l'icône du nouveau TP et réutilisez TemplaVoila : Si vous avez utiliser le Module Web > TemplaVoila vous pouvez mapper le nouveau TO en utilisant le lien MAP : Futuristic Template Building (FTB1 FR) - 33
Puis dans tous les cas vous constaterez que le DS est utilisé implicitement et que nous devons réaliser le mappage : Le mappage est réalisé de la même façon que pour le gabarit principale, mais sans effectuer le mappage du menu Main menu. Puis utilisez le bouton Preview et vous observerez l'insertion des données de test : Futuristic Template Building (FTB1 FR) - 34
Vous pouvez même tester le lien Back to normal version qui affiche une fenêtre d'alerte JavaScript! Avant de finir utilisez Select HTML header parts et effectuez les sélections nécessaires : Futuristic Template Building (FTB1 FR) - 35
Puis sauvegardez avec Save ou Save and Return Lorsque ceci est réalisé, vous pouvez visualiser le site et cliquer sur le lien d'impression pour visualiser le résultat! (Si votre résultat ne ressemble pas à la copie d'écran précédente, vérifiez le code Typoscript du chapitre précédent) Gabarit alternatif pour une section du site Avec cet exemple nous allons créer un autre gabarit de page à l'appliquer à une certaine section du site. Futuristic Template Building (FTB1 FR) - 36
(Cet exemple se trouve dans le fichier HTML template_page_xtra.html ) Cette section est un extranet pour les clients, protégé par mot de passe mais ceci n'est pas important. Comment indiquer à TYPO3 d'utiliser un autre gabarit pour cette section du site? Ce cas est simple puisque il apparaît que ce gabarit peut utiliser la même structure de données DS que le gabarit principale. Création d'un nouveau TO Les étapes sont sensiblement identiques à celles du gabarit d'impression mais il faut néanmoins changer quelques points : Futuristic Template Building (FTB1 FR) - 37
Notez : La structure de donnée principale est utilisée Ce TO n'est pas un sous gabarit d'un autre gabarit il s'agit d'un gabarit pouvant remplacer le précédent! Enregistrer et quitter puis mappez les différents éléments : Futuristic Template Building (FTB1 FR) - 38
Vous devriez obtenir ceci : Notez que le lien Print version link URL n'a pas été mappé puisqu'il n'existe pas de lien dans le fichier HTML du graphiste. N'oubliez pas les sélections de l'entête :... puis sauvegarder avec Save and Return. Sélection du gabarit alternatif pour la section concernée Nous allons utiliser ce gabarit pour les sous pages de la page Licensing - c à d les pages suivantes : Pour cela éditons l'entête de la page Licensing : Futuristic Template Building (FTB1 FR) - 39
Dans l'entête affectez à Subpages - Page Template Structure - Page - Main (valeur utilisée implicitement par héritage de la page Root page jusqu'à présent) Puis sélectionnez le TO que nous avons appelé Page Extranet : Ce qui donne le résultat attendu : Si vous souhaitez inclure la page Licensing dans la liste des pages utilisant cet autre gabarit il aurait fallu modifier Page Template Selector au lieu de Subpages - Page Template Selector. Insertion de contenu dans les pages Pour insérer du contenu vous ne pouvez pas copier/coller les éléments comme cela se faisait habituellement. Avec TemplaVoila il ne suffit pas de coller les éléments dans une page, il faut également les insérer dans la hiérarchie des références allant de la page vers les différents éléments. Mais cela est réalisé facilement grâce au module Web > Page de TemplaVoila : En utilisant ce module, allez sur la page Root page et cliquez sur l'icône Create reference : Futuristic Template Building (FTB1 FR) - 40
Puis allez sur la page License A et cliquez sur l'icône coller 'Paste record : L'élément affiché n'est qu'une référence vers l'élément créé sur la page Root page - ainsi les 2 pages partage et utilise cet élément! La référence est mise en valeur par une couleur jaune puisque son contenu se trouve à l'extérieur de la page et plus précisément sur la page Root page! L'affichage du frontend donne : Futuristic Template Building (FTB1 FR) - 41
Création d'une page à deux colonnes Comment réaliser cela, deux ou plusieurs colonnes ou plusieurs zones dans une page? Rien de cela n'est un problème pour TemplaVoila, en fait ces besoins sont à l'origine de TemplaVoila, plus précisément la nécessité d'une très grande flexibilité. Pour la création d'un gabarit à deux colonnes il existe un fichier HTML template_page_left_col.html contenant une seconde colonne sous le menu : Futuristic Template Building (FTB1 FR) - 42
Nous allons créer un nouveau couple DS et TO en utilisant la méthode appliquée au gabarit principale : Puis mappez, comme précédemment, les éléments ROOT, Page content et Menu. Pendant le mappage il ne sera pas possible de mapper le menu avec l'ancienne manière sans supprimer la balise <div> de la colonne de gauche. Ceci est du au fait que le menu et la colonne de gauche se trouvent dans la même balise <td>, comme le montre la copie d'écran suivante : Nous pourrions changer le gabarit HTML afin d'adapter sa structure à nos besoins. Dans certains cas cela est indispensable. Néanmoins nous pouvons réaliser ce mappage en utilisant le mode range. Pour mapper le menu il faut sélectionner le premier <div> et dans Action sélectionner le dernier <div> du menu RANGE to div.menu1-level1-no[3] indiquant ainsi à TYPO3 d'englober tous les div du menu. Pour le <div> de la colonne de gauche le div est mapper de façon standard. Futuristic Template Building (FTB1 FR) - 43
La structure de données La structure de données résultante ressemble à ceci : Nous n'avons pas ajouté d'instruction de mappage, ni de règles etc... Le plus important étant la configuration du champ Left content (field_left) et du champ Page content (field_content) : Page content et Left content doivent avoir un Editing type Content elements, nécessaire à TemplaVoila pour l'insertion de contenu. Vous devez utiliser field_content pour le champ Page content (alors que pour la nouvelle colonne le nom n'a pas d'importance). Utiliser le même nom de champ permet d'assurer une compatibilité entre cette structure de données et la structure de données du gabarit principal sinon la référence vers les éléments de contenu sera perdue. Puis créer le DS et TO : Avant d'en finir avec le couple DS / TO vous devez encore spécifier les inclusions des entêtes (header parts) du TO. Affection du nouveau gabarit de page obtenu Nous allons appliquer le gabarit à deux colonnes à la section suivante du site : Procédez de même que pour le gabarit de l'extranet, éditez l'entête de la page Terms & Conditions... Notez que cette foisci qu'il est possible de choisir entre deux Page Template Structures : Futuristic Template Building (FTB1 FR) - 44
A partir du moment où Page - 2Col est sélectionné et enregistré le champ FlexForm nommé Content: à changé afin de pouvoir contenir deux champs, 2 liens vers des éléments de contenu! Ceci donne un aperçu des possibilité des FlexForms en stockant le contenu de ces deux champs dans une structure XML au lieu de le stocker chaque champ dans des champs séparés dans la base de données ainsi le nombre de champs n'est pas limité dans un formulaire ni le nombre de sous éléments imbriqués. Nous y reviendrons plus tard. Avant d'en terminer avec l'entête de cette page n'oubliez pas d'affecter le TO (Use template Design) à Page 2Col : Insertion de contenu Avant de visualiser le résultat nous allons créer quelques références ou copies du contenu de la page d'accueil. Remarquez comme le module Web > Page a automatiquement reflété l'existence des deux colonnes pour la section Terms & Conditions du site: La visualisation de cette page donne : Futuristic Template Building (FTB1 FR) - 45
Des icônes pour les TOs et les DSs Une autre fonctionnalité intéressante des enregistrements DS et TO est la possibilité d'y attacher des icônes permettant une meilleure identification lors de leur sélection : Observez cet exemple : Futuristic Template Building (FTB1 FR) - 46
Ceci correspond à l'entête de la page Root page du site après avoir affecté des icônes aux enregistrements DS et TO. En utilisant des icônes il est possible de décrire facilement la structure d'une DS et le rendu graphique pour le TO. Pour les 2 enregistrements TO et DS il existe un champ permettant la saisie du fichier image de l'icône. Préparez les images avant l'affectation et notez qu'elles ne seront pas redimensionnés par TYPO3 : Futuristic Template Building (FTB1 FR) - 47
Les éléments de contenu flexibles Flexible Content Elements Nous venons de voire comment TemplaVoila permet de créer, par des clicks, un gabarit de page pour un site TYPO3. Et pourquoi ne pas utiliser ce concept à d'autres niveaux! Un nouveau type de contenu a naturellement vu le jour l'élément de contenu appelé contenu flexible Flexible Content - ou Flexible Content Element (FCE). Cet élément comporte un nombre variable de champs de données et utilise les FlexForms et les structures de données Data Structures. L'ensemble et rendu dans le frontend en utilisant les TO (Template Objects). Pour cet exemple nous disposons d'un fichier HTML contenant un ensemble de gabarits pour ses éléments flexibles FCE. Le fichier template_ce.html ressemble à ceci : L'idée consiste à stocker plusieurs contenus flexibles simples dans un seul fichier HTML, afin d'économiser de la place et pour les présenter (les afficher) dans un environnement naturel. Futuristic Template Building (FTB1 FR) - 48
Création d'un élément flexible de base (FCE) Premièrement nous allons créer un élément flexible avec un Titre, du Texte, une Image et un lien. La première étape, comme pour les gabarits de page, consiste à passer par le module File > Filelist, à cliquer sur l'icône du fichier HTML, choisir TemplaVoila et à créer la structure de données répondant à vos besoins. Truc: Si vous retrouvez d'anciennes informations de mappage utilisez Clear all pour tout faire disparaître. L'élément ROOT Lors du mappage de l'élément ROOT vous devrez en choisir autre chose que la balise <body> des gabarits de page. En effet le conteneur n'est plus la balise <body> mais la balise <div> encadrant chaque contenu flexible : Les éléments enfants Puis créer les champs nécessaires dans le DS: Pour gagner du temps nous n'avons pas saisi de d'instruction de mappage, ni règles et aucune données de test. Voilà ce que cela donne... :-) Quelques remarques : Noms des champs: Notez le nom du champ Link Title - le nom field_94bd82 est généré automatiquement. EVITEZ CELA! Effacez de tels champs et utilisez des noms choisis soigneusement. Et surtout réutilisez les mêmes noms dans toute votre collection de FCE afin d'optimiser la compatibilité entre les différents FCEs. Editing Types: Pour chaque champ nous avons sélectionnez un Editing Type. La sélection de l' Editing Types fixe le type de champ dans le DS. Nous avons déjà vu les types Content Element et TypoScript Object Path. Ici nous avons utilisé : Header: Dans Editing Type choisir Header field - ceci correspond à du texte mais permet éventuellement de l'utiliser dans un lien typolink Futuristic Template Building (FTB1 FR) - 49
Bodytext: Dans Editing Type correspond à Text area for bodytext Image: Dans Editing Type choisir Image field. Une autre option aurait été Image field, fixed W+H mais Image field permet d'insérer une image et la logique de TemplaVoila permet de retrouver automatiquement la largeur de l'image et de l'utiliser. Link title: Plain input. Link URL: Dans Editing Type correspond à Link field - ceci permet d'afficher un sélecteur de lien classique de TYPO3. Le TypoScript de génération du lien est également créé. Après avoir réalisé le mappage on obtient : Puis il reste à sauvegarder l'ensemble en utilisant le bouton Save puis Create TO and DS : Ajouter un contenu flexible dans une page Ceci est réalisé en passant par le module Web > Page puis en utilisant l'icône Nouveau : Puis vous pouvez choir de créer n'importe quel type de contenu, prenons le premier de la liste (type TEXT) Futuristic Template Building (FTB1 FR) - 50
Puis modifiez son type afin de lui donner un type Flexible Content et confirmer votre choix : Vous optenez le formulaire suivant : Choisissez la structure de données et enregistrez : Futuristic Template Building (FTB1 FR) - 51
Vous pourrez ainsi choisir le TO et commencer à saisir les données : Sauvegardez et visualisez le résultat : Futuristic Template Building (FTB1 FR) - 52
Nous n'avons pas encore sélectionné les inclusions éventuelles dans les header parts du TO : Futuristic Template Building (FTB1 FR) - 53
Cette fois ci nous n'incluons pas les deux premiers styles parcequ'ils ne sont utiles qu'à la page HTML qui contient ces FCE, de plus c'est éléments sont déjà présents dans le gabarit de page et si ces éléments étaient amenés à être dupliqués TYPO3 n'en garderait qu'un seul. Le dernier style n'est utile qu'au dernier FCE, il ne serait donc pas utilisé ici. Ajout de paramètres à l'image Un autre problème provient du fait que TYPO3 régénère la balise HTML de l'image. Ce processus supprime quelques attributs et en particulier ' align="right" style="margin-left: 10px; margin-right: 5px;"' Ceux-ci peuvent être rajoutés en éditant la structure de données qui nous présente un code TypoScript familier : Nous n'avons à ajouter qu'une ligne (celle en bleu) : 10.params = align="right" style="margin-left: 10px; margin-right: 5px;" Et ceci suffit à obtenir le bon résultat : Le lien Observez que le titre et l'image sont des liens hypertexte et pointent vers le même contenu que le lien en bas de page ceci Futuristic Template Building (FTB1 FR) - 54
correspond au comportement par défaut, vous pouvez changer cela et l'adapter le tout en éditant la structure de données du FCE : 1: <T3DataStructure> 2: <meta type="array"> 3: <langchildren type="integer">1</langchildren> 4: <langdisable type="integer">1</langdisable> 5: </meta> 6: <ROOT type="array"> 7: <tx_templavoila type="array"> 8: <title>root</title> 9: <description>select the HTML element on the page which you want to be the overall container element for the template.</description> 10: </tx_templavoila> 11: <type>array</type> 12: <el type="array"> 13: <field_header type="array"> 14: <tx_templavoila type="array"> 15: <title>header</title> 16: <sample_data type="array"> 17: <numindex index="0"></numindex> 18: </sample_data> 19: <etype>input_h</etype> 20: <TypoScript> 21: 10 = TEXT 22: 10.current = 1 23: 10.typolink.parameter.field = field_linkurl 24: </TypoScript> 25: </tx_templavoila> 26: <TCEforms type="array"> 27: <config type="array"> 28: <type>input</type> 29: <size>48</size> 30: <eval>trim</eval> 31: </config> 32: <label>header</label> 33: </TCEforms> 34: </field_header> 35: <field_bodytext type="array"> 36: <tx_templavoila type="array"> 37: <title>bodytext</title> 38: <sample_data type="array"> 39: <numindex index="0"></numindex> 40: </sample_data> 41: <etype>text</etype> 42: <proc type="array"> 43: <HSC type="integer">1</hsc> 44: </proc> 45: </tx_templavoila> 46: <TCEforms type="array"> 47: <config type="array"> 48: <type>text</type> 49: <cols>48</cols> 50: <rows>5</rows> 51: </config> 52: <label>bodytext</label> 53: </TCEforms> 54: </field_bodytext> 55: <field_image type="array"> 56: <tx_templavoila type="array"> 57: <title>image</title> 58: <sample_data type="array"> 59: <numindex index="0"></numindex> 60: </sample_data> 61: <etype>image</etype> 62: <TypoScript> 63: 10 = IMAGE 64: 10.file.import = uploads/tx_templavoila/ 65: 10.file.import.current = 1 66: 10.file.import.listNum = 0 67: 10.file.maxW = 200 68: 10.stdWrap.typolink.parameter.field = field_linkurl 69: </TypoScript> 70: </tx_templavoila> 71: <TCEforms type="array"> 72: <config type="array"> 73: <type>group</type> 74: <internal_type>file</internal_type> 75: <allowed>gif,png,jpg,jpeg</allowed> 76: <max_size>1000</max_size> Futuristic Template Building (FTB1 FR) - 55
77: <uploadfolder>uploads/tx_templavoila</uploadfolder> 78: <show_thumbs>1</show_thumbs> 79: <size>1</size> 80: <maxitems>1</maxitems> 81: <minitems>0</minitems> 82: </config> 83: <label>image</label> 84: </TCEforms> 85: </field_image> 86: <field_94bd82 type="array"> 87: <tx_templavoila type="array"> 88: <title>link Title</title> 89: <sample_data type="array"> 90: <numindex index="0"></numindex> 91: </sample_data> 92: <etype>input</etype> 93: <proc type="array"> 94: <HSC type="integer">1</hsc> 95: </proc> 96: </tx_templavoila> 97: <TCEforms type="array"> 98: <config type="array"> 99: <type>input</type> 100: <size>48</size> 101: <eval>trim</eval> 102: </config> 103: <label>link Title</label> 104: </TCEforms> 105: </field_94bd82> 106: <field_linkurl type="array"> 107: <type>attr</type> 108: <tx_templavoila type="array"> 109: <title>link URL</title> 110: <sample_data type="array"> 111: <numindex index="0"></numindex> 112: </sample_data> 113: <etype>link</etype> 114: <TypoScript> 115: 10 = TEXT 116: 10.typolink.parameter.current = 1 117: 10.typolink.returnLast = url 118: </TypoScript> 119: <proc type="array"> 120: <HSC type="integer">1</hsc> 121: </proc> 122: </tx_templavoila> 123: <TCEforms type="array"> 124: <config type="array"> 125: <type>input</type> 126: <size>15</size> 127: <max>256</max> 128: <checkbox></checkbox> 129: <eval>trim</eval> 130: <wizards type="array"> 131: <_PADDING type="integer">2</_padding> 132: <link type="array"> 133: <type>popup</type> 134: <title>link</title> 135: <icon>link_popup.gif</icon> 136: <script>browse_links.php?mode=wizard</script> 137: <JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams> 138: </link> 139: </wizards> 140: </config> 141: <label>link URL</label> 142: </TCEforms> 143: </field_linkurl> 144: </el> 145: </ROOT> 146: </T3DataStructure> Créer un élément de contenu grille Avec TemplaVoila il n'est pas nécessaire de passer par un gabarit de page pour pouvoir créer des pages utilisant 2 colonnes vous pouvez également réaliser cela avec des éléments de contenu flexibles comme le montre le prochain exemple : Futuristic Template Building (FTB1 FR) - 56
Le mappage est identique au FCE précédent, n'oubliez pas de supprimer les restes de l'ancien mappage avec Clear all..: Pour chaque champ sélectionnez l'editing type : Content Element puis sauvegardez : Sur la page précédente vous pouvez ajouter un nouveau FCE basé sur le DS FCE - 2 Columns : Futuristic Template Building (FTB1 FR) - 57
Ce qui donne un formulaire comportant deux champs...... que nous utiliserons via le module Web > Page : P.S. N'oubliez pas d'affecter le champ Template Object! Nous allons déplacer l'élément de contenu actuel dans une des colonnes comme montré ci-dessus : Futuristic Template Building (FTB1 FR) - 58
NOTE: L'oubli de la sélection du TO? Un des points à optimiser dans TemplaVoila concerne la sélection du DS et du TO. Mais en attendant n'oubliez pas de sélectionner le TO après avoir sélectionné le DS. Si le TO n'est pas sélectionné pour un gabarit de page ou dans un FCE un message d'erreur est affiché dans le frontend : Création d'un second gabarit pour le FCE à 2 colonnes Nous allons créer un gabarit alternatif TO, comme pour le gabarit de page précédent. Ceci est réalisé en créant un TO réutilisant le DS existant. Ainsi plutôt que de repasser par le module File > Filelist nous pouvons utiliser le module Web > TemplaVoila : Futuristic Template Building (FTB1 FR) - 59
Il est également possible de réaliser cette opération en passant par le module Web > List, par le Storage Folder et en ajoutant un nouveau TO. Puis mappez ce TO : Futuristic Template Building (FTB1 FR) - 60
N'oubliez pas les inclusions de la section HTML header : Finalement validez avec Save and Return. Si vous le souhaitez vous pouvez aussi ajouter des icônes comme pour les gabarits de pages. Utilisation du gabarit alternatif Pour cela il faut éditer le FCE 2 Column existant : Vous constatez qu'il est possible de choisir entre deux Template Object FCE - 2 columns... : Futuristic Template Building (FTB1 FR) - 61
Nous avons spécifiez des icônes pour les DS et TO. L'icône du DS pour toutes les possibilité de l'éléments et nous avons changez la couleur de fond de chaque TO afin de refléter la réalité. Les éléments de contenu utilisant des objets répétés L'exemple suivant est un peu plus complexe. Les points les plus simples correspondent à l'utilisation de deux images et du texte. Mais nous allons utiliser généré le titre avec une image et créer des listes de liens séparés par des titres : Futuristic Template Building (FTB1 FR) - 62
La structure de donnée peut être décrite ainsi : 1 Titre graphique (Header graphical) 1 Le texte (Bodytext) 2 Les images N éléments du type a) Titre texte ou b) liste à puces de liens Mappage du DS et du TO Dans le module File > Filelist utilisez TemplaVoila avec le fichier template_ce.html et mappez l'élément ROOT avec la balise <div> du block suivant : Futuristic Template Building (FTB1 FR) - 63
Puis créez le titre : Les points les plus importants du titre sont : Fieldname: Réutilisez le nom field_header - afin d'assurer la compatibilité avec les autres FCE (ce qui permet de conserver la structure de la page en changeant de DS) Editing Type: Utilisez Header field, Graphical - ce qui automatise la création du titre sous forme d'image en utilisant un objet GIFBUILDER. Mapping rules: Limitation aux balises <img>. Réalisez le mappage et vous observerez ceci : Futuristic Template Building (FTB1 FR) - 64
La configuration des champs bodytext et des deux images est réalisée de la même manière que dans le chapitre précédent : Création des objets répétés Pour créer la liste des liens nous utilisons deux éléments de base : un élément Titre (#1) et un élément Lien (#2). Et nous devons pouvoir créer plusieurs de ces éléments et ce dans n'import quel ordre : La copie suivante matérialise cette structure : Les deux objets de données internes : Lorsque nous configurons les objets de données internes (Les éléments Titre et Liens) nous ne mapperons qu'un seul élément de chaque (#2 et #3) le restant de l'exemple n'est plus utilisé. La structure de chaque objet interne : L'élément Titre dispose d'au moins un élément Lien et inversement chaque Lien dispose d'un Titre. Nous définissons chaque élément comme étant une collection de champs liés ensembles - cette configuration étant assurée par un élément appelé conteneur container. L'élément conteneur : Il faut également insérer le contenu dynamique dans le conteneur principale de la section (#1). Nous devons donc créer un élément pour ce conteneur afin de réaliser cette substitution; cette tâche est réalisée par l'élément section du DS (avec l'utilisation de array + section). Création de l'élément section du DS : Il s'agit de la première étape lors du mappage : Futuristic Template Building (FTB1 FR) - 65
Pour créer un élément Section (SC) il faut ajouter un élément Container (CO) puis modifier sa configuration en sélectionnant le champ Make this container a SECTION!. Il faut à présent mapper cet élément sur la balise <div> avec laquelle le graphiste a encadré la liste des liens : Utilisez le mode de mappage interne INNER. Tout cela fait apparaître la section Link section container disposant d'un nouveau niveau dans la structure! Créez un champ field_do_title ( do pour Data Object ). Celui-ci sera également un conteneur d'objets Container for elements (mais il ne faut pas sélectionner Make this container a SECTION!). ce qui donne : Futuristic Template Building (FTB1 FR) - 66
Faites de même pour le champ field_do_link : Afin d'obtenir ceci : Il reste à créer un champ Title (pour le conteneur Title element ) et les champs Link title / Link URL pour le conteneur Link element. Pour le champ Link URL il faut utiliser un élément de type Attribute (puisque nous souhaitons le mapper vers l'attribut href= d'une balise <a>). Ce qui donne : Mappage de la structure hiérarchique Mappez l'élément [CO] Title element vers la balise <p> qui contient le texte : Futuristic Template Building (FTB1 FR) - 67
Utilisez le mode de mappage externe OUTER puisque nous souhaitons inclure la balise <p> : Faites de même pour l'élément Link en sélectionnant la balise <p> contenant l'ensemble : Utilisez le même mode de mappage qie pour l'élément Title, et utilisez OUTER afin d'inclure la balise <p> de la section. Finalement, mappez le header, title et URL comme précédemment : Pour Link header, utilisez la balise <p> suivante : Pour Link title, utilisez la balise <a> suivante : Futuristic Template Building (FTB1 FR) - 68
Pour Link URL utilisez la même balise <a> et sélectionnez ATTRIBUTE href : A la fin du mappage il faudrait obtenir ceci : Il reste encore à sauvegarder le DS et le TO. Appuyez sur Save et donnez un nommez votre FCE Header/Text/2xImage/XxLinks : Créez un contenu utilisant ce nouveau DS / TO Insérons ce FCE sur la page Licensing : Futuristic Template Building (FTB1 FR) - 69
Après avoir sauvegardez vous pouvez ajouter le contenu : La copie d'écran précédente montre le formulaire comportant un ensemble de saisies, rien de particulier à signaler hormis le flexibilité qu'apporte TemplaVoila puisqu'il n'a pas été nécessaire de créer le moindre champ supplémentaire dans la base de donnée pour réaliser cela. Notez les deux points suivants : #1: N'oubliez jamais de sélectionner le Template Object! #2: En bas du formulaire sur un sélecteur représentant l'élément Section - le conteneur de la liste de liens. Création de multiples données non ordonnées Le sélecteur Link section container permet de créer deux objets soit un Title element soit un Link element : A chaque sélection il est nécessaire de sauvegarder le formulaire afin de faire apparaître les nouveaux champs. De plus le Futuristic Template Building (FTB1 FR) - 70
déplacement des éléments n'est pas encore très flexible mais il faut savoir qu'il s'agit encore d'une version bêta des FlexForms. Après avoir créé quelques éléments : L'interface est encore un peu confuse, mais elle sera améliorée avec les évolutions futures. Mais on observe facilement le titre et les deux liens. Un aperçu du frontend donne : Les liens y sont... :-) Futuristic Template Building (FTB1 FR) - 71
Création d'un élément flexible de type liste Cet exemple présente une nouvelle structure de données hiérarchique et permet d'utiliser une seconde fois les éléments répétés avec TemplaVoila. Avec un bloc unique nous allons réaliser le contenu suivant : La structure de données comporte : Un titre (Header) Une description générale? nombre d'élément de type Film comportant : Un titre(title) Une description Un lien Une image (de taille fixe) Contrairement à l'exemple précédent où nous avions un titre ou un lien, nous n'avons qu'un seul élément répété, le film. Commençons par créer la structure de données DS et le premier gabarit TO. Création du couple DS / TO L'élément ROOT du DS est mappé sur une balise <div> placée spécialement à cet effet. Le titre (Header) et la description générale sont mappés respectivement vers les balises <h1> et <em>. Futuristic Template Building (FTB1 FR) - 72
Le DS ressemble à : (Notez que tout le mappage est de type INNER ce qui correspond à la majorité des mappages vers du contenu HTML). L'étape suivante consiste à créer un nouvel élément Section dans la structure de données. Pour cela il faut suivre le même procédé que pour le premier exemple, créer un élément [CO] Container, puis le modifier en cochant la case Make.... La structure de données obtenue : Commencez le mappage des 2 éléments, l'élément Section (field_list) est mappé vers la balise HTML qui encadre les éléments répétés. Appuyez sur Map pour observer ceci : Futuristic Template Building (FTB1 FR) - 73
Mapper la balise <table> semblerait être le bon choix (#1) puisqu'elle encadre les lignes du tableau qui sont répétables. Néanmoins la ligne des entêtes disparaîtrait! Nous allons donc mapper l'élément Section vers la balise <tr> de la seconde ligne du tableau (#2 première ligne de contenu) et dans le sélecteur Action vous utilisez le dernier élément de type RANGE : Ceci implique que le mappage s'étend sur plusieurs éléments HTML d'un même niveau supprimant ainsi toutes les lignes du tableau sauf la ligne des entêtes. Reste à mapper l'élément film (field_movie_el) et l'utilisation mode RANGE de Action est à nouveau nécessaire puisque les données du film utilisent 2 lignes du tableau : Après avoir sélectionné la première ligne, il faut utiliser RANGE pour tout inclure jusqu'à la ligne suivante : Le mappage devrait donner ceci : Futuristic Template Building (FTB1 FR) - 74
Pour finir, il reste à créer les 4 champs décrivant le film : Les types d'édition (Editing Types) utilisés sont : 1. Le titre (field_title) utilise Plain input field 2. La description (field_description) utilise Text area for bodytext 3. Le lien (field_linkurl) utilise Link field (le type de l'élément étant Attribute!) 4. L'image (field_image) utilise Image field, fixed W+H Chaque élément est mappé selon la copie d'écran suivante : Le mappage #1 et #2 utilise le type INNER (le contenu est inséré dans la balise), le mappage #3 ne peut être que OUTER (la seule possibilité pour une balise image) et le mappage #4 est un attribut, utilisant le href de la balise <a> Ce qui donne : Futuristic Template Building (FTB1 FR) - 75
Remarquez que pour gagner du temps, les instructions de mappage ne sont pas saisies (bien qu'elles servent beaucoup s'il faut mapper un second TO par la suite). Il ne reste plus qu'à sauvegarder et nommer ce couple DS / TO : Utilisation de ce nouvel élément de contenu Créez un nouvel élément de contenu flexible Flexible Content et utilisez Movie listing comme structure de données. Puis remplissez le formulaire avec du contenu et n'oubliez pas de sélectionner également le TO! Futuristic Template Building (FTB1 FR) - 76
Ce affiche dans le frontend : Futuristic Template Building (FTB1 FR) - 77
Utilisation de la feuille de style Une dernière chose nous n'avons pas encore inclus les éléments de l'entête HTML pour ce FCE c'est pourquoi le rendu n'est pas encore identique à celui du fichier HTML. Rééditons l'objet gabarit TO : ou Puis utilisez Select HTML header parts et sélectionnez la dernière feuille de style (celui-ci a été conçu spécifiquement pour cet élément de contenu par le graphiste!) Futuristic Template Building (FTB1 FR) - 78
Videz le cache et observez à nouveau le rendu dans le frontend, le défaut est corrigé... :-) Divers Utilisation du TypoScript dans les Structures de Données DS Lorsque vous mappez un élément du DS vers une position dans le fichier HTML cela implique que du contenu dynamique est inséré à cette place lors du rendu de la page. Il y a plusieurs facteurs qui influent sur le rendu final : Par défaut le contenu du champ est inséré directement. Eventuellement altéré par l'utilisation htmlspecialchars(), la conversion sous forme d'entier ou le passage par la fonction stdwrap (connue du TypoScript) Il est aussi possible d'insérer un conteneur d'objets TypoScript (COA) qui sera exécuté. Ceci peut être utilisé pour créer des menus, des images ou tout autres traitements. Vous utilisez le TypoScript dans son contexte d'utilisation. Sinon il est aussi possible d'y faire appel à un objet TypoScript externe situé dans le path du gabarit TypoScript principale Futuristic Template Building (FTB1 FR) - 79
du site. Cette méthode permet de centraliser le code TypoScript. Par défaut : transfert direct du contenu Dans cet exemple, de part la balise <HSC> le contenu du champ field_paragraph n'est filtré que par la fonction htmlspecialchars() - ligne 34: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36:... 38: 45: <field_description type="array"> <tx_templavoila type="array"> <title>description</title> <sample_data type="array"> <numindex index="0"></numindex> </sample_data> <etype>text</etype> <proc type="array"> <HSC type="integer">1</hsc> </proc> </tx_templavoila> <config type="array"> </field_description> L'option par défaut de la balise <proc> est appliquée à tout le contenu généré (même celui généré par du TypoScript ou un objet TypoScript externe) ces options sont : <int> (boolean) Conversion en entier avant le rendu <HSC> (boolean) Passage par la fonction PHP htmlspecialchars() qui protège des attaques HTML et XSS. <stdwrap> (array) Utilisation de la fonction stdwrap Objets TypoScript externes Traitement d'image Il est aussi possible d'utiliser la section <TypoScript> pour effectuer des traitements sur les valeurs. Avant de commencer il faut savoir que : Le contenu de l élément est retrouvé dans le contexte du TypoScript par l'utilisation de current value La valeur de tous les éléments d'un même niveau de la structure de données se trouvent dans un tableau interne et peut être récupérée en utilisant l'attribut.field de stdwrap 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82:... 97: <field_image1 type="array"> <tx_templavoila type="array"> <title>image 1</title> <sample_data type="array"> <numindex index="0"></numindex> </sample_data> <etype>image</etype> <TypoScript> 10 = IMAGE 10.file.import = uploads/tx_templavoila/ 10.file.import.current = 1 10.file.import.listNum = 0 10.file.maxW = 200 </TypoScript> </tx_templavoila> </field_image1> Cet exemple décrit comment le champ field_image de la structure de données est traité comme s'il s'agissait d'une image. Le code TypoScript configure le chemin d'accès à l'image (ligne 77), charge la valeur courante (line 78) et utilise la première image de la liste (s'il devait y en avoir plusieurs) (ligne 79) et finalement limite la largeur à 266 (ligne 80) Lorsque vous utilisez un Editing Types image pendant l'assistant de création du DS/TOs c'est ce type de configuration TypoScript qui est créée! Vous vous à chaque instant éditer la structure de données et modifier ce code. Titre Graphiques Le code suivant est un peu plus complexe puisqu'il combine deux champs afin de générer un seul titre graphique affichant les 2 contenus. Futuristic Template Building (FTB1 FR) - 80
36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: <field_header type= array > <tx_templavoila type= array > <title>header1</title> <sample_data type= array > <n0>lorem Ipsum Dolor</n0> </sample_data> <etype>input_g</etype> <tags>img</tags> <TypoScript_constants> <textcolor>black</textcolor> <text2color>{$_constants.colorset.gray7}</text2color> <backcolor>{$_constants.colorset.white}</backcolor> </TypoScript_constants> <TypoScript> 10 = IMAGE 10.file = GIFBUILDER 10.file { XY = 200,45 backcolor = {$backcolor} 10 = TEXT 10.text.current = 1 10.text.case = upper 10.fontColor = {$textcolor} 10.fontFile = {$TSconst.font_bold} 10.niceText = 1 10.offset = {$textposition} 10.fontSize = 20 } 20 = TEXT 20.text.field = field_header2 20.text.case = upper 20.fontColor = {$text2color} 20.fontFile = {$TSconst.font_light} 20.niceText = 1 20.offset = {$text2position} 20.fontSize = 18 </TypoScript> </tx_templavoila> <TCEforms type= array > <config type= array > <type>input</type> <size>48</size> <eval>trim</eval> </config> <label>header (colored)</label> </TCEforms> </field_header> <field_header2 type= array > <type>no_map</type> <tx_templavoila type= array > <title>header2</title> </tx_templavoila> <TCEforms type= array > <config> <type>input</type> <size>48</size> <eval>trim</eval> </config> <label>subheader (gray)</label> </TCEforms> </field_header2> Les deux champs sont field_header et field_header2. Notez que l'élément <type> de field_header2 à pour valeur no_map - ceci permet de ne faire apparaître ce champ que dans le backend afin de saisir une valeur qui sera utilisé pour générer le rendu de field_header qui est mappé vers le fichier HTML. A partir des lignes 56 et 65 des objets TEXT sont créés pour chaque champ dans le GIFBUILDER. A la ligne 57 la valeur courante est chargée pour l'objet TEXT récupérant ainsi la valeur de field_header A la ligne 66 la valeur du champ field_header2 est récupérée par l'attribut.field du TypoScript ceci est possible puisque les valeurs des deux champs se trouvent sur le même niveau et field_header2 se trouve dans le tableau interne cobj->data Des constantes TypoScript dans les structures de données Dans l'exemple précédent certaines valeurs du code TypoScript proviennent de constantes (lignes 54, 50, 60, 62, 68, 69 et 71). Ce principe est déjà connu dans les gabarits TypoScript classiques - mais la portée de ces variables est limitée à ce Futuristic Template Building (FTB1 FR) - 81
code TypoScript! Ce qui signifie que seules les constantes définies par les éléments des lignes 45 à 47 peuvent être utilisées c à d {$textcolor}, {$text2color}, {$backcolor} Des Constantes dans des Constantes Aux lignes 46 et 47 les constantes font référence à d'autres valeurs, par exemple {$_CONSTANTS.colorSet.white} - cette valeur fait référence à des objets définis dans une section Setup dans gabarit de page classique (pas la section Constants!) Les valeurs se trouvent donc dans l'arborescence des objets TypoScript aux positions suivantes : Ces valeurs sont affectées en ajoutant le code suivant dans une section Constants d'un gabarit de page classique : # Define color colorset.gray1 colorset.gray2 colorset.gray3 colorset.gray4 colorset.gray5 colorset.gray6 colorset.gray7 sets: = #B4B3B3 = #333333 = #eeeeee = #F7F7F7 = #555555 = #444444 = #828282 colorset.red = #E80C0E colorset.orange = #FF7200 colorset.to1 = #BA3957 colorset.to2 = #217EA1 colorset.to3 = #849724 colorset.to4 = #608375 colorset.to5 = #7469A4 colorset.to6 = #96AA00 colorset.white = #FFFFFF # Define font sets: font.light = EXT:user_3dsplm/fonts/FRANGWC_.TTF font.medium = EXT:user_3dsplm/fonts/FRANGMC_.TTF font.bold = EXT:user_3dsplm/fonts/FRANGDC_.TTF Puis en ajoutant le code suivant dans la section Setup du gabarit : # Moving constants into the Setup scope (for use from PHP scripts and Template Objects) _CONSTANTS.colorSet { gray1 = {$colorset.gray1} gray2 = {$colorset.gray2} gray3 = {$colorset.gray3} Futuristic Template Building (FTB1 FR) - 82
gray4 = {$colorset.gray4} gray5 = {$colorset.gray5} gray6 = {$colorset.gray6} gray7 = {$colorset.gray7} red = {$colorset.red} orange = {$colorset.orange} TO1 = {$colorset.to1} TO2 = {$colorset.to2} TO3 = {$colorset.to3} TO4 = {$colorset.to4} TO5 = {$colorset.to5} TO6 = {$colorset.to6} white = {$colorset.white} } _CONSTANTS.font { light = {$font.light} medium = {$font.medium} bold = {$font.bold} } Constantes récupérées directement depuis une section Setup Les constantes des ligne 60 et 69 dispose d'un préfix TSconst. et qui signifie qu'elles font référence à une définition se trouvant dans plugin.tx_templavoila_pi1.[constant], donc dans ce cas dans plugin.tx_templavoila_pi1.tsconst.font_bold Ces valeurs ont également été affectées par l'intermédiaire de constantes du gabarit de page (cf exemple précédent): plugin.tx_templavoila_pi1.tsconst { font_light = {$font.light} font_medium = {$font.medium} font_bold = {$font.bold} color_red = {$colorset.red} color_white = {$colorset.white} color_gray4 = {$colorset.gray4} } Ces méthodes sont un peu déroutantes mais permettent d'optimiser les performances. Il vous semblerait logique de définir ces configurations dans une section Constants, et non une section Setup. Mais ceci est impossible puisque lors du rendu les constantes sont remplacées dans le TypoScript lors de son traitement (et ce résultat est mis en cache). Ainsi si vous souhaitez utiliser vos constantes TypoScript dans la structure de données vous devez passer par des _CONSTANTS (tel que _CONSTANTS.colorSet.white ) qui devront être insérés dans une section <TypoScript_constants> Ecraser des valeurs du TO Généralement, toutes les informations de traitement sont stockées dans la structure de données. Mais il arrive de devoir changer certains éléments depuis le TO. Ceci est facilement réalisé en utilisant le champ Local Processing (XML) du TO dans lequel il faut recopier le code XML du DS et dans lequel il est possible de changer les valeurs contenues entre les balises <tx_templavoila> : Futuristic Template Building (FTB1 FR) - 83
Le code XML colorisé ressemble à : 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: 40: 41: 42: <T3DataStructure> <ROOT> <el> <field_header> <tx_templavoila> <TypoScript_constants> <textxy>266,50</textxy> <textcolor>{$_constants.colorset.to3}</textcolor> <textposition>0,21</textposition> <text2position>0,42</text2position> </TypoScript_constants> <TypoScript> 10 = IMAGE 10.file = GIFBUILDER 10.file { XY = {$textxy} backcolor = {$backcolor} 10 = TEXT 10.text.current = 1 10.text.case = upper 10.fontColor = {$textcolor} 10.fontFile = EXT:user_3dsplm/fonts/FRANGDC_.TTF 10.niceText = 1 10.offset = {$textposition} 10.fontSize = 18 } 20 = TEXT 20.text.field = field_header2 20.text.case = upper 20.fontColor = {$text2color} 20.fontFile = EXT:user_3dsplm/fonts/FRANGWC_.TTF 20.niceText = 1 20.offset = {$text2position} 20.fontSize = 18 </TypoScript> </tx_templavoila> </field_header> </el> </ROOT> </T3DataStructure> Futuristic Template Building (FTB1 FR) - 84
Les éléments devant écraser des valeurs dans la structure de données doivent se retrouver à la même position dans le code XML du TO que dans le code XML du DS! Dans cet exemple les lignes 7 à 10 écrasent les constantes avec d'autres couleurs. De plus le code TypoScript des lignes 13 à 36 est également modifié (bien que cela ne soit nécessaire si les constantes sont utilisées correctement) Enregistrement et restauration de valeurs dans un registre TypoScript Admettons que vous vouliez créer une page avec deux colonnes ayant des largeurs différentes. Normalement vous affectez à des constantes la largeur maximale des images dans le champ Constants de vos gabarits : styles.content.imgtext.maxw = 600 styles.content.imgtext.maxwintext = 300 Mais, lorsque le contenu est généré dans la colonne la moins large il est nécessaire d'écraser ces configurations ou valeurs (puisqu'elles ont été définie pour la colonne la plus large). Une légère modification dans la section de la structure de données qui gère le contenu de la colonne permet d'obtenir le résultat souhaité : 13: 14: 15:... 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33:... 46: <field_ce_right type= array > <tx_templavoila type= array > <title>right Column</title> <TypoScript> 5 = LOAD_REGISTER 5.maxImageWidthInText = 100 5.maxImageWidth = 180 10= RECORDS 10.source.current=1 10.tables = tt_content 15 = RESTORE_REGISTER </TypoScript> </tx_templavoila> </field_ce_right> Les lignes 26 à 28 contiennent le code TypoScript généré lors de la sélection de Content Elements dans Editing Type. Les lignes 22 à 24 sont insérées manuellement et charge dans un registre interne des données écrasant les valeurs des constantes pendant la génération du contenu de la colonne. La ligne 30 réaffecte les anciennes valeurs aux constantes afin qu'elles retrouvent leur état initial. Utilisation de CDATA Lors de la saisie de TypoScript dans des structures de données il devient rapidement nécessaire d'entourer le contenu avec la balise CDATA afin d'assurer une bonne interprétation du contenu et plus particulièrement lors de l'utilisation de balises HTML pour gérer le wrapping etc. L'utilisation de la balise CDATA permet de coder ainsi (ligne 13 et 17): 12: 13: 14: 15: 16: 17: 18: <![CDATA[ 10 = TEXT 10.current = 1 10.wrap = <b> </b> ]]> <TypoScript> </TypoScript> Sans l'utilisation de la balise il est nécessaire de saisir (utilisation des éléments HTML < et > pour < et >): 12: 13: 10 = TEXT 14: 10.current = 1 15: 10.wrap = >b< >/b< 16: <TypoScript> </TypoScript> Informations concernant le mappage Le moteur de mappage de TemplaVoila n'est conçu pour ne fonctionner qu'avec du code HTML pure. Néanmoins si vous réorganisez des éléments dans le fichier HTML et souhaitez re-mapper l'ensemble est perdu. Pour cela il est intéressant Futuristic Template Building (FTB1 FR) - 85
d'identifier les éléments clefs avec un attribut id ou class. Ces éléments sont utilisés dans le HTML-path lequel identifie un élément dans le gabarit. Si vous placez stratégiquement ces éléments (tel que la balise <div> qui encadre les éléments dans template_ce.html) vous gagnerez beaucoup de temps à ne plus re-mapper vos contenus flexibles. Gabarits mis en cache Lorsqu'un fichier HTML change ou est supprimé, le TO reste opérationnel puisqu'il est mis en cache lors de son enregistrement! Ceci les rend très robuste et seules des images manquantes, les stylesheets etc... utilisés par ce gabarit peuvent le corrompre. D'autre fonctionnalité de mis en cache seront disponible par la suite. Futuristic Template Building (FTB1 FR) - 86
Reste à faire de TemplaVoila La liste du restant à faire de TemplaVoila se trouve dans le fichier doc/todo.txt de cette extension Néanmoins les principaux points concernent : Le module Web > Page - demandez à Robert. Le mappage échoue si vous cherchez à mapper un attribut se trouvant dans une balise contenant d'autres balises. D'autres bugs risquent d'exister... Le mappage échoue avec certains fichier HTML le fichier doit comporter des imbrications valides etc... Le code HTML devrait être propre. Mais nous allons améliorer certaines choses afin de pouvoir utiliser des fichiers un peu moins respectueux. La documentation! Futuristic Template Building (FTB1 FR) - 87