typoscript by example - bejaia - actualités

TypoScript By ExampleRevised Kasper Spring 2001 – french release 11/2003 (terry Durant)

Extension Key: doc_core_tsbyex_fra

Copyright 2000-2002, Kasper Skårhøj, <[email protected]>

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

TypoScript By Example - 1

Table of ContentsTypoScript By Example............................... 1

Introduction.....................................................................3Ce document.............................................................. 3D'autres documentations........................................... 3En ai-je besoin?......................................................... 3

Qu'est ce que le TypoScript template (gabarit)?......... 3Préalable du traducteur.............................................. 3Overview..................................................................... 3Exemple cas : “Inclure un gabarit”..............................5Gérer la hiérarchie des Templates............................. 6Cas d'exemple : "Extension"..................................... 6Managing extensions................................................. 7Pour plus de lecture................................................... 8

Gabarit standard.............................................................8Introduction................................................................. 8Table static_template................................................. 9Content rendering details........................................... 9Typical setup of a standard template (paramétragetypique d'un gabarit standard).................................... 9

Tutorial de base : démarrez un nouveau website......10Un simple website à partir de zéro...........................10Un website avec un menu léger...............................12Insérer un menu graphique...................................... 13Contenu du site........................................................ 13

Concepts.................................................... 15“&id” et “&type”........................................................... 15Enveloppes (wraps)..................................................... 16Structure de données (arrays) (1,2,3,4...) .................. 17

Numerical arrays (structure de données numériques).17String arrays (structure de données de chaîne decaractères)................................................................17

“styles.content.[xxx]”.................................................. 18Example from "content (default)"............................. 18

Sections éducatives................................... 21Introduction...................................................................21Code notation conventions:........................................ 21

stdWrap...................................................... 23Le concept “stdWrap”................................................. 23Propriétés de stdWrap ................................................ 24

Get data.................................................................... 24Override / Conditions................................................ 26

Objets de contenu (cObject)...................... 28Introduction...................................................................28

COA.......................................................................... 28FILE.......................................................................... 30IMAGE...................................................................... 30IMG_RESOURCE.....................................................31CLEARGIF................................................................ 31HRULER................................................................... 31CTABLE and OTABLE..............................................32Gabarit (TEMPLATE)................................................35FORM (formulaire)....................................................38CAS d'exemple.........................................................40LOAD_REGISTER....................................................42

imgResource et GIFBUILDER.................... 44Introduction...................................................................44Un fichier normal en entrée......................................... 44

Masques Bitmap...................................................... 44Importer une image.................................................. 45

GIFBUILDER................................................................. 47GIFBUILDER - bases............................................... 49+calc......................................................................... 49.niceText................................................................... 50L'objet GIFBUILDER TEXT.......................................51L'objet IMAGE...........................................................51

Navigation.................................................. 53HMENU.................................................................... 53TMENU..................................................................... 53IMGMENU................................................................ 55optionSplit.................................................................57GMENU.................................................................... 57Images avec GMENU............................................... 59GMENU_LAYER...................................................... 60Prolonger un fond d'image au menu entier..............61

PHP include-scripts.................................... 64PHP_SCRIPT cObject..............................................64Inspiration................................................................. 64Exemple: “Userdefined tags”....................................65

Content rendering (restitution de contenu)..68

Introduction............................................................... 68CONTENT.................................................................69colPos.......................................................................70styles.content (default)............................................. 73lib.stdheader............................................................. 73RECORD.................................................................. 74

Réponses aux Challenges......................... 77


IntroductionCe documentC'est une introduction à l'utilisation de TypoScript. Il essaye de vous permettre de comprendre la manière dont est pensé etfonctionne 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 documentationsUn document très important est TypoScript reference (TSref), qui contient tous les détails sur TypoScript. Le problèmeavec 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 lelecteur 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 sujettraite 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ù vousvoulez aller. Si vous trouvez TypoScript très embrouillé, vous obtiendrez un excellent résultat avec très peu d'options etrestituerez 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 traducteurJe me permets, Kasper m'en excusera d'introduire cet addendum pour tenter de vous faire rapidement et clairementcomprendre 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 à cetteadresse http://www.mcuniverse.com/index.php?id=847&type=0 , réussit à nous expliquer, preuve à l'appui, c'est à dire sonsite, 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 restitutionpuis 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 lebandeau, 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 surson 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 ouen Html.

Noterez la distinction introduite de restitution (pourrait aussi s'appeler mise en page mais ce serait trop restrictif) et affichagequi 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) quidevraient être substitués par un autre contenu (content) déterminé. Dans Typo3 vous pouvez utiliser cette approche, mêmesi 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 faitun enregistrement (record) dans une table, nommée "sys_template", de la base de données de Typo3. Le fait d'enregistrerun lien entre une Page quelconque et ce "template record" va définir la manière dont la page va s'afficher en appliquant leTemplate auquel on l'a associée.

Pour comprendre les Templates, vous devriez lire le “Guide d'introduction à TypoScript”. Vous trouverez aussi uneinformation 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”, puissélectionner un Template dans la liste des objets proposés, par exemple "NEW SITE, based on standard" qui a été vu dans


“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 desenregistrements sur l'onglet “web-tab” Choix libre

2. "Website title": titre du site apparaîtra comme titre duBrowser “HTML-title” et précédant celui des pages affichées(page-titles). Sur cette page http://typo3.org/1421.0.html“Typo3.org” (website title) précède “Document library”.

3. "Constants": contient les "Constantes” que vous déclarez etqui sont ensuite utilisées à fin de substitution dans le champ“setup”. Exemple : "styles.content.textStyle.size" déclaréeest insérée dans le champ “setup” de la manière suivante"{$styles.content.textStyle.size}". Les constantes sontsubstituées dans le même ordre que ceux présenté dans cechamp. Il est important de comprendre que des constantesne sont pas employées en tant que variables deprogrammation. Elles substituent seulement les instancesdes constantes déclarées lors de l'installation. Notez que lesinstances 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, uidfrom $uid an back to the root) et s'ajoutent également auxconstantes déclarés dans les “gabarits inclus” (voir "Clear"(6)).

4. "Setup": Ce champ contient le code de configuration deTypoScript. Employer les constantes du '"champConstantes" (3) pour insérer facilement des valeurs depropriétés avec variantes ou des valeurs globales. Notez queles instances du champ “setup” sont rajoutés à celles duchamp “setup” inclus dans les gabarits (template)préexistants dans le rootline ainsi qu'à celles incluses dansles “gabarits inclus” (voir au-dessous (6))"clear".

5. "Ressources": Ce champ peut contenir des médias commedes images, des masques, des polices Truetype, des feuillesde styles (stylesheets), du HTML et des documents de texteCeux-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 pourla duplication car "image*.gif" permet d'assortir le gabaritdupliqué avec son image correspondante dont le nom sera"image_01.gif" qui est justement celui généré lorsque ungabarit est reproduit par duplication.

6. "Clear" & "Rootlevel": "Clear" donne la possibilité d'annulerles 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 despages va se comporter comme la racine (startpage) d'unnouveau 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 “gabaritsstatiques” sont inclus avant le Gabarit du champ "Inclure ungabarit" (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 quis'appliquera pour les pages à partir du prochain niveau dansl'arbre-structure hiérarchique de Typo3!

10. "Description": Écrire vos propres notes ici..

"RootLine". This is an array with informationabout title, uid from $uid an back to the root..= Structure d'information concernant le Titre, leUid (identification)et le chemin depuis laracine)


Exemple cas : “Inclure un gabarit”Une approche sympathique de l'utilisation des Gabarits estcelle permettant de créer des bibliothèques de codeTypoScript dans un Gabarit pour l'inclure ensuite dans unautre Gabarit pour y réutiliser le code TypoScript. C'estexactement ce qu'est le “Gabarit statique”

Mais les “Gabarits statiques” ne peuvent pas être édités. Ilssont distribués avec Typo3 et ne sont pas destinés à êtrechangé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 Gabaritsdans d'autres Gabarits.

Dans cet exemple je (Kasper) montrerai comment j'ai fait lessites Web de www.typo3.com et www.typo3.dk. Ils sont trèssemblables. Par conséquent, j'ai créé un Gabarit communpour contrôler la conception. Mais j'ai également faitdifférentes "extensions" pour ce qui concerne l'anglais ledanois etc..

Afin de partager un Gabarit entre deux sites ou plus, lessites doivent résider dans la même base de données. C'estle cas du site Web Typo3 dans les deux langues. Lesavantages 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êmepage d'accès Typo3.

Regarder l'image ci-contre (clic-souris pour une fenêtreséparée). Dans la page racine (rootpage) des sites '"com" et'dk" il y a un Gabarit ("Rootlevel" étant cliqué). ChaqueGabarit inclut le Gabarit principal, qui est trouvé dans ledossier "Skabeloner" (signifie "template" en danois) LeTemplate principal contrôle quasiment en totalitél'arrangement (layout) des sites. Et chaque site partage encommun ce Template ! !

Regardez maintenant les images ci-contre. Elles font partiedu 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 effetsubstituées afin de les changer. Vous noterez égalementque le Template danois change quelques autresparamètres.

C'est très intéressant. Les changements locaux sontpossibles dans un branchement du site Web tandis quel'arrangement (layout) global peut encore être changé depuisle Template principal. C'est fort sympathique de pouvoirainsi utiliser des Templates standards. Ils ont un ensemblede constantes que vous pouvez modifier afin depersonnaliser à votre site.


Gérer la hiérarchie des TemplatesVous 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 dansquelles 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écifiquesau 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 pouvezchoisir 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 letype 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 lespages 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


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 estspé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 … maisfranchement, 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 extensionsEncore une fois, le “Template Analyzer” montre sa maniabilité ici :


Pour plus de lectureDans le TSref il y a également une explication de la façon dont les descripteurs fonctionnent.

Gabarit standardIntroductionTypo3 offre une approche facile pour créer des sites Web et pour commencé avec TypoScript. Un groupe de Gabaritsstandards 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”.


Table static_templateLes 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 êtrevisualisés par des administrateurs. La table est également "en lecture seulement" (configuration dans les tables.php). C'esttous simplement parce que les Gabarits statiques ('"static_template") contiennent des enregistrements qui ne sont pascensés être changés par n'importe qui. Ils agissent comme un socle pré-définis (preset chunks) de code de TypoScript. Latable "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 2000. 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 voulezcréer un site Web basé sur un Gabarit standard, vous ajoutezceci en-tête de la liste des gabarits statiques inclus dans votreGabaritTous 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. Incluspar tous les Gabarits jusqu'à présent. Certains des types lesplus exotiques (Ctype) concernant des items de contenu nesont cependant pas restitués. "styles.content (défaut)" estinclus dans ce Gabarit.

3. "styles.content (défaut)" : Cet élément contient un grandnombre 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 sontlargement utilisés par "content (default)" et beaucoup depropriétés sont réglables en tant que constantes déclaréespour une modification facile du comportement de la restitutiondes contenus

4. "cSet (default)" : C'est un genre d'extension au Gabarit"styles.content (default)". L'objectif est de substituer parexemple des définitions cibles (target-definitions) dans ungrand nombre des objets du Gabarit "styles.content (default)"par une constante commune, ce qui le rend beaucoup pluscommode la modification des valeurs pour tous les objetscibles.”cSet” concerne également d'autres valeurs applicablescomme les couleurs de fond et les couleurs des polices et ilconcerne donc la couche supérieure de “restitution”(apparence). Très utile pour la création rapide des sites Webbasés sur les Gabarits standards ; 1) Inclure le Gabaritstandard. 2) Inclure "cSet (default)". 3) Remplacer quelquesparamètres de "cSet"..... Voyez comment il est utilisé dans lesGabarits 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, lessitemaps, les en-têtes et ainsi de suite. Cette section peut sedévelopper avec un bon nombre de pré réglages intéressantscomme des panneaux(boards), catalogues, calendrierssystèmes (calender-systems) et ainsi de suite.

Content rendering detailsLire le document content_rendering.pdf ou se référer à http://www.typo3.com/Content-rendering_an.1102.0.html

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 :


Dans le “Template Analyzer” il ressemble à ceci :

Tutoriel de base : démarrez un nouveau websiteA partir d'ici, encore plus d'exemples de TypoScript

Un simple website à partir de zéroSi 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'estpas automatiquement la toute première page dans l'arbre hiérarchique des pages (pagetree) de Typo3 mais peut être toutepage 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 decomprendre le pourquoi, vous devez savoir que tous les Gabarits à partir de la racine du pagetree et en parcourant lepagetree sont lus et exécutés.Ceci s'appelle le "rootline" :


Dans cette image, sur la droite, le rootline (chemin à la racine) de la page "Experienced web...." (3) parcourt tout le chemindepuis la page "www.typo3.com" (zéro). Ceci parce qu' il y a un Gabarit enregistré à la page "www.typo3.com" avecl'indicateur de rootlevel activé (voir ci-dessous). Sur la gauche vous voyez comment le rootline est représenté à l'intérieur dela 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 cecas-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 setrouve mis en fonction. Si vous ne placez pas ce checkbox, le Gabarit agit en tant qu'extension à n'importe quel Gabaritdans 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ésavant 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ésavant 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 incluezcertains 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 constantesdans le champ "setup" en insérant : page = PAGEpage.typeNum = 0

page.bodyTag = <BODY bgColor="{$bgCol}">page.10 = HTMLpage.10.value = Hello Worldpage.10.value.case = upper

Ceci ressemble à ceci dans votre browser

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” quiest spécialement utilisé quand un site Web utilise des cadres (frames) (dans ce cas, le typeNum identifierait les différentscadres). Si le typeNum est zéro, il correspond alors à une page sans la valeur de type, soit par exemple "?id=51". C'est lecas 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 concernentle 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 Typo3au site Web (fonction Php). Mais vous verrez que la restitution est faite en “haut de casse” (majuscule) par ce que la valeuret 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égerMaintenant nous ajouterons un petit menu au site Web.Ce menu doit être situé au-dessus du texte "Hello World". Ajoutermaintenant ceci au bas du champ "Setup"

page.5 = HMENU page.5.1 = TMENU page.5.1.wrap = | page.5.1.NO { linkWrap = | 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

“textbased”. Pour le “TMENU-objet” nous avons placé la propriété "enveloppe" (wrap). Comme vous pouvez vous enrappeler, "a wrap” (enveloppe) signifiera qu'elle sera fractionnée par le caractère "|" et que les deux premières parties serontplacées autour de "quelque chose". Dans ce cas-ci (page.5.1.wrap = | ) le menu entier est enveloppé de sorteque 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 encondition “normale”. Une autre des conditions peut être "ACT" (Active) qui entraînerait que quand un menu-élément estquelque part dans le “chemin d'accès" (path), il est intégré dans le site Web. Par exemple vous pourriez changer la couleurde l'élément en blanc si vous voulez indiquer visuellement sur le menu-élément qu'un visiteur surfer a récemment écrit surcette 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émentavant l'application de l'étiquette de Police (ou bien la couleur jaune sera ignoré par l'étiquette-couleur normale).

Insérer un menu graphiqueAu lieu du menu textuel que vous avez juste défini, vous pourriez insérer le menu graphique du site Web Typo3. Ceci seraiteffectué en utilisant ce code en lieu et place du code précédent : page.5 < temp.topmenu

Contenu du siteMaintenant vous voudriez ajouter le contenu au site Web. Dans la solution standard de TypoScript le table de contenuprincipale 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 à

"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émentspage.10 = CONTENTpage.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). Pardé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 = CASEtt_content.key.field = CType

tt_content.header { 1 = TEXT 1.field = header 1.wrap = {$cHeaderWrap} 1.space = 3 | 2}

tt_content.text < tt_content.headertt_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 = | makelinks.mailto.keep = path makelinks.mailto.wrap = | 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 icHeaderWrap = |cBodyTextWrap = | 

Maintenant, ceci nous donnerait une en-tête de taille 3, Verdana, en gris et gras. Le bodytext serait formaté également avecle Verdana mais en taille 2 et avec une étiquette - après la section

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 sitesbasés sur des cadres 'frame'. Vous pourriez l'employer pour d'autres situations également. Je n'expliquerai pas le framesetici, mais vous trouverez de quoi dans le Tutoriel 3, "Frames avec Typo3". Par contre, je vais donner un conseil sur la façondont 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 estidentique 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 non-configuré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


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 avecun 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 seservant 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 decaractères (text string), qui est délimité (divisé en parties) par "|" (ligne verticale, ALT+0124). Ceci est une enveloppe“wrap”:

 | 

Et si la chaîne de caractères "World" est enveloppée par l'enveloppe, le résultat est ceci : WORLD

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 lecaractè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).

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 dedé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'avecTypoScript. En effet, quelques déclarations fonctionnent par appel de fonctions PHP (comme le stdWrap). Ils peuventmanipuler et même obtenir des données de résultat. C'est pourquoi TypoScript est beaucoup plus flexible et puissant queles 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. Lefait à noter concernant l'objet PAGE est qu'il devrait renvoyer un certain contenu. Afin qu'il puisse le faire, vous devez luirattacher 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 = PAGEpage.typeNum=0page.10 = TEXTpage.10.value = Hello world

Ceci définit un objet Page et affichera les textes "Hello world" sur votre browser. "10" pourrait être 934290873 ou tousnombres entiers. Mais pourquoi "10" alors. Pour moi c'est une tradition, mais ce sujet intervient maintenant, parce que sivous voulez ajouter encore plus de contenu à la page, comment vous faites cela ? Et bien, vous ajoutez juste un autrecObject à la structure de données (array) comme ceci : page = PAGEpage.typeNum=0page.10 = TEXTpage.10.value = Hello worldpage.20 = TEXTpage.20.value = Are you listening?

Maintenant pourquoi utiliser "20" ? Bien, en fait, utilisez n'importe quel nombre plus grand que “10”. Mais laissez de la placepour 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 nonnumériques n'ont jamais n'importe quelle commande attachée à eux, mais les alignements numériques ont. Laconsé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 dedonnées" non numériques n'ont jamais d'ordre rattachée à eux, mais les "structures de données" numériques en onttoujours. La conséquence des "structures de données" numériques triées par leur nombre est celle-ci : page = PAGEpage.typeNum=0page.10 = TEXTpage.10.value = Hello worldpage.5 = TEXTpage.5.value = Are you listening?

... la ligne " Are you listening?" est maintenant affichée avant "Hello world" quoiqu'elle aient été définies dans un ordreinverse. Normalement vous verrez TypoScript qui est bien codé dans l'ordre de la "structure de données" numériques, maisc'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 = PAGEpage.typeNum=0page.meta.REFRESH = 60; index.php?id=34page.meta.DESCRIPTION = This is the description of the content in this documentpage.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, ...">

“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" sonttotalement exclus après qu'un Gabarit ait été (parsed) analysé et "compilé" (by serialize()) pour enregistrement dansl'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 objetdans beaucoup d'endroits du TypoScript. Créer des objets quelque part dans les objets “styles” ou “Temp” a pour avantageque les objets peuvent y être recopiés depuis vers vos scripts tout en étant à la fin éliminés pour ménager l'espace libredans le cache de gabarits.

Vous devrez utiliser "temp." pour vos propres objets partagés, "styles." étant réservé pour fournir les objets partagés encommun pour leur utilisation dans les static_templates.

Example from "content (default)"# CType: imagett_content.image = COAtt_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". Etcela 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 : # imgtextstyles.content.imgtext = IMGTEXTstyles.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

.... } 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 voitaussi 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 pasdans "tt_content.image.20" où il est de fait et au final utilisé dans ce cas-ci. Alors, vous pouvez choisir l'une de cespossibilité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 lavaleur de cette façon:

tt_content.image.20.maxW = 400C'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 elleest utilisée :

styles.content.imgtext.maxW = 400tt_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 cequ'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 = COAtt_content.textpic { 10 = COA 10.if.value = 25 10.if.isLessThan.field = imageorient 10.10 = < 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 = 400tt_content.image.20 < styles.content.imgtexttt_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”, lespropriétés de “styles.content.imgtext” sont modifiées après que l'objet soit copié... 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...

Cette situation est généralement résolue en utilisant les constantes largement mises en application, et dans ce casspécifique vous avez l'occasion de changer la constante "styles.content.imgtext.maxW".

Sections éducatives

IntroductionA 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 canrecommend 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 = PAGEpage.typeNum=0page.10 = TEXTpage.10.value = Hello world

2) La plupart des exemples omettent les deux premières lignes qui sont supposées présentes :

page.10 = TEXTpage.10.value = Hello world


3) Le code peut être raccourci dans le cas d'exemples où le changement ne concerne qu'uneseule ligne. Les changements sont mis en valeur en rouge)

page.10 = TEXTpage.10.value = Hello worldpage.10.case = upper

a pu également être énoncé de cette manière:...page.10.case = upper


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 dumoment qu'il figure dans la liste des datatypes. (Avec datatype qui est "HTML-color", vous auriez à indiquer une couleurHTML 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 aumême que pour l'objet “TEXT”. De fait, c'est tout simplement une valeur de “chaîne de caractères” (st ring-value).

La différence entre les deux cObjects semble être la manière dont stdWrap est implémenté (mis en oeuvre). Mais jetezd'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édiateest la propriété “.case” (casse de caractère) de l'objet stdWrap. ".case" n'est pas énuméré dans ces exemples, mais allerregarder 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 accordavec 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 = PAGEpage.typeNum=0page.10 = TEXTpage.10.value = Hello worldpage.10.case = upper


... 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 = PAGEpage.typeNum=0page.10 = HTMLpage.10.value = Hello worldpage.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 parceque la propriété '.value" est "mélangée" avec les propriétés de stdWrap. Heureusement la propriété ".value" n'est pas définiepour 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 labodysection de HTML pour vous ! En plaçant des propriétés pour l'objet “Page”, vous pourrez cependant modifier la teneurde 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ôleraucun des éléments de la structure, à l'exception de "conditions", puisque vous pouvez faire en sorte que stdWrap comparedes 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” ducObject HTML. Réferrez-vous à l'exemple “acn” dans le TSref qui est tout comme.... enfin, presque la moitié des valeurs desproprié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, dunombre 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 dataLa 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 surlaquelle nous sommes) "... Mais pour 'inside of' CONTENT, RECORD and HMENU cObjects, c'est le 'current record' aveclequel nous sommes en train d'opérer présentement. Vous trouverez des notes à ce sujet en regardant les descriptionsd'objet.

Techniquement tout ceci va dans le contenu de tslib_content rattaché à la classe tslib_cObj et le 'current record' est définipar cObj->data.

“.current” - Qu'est-ce?


Souvent la valeur courante est référée à quelques fonctions qui doivent passer une simple valeur au "public" (c'est nous etstdWrap...) et positionne donc sur un registre "register" appelé "current", la valeur que nous avons pu facilement passer parla 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 = TEXTpage.10.value = Hello worldpage.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 parla valeur du champ "title", défini par la propriété du “.field” de stdWrap. Wow! Si vous voulez voir, quels champs sontdisponibles 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 exactementles informations de debug ("debug-information") parce qu'elles sont envoyées sur le browser avant n'importe lequel descontenus 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 lecache stocké lors du premier affichage ! Wow. Ainsi parce que ce service produit seulement l'information pendantl'exécution de TypoScript (pendant la restitution et affichage de la page), vous devez continuellement effacer le cache (ouplacer une option no_cache) afin de voir le processus d'affichage complet (restitution et affichage).

Exemple: Obtenir un autre champpage.10 = TEXTpage.10.value = Hello worldpage.10.field = crdate

Ceci produit un nombre, qui est le temps “UNIX” écoulé depuis 1970 (en nombre de secondes).


Challenge (stdWrap/1)En utilisant les ”parsing-properties” (propriétés d'analyse et traitement) du stdWrap, pouvez-vous formater cette date sousune 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'employerpour obtenir vos champs comme précédemment. Ainsipage.10 = TEXTpage.10.field = title

ET page.10 = TEXTpage.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 variableglobale. Avant que vous continuiez ici, veuillez aller sur "index.php?id=5"page.10 = TEXTpage.10.data = global:id

donne "5"

page.10 = TEXTpage.10.data = global:HTTP_GET_VARS|id

donne aussi "5" (cette fois ci proviens de HTTP_GET_VARS[id])

page.10 = TEXTpage.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 labranche '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 ('pagedu parent ') ?

Override / ConditionsstdWrap fournit simplement un "control structures" (structure de contrôle) au moyen de la comparaison de certainespropriétés. Mentionnons certaines d'entre elles qui sont appelés “override”, “ifEmpty”, “required”, “if”, “fieldRequired”. page.10 = TEXTpage.10.value = Hello worldpage.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 = TEXTpage.10.value = Hello worldpage.10.override.field = subtitle

Meilleur exemple, parce que maintenant "Hello world" est substituée seulement si le champ de substitution de la pagecourante n'est pas vide. Dans la plupart des cas ce champ est vide, mais essayez avec "index.php?id=20"...


Challenge (stdWrap/3)Pourriez vous le contourner en employant d'autres propriétés comparatives (comparing properties) - de sorte que la valeurpar 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 pourriez-vous remplacer "Hello world" avec le page-titre à sa place, lequel – dans le cas présent – est enveloppé (wrapped) par <fontcolor="red"> ...

Objets de contenu (cObject)

IntroductionLes objets de contenu (cObjects) sont ceux qui permettent à TypoScript d'y répondre. Ils fournissent des blocs de contenude diverses sortes tels que des images, des sources de text/html, des sources à partir d'un fichier, des enregistrementschoisis d'une base de données ou même du code PHP que vous choisissez de coder vous-même

Les cObjects TEXT et HTML ont déjà été expliqués. Ils sont largement utilisés, mais principalement en raison despropriétés de stdWrap.

COAUne structure de données (array) de cObjects. Rapide démonstration:

page.10 = COApage.10.10 = TEXTpage.10.10 { value = This is the page title: wrap = | wrap2 = | case = upper}page.10.20 = TEXTpage.10.20.field = title

Donne ceci :

Cela pourrait tenir sur une ligne, mais ce choix est un atout pour s'adapter à la situation. page.10 = TEXTpage.10.field = titlepage.10.wrap = THIS IS THE PAGE TITLE: |

Donnons nous un autre exemple :page.10 = COA

# Header to this sectionpage.10.10 = TEXTpage.10.10 { value = This is the page title: wrap = | wrap2 = | case = upper}

# Output page title / subtitlepage.10.20 = COApage.10.20 { 10 = TEXT 10.field = title 10.wrap = Page title: | 20 = TEXT 20.field = subtitle 20.wrap = Subtitle: |}

donne cela :

Challenge (cObject/1)Je voudrais que le sous-titre soit renvoyé sur le browser seulement s'il est présent. Qu'allez-vous faire ?

Challenge (cObject/2)Faire en sorte que tout le COA (page.10) soit renvoyé au browser seulement si le sous-titre est présent.

Challenge (cObject/3)Faire en sorte que tout le COA (page.10) soit renvoyé au browser seulement si nous sommes au niveau 2 et plus avant dansle rootline (c'est-à-dire, si nous sommes sur une subpage, par exemple. "Content elements")

FILEC'est très simple, aussi je vais juste montrer un exemple court : page.10 = FILEpage.10.file = fileadmin/tsbyex/include_me.txt

donne : This is a simple textfile with a few HTML-tags in.

… qui est la teneur exacte du dossier. Noter que la propriété de “.file” est un datatype de "ressource", ce qui signifie que lesfichiers doivent résider dans les répertoires /media/ /fileadmin/ et /uploads/ ou encore /typo3temp/. C'est un dispositif desécurité afin d'empêcher des programmeurs TS d'inclure tout et n'importe quoi sur le serveur.

Ceci est techniquement installé par “array” $allowedPaths = Array ("media/","fileadmin/","uploads/","typo3temp/"); par “classt3lib_tstemplate”

Si vous incluez des fichiers images, ils sont montrés à la place en tant que < IMG-étiquettes >.

IMAGEInclut une image avec l'étiquette < img>.

Exemple:

page.10 = IMAGEpage.10.file = fileadmin/tsbyex/alligator.jpg

Ceci insère une jolie image d'un bébé alligator (cordialement, un instantané de la Floride).

La propriété de “.file” est une "imgResource" (prononcé "ressource d'image") et il y a plus d'options et de possibilitésdisponibles que vous n'en rêvez. Ainsi nous obtiendrons de nouveau celui-ci.

Mais essayons juste quelques petites choses avec l'image. Cet exemple met la largeur à 200 Pixels et ajoute un lien àl'image qui l'affiche dans une autre fenêtre dans le format de taille originale du document : page.10 = IMAGEpage.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 imageLinkWrap = 1

imageLinkWrap.enable = 1}

Recharger la page. L'image s'affiche maintenant avec une largeur de 200 Pixel dans le browser. Essayer de cliquer l'image,et une nouvelle fenêtre de browser s'ouvrira affichant l'image avec sa largeur originale.

Questions (cObject/4)Qu'est ce que Typo3 a fait à l'image quand la taille a été placée à 200 Pixel ? Etait-ce seulement le code HTML qui a étéchangé ou l'image a-t-elle été réellement redimensionnée ? Regarder les noms de fichier du premier exemple sans“file.width” et l'exemple courant. Quels sont les noms et le chemin d'accès affichés ?

Challenge (cObject/5)En se référant à l'objet ->imageLinkWrap dans TSref, pouvez-vous faire en sorte que ' imageLinkWrap' ouvre l'imageagrandie dans une fenêtre de JavaScript ?

IMG_RESOURCECelui-ci fait pareil que le cObject “IMAGE” à la différence très importante que l'étiquette < l'IMG> n'habille (enveloppe-wrap)pas le fichier.

Exemple:

page.10 = IMG_RESOURCEpage.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200}

donne :typo3temp/3de305c72b.jpg

Challenge (cObject/6)Pouvez-vous faire en sorte que l' image soit en fond d'écran d'un Tableau ?

CLEARGIFInsérez un fichier “gif-file” (fichier d'une image vide), “clear.gif”:page.10 = CLEARGIFpage.10.width = 200

produira ce code HTML:<img src="clear.gif" width=200 height=1 border=0> 

Notez que l'étiquette est toujours ajouté au début. Vous êtes toujours libres d'employer le fichier “clear.gif” que voustrouverez à la racine du site

HRULERCeci insère une "règle" horizontale. Pas celui du style HTML, mais fait avec une table et une couleur de fond.

Exemple:page.5 = TEXTpage.5.value = Before ruler

page.10 = HRULERpage.10 { lineThickness = 3 lineColor = red}page.15 = TEXTpage.15.value = After ruler

Donnera ce résultat:

Challenge (cObject/7)Amusez-vous avec les autres propriétés et voyez quels en sont les résultats. Vérifier le code source. En outre, pouvez-vousplacer un espace au-dessus de (10 Pixel) et au-dessous de (20 Pixel) de la règle afin de créer de l'espace pour le texte ?

CTABLE and OTABLECes cObjects ont pour objet de vous donner une possibilité d'obtenir des tableaux instantanés pour y placer votre contenu.

Exemple of OTABLE:page.10 = OTABLEpage.10 { tableParams = border=1 offset = 10,10 10 = TEXT 10.value = What a cute little alligator! Dear Lord, may it never grow up! 10.wrap = | 20 = IMAGE 20.file = fileadmin/tsbyex/alligator.jpg 20.file.width=200}

a pour résultat :

Ce que fait “offset” ici parait évident. Mais normalement vous voudriez disposer de quelques autres paramètres pour

l'étiquette <table>. Ainsi ce qui suit pourrait être une meilleure solution:page.10 = OTABLEpage.10 { tableParams = border=0 cellpadding=0 cellspacing=0 width=100 offset = 10,10...

Si vous ne précisez pas “.tableParams”, "<TABLE border=0 cellspacing=0 cellpadding=0>" s'applique par défaut <TABLE>-start tag.

Challenge (cObject/8)Installer une OTABLE qui décale avec précision (offset) le coin supérieur gauche à "0, 20" et où le contenu se place dansune colonne de 250 Pixels. Conseil : Le réglage des marges de bodytag exige que vous regardiez les propriétés de l'objet“Page”.

Exemple de CTABLE:Un CTABLE propose un dispositif plus riche pour envelopper (habillage) que le simple OTABLE par ailleurs fort utile. Ilcomporte un dispositif avec une colonne de contenu et quatre colonnes l'entourant. Celles-ci peuvent être utiles pour ymettre des menus. Mais regardez donc ce simple exemple tout d'abord: page.bodyTagMargins = 0page.10 = CTABLEpage.10 { tableParams = border=1 cellpadding=0 cellspacing=0 offset = 0,20 c.10 = TEXT c.10.value = CONTENT cell}

produira quelque chose tout à fait identique à ce que produirait le OTABLE avec ceci :page.bodyTagMargins = 0page.10 = OTABLEpage.10 { tableParams = border=1 cellpadding=0 cellspacing=0 offset = 0,20 10 = TEXT 10.value = CONTENT cell}

Pareil, à l'exception du fait que CTABLE ajoute le "valign=top" aux étiquettes < td>.

Regardez maintenant un exemple plus complexe : page.bodyTagMargins = 0page.10 = CTABLEpage.10 { tableParams = border=1 cellpadding=0 cellspacing=0 offset = 0,20 c.10 = TEXT c.10.value = CONTENT cell

rm.10 = TEXT rm.10.value = RIGHT cell

lm.10 = TEXT lm.10.value = LEFT cell

tm.10 = TEXT tm.10.value = TOP cell

bm.10 = TEXT bm.10.value = BOTTOM cell}

Dans ce cas-ci nous employons chacune des cinq "cellules de contenus" ("content cells") de CTABLE et on obtiendra ceci :

Maintenant, vous pouvez mettre n'importe quel OBJECTS que vous aimez dans les cellules. Mais il y a encore deuxdispositifs à regarder en détail. Avec "cMargin" vous pouvez ajouter des marges entre les cellules et toute autour d'elles etavec “cWidth” vous pouvez automatiquement fixer l'espace en dehors de la cellule de contenu à une certaine largeur grâce àl'utilisation de “clear-GIF”..

Essayez d'ajouter:... offset = 0,20 cMargins = 10,20,30,40 cWidth=300 rm.TDParams = bgcolor=red valign=bottom...

... et voilà ce que vous obtenez:

Noter que la cellule de droite (rm) a quelques paramètres supplémentaires qui lui ont été spécifiés avec pour résultat lerouge du fond de la cellule du tableau. Juste pour le “fun”, laissez vous aller à regarder ce TypoScript dans le “ObjectBrowser” :


Instructif, n'est-ce pas...

Gabarit (TEMPLATE)Parfois, vous pouvez vouloir employer un gabarit HTML au lieu de le faire en entier dans TypoScript. C'est exactement pourçà que l'objet TEMPLATE existe.

Exemple:Pour que le Gabarit soit actif, c'est tout ce dont vous avez besoin:page.10 = TEMPLATEpage.10.template = FILEpage.10.template.file = fileadmin/tsbyex/template.html

… et ceci est apparemment ce qui obtenez :


Mais après qu'une inspection plus minutieuse du code source, on s'aperçoit que la totalité du fichier a été inséré : ...// End Hiding Script --></script></head><body bgcolor="#FFFFFF">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>

<title>Untitled</title></head><body>This is a template that demonstrates the concept of subparts and markers.

This is a ###SIMPLE_WORD### textfile with a few HTML-tags in. Check out the link to the front page.

</body></html>

</body></html>

… et celui n'était pas l'intention - à moins que nous voulions que le dossier entier fût inséré, naturellement. Mais on peutfacilement arranger cela, parce que pour le “cObejct” TEMPLATE vous pouvez définir un "subpart" pour travailler dessus.Les “Subpart” sont encadrés par deux marqueurs (par défaut "###" ajouté au début) qui peuvent ou ne peuvent pas êtredans un “comment” HTML.

Notre subpart est "###DOCUMENT###", aussi essayez avec ceci:page.10 = TEMPLATEpage.10.template = FILEpage.10.template.file = fileadmin/tsbyex/template.htmlpage.10.workOnSubpart = DOCUMENT

Bien mieux. La source du code HTML obtenu nous donne maintenant ceci:...</head><body bgcolor="#FFFFFF">

This is a ###SIMPLE_WORD### textfile with a few HTML-tags in. Check out the link to the front page.

</body></html>

Maintenant notre intention est de substituer ###SIMPLE_WORD### par le titre de la page et de substituer le subpart###LINK### par lui-même, mais mais lié à la page d'accueil du site Web (et c'est dur !

Exemple:page.10 = TEMPLATEpage.10 { template = FILE template.file = fileadmin/tsbyex/template.html workOnSubpart = DOCUMENT marks.SIMPLE_WORD = TEXT marks.SIMPLE_WORD.field = title subparts.LINK = TEXT subparts.LINK.current = 1 subparts.LINK.debugFunc = 1}

Voilà ce qu'on obtiens:

Et le code source HTML obtenu est celui-là:...// End Hiding Script --></script>

</head><body bgcolor="#FFFFFF">

This is a Content elements textfile with a few HTML-tags in. Check out the link to the front page.

</body></html>

Comme vous pouvez le voir, le marqueur SIMPLE_WORDS a été correctement substitué. Le “Lien-subpart” sembleégalement fonctionner. Au moins les comments HTML n'y sont plus. Mais la valeur n'est pas traitée au-delà. En fait, c'étaitle but afin d'étudier un petit détail :

Selon le TSref, "De plus, la valeur courante est chargée avec le contenu de chaque subpart juste avant que le cObject pourle subpart soit analysé. " Ainsi ce que les lignes ... subparts.LINK = TEXT subparts.LINK.current = 1 subparts.LINK.debugFunc = 1

... devrait faire est de charger le cObject TEXT avec la valeur du registre "courant" (voir stdWrap) et parce que j'étais curieuxau sujet du contenu que l'objet “TEXT” contenait réellement, je l'ai étudié avec le “flag” ".debugFunc = 1" lequel – de lamême manière que nous l'avons montré avec “debugData” précédemment (voir stdWrap) – restitue comme résultat la valeurcontenue durant "l'exécution" du TypoScript.

Aussi, maintenant je monte d'un niveau - l'encapsulation du subpart LINK avec un lien. ... subparts.LINK = TEXT subparts.LINK.current = 1

subparts.LINK.typolink { parameter = 1 }}

Ceci ajoute la bonne étiquette de lien au subpart qui maintenant permet d'atteindre la page avec le id=1.

Dans ce cas-ci le id=1 s'avère être la "page d'accueil (frontpage)" de mon site, mais je voudrais une solution plus flexible,ainsi ce que je vais faire est d'aller chercher le ”uid” de la page au niveau 0 dans le rootline. Nous savons déjà commentfaire (.data = leveluid:0 - voir stdWrap et les datatypes dans TSref), mais ne savons pas, si le paramètre de la propriété del'objet "typolink" a des propriétés stdWrap ... (obtenir la référence, trouver la fonction de typolink.... regarder. ... YES!).... subparts.LINK = TEXT subparts.LINK.current = 1 subparts.LINK.typolink { parameter.data = leveluid:0 }}

Challenge (cObject/9)Pouvez-vous faire en sorte que le lien vous envoie à la page du niveau 1 dans le rootline au lieu de la page d'accueil ?Pouvez-vous définir la cible du lien pour être "_ blank" ? Et pouvez-vous également envelopper le lien dans des étiquettes ?

FORM (formulaire)Bien sûr, vous pouvez créer des formulaires manuellement, mais l'avantage de laisser Typo3 le faire est que la syntaxe estassez simple pour l'enseigner aux non techniciens (nn-techies) et vous pouvez le faire valider automatiquement (manièresimple) par JavaScript.

Exemple:page.10 = FORMpage.10.data = Label | inputpage.10.layout = ###LABEL###: ###FIELD### 

C'est le minimum absolu d'information requis pour créer un formulaire.

La propriété “.data” prend les informations en entrée, ce qui est conforme à la syntaxe définie dans TSref et “.layout” est unminitemplate (mini-gabarit) où ###LABEL### et ###FIELD### représentent respectivement l'étiquette et le champ inséré.

Tout d'abord, comment ajoutons-nous plus de champs ? Et bien, normalement, les valeurs d'entrée qui génèrent leformulaire vient d'un champ “texte” de la base de données, normalement "bodytext" d'un enregistrement de “tt_content”.Dans ces valeurs d'entrée chaque ligne représente un nouvel élément. Nous ne pouvons pas faire cela en envoyant unechaîne de caractère en entrée (with “string-input”) directement sur la propriété de “.data”, alors le moyen détourné(workaround) est d'entrer un double "|" équivalent à un changement de lgne (linebreak). Par conséquent…page.10 = FORMpage.10.data = Name|input || Address|textarea || Send|submit|Send the formpage.10.layout = ###LABEL###: ###FIELD### 

..va nous donner cela :

Le script “tslib/index_ts.php” (qui est le script d'entrée principal, voir Typo3Overview, F1) est capable d'envoyer desformulaires par emails (formmail-emails). Pour créer un formulaire pour email vous devez au moins préparer ceci:page.10 = FORMpage.10.data = Name|*input,40 || Address|textarea,40,10 || Send it...|formtype_mail=submit|Send the form |||subject=hidden|This is the subjectpage.10.recipient = [email protected] = ###LABEL###: ###FIELD### page.10.locationData = 1page.10.REQ=1page.10.REQ.layout = ###LABEL### (Required): ###FIELD### 

Noter les changements en rouge :

• Les champs d'entrée ont donnés un paramètre de taille

• de même que le textarea

• le bouton de soumission(submit-button) est appelé "formtype_mail" afin que le script se rendre compte qu'un email estsur le point d'être envoyé

• le sujet est placé (subject)

• le destinataire est placé (recipient)

• le locationData est mis à “ON” (requis si le script index_ts.php doit envoyer le email)

• On met en oeuvre REQ qui permet le contrôle du champ requis (required-field) (celui dont le champ "Name" est marquécomme exigé “as due” par la présence de l'astérisque devant le mot "input” (entrée))

• REQ.layout est proposé alternativement aux champs exigés.

Cela ressemble à ceci ::

Si vous voulez entrer dans des détails sur ce sujet, allez voir svp les “form-définitions” dans le gabarit statique"styles.content (defaut)” / “styles.content.mailform”

CAS d'exempleCe cObject fournit maintenant une "structure de commande"(control structure) à TypoScript. Cela fonctionne comme ungénérateur de commutateur (switch-construct) :

Exemple:page.10 = CASEpage.10.key = cheese

page.10.cheese = IMAGEpage.10.cheese { file = fileadmin/tsbyex/alligator.jpg file.width=200 wrap = Cheese.... | is what this guy says}page.10.tomatoes = TEXTpage.10.tomatoes.value = Tomatoes are so tasty


page.10.default = TEXTpage.10.default.value = If nothing else is going on, this happens...

Ceci est le résultat obtenu:

Comme vous pouvez le voir, la variable reservèe « key » à l'intèrieur de cObject est « cheese ». Ce qui permet la recherchede la variable associèe cObject : page.10.cheese.

NB : la liste des variables reservèes : "setCurrent", "key", "default", "stdWrap" et "if".

Remplacez la variable cheese par tomates ou laissez la vide (dans ce dernier cas, page.10.default apparait) Ceci est trèsutile si vous souhaitez insérer des donnèes au lieu de valeurs numèriques. Jettons un oeil aur le script.temp.cheese = IMAGEtemp.cheese { file = fileadmin/tsbyex/alligator.jpg file.width=200 wrap = Cheese.... | is what this guy says}

temp.tomatoes = TEXTtemp.tomatoes.value = Tomatoes are so tasty

temp.default = TEXTtemp.default.value = If nothing else is going on, this happens...

page.10 = CASEpage.10.key.data = level:1page.10.1 < temp.cheesepage.10.2 < temp.tomatoespage.10.default < temp.default

page.20 = TEXTpage.20.data = level:1page.20.wrap = <HR> | - page.30 = TEXTpage.30.field = title

le rèsultat :

Essayez d'atteindre les pages "Startpage", "Content elements", "Insert content" et parce que chacune est à son propreniveau spécifique, vous obtiendrez des contenus spécifiques. ...page.10.1 < temp.cheesepage.10.2 < temp.tomatoespage.10.default < temp.default...

Un autre petit conseil concernait mon utilisation des objets provisoires créés dans l'objet “temp. toplevel” temporaire duniveau supérieur (lisez en plus sur ceci d'ailleurs). Il peut être très utile de définir des gros blocs de TypoScript dans cetobjet de toplevel et puis plus tard de les copier au bon endroit. Ceci crée une occasion d'obtenir une meilleure vued'ensemble de vos TypoScripts.

ChallengePrendre un peu de temps pour examiner le static_template "content (default)". Essayer d'améliorer votre maîtrise avec leCAS d'exemple cObject utilisé dans l'objet tt_content de toplevel. Toutes les fois que nécessaire, se référer à "styles.content(default)" qui fournit beaucoup d'objets “préfabriqués” afin d'être utilisé dans "content (default)"

LOAD_REGISTERCe cObject ne renvoie aucune valeur. Vous pouvez Plutôt l'employer pour placer quelques valeurs dans le “registre". C'estun genre de procédé pour passer des valeurs à l'entour entre les objets de TypoScript mais c'est un détournement (hack)afin de l e permettre à un degré restreint. Se rappeler que TypoScript "n'est pas exécuté" comme du JavaScript. Il restetoujours un groupe en grappe (bunchof configuration) de configurateurs.

Quoiqu'il en soit, cet exemple montre comment cela fonctionne:page.10 = LOAD_REGISTERpage.10.MY_VALUE = The register value!

page.5 = TEXTpage.5.value = The default valuepage.5.override.data = register:MY_VALUEpage.5.wrap = | <HR>

page.15 < page.5

This is the result:

Explication:

Considérez le TypoScript:

L'objet à la position "5" dans la structure de données (array) de l'object PAGE "page" est “exécuté" avant celui en position"10" lequel est où le registre MY_VALUE est placé pour la première fois. Puisque la valeur de registre était jusque-là vide"page.5" a renvoyé la valeur de la propriété de “.value”. C'était "la valeur par défaut"

Quand "page.10" est exécutée la valeur du registre est placée.

Quand "page.20" est exécuté, le registre n'est désormais plus vide, donc la valeur écrase (override) la valeur par défaut. Et lerésultat en sortie devient "valeur du registre!"

ChallengeEssayer de regarder les static_templates "TEMPLATE; FIRST " et "TEMPLATE; MM". Tous les deux utilisent ce dispositif.Pour accomplir quoi ?


imgResource et GIFBUILDER

IntroductionLe datatype de quelque une des propriétés est apparemment "imgResource". En jetant un coup d'oeil à la définition dudatatype, nous apprenons qu'il peut faire une deux choses.

Soit "imgResource" est une référence à un fichier dans cette même logique du concept de "ressource" mais avec quelquespropriétés additionnelles pour modifier l'image.

Ou bien "imgResource" est un objet GIFBUILDER qui nous laisse concevoir une image en combinant les objets graphiquescomme des images, texte et boîtes pleines.

Un fichier normal en entréeNous avons déjà fait ceci (avec l'image de l'alligator), parce que la propriété “.file” du cObject IMAGE est une"imgResource". Mais donnons nous un autre défi ici. Nous voudrions définir un fond d'image pour notre Gabarit.

En regardant les propriétés d'un objet PAGE, “.bgImg” semble être le choix à faire et il est aussi une imgResource.

Essayez-donc cela:page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg

Vous devez à présent voir ceci:

[N/A...] (non applicable ...)

Essayez alors d'ajouter cela .. :page.bgImg = fileadmin/tsbyex/sunset_keywest.jpgpage.bgImg.width = 200

Et vous devez voir cela ::

Masques BitmapAvant que nous continuions, amusons nous un peu. Nous allons employer un concept d'image Bitmap appelé “masque oucache” (masking). Fondamentalement un masque est une image de grayscale employée pour combiner deux images de


manière à ce que les secteurs noirs et blancs du masque déterminent quels secteurs des deux images combinées sontvisibles ou pas.

Ceci est notre masque (cache), "mask.jpg":

Donc, essayons maintenant avec ceci ::page.bgImg = fileadmin/tsbyex/sunset_keywest.jpgpage.bgImg.width = 200page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpgpage.bgImg.m.mask = fileadmin/tsbyex/mask.jpg

Résultat:

Essayons plutôt avec cecipage.bgImg = fileadmin/tsbyex/sunset_keywest.jpgpage.bgImg.width = 300page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpgpage.bgImg.m.bgImg.params = -rotate 90 page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg

Résultat:

[N/A...]

Importer une imageOK, nous voudrions que le fond d'image soit attaché aux différentes pages, ainsi nous pouvons changer l'image facilementpour chaque page. Dans ce but nous devons associer et rattacher l'image à l'enregistrement de la page dans le champprévu à cet effet pour inclure des fichiers médias.


Faites ceci d'abord :

Puis, essayez d'insérer ce TypoScript sur la page (champ setup=:page.10 =TEXTpage.10.debugData = 1

Vous devriez voir ceci quand vous aller sur la page (la première fois que nous y allons, rappelez-vous que nous sommes enmode debug pour l'affichage !)

Le champ "média" contient des références aux images en les énumérant séparées par des virgules. Simple, hein ?

Nous voudrions extraire un simple fichier à partir de la liste, plus précisément la deuxième image, "doggiebus.jpg" : page.10 =TEXTpage.10.field = mediapage.10.listNum = 1

".listNum" est le grand tour de passe-passe utilisé ici. Voyez TSref pour une description...


Tout ce dont nous avons besoin est maintenant de savoir où les images sont stockées réellement, ainsi nous pourronsajouter le chemin d'accès (filepath) correct. Aussi nous allons sur le module "Tools" et dans le sous-module de"Configuration" (tools_config), nous passons en revue la structure de données (array) “$tc” :

Comme vous voyez, le chemin de téléchargement était uploads/media.

Afin de réutiliser cette connaissance sur “imgResource”, regardons ce que contient la propriété “.import” (TSref). De ceci,nous pouvons en conclure que le TypoScript devrait ressembler à : page.bgImg { import = uploads/media/ import.field = media import.listNum = 1}

Résultat:

[N/A]

Doggiebus est partout. Naturellement vous pouvez toujours ajouter "page.bgImg.width = 200" si vous aimez un plus petitcarreau pour un plus grand sourire : -)

Challenge (imgResource/1)Vous voudriez un fond d'image par défaut pour une page au cas où il n'y aurait aucune image chargée en position n° 1 dansle champ des médias associés. Pouvez-vous faire cela ? (il n'est pas si facile – servez-vous de TSref, bonne chance.)

GIFBUILDERCommençons par un exemple simple:page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file.XY = 200,300page.10.file.backColor = olivepage.10.file.10 = BOXpage.10.file.10 { dimensions = 20,20,160,260 color = green}

Résultat:


OK, essayons en combinant avec le fond d'image précédent : page.bgImg = GIFBUILDERpage.bgImg { XY = 200,300 colbacks = olive 10 = BOX 10 { dimensions = 20,20,160,260 color = green }}page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpgpage.bgImg.m.bgImg.params = -rotate 90 page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg

... et le résultat ... est .. :

[N/A...]

… autre chose que ce que nous avions imaginé.

La raison?. Le TypoScript est erroné. Le dispositif censé masquer avec le "m.bgImg...." s'applique aux imgResources si lavaleur de l'imgResource est un nom de fichier et pas un GIFBUILDER. Dans le dernier cas, les propriétés qui s'appliquentsont trouvées dans une de ses propres sections … Tellement désolé.

Mais vous pouvez le faire, si l'objet de GIFBUILDER n'est pas le "base-image" : # The base image:page.bgImg = fileadmin/tsbyex/alligator.jpgpage.bgImg.width = 300page.bgImg.height = 200

# The GIFBUILDER overlay:page.bgImg.m.bgImg = GIFBUILDERpage.bgImg.m.bgImg { XY = 300,200 colbacks = olive 10 = BOX 10 { dimensions = 20,20,260,160 color = green }}

# The mask (not the movie...)page.bgImg.m.mask = fileadmin/tsbyex/mask2.gif

Et le résultat obtenu est


Le masque "mask2.gif" ressemble à ceci :

GIFBUILDER - basesRetour aux bases. Le premier exemple nous a montré comment créer une boîte colorée. Maintenant nous allons ajouter unun peu de texte : page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file { XY = 200,300 colbacks = olive 10 = BOX 10.dimensions = 20,20,160,260 10.color = green

20 = TEXT 20.text = Hello World 20.offset = 10,10}Voilà le résultat :

+calcBeaucoup de valeurs de “integet” peuvent être définies par des opérations arithmétiques simples comme +, -,/et *. Un usageparticulier est celui qui vous permet d'insérer des codes dans ces expressions qui sont substituées avec la largeur ou lataille d'un objet “TEXT” ou “ IMAGE-GIFBUILDER”. De cette façon nous pouvons contrôler par exemple la largeur de l'imageen la basant sur la largeur du texte.


Exemple:page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file { XY = [20.w]+20, 30 colbacks = olive 10 = BOX 10.dimensions = 20,20,160,260 10.color = green

20 = TEXT 20.text = Hello World 20.offset = 10,15}

Résultat:

Prolongeant ceci à l'objet “BOX” de manière à ce que nous puissions employer l'objet BOX pour créer et souligner du TEXT.En faisons l'essai de la propriété “.nice” de l'objet “TEXT”. ... 10.dimensions = 11,20,[20.w],1 10.color = blue

20 = TEXT 20.text = Hello World 20.offset = 10,15 20.niceText = 1}

Résultat:

Évidemment l'objet BOX s'est ajusté selon nos espérances. Mais l'autre changement - l'option “.nice' de l'objet TEXT quenous avons permise - a eu pour conséquence de modifier le mode de restitution du texte.

.niceTextA voir, ceci est un contournement (workaround) pour compenser le fait que la bibliothèque de freetype employée par GDLibdans PHP ne peut pas toujours fournir des anti-crénelages (antialiasing) satisfaisants ("soft edges" pour empêcher ledéchiqueté, pixélisés des bords). Ainsi ce “flag” fait en sorte que Typo3 restitue le texte au double de sa taille sur un fichiercache (mask-file) qui est alors réduit (de moitié) pour corriger la taille et qui est utilisé avec l'outil “combine” (composite) deImageMagick permettant de "superposer" (masque/cache) le texte sur le fond. Ceci consomme plus de ressources du CPU.Le résultat est également meilleur (habituellement).


A gauche : texte normal Anti-crênelage par Freetype. Milieu: .niceText=1 A droite: .antiAlias=0 (Anticrênelage désactivé)

L'objet GIFBUILDER TEXTMaintenant, nous allons essayer encore plus d'options pour le texte : ... 20 = TEXT 20.text = Hello World 20.offset = 10,15 20.niceText = 1 20.fontSize= 20 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = #660000 20.shadow.offset = 2,2 20.shadow.blur = 60 20.shadow.opacity = 40}

Le résultat est là :

Challenge (GIFBUILDER/1)Pouvez-vous produire un texte, qui semble être gravé en refief sur le fond ? Et pourriez-vous faire en faire la page de titre etnon pas une valeur statique comme "Hello World" ?

L'objet IMAGEVous pouvez également ajouter une image aux objets de GIFBUILDER.

Exemple:page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file { XY = 200, [10.h]

10 = IMAGE 10.file = fileadmin/tsbyex/sunset_keywest.jpg 10.file.width= 200

20 = TEXT 20.text.field = title 20.offset = 0,120 20.niceText = 1 20.align=center 20.fontSize= 40 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = yellow

30 = IMAGE 30.file = fileadmin/tsbyex/alligator.jpg 30.file.width=50 30.tile = 2,2 30.align = c,c


}

Dans cet exemple il y a même deux images impliquées. L'une d'entre elles est couverte de carreaux répartis deux foishorizontalement et verticalement, l'autre étant aussi alignée au centre dans les mêmes deux directions. Résultat :

Challenge (GIFBUILDER/2)Pouvez-vous faire en sorte que les images d'alligator apparaissent dans les coins de la grande image, à 5 Pixels du bord ?(vous pouvez - si vous souhaitez – ignorer le fond d'image et le titre.)

Challenge (GIFBUILDER/3)Pouvez-vous, aussi, créer un “frame” cadre rouge de 2 Pixel tout autour de l'image ?


NavigationHMENULe' cObject "HMENU" est employé pour produire "des menus hiérarchiques" - c'est la navigation.

Exemple:page.10 = HMENUpage.10.1 = TMENUpage.10.1.NO { linkWrap = | }

Résultat:

Très simple. Maintenant, les choses importantes à savoir à propos de l'objet racine ("mother"-object) HMENU ("TMENU"dans l'exemple est un enfant dans cette terminologie) est qui est a

• une structure de données numérique de "menuObj" (menu objects)

• une définition d'entrée “.entryLevel”. “Entrylevel” détermines à quel niveau dans la rootline, le menu est disposé.

• Une défnition pour “.begin” et “.maxItems” utile pour commander le nombre d'articles.

Mais vous devriez également savoir qu'un menu se compose des liens version des pages avec le type "Standard","Advanced", "External URL" et "Shortcut". Selon la configuration le type "Spacer" peut également apparaître (si .SPC estdéfinit), mais une page "Spacer" est seulement un placeholder - une manière d'insérer un espace dans un menu si lamenu-configuration est conçue de cette manière.

Cet exemple montre un menu qui fonctionne sur les items de la page "Level2" (rootline level 1). page.10 = HMENUpage.10.entryLevel = 1page.10.1 = TMENUpage.10.1.NO { linkWrap = | }

Le résultat:

(Ceci apparaît seulement si vous mettez id=2, parce qu'aucune des autres pages (excepté de la page d'accès restreinte) n'ades sous-ages. La Rootlevel ne montre pas de menu parce que l'entryLevel est placé à 1)

TMENULe TMENU est un menu basé sur du texte. Il y a un bon nombre d'exemples alentour. Regarder dans la table dustatic_template. Le Gabarit "content (default)" a un groupe d'exemples attachés à la définition de tt_content.menu

Voici un exemple pris du static_template "TEMPLATE; BUSINESS":page.10 = HMENUpage.10.1 = TMENUpage.10.1.target = pagepage.10.1 { expAll = 1 wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1hspace=200 height=1 vspace=3 border=0></td></tr> | </table> NO.linkWrap = | NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0> | </td></tr>}page.10.2 = TMENUpage.10.2 { wrap = <tr><td nowrap> | </td></tr> target = page NO { beforeImg = media/bullets/bullet1_n.gif beforeROImg = media/bullets/bullet1_h.gif beforeImgTagParams = hspace=2 RO = 1 after = ATagBeforeWrap = 1 linkWrap= | }}

Résultat:

Vous devriez savoir une chose au sujet de TMENU: Il y a deux propriétés, “.before” et “.after”. Elles ont des propriétésstdWrap toutes les deux et elles sont réellement identiques. Mais - comme indiqué dans TSref – le cObj->data array utilisépar la propriétés de “.field” du stdWrap's n'est pas chargé avec le page-record de l'item du menu courant lorsqu'il estexécuté. À l'origine c'était une erreur de conception, mais le contournement afin d'être compatible avec des versionsantérieures a été que stdWrap pet récupérer le field-values de la page du menu-item par le biais de la propriétés ”.data”.Ainsi au lieu de "before.field = title" (ce qui permet d'obtenir le titre principal de page) utilisez "before.data = page:title".

Challenge (TMENU/1)Réglez finement le menu à votre goût et insérez une autre image-buleet (image puce), mais en l'insèrent à la droite desarticles !

Challenge (TMENU/2)Ajouter un troisième niveau

Challenge (TMENU/3)Ajouter un dispositif qui change la couleur des items en rouge si l'item est "actif" (c'est-à-dire, si un items est l'une despages dans la rootline)

Challenge (TMENU/4)Créer ce menu :

Exemple (TMENU)C'est une capture d'écran de www.fladsaa.dk. Le code utilisé ici pour le menu est trouvé dans la section Challenge plushaut, si vous voulez le voir :

IMGMENUC'est un menu d'imagemap (basé sur image).

Exemple:temp.topmenu = HMENUtemp.topmenu.1.target = _toptemp.topmenu.maxItems = 6temp.topmenu.entryLevel = 0temp.topmenu.1 = IMGMENUtemp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70"href="http://www.typo3.com" target="_top">temp.topmenu.1 { wrap = | main.XY = [10.w] , [10.h] main.10 = IMAGE main.10.file = fileadmin/tsbyex/imglogo.gif main.reduceColors = 16 dWorkArea = 77,68

NO.distrib = textX+10, 0 NO.10 = TEXT NO.10 {

text.field = title fontSize = 11 fontColor = black niceText = 1 offset = 0,0 imgMap.explode = 3,2 } NO.20 = || BOX NO.20 { dimensions = -5,-9,1,11 color = white }}

page.10 < temp.topmenu

Résultat:

Commentaires:

main.Ceci place l'image de base de l'imagemap. “.reduceColors” est une propriété générale de GIFBUILDER que vous devriezappliquer largement afin de maintenir la taille de fichiers au plus bas. Moins de couleurs et moins grande sera la taille

dWorkArea = 77,68Ceci définit l'excentrage des items du menu à partir du coin gauche supérieur

NO.En général “.main” décrit le fond d'imagemap et “NO.” décrit chaque item sur le “image map”.

NO.distrib = textX+10,0Ceci définit que chaque article devrait être décalé l'un par rapport à l'autre par la largeur de l'article précédent plus 10 Pixelssupplémentaires.

imgMap.explodeDéfinit de combien le polygone de 'imagemap” autour de chaque item est augmenté afin de couvrir une surface un peu unplus grande (ou plus petite avec des nombres “neg.”) que les “textlabels” eux-mêmes.

temp.topmenu.1.imgMapExtras = <AREA SHAPE="rect" alt="Frontpage" COORDS="5,5,69,70"href="http://www.typo3.com" target="_top">Ceci ajoute une définition de “Area” (zone) à l'imagemap. La zone couverte dans ce cas-ci est à angle droit vers la gauchesur le fond d'image. Cette zone est un lien vers http://www.typo3.com

NO.20 = || BOXL'opérateur" "||" (double ligne verticale) est une partie d'un concept très complexe appelé "optionSplit". Ce concept est plusdéroutant qu'un répertoire absent d'une installation de Windows, donc faites attention si vous commencez à jouer avec.Personnellement je me réfère toujours aux exemples dans le TSref. Voir la discussion ci-dessous

Challenge (IMGMENU/1)Pouvez vous réarranger les éléments afin qu'ils apparaissent presque comme ceci :

optionSplitMais qu'est-ce que c'est “optionSplit” ? Pourquoi est-ce que je m'inquiéterais ?

“optionSplit” est très puissant parce qu'il fournit une manière de définir différentes valeurs pour les propriétés de vos objetsde menu et ceci relié à leur position, qu'ils soient en premier, denier ou au milieu dans l'ordre des éléments du menu"optionSplit" fonctionne avec toutes les propriétés et leurs valeurs de TypoScript pour la totalité de l'objet “menu”!

Par exemple, si je veut que le premier élément soit jaune, le dernier élément bleu et tous les autres blancs, j'indique : fontColor = yellow |*| white |*| blue

comme ceci et j'obtiens ce résultat :

Si j'ajoute une autre page au testsite, le menu sera mis à jour en conséquence:

Challenge (IMGMENU/2)Pouvez-vous définir un optionSplit pour la couleur de la ligne verticale qui la changerait en blanc ou noir ?

GMENUMaintenant essayons de nous occuper de l'objet de menu GMENU.

Example:page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { XY = [10.w],[10.h] colbacks = #cccccc || #eeeeee 10 = TEXT 10.text.field = title 10.offset = 0,7}


Résultat:

C'est pas loin d'être le plus simple GMENu que vous puissiez créer. Modifions le un peu plus pour le rendre plus utilisable:page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { XY = [10.w]+20,20 colbacks = |*| #cccccc || #eeeeee |*| 10 = TEXT 10.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1}

Résultat:

Mieux maintenant. Allons-y pour ajouter un effet “roll over” (recouvrement):page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { XY = [10.w]+20,20 colbacks = |*| #cccccc || #eeeeee |*| 10 = TEXT 10.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1}page.10.1.RO < page.10.1.NOpage.10.1.RO = 1page.10.1.RO { colbacks = red 10.fontColor = white}

Résultat:

Challenge (GMENU/1)Pourriez-vous parvenir à créer ce menu avec les éléments de relief comme celui que nous avons fait avec l'objetGIFBUILDER plus haut dans ce document ? Et pourriez-vous le faire de sorte que l 'effet de refief soit inversée quand vousfaites un “rollover” de l'élément ?

Images avec GMENUVous pouvez employer des fonds d'image pour vos items de menu

Exemple:page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { wrap = | XY = [4.w], [4.h] colbacks = olive 4 = IMAGE 4.file = fileadmin/tsbyex/menuback.gif

10 = TEXT 10.text.field = title 10.offset = 0,14 10.align = center 10.niceText = 1}

L'image "menuback.gif" apparaît comme ceci:

Résultat:

Exemple élaboré (GMENU)Si vous voulez étudier cet exemple élaboré, où le GMENU crée dynamiquement un fond en relief pour des menuitems,veuillez aller à la section de Challenge.

Challenge (GMENU/2)Pourriez-vous créer ce menu, basé sur ce que vous connaissez de l'objet GIFBUILDER ?

Trois images,

left.gif

middle.gif and

right.gif

issu du répertoire “/media/buttons/” sont utilisés

GMENU_LAYERTypo3 supporte également l'utilisation des menus DHTML basés sur des “layers” (couches). Mais il exige du HMENU de secomposer de deux objets de menu où le premier est GMENU_LAYER. Le second peut être un TMENU ou GMENU

Exemple:page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.phppage.10 = HMENUpage.10.1 = GMENU_LAYERSpage.10.1 { layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; xPosOffset =-10 lockPosition = x expAll=1 NO { colbacks = #cccccc XY = [10.w]+10, 14 10 = TEXT 10.text.field = title 10.offset = 5,10 }}page.10.2 = GMENUpage.10.2.wrap = | page.10.2.NO { colbacks = #99cccc XY = 120, 14 10 = TEXT 10.text.field = title 10.offset = 5,10}

Résultat:

Challenge (GMENU_LAYERS/1)Pouvez vous modifier ce menu avec une disposition comme ceci :

(Toutes les modifications sont faites à l'objet de menu “object 2”, le GMENU)

Challenge (GMENU_LAYERS/2)Pouvez vous modifier ce menu selon une disposition à peu près comme ceci (au moins l'orientation du menu) :

(Toutes les modifications sont faites à l'objet de menu “object 1”, le GMENU_LAYER)

Prolonger un fond d'image au menu entierJe voudrais démontrer un dispositif puissant de l'objet de GMENU : Prolonger un fond d'image au-dessus du menu entier :

Basé sur ce menu:page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.phppage.10 = HMENUpage.10.1 = GMENU_LAYERSpage.10.1 { layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; xPosOffset =-10 lockPosition = x expAll=1 NO { colbacks = #cccccc XY = [10.w]+10, 14 10 = TEXT 10.text.field = title 10.offset = 5,10 }}page.10.2 = GMENUpage.10.2.wrap = | page.10.2.NO { colbacks = #99cccc XY = 200, 20 10 = TEXT 10.text.field = title 10.offset = 5,15 10.fontColor = white 10.niceText = 1 10.fontSize = 20}

... ajouter ces lignes:

...page.10.2 = GMENUpage.10.2.wrap = | page.10.2.NO { colbacks = #99cccc XY = 200, 20

5 = IMAGE 5.file = fileadmin/tsbyex/sunset_keywest.jpg

10 = TEXT 10.text.field = title 10.offset = 5,15...

Cela a permis d'insérer l'image “sunset” comme fond. Mais nous voudrions que cette image se prolonge pour le menuentier, ce qui est effectué par l'ajout d'une propriété à l'objet GMENU au sujet duquel les objets GIFBUILDER sont à modifierpour ce qui concerne les valeurs d'excentrage (offset). Aussi, ajoutez :page.10.2.applyTotalH = 5

... et voici ce que vous obtenez!

Concernant la propriété “.applyTotalH”, regardez plus avant dans le TSref. Fondamentalement c'est un indicateur quifonctionne comme ceci:

Enfin vous pouvez créer de tels menus tout en souhaitant que vos menus aient une taille en hauteur toujours aussi grandeque celle de l'image de fond pour ne pas couper (“crop”) l'image de fond. Ajoutez ceci:...page.10.2 = GMENU

page.10.2.applyTotalH = 5page.10.2.min = , 200page.10.2.max = , 200page.10.2.wrap = | page.10.2.NO { colbacks = #99cccc XY = 200, 20 5 = IMAGE 5.file = fileadmin/tsbyex/sunset_keywest.jpg 5.height = 200

10 = TEXT 10.text.field = title...

Résultat:

Note: Les propriétés “.min” et “.max” définissent les dimensions “x” et “y”. Dans ce cas, nous n'avons spécifié que la valeurde la dimension “y” par l'utilisation de la virgule “,”:page.10.2.min = , 200page.10.2.max = , 200

PHP include-scriptsPHP_SCRIPT cObjectIl n'y a pas beaucoup plus à dire à ce sujet qui n'a pas été déjà dit. Ainsi ce que je vais faire est de vous diriger vers le TSref,section "PHP include scripts" à la fin du document. Il y une étude de cas ("Casestory”) très pointu que vous pouvez fairecomme exercice.

Il y a en outre une grande démonstration sur le Testsite, mais en fait, vous travaillez dessus. Malheureusement vous aveztravaillé sur un Template de test, aussi en vous dirigeant vers la page "index.php?id=30" vous n'y voyiez seulement que vosdernières aventures avec le Template de test. Donc, désactivez votre Template de test pour un instant et échappez vous dece guide :

(Rappelez-vous d'activer "Clear All Cache" dans le [menu] after deactivating...)

InspirationSi vous avez besoin d'inspiration pour vos scripts, vous devriez vraiment jeter un coup d'oeil à certains des scripts d'origine.Le plus fondamental est le script “af media/scripts/guest.inc” du “guestbook”. Je ne vais pas énumérer le code ici. Il y en atrop.

N'oubliez pas de regarder le static_template '"content.tt_guest" également. Le TypoScript inclut dedans est la la clef pourcomprendre comment vous reliez TypoScript à vos propres scripts.


Exemple: “Userdefined tags”J'ai pensé à un grand exemple pour un script d'inclusion (include script). Vraiment utile. Sur le site Web www.typo3.comj'énumère parfois du code TypoScript. Cela est fait avec une étiquette spéciale que je vais vous présenter ici. Afin del'essayer, nous le rajouterons au testsite original, parce qu'il comporte un certain contenu qui viennent nous faciliter leschoses ici.

1) Ouvrir le Template de testsite et ajouter ceci :

# Add the custom tag, <TS>...</TS> to the parseFunc of bodytexttt_content.text.20.parseFunc.tags { ts.stripNL = 0 ts = PHP_SCRIPT ts.file = fileadmin/tsbyex/testtag.inc}

2) Ouvrir le document fileadmin/tsbyex/testtag.inc avec votre éditeur de texte favori et vérifiez qu'il y a ce contenu :<?

$contentOfTag = $this->getCurrentVal();$content = ''.$contentOfTag.'';

?>

3) Ouvrir "Startpage" sur le testsite et ajouter les étiquettes du < ts>… </ts > comme vous voyez ici :

… et espérez pour. Ceci est le résultat :

Avançons nous un peu plus loin, et incluons une bibliothèque avec une classe (class). Par le temps qui court, c'est unenécessité de toute façon, donc …

1) Ajoutez/modifiez ceci au Template de TypoScript : # Add the custom tag, <TS>...</TS> to the parseFunc of bodytexttt_content.text.20.parseFunc.tags { ts.stripNL = 0 ts = PHP_SCRIPT ts.file = fileadmin/tsbyex/testtag2.inc}

includeLibs.testclass_example = fileadmin/tsbyex/testclass.inc

2) ouvrez le document fileadmin/tsbyex/testtag2.inc et fileadmin/tsbyex/testclass.inc avec votre éditeur de texte favori etvérifiez que le contenu est :

fileadmin/tsbyex/testtag2.inc<?

$test_object = new testClass;$contentOfTag = $this->getCurrentVal();$content = $test_object->formatTS($contentOfTag, 1);

?>

fileadmin/tsbyex/testclass.inc<?class testClass {

function formatTS($input, $ln) {$input = ereg_replace("^[^".chr(10)."]*.","",$input);$input = chop($input);$cArr = explode(chr(10),$input);reset($cArr);$n = ceil(log10(count($cArr)));$lineNum="";while(list($k,$v)=each($cArr)) {

if ($ln) $lineNum = sprintf("% ".$n."d",($k+1)).": ";$v=htmlspecialchars($v);$cArr[$k] = str_replace(" ",chr(160),$lineNum.$v);

}$output = implode($cArr, " ")." ";$output = ''.$output.'';return $output;

}}?>

3) Pour finir, saisissez ceci dans le “content record”:

… et vous devriez voir ceci dans votre browser frontend, quand vous rechargez :

Challenge (PHP_SCRIPT1)Écrire un script qui montre deux formfields, saisissez y deux nombres et quand ils sont envoyés sur la même page, vouscalculez la somme. Et vous l'affichez.

Challenge (PHP_SCRIPT2)Découvrez ce que la fonction “enableFields()” de la classe cObj (tslib/content.php) fait. (portant la fonction courante est danst3lib/page.php). Quels arguments prend-il et comment pourriez vous les employer effectivement ?


Content rendering (restitution de contenu)IntroductionVous devriez lire le document Pdf "content_rendering.pdf" sur ce sujet.

Mais une page de contenu régulier est normalement restituée par le static_template "content (default)" que vous incluezavec votre Template :

Le contenu de static_template "content (default)" inclut lui-même d'autres static_template. L'un d'entre eux est le célèbre"styles.content (default)" lequel contient beaucoup d'objets TypoScript “premade” (prédéfinis) et qui sont copiés dans desendroits utiles de la “nodetree” (arbres des noeuds).

Regardez dans le “Object Browser” et vous y verrez qu'un objet “rootlevel” "tt_content" est apparu. L'objet toplevel"tt_content" est le cObject qui effectue la restitution des contenus à partir de la table "tt_content" par défaut! Et ilsemble débuter par un “Case” sur un objet de contenu qui détermine le type de content de l'élément content en question.


CONTENTLe cObject "CONTENT" est utilisé pour chercher le contenu à partir de la table "tt_content". Il effectue un SELECT-query surla database et le résultat est alors - record par record - “rendered” (restitué) par l'objet toplevel "tt_content." (à moins quenous n'indiquions autre chose)

Exemple:(d'abord : inclure le static_template "content (default)" si vous ne l'avez pas déjà fait!) page.10 = CONTENTpage.10 { table = tt_content select.orderBy = sorting select.where = colPos=0}

Résultat:


C'est aussi simple que cela !

colPosMais qu'est-ce "colPos=0"?

Bon, Typo3 peut (par défaut) travailler sur quatre colonnes de contenu définies par le champ "colPos" de la table tt_content.Ceci montre comment l'interface affiche les colonnes et comme vous le voyez actuellement, il n'y a aucun item dans lesautres colonnes :


Essayez de créer quelque nouveaux contenus dans la colonne "border" :

… et il apparaît bien dans la colonne "border" :

Afin d'insérer le contenu sur le site Web, vous devez savoir quelle valeur le champ "colPos" a pour la colonne “border” (debord). Aussi, allez sur “$tc-browser” dans le module “Tools” :


La valeur est "3". Modifiez ainsi votre TypoScript comme ceci : page.10 = CONTENTpage.10 { table = tt_content select.orderBy = sorting select.where = colPos=3}

Résultat:


styles.content (default)Donnons nous une minute pour regarder dans le static_template "styles.content (default)". Tel que indiqué, il contient ungros paquets de “premade” TypoScript disponible pour que nous l'employons. En fait les tâches ci-dessus pourraient avoirété beaucoup plus faciles si elles avaient été basées sur ce que nous voyons ici :

page.10 < styles.content.get

substitutespage.10 = CONTENTpage.10 { table = tt_content select.orderBy = sorting select.where = colPos=0}

et de même avec la colonne "border":page.10 < styles.content.getBorder

Vous l'avez? Bon.

lib.stdheaderDans le static_template "content (default)" vous y voyez un objet "lib.stdheader" ainsi défini :lib.stdheader = COAlib.stdheader { stdWrap.wrapAlign.field = header_position stdWrap.typolink.parameter.field = header_link stdWrap.fieldRequired = header stdWrap.if { equals.field = header_layout value = 100 negate = 1 }...

… et utilisé à beaucoup d'endroits : # CType: bullettt_content.bullets = COAtt_content.bullets { 10 = < lib.stdheader 20 = CASE...

# CType: texttt_content.text = COAtt_content.text { 10 = < lib.stdheader 20 = TEXT 20 {...# CType: multimedia

tt_content.multimedia = COAtt_content.multimedia { 10 = < lib.stdheader 20 = MULTIMEDIA...

A l'opposé de l'utilisation normale d'un "shared code" qui est copié réellement à d'autres endroits, des cOjects peuvent êtrepartagés par référence à un objet “toplevel” (voir le TSref, section "cObjects").

En regardant dans le “Object Browser”, nous nous rendons compte que c'est vrai :

tt_content.text.10 a la valeur "< lib.stdheader" – pas les propriétés de l'objet!

C'est une implémentation très intelligente dans ce cas-ci parce que si le “header” de tous les éléments “content” est rendupar le même objet “lib.stdheader”, c'est le seul endroit où faire des changements pour changer le rendu du “header” !

Exemple:page.10 < styles.content.getBorder

lib.stdheader >lib.stdheader = TEXTlib.stdheader.value = ALTERNATIVE HEADER !!

donne le résultat :

Indépendamment de ceci, je ne vais pas vous aider davantage avec le rendu de contenu standard. En se basant sur lematériel de ce document, vous devez passer en revue “tt_content node-treepar” et voir pour vous-même.

C'est comme pour les réponses aux grandes questions de la vie : "tout est dans le “”Scriptures””". : -)

RECORDCe cObject est utilisé pour ramener des enregistrements uniques. CONTENT a été conçu pour obtenir une listed'enregistrements – normalement depuis la table tt_content. Mais cela pourrait être n'importe quelle table :

Un example rapide:page.10 = RECORDSpage.10.source = 1page.10.tables = tt_contentpage.10.conf.tt_content = TEXTpage.10.conf.tt_content { field = header case = upper wrap = | }

résultat :

… parce que l'enregistrement dans la table "tt_content" avec l'uid "1" était :

Un autre exemple:dans la table “tt_address”, il y a quelques enregistrements avec des personnages des Simpsons. Ils sont à la page "Anothersite in.../Lists/Addresses/"temp.tt_address = COAtemp.tt_address.wrap = | <HR>temp.tt_address.10 = TEXT temp.tt_address.10 { field = name case = upper wrap = | }temp.tt_address.20 = IMAGEtemp.tt_address.20 { file.import.field = image file.import = uploads/pics/ file.import.listNum = 0 file.height = 100}

page.10 = RECORDSpage.10.source = 3,1,5page.10.tables = tt_addresspage.10.conf.tt_address < temp.tt_address

Résultat ici :

Notez comment "tt_content" dans le premier TypoScript est devenu "tt_address" parce que nous travaillons sur une tabledifférente.

Une exécution alternative qui fait exactement la même chose est ceci : tt_address = COAtt_address.wrap = | <HR>tt_address.10 = TEXT tt_address.10 { field = name case = upper wrap = | }tt_address.20 = IMAGEtt_address.20 { file.import.field = image file.import = uploads/pics/ file.import.listNum = 0 file.height = 100}

page.10 = RECORDSpage.10.source = 3,1,5page.10.tables = tt_address

Notez comment la ligne "page.10.conf.tt_address < temp.tt_address" a été retirée. Cette ligne a copié l'objet"temp.tt_address" et l'a utilisée pour le “rendering” de l'enregistrement. Mais l'option par défaut doit employer l'objet detoplevel nommé comme la table. Donc "tt_address" au “toplevel” restituera l'enregistrement si cette ligne est omise et estexactement ce ce que l'exemple montre ("temp.tt_address" a été changé en "tt_address").

Réponses aux ChallengesChallenge (stdWrap/1)Vous pouvez employer le date et le “strftime”. Chaque propriété a un type de donnée (datatype), "date-conf" et "strftime-conf"qui sont de base dans le manuel PHPpage.10 = TEXTpage.10.field = crdatepage.10.date = d-m-y H:i

Donne 01-07-00 15:48

page.10 = TEXTpage.10.field = crdatepage.10.strftime = %A %e. %B, %I:%M %p

DonneSaturday 1. July, 03:48 PM

page.10 = TEXTpage.10.field = crdatepage.10.strftime = %A %e. %B, %I:%M %pconfig.locale_all = deutsch

Donne

Samstag 1. Juli, 03:48

Challenge (stdWrap/2)page.10 = TEXTpage.10.data = leveltitle:-2

Challenge (stdWrap/3)page.10 = TEXTpage.10.field = subtitlepage.10.ifEmpty = Hello world

Challenge (stdWrap/4)page.10 = TEXTpage.10.field = subtitlepage.10.ifEmpty { field = title required = 1 wrap = |}page.10.wrap = <H3>|</H3>

"ifEmpty" (du stdWrap) est une valeur de chaîne de caractères avec des propriétés de stdWrap, tant et si bien que le jeucontinue, en utilisant “.field” et “.required” (lequel est retourné si “.field” retourne une valeur vide) et “.wrap” (qui estseulement exécuté si “.required” ne donne pas lieu à un retour de valeur)

Alternativement (en utilisant “.if” au lieu du “.required”)page.10 = TEXTpage.10.field = subtitlepage.10.ifEmpty { field = title if.isTrue.field = title wrap = |}page.10.wrap = <H3>|</H3>

Challenge (cObject/1)page.10 = COA# Header to this sectionpage.10.10 = TEXTpage.10.10 { value = This is the page title:... 20.wrap = Subtitle: | 20.required=1}

Challenge (cObject/2)page.10 = COApage.10.if.isTrue.field = subtitle...

Voir le TSref (- > if) pour des propriétés de cet objet. Dans ce cas-ci le ->if renvoie vrai (true) si le fieldvalue du sous-titren'est pas vide

Challenge (cObject/3)page.10 = COApage.10.if.value = 1page.10.if.isGreaterThan.data = level:1...Ici nous comparons deux valeurs. C'est un peu 'backwards' un retour en arrière, mais voilà comment cela fonctionne : "ifretourne “true” si le “level” où nous sommes (rootline level, démarre à zéro pour la rootpage) est plus grande que la valeurdéfinies by le “if.value"”

Questions (cObject/4)Typo3 redimensionne réellement l'image.

Le premier exemple a le nom de fichier "fileadmin/tsbyex/alligator.jpg".

Le deuxième exemple a le nom de fichier "typo3temp/3de305c72b.jpg". Le nom de fichier est le résultat retaillé d'un “md5-hash” calculé pour l'image lors de la fabrication du code de TypoScript. Notez qu'un changement des propriétés pour“imgResource”, c'est également un nouveau fichier dans le répertoire /typo3temp/ et donc celui ci avec le tempsrassemblera beaucoup d'images inutilisées.

Challenge (cObject/5)Version exhaustive : page.10 = IMAGEpage.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 imageLinkWrap = 1 imageLinkWrap.enable = 1 imageLinkWrap.JSwindow = 1}

La version "Rolls Royce":page.10 = IMAGEpage.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200 imageLinkWrap = 1 imageLinkWrap.enable = 1 imageLinkWrap.JSwindow = 1 imageLinkWrap { bodyTag = <BODY bgColor=black> wrap = <A href="javascript:close();"> | </A> width = 400m height = 300 JSwindow = 1 JSwindow.expand = 22,30 }}

... donne pour résultat:

La fenêtre est fermée avec un clic sur l'image qui est limitée au une dimensions maximale de 400x300. La taille de lafenêtre Javascript est basée sur la taille de l'image mais 22 et 30 Pixels sont ajoutés afin de mettre des bords à la fenêtre.

Challenge (cObject/6)page.10 = IMG_RESOURCEpage.10 { file = fileadmin/tsbyex/alligator.jpg file.width = 200}page.10.stdWrap.wrap = <table border=1 cellpadding=30 background="|"><tr><td> Hello World</td></tr></table>

(la dernière ligne est une ligne !)

Challenge (cObject/7)page.5 = TEXTpage.5.value = Before rulerpage.5.wrap = | page.10 = HRULERpage.10 { lineThickness = 3 lineColor = red}page.10.stdWrap.spaceAfter = 20page.10.stdWrap.spaceBefore = 10

page.15 = TEXTpage.15.value = After ruler

Ceci a comme conséquence :

Notez que nous avons du mettre une étiquette après le "Before ruler" text. Dans le cas contraire, l'espace ci-dessusn'aurait pas fonctionné. Le code HTML:Before ruler <img src="clear.gif" width=1 height=10 border=0> <table border=0 cellspacing=0 cellpadding=0 width=99%> <tr> <td bgColor="red"><img src="clear.gif" width=1 height=3></td> </tr></table><img src="clear.gif" width=1 height=20 border=0> After ruler

Challenge (cObject/8)page.bodyTagMargins = 0page.10 = OTABLEpage.10 { tableParams = border=0 cellpadding=0 cellspacing=0 width=1 offset = 0,20

10 = TEXT 10.value = What a cute little alligator! Dear Lord, may it never grow up! 10.wrap = | 

20 = IMAGE 20.file = fileadmin/tsbyex/alligator.jpg 20.file.width=200 30 = CLEARGIF 30.width=250 30.stdWrap.wrap = |}

Challenge (cObject/9)page.10 = TEMPLATEpage.10 { template = FILE template.file = fileadmin/tsbyex/template.html workOnSubpart = DOCUMENT marks.SIMPLE_WORD = TEXT marks.SIMPLE_WORD.field = title subparts.LINK = TEXT subparts.LINK.current = 1 subparts.LINK.typolink { parameter.data = leveluid:1 wrap = | target = _blank }}

Challenge (PHP_SCRIPT1)Voir le fileadmin/tsbyex/test_calculate.inc

Essayer ce TypoScript (avec votre Gabarit d'essai) :

page.10 = PHP_SCRIPTpage.10.file = fileadmin/tsbyex/test_calculate.inc

Voici le résultat

Essayer d'entrer quelques nombres et de cliquez "Calculate!"

Voici la liste du code :<?

if (is_object($this)) {if (t3lib_div::GPvar("submit")) {

// Calculate result.// Disable cache, because the result must not be cached:

$GLOBALS["TSFE"]->set_no_cache();// Get values:

$value_1 = t3lib_div::GPvar("value_1");$value_2 = t3lib_div::GPvar("value_2");

// Output result:$content.="Result is: ".($value_1 + $value_2);

} else {// Draw the form:

$content.='<form action="index.php?id='.$GLOBALS["TSFE"]->id.'&type='.$GLOBALS["TSFE"]->type.'&no_cache=1"method="POST">

<input type="Text" name="value_1"> + <input type="Text" name="value_2"> = <input type="Submit" name="submit" value="Calculate!">

</form>';

}} else die("You MUST include this script as a PHP_SCRIPT cObject.");?>

Particulièrement, je voudrais que vous notiez que le “URL” du formulaire est la page courante et que le paramètre“&no_cache=1” est envoyé. Ce paramètre force le script de “index_ts.php” à "exécuter" le TypoScript du Template (restituantde ce fait les cOjects).Si ce paramètre n'est pas placé, nous pourrions au lieu d'obtenir ce résultat, voir le formulaire du faitdu cache des pages!

Quand le résultat est affiché, le cache est déjà neutralisé si le paramètre de “&no_cache” est envoyé. Mais au cas où il ne leserait pas, nous nous assurons que la page n'est pas cachée avec la fonction “$GLOBALS["TSFE"]->set_no_cache()”.

Challenge (PHP_SCRIPT2)Dans vos scritps “include” vous pouvez employer la fonction “$this->enablefields("[table-name>]")” pour obtenir de la partieprovenant de la “Where-clause” les enregistrements “deselects” d'une table, du moment qu'ils sont soit en “cache” ou“hidden” ou “timed” ou encore user-disabled” - basés sur les paramétrages dans “tables.php”.

Voilà pourquoi il est brillant ! Il vous fournit une manière “blindée” pour obtenir des résultats corrects pour vos “SQL-queries”en tenant compte des dispositifs dissimulés du “start-/endtime” et du “fe_group” pour les enregistrements retournés - si ces

dispositifs apparaissent.

Essayer cet exemple :

dans votre template (votre template de test)page.10 = PHP_SCRIPTpage.10.file = fileadmin/tsbyex/test_enablefields.inc

Allez sur le site:|pages|| AND NOT pages.deleted AND NOT pages.hidden AND (pages.starttime<=985903309) AND (pages.endtime=0 ORpages.endtime>985903309) AND pages.fe_group IN (0,-1)|

|tt_content|| AND NOT tt_content.deleted AND NOT tt_content.hidden AND (tt_content.starttime<=985903309) AND(tt_content.endtime=0 OR tt_content.endtime>985903309) AND tt_content.fe_group IN (0,-1)||tt_address|| AND NOT tt_address.deleted AND NOT tt_address.hidden|

Comme vous pouvez voir, la fonction va afficher avec le debug() function, voyez le fichier /”/fileadmin/tsbyex/test_enablefields.inc” le résultat de la “WHERE-clause”.

Pour toutes les “table”, "page", "tt_content" et "tt_address" le champ “deleted” ne peut contenir “true”. Ce champ “deleted”est disposé pour les enregistrements supprimés de Typo3. Ainsi toutes les tables sont 'checked' sur leur “hidden-field”

Mais apparemment, la table "tt_address" n'a pas de champs “startime” et “endtime” au contraire de "pages" et de"tt_content".

Une rapide vérification dans “tables.php”:

(pages)...$tc[pages] = Array (

"ctrl" => Array ("label" => "title","tstamp" => "tstamp","sortby" => "sorting","title" => "Page|Side|Seite|Side|Pagina|Page","type" => "doktype","delete" => "deleted","crdate" => "crdate","cruser_id" => "cruser_id","enablecolumns" => Array (

"fe_group" => "fe_group","disabled" => "hidden","starttime" => "starttime","endtime" => "endtime"

),"mainpalette" => 1,"useColumnsForDefaultValues" => "doktype,fe_group,hidden"

...

(tt_content)$tc[tt_content] = Array (

"ctrl" => Array ("label" => "header","sortby" => "sorting","tstamp" => "tstamp","title" => "Pagecontent|Sideindhold|Seiteninhalt|Sideinnhold|Contenuto pagina|Contenu de la

page","delete" => "deleted","type" => "CType","enablecolumns" => Array (

"fe_group" => "fe_group","disabled" => "hidden","starttime" => "starttime","endtime" => "endtime"

),"typeicon_column" => "CType","typeicons" => Array (

...

(tt_address)$tc[tt_address] = Array (

"ctrl" => Array (

"label" => "name","default_sortby" => "ORDER BY name","tstamp" => "tstamp","delete" => "deleted","title" => "Address|Adresse|Adresse|Adresse|Indirizzo:","enablecolumns" => Array (

"disabled" => "hidden"),"thumbnail" => "image"

),...

Ces exemples montrent où les "enablefields" sont configurés.

“Code” de "fileadmin/tsbyex/test_enablefields.inc"<?

debug("pages",1);debug($this->enableFields("pages"),1);debug("tt_content",1);debug($this->enableFields("tt_content"),1);

debug("tt_address",1);debug($this->enableFields("tt_address"),1);

?>

Challenge (imgResource/1)page.bgImg.import { cObject = TEXT cObject.value = fileadmin/tsbyex/alligator.jpg cObject.override { required = 1 field = media listNum = 1 wrap = uploads/media/ | }}page.bgImg.width = 200

Challenge (GIFBUILDER/1)page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file { XY = [20.w]+20, 30 colbacks = olive

20 = TEXT 20.text.field = title 20.offset = 10,20 20.niceText = 1 20.fontSize= 20 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = #660000 20.emboss { offset = -2,-2 highColor = olive : +30 lowColor = olive : -30 blur = 30 opacity = 80 }}

Résultat:

Notez les définitions de couleur dans la propriété “.emboss”. Le TSref indique que la valeur est "GraphicColor" laquelle aune option qui nous laisse arithmétiquement changer la valeur de couleur. Dans ce cas-ci, la couleur "high" (light) estéclaircie (linear brightness value) de “30” et la "low" est obscurcie de même de “30”. Malheureusement, Typo3(ImageMagick...) ne supporte pas le mode “blend” (combinaison) "multiply" et "screen" qui sont habituels pour beaucoupdes programmes de manipulation d'image. Ces modes auraient été plus correctes dans ces situations.

Challenge (GIFBUILDER/2)page.10 = IMAGEpage.10.file = GIFBUILDERpage.10.file { XY = 200, 160 colbacks = silver

20 = TEXT 20.text.field = title 20.offset = 0,120 20.niceText = 1 20.align=center 20.fontSize= 40 20.fontFile = t3lib/fonts/verdana.ttf 20.fontColor = yellow # Left, top 30 = IMAGE 30.file = fileadmin/tsbyex/alligator.jpg 30.file.width=50 30.offset = 5,5 # Left, bottom 31 < .30 31.align = , b 31.offset = 5,-5 # Right, top 32 < .30 32.align = r , t 32.offset = -5,5 # Right, bottom 33 < .30 33.align = r , b 33.offset = -5,-5}

Résultat:

Les propriétés “.align” et “.offset” sont reliées entre elles comme vous voyez. Si vous spécifiez l'alignement à "r,b" (right -bottom), l'excentrage est relatif à cette position et vous devez spécifier "-5, -5" pour décaler l'image vers le haut et la gauche.

Notez, en outre, comment la syntaxe de TypoScript est utilisée pour copier le premier objet à la position adéquate dansl'autre objet, nous préservant de ce fait de redondances qu'auraient impliqué la définition du même nom de fichier àplusieurs reprises, encore et encore… Voilà comment il apparaît dans le “Object Browser”:

Challenge (GIFBUILDER/3)Ajoutez: # Left border 40 = BOX 40.color = red 40.dimensions = 0,0,2,160 # Right border 41 < .40 41.align = r # Top border 42 < .40 42.dimensions = 0,0,200,2 # Bottom border 43 < .42 43.align = ,b}

Résultat:

Challenge (TMENU/1)... wrap = <tr><td nowrap> | </td></tr> target = page NO { afterImg = media/bullets/bullet1_n.gif afterROImg = media/bullets/bullet1_h.gif afterImgTagParams = hspace=2 RO = 1 after = ...

Challenge (TMENU/2)... after = ATagBeforeWrap = 1 linkWrap= | }}page.10.3 < page.10.2page.10.3.wrap >page.10.3.NO.before = page.10.2.expAll = 1

Résultat:

(afin d'avoir assez d'items de menu, j'ai dû déplacer quelques pages provenant de "Another site in...")

Challenge (TMENU/3)page.10 = HMENUpage.10.1 = TMENUpage.10.1.target = pagepage.10.1 { expAll = 1

wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1hspace=200 height=1 vspace=3 border=0></td></tr> | </table> NO.linkWrap = | NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0> | </td></tr> NO.ATagBeforeWrap = 1 ACT < .NO ACT = 1 ACT.linkWrap = |}page.10.2 = TMENUpage.10.2 { wrap = <tr><td nowrap> | </td></tr> target = page NO { afterImg = media/bullets/bullet1_n.gif afterROImg = media/bullets/bullet1_h.gif afterImgTagParams = hspace=2 RO = 1 after = ATagBeforeWrap = 1 linkWrap= | } ACT < .NO ACT =1 ACT.linkWrap = | }

Challenge (TMENU/4)

temp.challengeMenu = HMENUtemp.challengeMenu.stdWrap.wrap = <TABLE width="200" border="0" cellspacing="0" cellpadding="0"bgcolor="#004828"><TR><TD><TABLE border="0" width="100%" cellspacing="1" cellpadding="2">|</TABLE></TD></TR></TABLE>temp.challengeMenu.entryLevel = 0temp.challengeMenu.1 = TMENUtemp.challengeMenu.1.target = _toptemp.challengeMenu.1.NO { allWrap = <TR><TD bgcolor="#638E7B" align="center" valign="top" width="5"><IMGsrc="media/bullets/blackdot.gif" width="5" height="9"></TD><TD bgcolor="#638E7B" width="160"> | </TD></TR> ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper}temp.challengeMenu.1.ACT < temp.challengeMenu.1.NOtemp.challengeMenu.1.ACT = 1temp.challengeMenu.1.ACT { linkWrap = | }temp.challengeMenu.2 = TMENUtemp.challengeMenu.2.target = _toptemp.challengeMenu.2.NO { allWrap = <TR><TD colspan="2" bgcolor="#D0DCD8">|</TD></TR> ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper}temp.challengeMenu.2.ACT < temp.challengeMenu.2.NOtemp.challengeMenu.2.ACT = 1temp.challengeMenu.2.ACT { allWrap = <TR><TD colspan="2" bgcolor="#FFFBE7">|</TD></TR>

linkWrap = |}

page.noLinkUnderline =1page.10 < temp.challengeMenu

Exemple (TMENU)temp.leftmenu = HMENUtemp.leftmenu.entryLevel = 0temp.leftmenu.1 = TMENUtemp.leftmenu.1.target = _toptemp.leftmenu.1.collapse = 1temp.leftmenu.1.wrap = <table border=0 cellpadding=0 cellspacing=0> | </table>temp.leftmenu.1.NO { allWrap = <TR><TD colspan=2><img src="clear.gif" width=1 height=5></TD></TR><TR><TD colspan=2> |</TD></TR> ATagBeforeWrap = 1 linkWrap = | stdWrap.case = upper}temp.leftmenu.2 = TMENUtemp.leftmenu.2.target = _toptemp.leftmenu.2.wrap = | <TR><TD><img src="clear.gif" width=1 height=10></TD><TD></TD></TR>temp.leftmenu.2.NO { allWrap = <TR><TD><img src="clear.gif" width=10 height=1></TD><TD> | </TD></TR> after = <img src="media/bullets/stipler3.gif" height=1 vspace=1> |*||*| <img src="clear.gif" width=1height=1> ATagBeforeWrap = 1 linkWrap = | }

page.10 < temp.leftmenu

Résultat:

Challenge (IMGMENU/1)... dWorkArea = 77,15

NO.distrib = 0, 15 NO.10 = TEXT NO.10 { text.field = title fontSize = 11 fontColor = black niceText = 1 offset = 0,0 imgMap.explode = 3,2 } NO.20 = BOX NO.20 { dimensions = 0,3,120,1 color = white }}

Note que le "||" du "NO.20" est supprimé afin que la ligne blanche apparaisse sous chaque élément!

Challenge (IMGMENU/2):... NO.20 = BOX NO.20 { dimensions = 0,3,120,1 color = |*| white || black |*| }}

Résultat:

Challenge (GMENU/1)page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { XY = [10.w]+20,20 colbacks = olive 10 = TEXT 10.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1 10.emboss { offset = -2,-2 highColor = olive : +30 lowColor = olive : -30 blur = 30 opacity = 80 }}

page.10.1.RO < page.10.1.NOpage.10.1.RO = 1page.10.1.RO { 10.emboss.offset = 2,2}

Exemple élaboré (GMENU)Mettre ceci dans le champ “Constants”:buttonH = 25buttonColor = #ccccff

Mettre ceci dans le champ “Setup”:temp.topmenuText = TEXTtemp.topmenuText { text.field = title offset = 10,17 fontFile = fileadmin/fonts/arial_bold.ttf fontSize = 15

niceText = 1}

temp.topmenu = HMENUtemp.topmenu.1 = GMENUtemp.topmenu.1.target = _toptemp.topmenu.1.accessKey = 1temp.topmenu.1.NO { XY = [100.w]+22, {$buttonH} colbacks = {$buttonColor} 10 = IMAGE 10.file = GIFBUILDER 10.file { XY = 6,30 colbacks = {$buttonColor} : *0.5 100 = SCALE 100.width = 6 100.height = {$buttonH} } 10.mask = GIFBUILDER 10.mask { XY = 6,30 10 = IMAGE 10.file = media/buttons/maskpart1.tif 100 = SCALE 100.width = 6 100.height = {$buttonH} } 20 = IMAGE 20.file = GIFBUILDER 20.align = r 20.file { XY = 6,30 colbacks = {$buttonColor} : *0.5 100 = SCALE 100.width = 6 100.height = {$buttonH} } 20.mask = GIFBUILDER 20.mask { XY = 6,30 10 = IMAGE 10.file = media/buttons/maskpart2.tif 100 = SCALE 100.width = 6 100.height = {$buttonH} } 30 = IMAGE 30.file = GIFBUILDER 30.offset = 6,0 30.file { XY = [100.w]+10,{$buttonH} colbacks = {$buttonColor} : *0.5 100 < temp.topmenuText 100.hide = 1 } 30.mask = GIFBUILDER 30.mask { XY = [40.w], [40.h] 40 = IMAGE 40.file = media/buttons/maskpart3.tif 60 = SCALE 60.width = [100.w]+10 60.height = {$buttonH} 100 < temp.topmenuText 100.hide = 1 } 100 < temp.topmenuText}temp.topmenu.1.RO < temp.topmenu.1.NOtemp.topmenu.1.RO=1temp.topmenu.1.RO.100.fontColor = white


Résultat:

Challenge (GMENU/2)page.10 = HMENUpage.10.1 = GMENUpage.10.1.NO { XY = [10.w]+20,20 colbacks = olive 4 = IMAGE 4.file = media/buttons/middle.gif 4.tile = 10

5 = IMAGE 5.file = media/buttons/left.gif

6 = IMAGE 6.file = media/buttons/right.gif 6.align = r

10 = TEXT 10.text.field = title 10.offset = 0,13 10.align = center 10.niceText = 1}

Challenge (GMENU_LAYERS/1)page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.phppage.10 = HMENUpage.10.1 = GMENU_LAYERSpage.10.1 { layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; xPosOffset =-10 lockPosition = x expAll=1 NO { colbacks = #cccccc XY = [10.w]+10, 14 10 = TEXT 10.text.field = title 10.offset = 5,10 }}page.10.2 = GMENUpage.10.2.wrap = | page.10.2.NO { colbacks = |*| #99cccc || #99cccc : *1.2 |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.niceText = 1

20 = BOX 20.dimensions = 0,0,2,20 20.color = #660000

21 < .20 21.align = r

22 = BOX || 22.dimensions = 0,0,120,2 22.color = #660000

23 = |*||*| || BOX

23.dimensions = 0,0,120,2 23.color = #660000 23.align = ,b}

Résultat:

Commentaires: Les objects GIFBUILDER 22 et 23 sont activées par optionSplit. Dans le cas du "22" optionSplit assigne"BOX" comme valeur pour le premier item du menu. Dans le cas du "23" optionSplit assigne "BOX" comme valeurseulement pour le dernier item. Référez-vous à l'exemple optionSplit de TSref.

Challenge (GMENU_LAYERS/2)page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.phppage.10 = HMENUpage.10.1 = GMENU_LAYERSpage.10.1 { layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden; yPosOffset =-30 lockPosition = y expAll=1 NO { wrap = | colbacks = |*| #ff6600 || #ff6600 : -30 |*| XY = 130, 15 10 = TEXT 10.text.field = title 10.text.case = upper 10.offset = 5,10 10.niceText = 1 10.fontFace = t3lib/fonts/verdana.ttf 10.fontSize = 8 10.spacing = 2 20 < .10 } RO < .NO RO=1 RO.backColor = #ff9900}page.10.2 = GMENUpage.10.2.wrap = | page.10.2.NO { colbacks = |*| #99cccc || #99cccc : *1.2 |*| XY = 120, 20 10 = TEXT 10.text.field = title 10.offset = 5,13 10.niceText = 1

20 = BOX 20.dimensions = 0,0,2,20 20.color = #660000

21 < .20 21.align = r

22 = BOX || 22.dimensions = 0,0,120,2 22.color = #660000

23 = |*||*| || BOX 23.dimensions = 0,0,120,2 23.color = #660000 23.align = ,b

}

Résultat:

Commentaires:

La chose principale est de changer l'orientation du GMENU_LAYERS ici est de réarranger les paramètres pour les couchesdynamiques (dynamic layers): layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden; yPosOffset =-30 lockPosition = y

Quand vous appliquerez le menu sur une page, vous aurez besoin de fignolez (“tweek”) ces paramètres pour adapter ledesign de la page afin que le menu apparaisse correctement avec les coordonnées spécifiées.

Entre autres choses astucieuses dans ce menu, il y a 20 < .10

Ceci crée une copie du textobject, parce que sans le texte, il tend à être trop faiblard. Ainsi c'est un “workaround”(contournement) du fait que nous ne disposons pas de la version "bold" de la police. Voilà à quoi il ressemblerait sans:

typoscript by example - bejaia - actualités

Documents