TypoScript By Example

Transcription

1 TypoScript By Example Revised Kasper Spring 2001 french release 11/2003 (terry Durant) Extension Key: doc_core_tsbyex_fra Copyright , Kasper Skårhøj, This document is published under the Open Content License available from The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from TypoScript By Example - 1

2 Table of Contents TypoScript By Example... 1 Introduction...3 Ce document... 3 D'autres documentations... 3 En ai-je besoin?... 3 Qu'est ce que le TypoScript template (gabarit)?... 3 Préalable du traducteur... 3 Overview... 3 Exemple cas : Inclure un gabarit...5 Gérer la hiérarchie des Templates... 6 Cas d'exemple : "Extension"... 6 Managing extensions... 7 Pour plus de lecture... 8 Gabarit standard...8 Introduction... 8 Table static_template... 9 Content rendering details... 9 Typical setup of a standard template (paramétrage typique d'un gabarit standard)... 9 Tutorial de base : démarrez un nouveau website...10 Un simple website à partir de zéro...10 Un website avec un menu léger...12 Insérer un menu graphique Contenu du site Concepts &id et &type Enveloppes (wraps) Structure de données (arrays) (1,2,3,4...) Numerical arrays (structure de données numériques). 17 String arrays (structure de données de chaîne de caractères)...17 styles.content.[xxx] Example from "content (default)" Sections éducatives Introduction...21 Code notation conventions: stdwrap Le concept stdwrap Propriétés de stdwrap Get data Override / Conditions Objets de contenu (cobject) Introduction...28 COA FILE IMAGE IMG_RESOURCE...31 CLEARGIF HRULER CTABLE and OTABLE...32 Gabarit (TEMPLATE)...35 FORM (formulaire)...38 CAS d'exemple...40 LOAD_REGISTER...42 imgresource et GIFBUILDER Introduction...44 Un fichier normal en entrée Masques Bitmap Importer une image GIFBUILDER GIFBUILDER - bases calc niceText L'objet GIFBUILDER TEXT...51 L'objet IMAGE...51 Navigation HMENU TMENU IMGMENU optionsplit...57 GMENU Images avec GMENU GMENU_LAYER Prolonger un fond d'image au menu entier...61 PHP include-scripts PHP_SCRIPT cobject...64 Inspiration Exemple: Userdefined tags...65 Content rendering (restitution de contenu).. 68 Introduction CONTENT...69 colpos...70 styles.content (default) lib.stdheader RECORD Réponses aux Challenges TypoScript By Example - 2

3 Introduction Ce document C'est une introduction à l'utilisation de TypoScript. Il essaye de vous permettre de comprendre la manière dont est pensé et fonctionne TypoScript. Beaucoup de petits exemples sont utilisés pour vous aider à saisir TypoScript qui vous préparent peu à peu à aller de plus en plus loin. D'autres documentations Un document très important est TypoScript reference (TSref), qui contient tous les détails sur TypoScript. Le problème avec un document de référence est qu'il y a très peu d'exemples. Ce présent document est une façon plus amicale pour le lecteur de se familiariser avec TypoScript. Tutoriels Il y a une série d'autres didacticiels très productifs à lire également. Ainsi, Content_rendering.pdf en est un dont le sujet traite de content rendering (restitution des contenus). En ai-je besoin? Oui. Si vous travaillez dans les couches (layer) au-dessus de F1 dans Typo3 Overview. Mais tout dépend de jusqu'où vous voulez aller. Si vous trouvez TypoScript très embrouillé, vous obtiendrez un excellent résultat avec très peu d'options et restituerez ensuite le contenu avec vos propres PHP-scripts. Vous pouvez aussi baser votre projet sur un des modèles (templates) standards qui sont du type fixed layout, mais extrêmement facile à configurer pour une large possibilité d'options différentes. Qu'est ce que le TypoScript template (gabarit)? Préalable du traducteur Je me permets, Kasper m'en excusera d'introduire cet addendum pour tenter de vous faire rapidement et clairement comprendre quelques mécanismes fondamentaux dans le fonctionnement de Typo3 quand à la restitution des pages. Je dois cette illumination à Maries Cohen qui dans un document, Typo3 Template Basics que vous trouvez à cette adresse réussit à nous expliquer, preuve à l'appui, c'est à dire son site, et avec beaucoup de simplicité et d'efficacité les composants et comment ils interagissent. Comme elle nous l'explique, vous constaterez qu'il existe trois éléments qui interagissent lors du processus de restitution puis d'affichage d'une page par Typo3 : 1. Part 1: HTML Template (Gabarit Html) dont l'exemple qu'elle nous montre correspond à la structure de son site avec le bandeau, puis le menu du dessus, etc.. 2. Part 2: Typo3 Template (Gabarit Typo3) dont elle nous montre le contenu et dont nous pouvons constater les effets sur son site. Le Template (gabarit) Typo3 définit pour Typo3 au moment de la restitution comment il doit interagir avec le HTML Template et le CSS Stylesheet ainsi que différentes manières qu'il doit appliquer pour afficher la page.. Le Typo3 Template est composé de trois sections principales : Constants, Setup et Static. 3. Part 3: CSS Stylesheet (Feuille de Style en cascade) habituelle pour tous les habitués de la publication sur Internet ou en Html. Noterez la distinction introduite de restitution (pourrait aussi s'appeler mise en page mais ce serait trop restrictif) et affichage qui met en jeu notamment le cache des pages. Overview Normalement un "template" est un FICHIER HTML qui décrit une composition (layout) et certaines des zones (areas) qui devraient être substitués par un autre contenu (content) déterminé. Dans Typo3 vous pouvez utiliser cette approche, même si vous faites du TypoScript. Voir les autres didacticiels pour plus d'information. Mais un "template" ou un "template record" (gabarit enregistré) comme celui dont on parlera dans ce document est en fait un enregistrement (record) dans une table, nommée "sys_template", de la base de données de Typo3. Le fait d'enregistrer un lien entre une Page quelconque et ce "template record" va définir la manière dont la page va s'afficher en appliquant le Template auquel on l'a associée. Pour comprendre les Templates, vous devriez lire le Guide d'introduction à TypoScript. Vous trouverez aussi une information précise et détaillée dans le document TSREF (Ts Référence). Vous êtes connecté en tant que admin sur Typo3 et dans le menu (cadre de gauche) vous sélectionner l'option Doc, puis sélectionner un Template dans la liste des objets proposés, par exemple "NEW SITE, based on standard" qui a été vu dans TypoScript By Example - 3

4 Quickstart tutorial. Cette page est une vue d'ensemble des champs de la table du Template : 1. "Template title": titre qui apparaîtra dans la liste des enregistrements sur l'onglet web-tab Choix libre 2. "Website title": titre du site apparaîtra comme titre du Browser HTML-title et précédant celui des pages affichées (page-titles). Sur cette page Typo3.org (website title) précède Document library. 3. "Constants": contient les "Constantes que vous déclarez et qui sont ensuite utilisées à fin de substitution dans le champ setup. Exemple : "styles.content.textstyle.size" déclarée est insérée dans le champ setup de la manière suivante "{$styles.content.textstyle.size". Les constantes sont substituées dans le même ordre que ceux présenté dans ce champ. Il est important de comprendre que des constantes ne sont pas employées en tant que variables de programmation. Elles substituent seulement les instances des constantes déclarées lors de l'installation. Notez que les instances des Constantes que vous déclarez sont rajoutées à celles des gabarits (template) existants de la rootline ("RootLine". This is an array with information about title, uid from $uid an back to the root) et s'ajoutent également aux constantes déclarés dans les gabarits inclus (voir "Clear" (6)). 4. "Setup": Ce champ contient le code de configuration de TypoScript. Employer les constantes du '"champ Constantes" (3) pour insérer facilement des valeurs de propriétés avec variantes ou des valeurs globales. Notez que les instances du champ setup sont rajoutés à celles du champ setup inclus dans les gabarits (template) préexistants dans le rootline ainsi qu'à celles incluses dans les gabarits inclus (voir au-dessous (6))"clear". 5. "Ressources": Ce champ peut contenir des médias comme des images, des masques, des polices Truetype, des feuilles de styles (stylesheets), du HTML et des documents de texte Ceux-ci peuvent être référencés depuis TypoScript (Datatype "ressource") et sont alors alors copiés avec les gabarits (template). Lors de la libélisation d'une référence à une "ressource", utilisez cette déclaration : "image*.gif" au lieu de : "image.gif". L'emploi de l'astérisque prépare le Gabarit pour la duplication car "image*.gif" permet d'assortir le gabarit dupliqué avec son image correspondante dont le nom sera "image_01.gif" qui est justement celui généré lorsque un gabarit est reproduit par duplication. 6. "Clear" & "Rootlevel": "Clear" donne la possibilité d'annuler les déclaratifs des champs constantes et/ou configuration (setup) de gabarit pré-positionnés dans la lignée (rootline). Pour une explication plus approfondie, se référer au TSref. "Rootlevel" détermine que ce point de l'organigramme des pages va se comporter comme la racine (startpage) d'un nouveau site Web 7. l"include static": vous laisse inclure des gabarits statiques fournis avec Typo3 par défaut. L'ordre (à partir de la racine) est l'ordre avec lequel, les gabarits sont inclus. Les gabarits statiques sont inclus avant le Gabarit du champ "Inclure un gabarit" (8). 8. "Include basis template": Pour inclure vos propres Gabarits. Voir le cas "Include basis template" exposé ci-après. 9. "Template on next level": Vous pouvez inclure un Gabarit qui s'appliquera pour les pages à partir du prochain niveau dans l'arbre-structure hiérarchique de Typo3! 10. "Description": Écrire vos propres notes ici.. "RootLine". This is an array with information about title, uid from $uid an back to the root.. = Structure d'information concernant le Titre, le Uid (identification)et le chemin depuis la racine) TypoScript By Example - 4

5 Exemple cas : Inclure un gabarit Une approche sympathique de l'utilisation des Gabarits est celle permettant de créer des bibliothèques de code TypoScript dans un Gabarit pour l'inclure ensuite dans un autre Gabarit pour y réutiliser le code TypoScript. C'est exactement ce qu'est le Gabarit statique Mais les Gabarits statiques ne peuvent pas être édités. Ils sont distribués avec Typo3 et ne sont pas destinés à être changés, mais sont prévus pour que leurs capacités soient étendues (de nouveaux gabarits statiques seront écrits). Vous avez par contre la possibilité d'inclure des Gabarits dans d'autres Gabarits. Dans cet exemple je (Kasper) montrerai comment j'ai fait les sites Web de et Ils sont très semblables. Par conséquent, j'ai créé un Gabarit commun pour contrôler la conception. Mais j'ai également fait différentes "extensions" pour ce qui concerne l'anglais le danois etc.. Afin de partager un Gabarit entre deux sites ou plus, les sites doivent résider dans la même base de données. C'est le cas du site Web Typo3 dans les deux langues. Les avantages en sont très évidents : Tous les graphiques, pages et arrangements (layout) sont faciles à copier et à mettre à jour quand ils sont accessibles à partir de la même page d'accès Typo3. Regarder l'image ci-contre (clic-souris pour une fenêtre séparée). Dans la page racine (rootpage) des sites '"com" et 'dk" il y a un Gabarit ("Rootlevel" étant cliqué). Chaque Gabarit inclut le Gabarit principal, qui est trouvé dans le dossier "Skabeloner" (signifie "template" en danois) Le Template principal contrôle quasiment en totalité l'arrangement (layout) des sites. Et chaque site partage en commun ce Template!! Regardez maintenant les images ci-contre. Elles font partie du contenu dans chacun des Templates de "com" et de "dk". Vous y voyez quelques valeurs qui sont substituées (remplacées). Pour chaque site, les contenus des métaétiquettes (meta-tag) "mots-clés (keywords) et "description" sont différents. Les constantes appropriées sont en effet substituées afin de les changer. Vous noterez également que le Template danois change quelques autres paramètres. C'est très intéressant. Les changements locaux sont possibles dans un branchement du site Web tandis que l'arrangement (layout) global peut encore être changé depuis le Template principal. C'est fort sympathique de pouvoir ainsi utiliser des Templates standards. Ils ont un ensemble de constantes que vous pouvez modifier afin de personnaliser à votre site. TypoScript By Example - 5

6 Gérer la hiérarchie des Templates Vous pouvez facilement superviser quels sont les Templates inclus dans votre site avec la fonction Template Analyzer dans le module web_ts : Celui-ci montre non seulement quels sont les Templates et les Templates statiques qui sont inclus mais également dans quelles commandes (et de là où ils sont lancés) ils sont traités et si un quelconque de ces Templates a des commutateurs (witch) activés ou non tels que "Clear constants" et "Clear setup" Clear". Cas d'exemple : "Extension" Les exemples ci-dessus ont indirectement montré l'ampleur des possibilités des extensions ; Les changements spécifiques au site étaient des extensions (TypoScript substitués ou constantes) du Template principal. A présent, je vais vous montrer comment les pages FAQ de la section developer de ce site Web ont est créées : Tout d'abord, j'utilise un autre genre d'en-tête pour la section FAQ. Ce headertype a un cadre gris autour et vous pouvez choisir cet en-tête pour des items de contenu où que ce soit sur le site ("Layout 2"). Mais le type d'en-tête par défaut est "Layout 1". Ainsi pour la section FAQ (les pages "blueish" sur la première image ci-dessous), j'ai fait une extension car le type d'en-tête par défaut devrait être "2" et non "1" pour toutes les pages dans cette section, soit ce qui signifie "toutes les pages de la section FAQ et aussi à l'extérieur". "all pages from FAQ and outwards". La tâche est effectuée en créant un nouveau Template sur la page "FAQ". Dans ce Template les champs "Clear" et "Rootline" ne doivent pas être activées. Si ils le sont, une nouvelle mouture du site Web démarrera en partant de ce point au TypoScript By Example - 6

7 lieu d'être une extension au Template de base! Les informations du Gabarit sont montrée sur la deuxième image. Comme vous le voyez le type d'en-tête par défaut est spécifiée à "2" et la taille du bodytext par défaut est spécifiée à "1" (normalement "2"). Naturellement je pourrais changer la taille de police et le type d'en-tête pour chaque élément de contenu mais franchement, c'est une manière tout à fait pénible de faire, alors que vous pouvez la spécifier aussi simplement que ceci Contrôler la section FAQ pour voir pour vous-même! Cela fonctionne. Aucune dispute. Check the FAQ-section and see for yourself! It works. Aucun désagrément.. Managing extensions Encore une fois, le Template Analyzer montre sa maniabilité ici : TypoScript By Example - 7

8 Pour plus de lecture Dans le TSref il y a également une explication de la façon dont les descripteurs fonctionnent. Gabarit standard Introduction Typo3 offre une approche facile pour créer des sites Web et pour commencé avec TypoScript. Un groupe de Gabarits standards est packagé avec Typo3. La plupart des sites Web basés sur Typo3 se fondent sur des Gabarits de TypoScript. Afin de comprendre les Gabarits, vous devriez lire cette introduction à TypoScript. Vous trouverez également une information complète dans le TSref. Si vous voulez tester certains des Gabarits standards et étudier des exemples interactifs, se référer s'il vous plaît au demosite sur le site demo.typo3.com. TypoScript By Example - 8

9 Table static_template Les Gabarits statiques sont des enregistrements de la table "static_template" et sont des enregistrements de niveau racine. Cela signifie qu'ils sont toujours trouvés à la racine de la hiérarchie des pages (pagetree) et peuvent seulement être visualisés par des administrateurs. La table est également "en lecture seulement" (configuration dans les tables.php). C'est tous simplement parce que les Gabarits statiques ('"static_template") contiennent des enregistrements qui ne sont pas censés être changés par n'importe qui. Ils agissent comme un socle pré-définis (preset chunks) de code de TypoScript. La table "static_template" est distribuée avec chaque nouvelle version de Typo3 (contenant les enregistrements ajoutés). Ci-dessous, vous pouvez voir le contenu du Gabarit statique tel qu'il était en septembre Celui-ci a pu avoir changé pour la version en cours de Typo3. Mais il est utile pour expliquer comment cela fonctionne : 1. "template:...": C'est le Gabarit standard. Quand vous voulez créer un site Web basé sur un Gabarit standard, vous ajoutez ceci en-tête de la liste des gabarits statiques inclus dans votre Gabarit Tous les Gabarits standards incluent le Gabarit"content (default)" pour la fonction de restitution de Typo3. 2. "content (default)": Ce Gabarit contient un coject "tt_content" qui sert pour restituer les items de contenu d'une page. Inclus par tous les Gabarits jusqu'à présent. Certains des types les plus exotiques (Ctype) concernant des items de contenu ne sont cependant pas restitués. "styles.content (défaut)" est inclus dans ce Gabarit. 3. "styles.content (défaut)" : Cet élément contient un grand nombre d'objets TS prédéfinis pour l'usage avec par exemple content-rendering, "powered-by"-logos, content-inserting, "actionner-by"-logos, et ainsi de suite. Ces objets sont largement utilisés par "content (default)" et beaucoup de propriétés sont réglables en tant que constantes déclarées pour une modification facile du comportement de la restitution des contenus 4. "cset (default)" : C'est un genre d'extension au Gabarit "styles.content (default)". L'objectif est de substituer par exemple des définitions cibles (target-definitions) dans un grand nombre des objets du Gabarit "styles.content (default)" par une constante commune, ce qui le rend beaucoup plus commode la modification des valeurs pour tous les objets cibles. cset concerne également d'autres valeurs applicables comme les couleurs de fond et les couleurs des polices et il concerne donc la couche supérieure de restitution (apparence). Très utile pour la création rapide des sites Web basés sur les Gabarits standards ; 1) Inclure le Gabarit standard. 2) Inclure "cset (default)". 3) Remplacer quelques paramètres de "cset"... Voyez comment il est utilisé dans les Gabarits sur le demo-site. 5. "frame set.": Différents frame sets (jeu de cadre) standard. Utilisé par quelques Gabarits standards. 6. "styles...": Certains objets standards comme les menus, les sitemaps, les en-têtes et ainsi de suite. Cette section peut se développer avec un bon nombre de pré réglages intéressants comme des panneaux(boards), catalogues, calendriers systèmes (calender-systems) et ainsi de suite. Content rendering details Lire le document content_rendering.pdf ou se référer à Typical setup of a standard template (paramétrage typique d'un gabarit standard) C'est la hiérarchie d'un site Web fictif basé sur le Gabarit standard BUG : TypoScript By Example - 9

10 Dans le Template Analyzer il ressemble à ceci : Tutoriel de base : démarrez un nouveau website A partir d'ici, encore plus d'exemples de TypoScript Un simple website à partir de zéro Si vous voulez commencer un site Web à partir du tout début, vous devez créer un Gabarit à la première page du site Web. Cette page peut être référencée comme "racine du site Web" ou généralement Page d'accueil. La "page d'accueil" n'est pas automatiquement la toute première page dans l'arbre hiérarchique des pages (pagetree) de Typo3 mais peut être toute page de l'arbre que vous voulez voir se comporter en tant que point de départ d'un site Web! Le Gabarit initial doit avoir les boîtes à cocher (checkboxes) "Clear constants and setup" et "Rootlevel" activées. Afin de comprendre le pourquoi, vous devez savoir que tous les Gabarits à partir de la racine du pagetree et en parcourant le pagetree sont lus et exécutés.ceci s'appelle le "rootline" : TypoScript By Example - 10

11 Dans cette image, sur la droite, le rootline (chemin à la racine) de la page "Experienced web..." (3) parcourt tout le chemin depuis la page " (zéro). Ceci parce qu' il y a un Gabarit enregistré à la page " avec l'indicateur de rootlevel activé (voir ci-dessous). Sur la gauche vous voyez comment le rootline est représenté à l'intérieur de la zone de données PHP (PHP-array. Si vous vous posez une question comme "Est-ce que la page 730 est dans le rootline?" alors la réponse est oui dans ce cas-ci, parce que la page avec l'identification 730 ("Introduction") s'avère justement être la deuxième page dans le rootline (à index 1). Veuillez voir le TSref pour plus d'information La case "Rootlevel" activée implique que le Gabarit annonce le début d'un nouveau site Web pour la page où le Gabarit se trouve mis en fonction. Si vous ne placez pas ce checkbox, le Gabarit agit en tant qu'extension à n'importe quel Gabarit dans le rootline avant lui. La case "Clear constants" activée implique que toutes les constantes des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page. "Clear setup" activée implique que n'importe quel code de TypoScript des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page. Si vous essayez de regarder la page maintenant, un errormessage apparaîtra Vous devez écriture quelques instances de TypoScript dans les champs "Constants" et "Setup". Normalement vous incluez certains des Gabarits statiques pour commencer, mais pour cet exemple nous faisons un petit Gabarit à partir de zéro. Écrivez donc les instances suivantes dans le champ "Constants" : bgcol = red Vous avez à présent défini une constante appelée - "bgcol" avec la valeur "red". Nous allons insérer d'autres constantes dans le champ "setup" en insérant : page = PAGE page.typenum = 0 page.bodytag = <BODY bgcolor="{$bgcol"> page.10 = HTML page.10.value = Hello World page.10.value.case = upper Ceci ressemble à ceci dans votre browser TypoScript By Example - 11

12 Cet exemple montre un certain nombre de points concernant TypoScript. Commençons avec les deux premières lignes. Ici "page" est définie pour être une PAGE-object. Une propriété exigée pour un PAGE-object est la valeur de 'typenum qui est spécialement utilisé quand un site Web utilise des cadres (frames) (dans ce cas, le typenum identifierait les différents cadres). Si le typenum est zéro, il correspond alors à une page sans la valeur de type, soit par exemple "?id=51". C'est le cas des sites Web sans cadres (frames) Une autre propriété de PAGE-objet est "bodytag". A partir d'ici, vous entrez dans le domaine des étiquettes qui concernent le corps de page. Veuillez noter que la couleur de fond est rouge parce que nous avons inséré la constante dans le champ "Constants". Enfin, un Content-objet du type "HTML" est défini. La valeur est mise à "Hello World". Ceci est envoyé hors fonction Typo3 au site Web (fonction Php). Mais vous verrez que la restitution est faite en haut de casse (majuscule) par ce que la valeur et toutes les propriétés sont analysée par la fonction "stdwrap" (habillage standard). Une propriété de "stdwrap" est le "case" qui peut être "upper" ou "lower". Faites une conjecture de ce que peut faire "lower" Un website avec un menu léger Maintenant nous ajouterons un petit menu au site Web.Ce menu doit être situé au-dessus du texte "Hello World". Ajouter maintenant ceci au bas du champ "Setup" page.5 = HMENU page.5.1 = TMENU page.5.1.wrap = <BR><BR> page.5.1.no { linkwrap = <font color=yellow> </font> ATagBeforeWrap = 1 Et voici comment vous définissez un nouvel objet de contenu (contenu-objet) à la position 5 dans la content-array (structure d'information) de la page. Le type d'objet est HMENU. HMENU a une structure d'information numérique des objets menu. Ici nous utilisons "TMENU" comme menu-objet pour le premier niveau. Ceci nous donne un menu de type texte TypoScript By Example - 12

13 textbased. Pour le TMENU-objet nous avons placé la propriété "enveloppe" (wrap). Comme vous pouvez vous en rappeler, "a wrap (enveloppe) signifiera qu'elle sera fractionnée par le caractère " " et que les deux premières parties seront placées autour de "quelque chose". Dans ce cas-ci (page.5.1.wrap = < BR><BR >) le menu entier est enveloppé de sorte que deux nouvelles lignes apparaissent après le menu. Puis, quelques propriétés sont définies pour.no" sous TMENU..NO" signifiant l'installation des éléments de menu en condition normale. Une autre des conditions peut être "ACT" (Active) qui entraînerait que quand un menu-élément est quelque part dans le chemin d'accès" (path), il est intégré dans le site Web. Par exemple vous pourriez changer la couleur de l'élément en blanc si vous voulez indiquer visuellement sur le menu-élément qu'un visiteur surfer a récemment écrit sur cette section du site. Sous.NO" vous définissez que chaque menu-élément est enveloppé dans une étiquette de police qui met en jaune le lien. "ATagBeforeWrap" est une option qui vous indique que l'étiquette de Lien (< A >) doit être habillé dans le menu-élément avant l'application de l'étiquette de Police (ou bien la couleur jaune sera ignoré par l'étiquette-couleur normale). Insérer un menu graphique Au lieu du menu textuel que vous avez juste défini, vous pourriez insérer le menu graphique du site Web Typo3. Ceci serait effectué en utilisant ce code en lieu et place du code précédent : page.5 < temp.topmenu Contenu du site Maintenant vous voudriez ajouter le contenu au site Web. Dans la solution standard de TypoScript le table de contenu principale est "tt_content". Ainsi vous ajoutez un nouvel objet contenu du type CONTENT. Vous avez mis la propriété "table" avec la valeur tt_content. Pour configurer la requête du sql-select vous définissez la propriété "pidinlist" de l'objet "select". Quand vous le mettez à TypoScript By Example - 13

14 "this" le pid correspondant à l'enregistrement du contenu (content-record) DOIT correspondre au id de la page actuelle! "orderby" est mis avec la valeur "sorting" qui correspond à la colonne dans la table tt_content qui va déterminer le tri des éléments page.10 = CONTENT page.10 { table = tt_content select { pidinlist = this orderby = sorting Pour que cela fonctionne, vous devez définir comment chaque enregistrement de contenu va être disposé (layouted). Par défaut ceci est défini par le root-object l'objet racine "tt_content". Voici un exemple court de TypoScript qui produirait du contenu pour l'en-tête et le texte de CType : tt_content = CASE tt_content.key.field = CType tt_content.header { 1 = TEXT 1.field = header 1.wrap = {$cheaderwrap 1.space = 3 2 tt_content.text < tt_content.header tt_content.text { 3 = TEXT 3.field = bodytext 3.fontTag = {$cbodytextwrap 3.br = 1 3.space = 10 3.parseFunc { makelinks = 1 makelinks.http.keep = path makelinks.http.wrap = <B> </B> makelinks.mailto.keep = path makelinks.mailto.wrap = <FONT color="blue"> </FONT> makelinks.mailto.atagbeforewrap = 1 Il y a deux constantes ici, cbodytextwrap et cheaderw rap Celles-ci doivent être alors définies dans le champ Constantes du Gabarit et avoir pour valeur i cheaderwrap = <FONT face="verdana" size="3" color="#333333"><b> </B></FONT> cbodytextwrap = <FONT face="verdana" size="2"> </FONT><BR> Maintenant, ceci nous donnerait une en-tête de taille 3, Verdana, en gris et gras. Le bodytext serait formaté également avec le Verdana mais en taille 2 et avec une étiquette < BR>- après la section TypoScript By Example - 14

15 Concepts &id et &type id se rapporte au "numéro de page" dans Typo3, au champ "uid" de la table de page. Indique quelle page montrer type indique pour une page, quelle "partie" de la page montrer. Ceci est principalement employé quand vous faites de sites basés sur des cadres 'frame'. Vous pourriez l'employer pour d'autres situations également. Je n'expliquerai pas le frameset ici, mais vous trouverez de quoi dans le Tutoriel 3, "Frames avec Typo3". Par contre, je vais donner un conseil sur la façon dont le paramètre "type" d'un URL est employé : Considérer le testsite : id=10 ("index.php?10") ramène cette même page. "type" n'est pas défini, mais par défaut, c'est zéro et le résultat est identique Essayer de changer la valeur du type &type=1 &type=2 &type=3 Comme vous pouvez voir une valeur du type avec 3 valeurs différentes donne le même résultats dans une page nonconfigurée. C'est logique parce qu'en regardant le TypoScript dans le Gabarit, nous nous rendons compte que "typenum=3" n'est pas défini TypoScript By Example - 15

16 Mais comment le Gabarit apparaît?. Jetons un coup d'oeil dans le Template Analyzer Comme vous voyez le Gabarit inclut beaucoup de static_template et le premier d'eux semble être un static_template avec un cadre (frameset) dedans. En jetant un coup d'oeil à ce static_template, nous voyons ceci: 3 Objets page sont définis, "page", "left" et "frameset". Chaque objet PAGE définit l'apparence visible à l'affichage en se servant de la valeur "&type" Enveloppes (wraps) L'enveloppe est un concept très important pour beaucoup d'objets de TypoScript.. Une enveloppe "wrap" est une chaîne de caractères (text string), qui est délimité (divisé en parties) par " " (ligne verticale, ALT+0124). Ceci est une enveloppe wrap : <B> </B> Et si la chaîne de caractères "World" est enveloppée par l'enveloppe, le résultat est ceci : <B>WORLD</B> Noter que quoiqu'il y ait les espaces entre les parties de l'enveloppe et le diviseur (" "), chaque pièce d'enveloppe est équilibrée (le réglage doit enlever les espaces blancs "whitespace" avant et après quelque chose. Les "Whitespace" sont le caractère espace, tabulation et le linebreak Vous allez pouvoir réaliser que c'est très, très utile parce que le HTML est tout à fait sur le même principe qui consiste à envelopper des choses dans des étiquettes HTML. De cette façon, il sera très facile de le contrôler et de l'exploiter. (BTW: L'enveloppe est énumérée comme un type de donnée dans le Tsref). TypoScript By Example - 16

17 Structure de données (arrays) (1,2,3,4...) Parfois, vous verrai les propriétés listées comme suit : "1,2,3,4..." ou "Array...". UN autre cas rencontré est le datatype set to "array of strings". Numerical arrays (structure de données numériques) Il est nécessaire de comprendre que TypoScript n'est pas un langage comme le Javascript. TypoScript est plus une liste de déclarations (définitions). L'ordre des déclarations est positionné par les array numbers. En fait TypoScript est enregistré dans une structure de données (array) PHP. Il n'est pas exact de dire qu'on ne puisse enregistrer des déclarations qu'avec TypoScript. En effet, quelques déclarations fonctionnent par appel de fonctions PHP (comme le stdwrap). Ils peuvent manipuler et même obtenir des données de résultat. C'est pourquoi TypoScript est beaucoup plus flexible et puissant que les simples descripteurs de HTML. Un bon exemple des propriétés qui soient de type structure de données numériques (numerical array) est l'objet Page. Le fait à noter concernant l'objet PAGE est qu'il devrait renvoyer un certain contenu. Afin qu'il puisse le faire, vous devez lui rattacher quelques objets contenu (contents) (cobject) (nous le verrons plus tard). Un objet cobject assez simple est "HTML" ou "TEXT". Ils font la même chose (mais pas de la même manière). page = PAGE page.typenum=0 page.10 = TEXT page.10.value = Hello world Ceci définit un objet Page et affichera les textes "Hello world" sur votre browser. "10" pourrait être ou tous nombres entiers. Mais pourquoi "10" alors. Pour moi c'est une tradition, mais ce sujet intervient maintenant, parce que si vous voulez ajouter encore plus de contenu à la page, comment vous faites cela? Et bien, vous ajoutez juste un autre cobject à la structure de données (array) comme ceci : page = PAGE page.typenum=0 page.10 = TEXT page.10.value = Hello world page.20 = TEXT page.20.value = <BR>Are you listening? Maintenant pourquoi utiliser "20"? Bien, en fait, utilisez n'importe quel nombre plus grand que 10. Mais laissez de la place pour de nouveaux cobjects entre 10 et 20. On ne sait jamais Une chose importante à comprendre est que les alignements numériques sont toujours triés. Les alignements non numériques n'ont jamais n'importe quelle commande attachée à eux, mais les alignements numériques ont. La conséquence des alignements numériques trié par leur nombre est celle : Une chose importante à comprendre est qu'une structure de données numérique est toujours triée. Les "structures de données" non numériques n'ont jamais d'ordre rattachée à eux, mais les "structures de données" numériques en ont toujours. La conséquence des "structures de données" numériques triées par leur nombre est celle-ci : page = PAGE page.typenum=0 page.10 = TEXT page.10.value = Hello world page.5 = TEXT page.5.value = <BR>Are you listening?... la ligne "<BR>Are you listening?" est maintenant affichée avant "Hello world" quoiqu'elle aient été définies dans un ordre inverse. Normalement vous verrez TypoScript qui est bien codé dans l'ordre de la "structure de données" numériques, mais c'est juste une bonne habitude du programmeur du fait qu'il est plus lisible de cette façon. String arrays (structure de données de chaîne de caractères) Chaque fois qu'une chaîne de caractères est défini (comme l'objet de META dans TypoScript), c'est parce que les clés (éléments dans l'array) sont uniques et cela à un sens. META est un bon exemple. Si vous voulez mettre des Métaétiquettes "description" et "mots-clés"(keywords) sur votre page, faites ceci: page = PAGE page.typenum=0 page.meta.refresh = 60; index.php?id=34 page.meta.description = This is the description of the content in this document page.meta.keywords = key, words,... Ceci a comme conséquence ce code HTML dans l'en-tête du site (qui est très, très vide, si vous essayez ceci ) <meta http-equiv="refresh" content="60; index.php?id=34"> <meta name="description" content="this is the description of the content in this document"> <meta name="keywords" content="key, words,..."> TypoScript By Example - 17

18 styles.content.[xxx] Si vous étudiez le static_template, particulièrement "content (default)", vous verrez une utilisation étendue des objets du "styles.content.[xxx]". Tout d'abord, vous devez comprendre que les objets de niveau supérieur (toplevels object) nommés "temp" et "styles" sont totalement exclus après qu'un Gabarit ait été (parsed) analysé et "compilé" (by serialize()) pour enregistrement dans l'antémémoire allouée au gabarits (cache_hash). La raison en est que parfois il est très utile de pouvoir réutiliser un objet dans beaucoup d'endroits du TypoScript. Créer des objets quelque part dans les objets styles ou Temp a pour avantage que les objets peuvent y être recopiés depuis vers vos scripts tout en étant à la fin éliminés pour ménager l'espace libre dans le cache de gabarits. Vous devrez utiliser "temp." pour vos propres objets partagés, "styles." étant réservé pour fournir les objets partagés en commun pour leur utilisation dans les static_templates. Example from "content (default)" # CType: image tt_content.image = COA tt_content.image { 10 = < lib.stdheader 20 < styles.content.imgtext Dans cet exemple un objet du static_template "styles.content (défaut)" est copié sur la position "tt_content.image.20". Et cela ressemble à ce que vous voyez dans ce navigateur d'objet (browser object): Regarder dans le Gabarit statique (tatic_template) "styles.content (défaut)" nous voyons que l'objet "styles.content.imgtext" est défini comme ceci : # imgtext styles.content.imgtext = IMGTEXT styles.content.imgtext { imglist.field = image textpos.field = imageorient imgpath = uploads/pics/ imgobjnum = 1 1 { file.import.current = 1 file.width.field = imagewidth params = align="top" imagelinkwrap = 1 TypoScript By Example - 18

19 ... maxw = {$styles.content.imgtext.maxw maxw.override.data = register:maximagewidth... Maintenant, si je veux changer la valeur de "styles.content.imgtext.maxw" en "400", alors j'ai deux options. Mais on y voit aussi une erreur très commune et on doit plutôt essayer ceci: styles.content.imgtext.maxw = 400 Vous voyez, ceci ne vous aidera pas. La raison en est que l'on change la valeur dans l'objet "styles.content.imgtext" et pas dans "tt_content.image.20" où il est de fait et au final utilisé dans ce cas-ci. Alors, vous pouvez choisir l'une de ces possibilités 1) Puisque "styles.content.imgtext" est copié "tt_content.image.20" par l'opérateur "<" de TypoScript, toutes les propriétés de "styles.content.imgtext" sont maintenant également dans "tt_content.image.20". Par conséquent vous pouvez changer la valeur de cette façon: tt_content.image.20.maxw = 400 C'est manifestement en accord avec le nodetree (arbre de noeud) du browser d'objet, n'est-ce pas? 2) Si vous changez la valeur de "styles.content.imgtext.maxw" directement, vous devez également la reproduire là ou elle est utilisée : styles.content.imgtext.maxw = 400 tt_content.image.20 < styles.content.imgtext Ceci fonctionne également, mais on se rende compte qu'on efface tous les changements précédents faits dans "tt_content.image.20" (à la manière de la méthode 1 présentée dans l'exemple) Je recommande la méthode 1 Quoi qu'il en soit vous devez vous rendre compte que l'avantage astucieux des objets 'styles.content.[xxx ]" réside dans ce qu'il fournit les propriétés par défaut qui peuvent être utilisés dans tout vos Gabarits. Alors que le fait de changer "styles.content.[xxx]" et de le recopier ailleurs n'apporte pas de changement aux autres objets qui ont été positionnés sur "styles.content.[xxx]" Pour exemple, considérez "tt_content.textpic.20" qui utilise également "styles.content.imgtext" : tt_content.textpic = COA tt_content.textpic { 10 = COA 10.if.value = if.isLessThan.field = imageorient = < lib.stdheader 20 < styles.content.imgtext 20.text.10 = COA 20.text.10 { if.value = 24 if.isgreaterthan.field = imageorient 10 = < lib.stdheader 20.text.20 = < tt_content.text.20 Afin de changer également la valeur ici, vous devez ajouter cette ligne: tt_content.textpic.20.maxw = 400 Maintenant, pourriez-vous ajouter ceci maintenant? styles.content.imgtext.maxw = 400 tt_content.image.20 < styles.content.imgtext tt_content.textpic.20 < styles.content.imgtext La réponse est "non" dans ce cas-ci, parce que si vous jetez un coup d'oeil sur le TypoScript pour tt_content.textpic, les propriétés de styles.content.imgtext sont modifiées après que l'objet soit copié < styles.content.imgtext 20.text.10 = COA 20.text.10 { if.value = 24 if.isgreaterthan.field = imageorient 10 = < lib.stdheader TypoScript By Example - 19

20 20.text.20 = < tt_content.text Cette situation est généralement résolue en utilisant les constantes largement mises en application, et dans ce cas spécifique vous avez l'occasion de changer la constante "styles.content.imgtext.maxw". TypoScript By Example - 20

21 Sections éducatives Introduction A partir de maintenant, vous êtes encouragé à suivre les exemples en utilisant le Testsite fourni avec Typo3. A tout moment, référez-vous à TSref de manière à vous familiariser avec lui. Ce sera votre bible quand vous travaillez avec Typo3. (When you're not working with Typo3, I can recommend the true God's Word instead. Much better in real life.) Utiliser le Testsite standard avec votre nouveau Gabarit rattaché à la racine du branchement de la page "Startpage". Code notation conventions: 1) Tous les codes TypoScript utilisent la fonte courrier page = PAGE page.typenum=0 page.10 = TEXT page.10.value = Hello world 2) La plupart des exemples omettent les deux premières lignes qui sont supposées présentes : page.10 = TEXT page.10.value = Hello world TypoScript By Example - 21

22 3) Le code peut être raccourci dans le cas d'exemples où le changement ne concerne qu'une seule ligne. Les changements sont mis en valeur en rouge) page.10 = TEXT page.10.value = Hello world page.10.case = upper a pu également être énoncé de cette manière:... page.10.case = upper TypoScript By Example - 22

23 stdwrap Le concept stdwrap (Prononcé "Standard wrap" - enveloppe standard ). stdwrap est un assistant qui conviens dans beaucoup de situations. Ce concept d'enveloppe est mature. Pour illustrer avec des exemples, je vous présenterai l'utilisation des objets de contenu TEXT et HTML (cobjects). Ré ferrez-vous à TSref: Le "TEXT" cobject semble avoir pour propriété.value.le Datatype est ".value" lequel est ce que vous souhaitez du moment qu'il figure dans la liste des datatypes. (Avec datatype qui est "HTML-color", vous auriez à indiquer une couleur HTML comme valeur, telle que le red ou encore le code "#FF0000"). Le coobject "HTML" lui aussi a pour propriété.value. Il est défini comme étant "HTML" ce qui concrètement reviens au même que pour l'objet TEXT. De fait, c'est tout simplement une valeur de chaîne de caractères (string-value). La différence entre les deux cobjects semble être la manière dont stdwrap est implémenté (mis en oeuvre). Mais jetez d'abord un coup d'oeil sur la description de l'objet stdwrap dans le TSref. Ce sont certaines des propriétés de stdwrap. Fondamentalement l'objet stdwrap (parfois également appelé "fonction") traite (principalement du moins) le contenu de manière quelconque. Une propriété qui a une fonction apparente immédiate est la propriété.case (casse de caractère) de l'objet stdwrap. ".case" n'est pas énuméré dans ces exemples, mais aller regarder par vous-même dans le TSref (au fait, il est vraiment temps que vous ouvriez Le livre") La propriété.case peut convertir la casse (ensemble des caractères d'une même police) en entrée. A présent, en accord avec la description des cobject TEXT et HTML, on va présenter la manière dont ils fonctionnent : Le cobject TEXT : Les propriétés de stdwrap sont incluses dans l'objet TEXT lui même. Ceci signifie que : page = PAGE page.typenum=0 page.10 = TEXT page.10.value = Hello world page.10.case = upper TypoScript By Example - 23

24 ... va afficher en résultat "HELLO WORLD" Le cobject HTML: Les propriétés de stdwrap sont incluses dans la propriété.value de l'objet HTML. Cela impliquera que page = PAGE page.typenum=0 page.10 = HTML page.10.value = Hello world page.10.value.case = upper... va afficher "HELLO WORLD" (Commentaires: Les propriétés de stdwrap sont un peu in conséquemment mis en application sur l'objet de TEXT parce que la propriété '.value" est "mélangée" avec les propriétés de stdwrap. Heureusement la propriété ".value" n'est pas définie pour l'objet stdwrap. Mais de toute façon, c'est une mauvaise conception - peut-être aussi une confusion concernant l'objet "TEXT". C'est le cas également de quelques autres objets comme CARRAY Tandis que vous en êtes là... Essayez de regarder la source de la page que vous avez juste créée. Notez que Typo3 définit par défaut une en-tête et la bodysection de HTML pour vous! En plaçant des propriétés pour l'objet Page, vous pourrez cependant modifier la teneur de ces derniers sections. Voir même les neutraliser. Implémentation générale Le stdwrap est très puissant et ainsi compense le fait que TypoScript ne peut pas vraiment être programmé pour contrôler aucun des éléments de la structure, à l'exception de "conditions", puisque vous pouvez faire en sorte que stdwrap compare des valeurs, puis sur la base du résultat de choisir de renvoyer une autre valeur, et ainsi de suite. Normalement vous verrez des propriétés stdwrap mises en application comme vous avez pu voir la propriété de.value du cobject HTML. Réferrez-vous à l'exemple acn dans le TSref qui est tout comme... enfin, presque la moitié des valeurs des propriétés que vous pouvez définir, y compris plusieurs des propriétés pour le stdwrap elle-même!' Propriétés de stdwrap Comme nous avons vu précédemment, stdwrap est un concept qui fonctionne - basé sur ses propriétés et sur un certain.value. Mais il y a une autre tâche importante effectuée par stdwrap qui peut être bien plus populaire (ou nécessaire). C'est celle permettant d'aller récupérer un contenu externe, par exemple le titre de la page, la date du jour, d'un cobject, du nombre de rangées d'une requête, d'une liste de fichiers d'un répertoire ou d'une variable globale. En fait, stdwrap est un concept divisé en trois parties. 1. Get data (obtenir) 2. Override / Conditions 3. Parse data (analyse et traitement) L'exemple au-dessus montre seulement les possibilités de parsing du stdwrap (3). Nous allons maintenant regarder le "Get Data" (1) et le "Override/Condition" (2), qui fournissent une manière de faire des structures de commande dans Typo3 (bien que de manière un peu simpliste et compliqué) Get data La propriété primaire ici est "field". Ceci ramène la valeur du champ donné par la propriété. La bonne question est : "... valeur d'un champ provenant d'où, quel enregistrement?". La réponse est par défaut la page encours "by default, the page record..." (ici, page" se réfère à la page courante sur laquelle nous sommes) "... Mais pour 'inside of' CONTENT, RECORD and HMENU cobjects, c'est le 'current record' avec lequel nous sommes en train d'opérer présentement. Vous trouverez des notes à ce sujet en regardant les descriptions d'objet. Techniquement tout ceci va dans le contenu de tslib_content rattaché à la classe tslib_cobj et le 'current record' est défini par cobj->data..current - Qu'est-ce? TypoScript By Example - 24

25 Souvent la valeur courante est référée à quelques fonctions qui doivent passer une simple valeur au "public" (c'est nous et stdwrap...) et positionne donc sur un registre "register" appelé "current", la valeur que nous avons pu facilement passer par la propriété de stdwrap ".current = 1" (boolean). Toutes les fois que le registre "courant" devra être utilisé, ce sera précisé dans le TSref. Exemple: page.10 = TEXT page.10.value = Hello world page.10.field = title (Après ces lignes "page = PAGE" et "page.typenum=0" sont présumés vrai ) L'affichage devient "Startpage" et non pas "Hello world". C'est parce que la valeur d'entrée du cobject TEXT est écrasée par la valeur du champ "title", défini par la propriété du.field de stdwrap. Wow! Si vous voulez voir, quels champs sont disponibles et leur contenu, ajoutez la propriété ".debugdata=1" C'est ce que vous obtenez (tableau en-dessous). Si vous examinez le code HTML, vous verrez que ceci doit être exactement les informations de debug ("debug-information") parce qu'elles sont envoyées sur le browser avant n'importe lequel des contenus de la page. Maintenant, essayez d'atteindre la page une seconde fois. Ceci n'est pas réapparue parce que la page s'affiche depuis le cache stocké lors du premier affichage! Wow. Ainsi parce que ce service produit seulement l'information pendant l'exécution de TypoScript (pendant la restitution et affichage de la page), vous devez continuellement effacer le cache (ou placer une option no_cache) afin de voir le processus d'affichage complet (restitution et affichage). Exemple: Obtenir un autre champ page.10 = TEXT page.10.value = Hello world page.10.field = crdate Ceci produit un nombre, qui est le temps UNIX écoulé depuis 1970 (en nombre de secondes). TypoScript By Example - 25

26 Challenge (stdwrap/1) En utilisant les parsing-properties (propriétés d'analyse et traitement) du stdwrap, pouvez-vous formater cette date sous une apparence de résultat humainement lisible? Exemple:.data Si vous vouliez obtenir d'autres valeurs, la propriété.data est le plus souvent suffisante. Vous pouvez même l'employer pour obtenir vos champs comme précédemment. Ainsi page.10 = TEXT page.10.field = title ET page.10 = TEXT page.10.data = field:title fait la même chose dans ce cas-ci (exception de l'objet TMENU, pour lequel le '->') Va obtenir la valeur d'une variable globale. Avant que vous continuiez ici, veuillez aller sur "index.php?id=5" page.10 = TEXT page.10.data = global:id donne "5" page.10 = TEXT page.10.data = global:http_get_vars id donne aussi "5" (cette fois ci proviens de HTTP_GET_VARS[id]) page.10 = TEXT page.10.data = leveltitle:1 donne "Content elements" (ce qui est le titre de la page au niveau 1 dans la rootline - vous êtes actuellement dans la branche 'Startpage/Content elements/insert content') Challenge (stdwrap/2) Pouvez-vous faire en sorte que la propriété.data ramène le titre de la page située un niveau avant la page courante ('page du parent ')? Override / Conditions stdwrap fournit simplement un "control structures" (structure de contrôle) au moyen de la comparaison de certaines propriétés. Mentionnons certaines d'entre elles qui sont appelés override, ifempty, required, if, fieldrequired. page.10 = TEXT page.10.value = Hello world page.10.override = Hello heaven donne "Hello heaven" parce que si override revoit quelque contenu que ce soit, alors la valeur originale est substituée. page.10 = TEXT page.10.value = Hello world page.10.override.field = subtitle Meilleur exemple, parce que maintenant "Hello world" est substituée seulement si le champ de substitution de la page courante n'est pas vide. Dans la plupart des cas ce champ est vide, mais essayez avec "index.php?id=20"... TypoScript By Example - 26

27 Challenge (stdwrap/3) Pourriez vous le contourner en employant d'autres propriétés comparatives (comparing properties) - de sorte que la valeur par défaut soit le sous-titre, mais au cas où elle serait vide, elle serait remplacée par "Hello World" Challenge (stdwrap/4) Avec vos résultats obtenus lors du défi 3, pourriez vous l'envelopper en entier avec les étiquettes <h3>...</h3>? Et pourriezvous remplacer "Hello world" avec le page-titre à sa place, lequel dans le cas présent est enveloppé (wrapped) par <font color="red">... </font> TypoScript By Example - 27