DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

TypoScript By Example

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed by:
Changed:2004-08-16T19:46:43
Author:Kasper Skårhøj
Email:kasper@typo3.com
Info 3:durant_terry@hotmail.com (traducteur)
Info 4:

TypoScript By Example

Revised Kasper Spring 2001 – french release 11/2003 (terry Durant)

Extension Key: doc_core_tsbyex_fra

Copyright 2000-2002, Kasper Skårhøj, <kasper@typo3.com>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents

TypoScript By Example 1

Introduction 3

Ce document 3

D'autres documentations 3

En ai-je besoin? 3

Qu'est ce que le TypoScript template (gabarit)? 3

Préalable du traducteur 3

Overview 3

Exemple cas : “Inclure un gabarit” 5

Gérer la hiérarchie des Templates 6

Cas d'exemple : "Extension" 6

Managing extensions 7

Pour plus de lecture 8

Gabarit standard 8

Introduction 8

Table static_template 9

Content rendering details 9

Typical setup of a standard template (paramétrage typique d'un gabarit standard) 9

Tutorial de base : démarrez un nouveau website 10

Un simple website à partir de zéro 10

Un website avec un menu léger 12

Insérer un menu graphique 13

Contenu du site 13

Concepts 15

&id” et “&type” 15

Enveloppes (wraps) 16

Structure de données (arrays) (1,2,3,4...) 17

Numerical arrays (structure de données numériques) 17

String arrays (structure de données de chaîne de caractères) 17

styles.content.[xxx]” 18

Example from "content (default)" 18

Sections éducatives 21

Introduction 21

Code notation conventions: 21

stdWrap 23

Le concept “stdWrap” 23

Propriétés de stdWrap 24

Get data 24

Override / Conditions 26

Objets de contenu (cObject) 28

Introduction 28

COA 28

FILE 30

IMAGE 30

IMG_RESOURCE 31

CLEARGIF 31

HRULER 31

CTABLE and OTABLE 32

Gabarit (TEMPLATE) 35

FORM (formulaire) 38

CAS d'exemple 40

LOAD_REGISTER 42

imgResource et GIFBUILDER 44

Introduction 44

Un fichier normal en entrée 44

Masques Bitmap 44

Importer une image 45

GIFBUILDER 47

GIFBUILDER - bases 49

+calc 49

.niceText 50

L'objet GIFBUILDER TEXT 51

L'objet IMAGE 51

Navigation 53

HMENU 53

TMENU 53

IMGMENU 55

optionSplit 57

GMENU 57

Images avec GMENU 59

GMENU_LAYER 60

Prolonger un fond d'image au menu entier 61

PHP include-scripts 64

PHP_SCRIPT cObject 64

Inspiration 64

Exemple: “Userdefined tags” 65

Content rendering (restitution de contenu) 68

Introduction 68

CONTENT 69

colPos 70

styles.content (default) 73

lib.stdheader 73

RECORD 74

Réponses aux Challenges 77

Introduction

Ce document

C'est une introduction à l'utilisation de TypoScript. Il essaye de vous permettre de comprendre la manière dont est pensé et fonctionne TypoScript. Beaucoup de petits exemples sont utilisés pour vous aider à saisir TypoScript qui vous préparent peu à peu à aller de plus en plus loin.

D'autres documentations

Undocument très important est TypoScript reference (TSref) , qui contient tous les détails sur TypoScript. Le problème avec un document de référence est qu'il y a très peu d'exemples. Ce présent document est une façon plus amicale pour le lecteur de se familiariser avec TypoScript.

Tutoriels

Il y a une série d'autres didacticiels très productifs à lire également. Ainsi, “Content_rendering.pdf” enest un dont le sujet traite de “content rendering” (restitution des contenus).

En ai-je besoin?

Oui. Si vous travaillez dans les couches (layer) au-dessus de F1 dans “Typo3 Overview”. Mais tout dépend de jusqu'où vous voulez aller. Si vous trouvez TypoScript très embrouillé, vous obtiendrez un excellent résultat avec très peu d'options et restituerez ensuite le contenu avec vos propres PHP-scripts. Vous pouvez aussi baser votre projet sur un des modèles (templates) standards qui sont du type “fixed layout”, mais extrêmement facile à configurer pour une large possibilitéd'options différentes.

Qu'est ce que le TypoScript template (gabarit)?

Préalable du traducteur

Je me permets, Kasper m'en excuserad'introduire cet addendum pour tenter de vous faire rapidement et clairement comprendre quelques mécanismes fondamentaux dans le fonctionnement de Typo3 quand à la restitution des pages.

Je dois cette “illumination” à Maries Cohen qui dans un document, “Typo3 Template Basics” que vous trouvez à cette adresse http://www.mcuniverse.com/index.php?id=847&type=0 , réussit à nous expliquer, preuve à l'appui, c'est à dire son site, et avec beaucoup de simplicité et d'efficacité les composants et comment ils interagissent.

Comme elle nous l'explique, vous constaterezqu'il existe trois élémentsqui interagissent lors du processus de restitution puis d'affichage d'une page par Typo3 :

Part 1: “HTML Template“ (Gabarit Html) dont l'exemple qu'elle nous montre correspond à la structure de son site avec le bandeau, puis le menu du dessus, etc ..

Part 2: “Typo3 Template” (Gabarit Typo3) dont elle nous montre le contenu et dont nous pouvons constater les effets sur son site. Le Template (gabarit) Typo3 définit pour Typo3 au moment de la restitution comment il doit interagir avec le “HTML Template” et le “CSS Stylesheet” ainsi que différentes manières qu'il doit appliquer pour afficher la page.. Le “Typo3 Template” est composé de trois sections principales : “Constants”, “Setup” et “Static”.

Part 3: “CSS Stylesheet” (Feuille de Style en cascade) habituelle pour tous les habitués de la publication sur Internet ou en Html.

Noterez la distinction introduite de restitution (pourrait aussi s'appelermise en page mais ce serait trop restrictif) et affichage qui met en jeu notamment le cache des pages.

Overview

Normalement un "template" est un FICHIER HTML qui décrit une composition (layout) et certaines des zones (areas) qui devraient être substitués par un autre contenu (content) déterminé.Dans Typo3 vous pouvez utiliser cette approche, même si vous faites du TypoScript. Voir les autres didacticiels pour plus d'information.

Mais un "template" ou un "template record" (gabarit enregistré) comme celui dont on parlera dans ce document est en fait un enregistrement (record) dans une table, nommée "sys_template", de la base de données de Typo3. Le fait d'enregistrer un lien entre une Page quelconque et ce "template record" va définir la manière dont la page va s'afficher en appliquant le Template auquel on l'a associée.

Pour comprendre les Templates, vous devriez lire le “Guide d'introduction à TypoScript”. Vous trouverez aussi une information précise et détaillée dans le document “TSREF” (Ts Référence).

Vous êtes connecté en tant que “admin” sur Typo3 et dans le menu (cadre de gauche) vous sélectionner l'option “Doc”, puis sélectionner un Template dans la liste des objets proposés, par exemple "NEW SITE, based on standard" qui a été vu dans “Quickstart tutorial”. Cette page est une vue d'ensemble des champs de la table du Template :

"Template title": titre qui apparaîtra dans la liste des

a

"Template title": titre qui apparaîtra dans la liste des enregistrements sur l'onglet “web-tab” Choix libre

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

"Constants": contientles "Constantes” que vous déclarez et qui sont ensuite utilisées à fin de substitution dans le champ “setup”. Exemple : "styles.content.textStyle.size" déclarée est insérée dans le champ “setup” de la manièresuivante "{$styles.content.textStyle.size}". Les constantes sont substituées dans le même ordre que ceuxprésenté dans ce champ.Il est important de comprendre que des constantes ne sont pas employées en tant que variables de programmation.Elles substituent seulement les instances des constantes déclarées lors de l'installation.Notez que les instances des Constantes que vous déclarez sont rajoutées à celles des gabarits (template) existants de la “rootline” ("RootLine". This is an array with information about title, uid from $uid an back to the root) et s'ajoutent également aux constantes déclarés dans les “gabarits inclus” (voir "Clear" (6)).

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

"Ressources": Ce champ peut contenir des médias comme des images, des masques, des polices Truetype, desfeuillesde styles (stylesheets), du HTML et des documents de texte Ceux-ci peuvent être référencés depuis TypoScript (Datatype "ressource") et sont alors alors copiés avec lesgabarits(template).

Lors de lalibélisationd'une référence à une "ressource", utilisez cette déclaration :"image*.gif" au lieu de :"image.gif".L'emploi de l'astérisque prépare le Gabarit pour la duplication car "image*.gif" permet d'assortir legabaritdupliqué avec son image correspondante dont le nom sera "image_01.gif" qui est justement celui généré lorsque un gabarit est reproduit par duplication.

"Clear" & "Rootlevel": "Clear" donne la possibilité d'annuler les déclaratifs des champs “constantes” et/ou “configuration(setup)” de gabarit pré-positionnés dans la lignée (rootline).Pour une explication plus approfondie, se référer au TSref.

"Rootlevel" détermine que ce point de l'organigrammedes pages va se comporter comme la racine (startpage) d'un nouveau site Web

l"Include static": vous laisse inclure des “gabarits statiques” fournis avec Typo3 par défaut.L'ordre (à partir de la racine) est l'ordre avec lequel, les gabarits sont inclus.Les “gabarits statiques” sont inclus avant le Gabarit du champ"Inclure un gabarit" (8).

"Include basis template": Pour inclure vos propres Gabarits.Voir le cas "Include basis template" exposé ci-après.

"Template on next level": Vous pouvez inclure un Gabarit qui s'appliquera pour les pages à partir du prochain niveau dans l'arbre- structure hiérarchique de Typo3!

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

b

img-1

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

Exemple cas : “Inclure un gabarit”

Une approche sympathique de l'utilisation des Gabarits est celle

a

Une approche sympathique de l'utilisation des Gabarits est celle permettant de créer des bibliothèques de code TypoScript dans un Gabarit pour l'inclure ensuite dans un autre Gabarit pour y réutiliser le code TypoScript. C'est exactement ce qu'est le “Gabarit statique”

Mais les “Gabarits statiques” ne peuvent pas être édités. Ils sont distribués avec Typo3 et ne sont pas destinés à être changés, mais sont prévus pour que leurs capacités soient étendues (de nouveaux gabarits statiques seront écrits). Vous avez par contre la possibilité d'inclure des Gabarits dans d'autres Gabarits.

Dans cet exemple je (Kasper) montrerai comment j'ai fait les sites Web de www.typo3.com et www.typo3.dk. Ils sont très semblables. Par conséquent, j'ai créé un Gabarit commun pour contrôler la conception. Mais j'ai également fait différentes "extensions" pour ce qui concerne l'anglais le danois etc..

Afin de partager un Gabarit entre deux sites ou plus, les sites doivent résider dans la même base de données. C'est le cas du site Web Typo3 dans les deux langues. Les avantages en sont très évidents: Tous les graphiques, pages et arrangements (layout) sont faciles à copier et à mettre à jour quand ils sont accessibles à partir de la même page d'accès Typo3.

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

img-2

img-2

Regardez maintenant les images ci-contre. Elles font partie du contenu

a

Regardez maintenant les images ci-contre. Elles font partie du contenu dans chacun des Templates de "com" et de "dk". Vous y voyez quelques valeurs qui sont substituées (remplacées). Pour chaque site, les contenus des méta-étiquettes (meta-tag) "mots-clés” (keywords) et "description" sont différents. Les constantes appropriées sont en effet substituées afin de les changer. Vous noterez également que le Template danois change quelques autres paramètres.

C'est très intéressant. Les changements locaux sont possibles dans un branchement du site Web tandis que l'arrangement (layout) global peut encore être changé depuis le Template principal. C'est fort sympathique de pouvoir ainsi utiliser des Templates standards. Ils ont un ensemble de constantes que vous pouvez modifier afin de personnaliser à votre site.

img-2

img-3

Gérer la hiérarchie des Templates

Vous pouvez facilement superviser quels sont les Templates inclus dans votre site avec la fonction “Template Analyzer” dans le module “web_ts”:

Celui-ci montre non seulement quels sont les “Templates” et les “Templates statiques” qui sont inclus mais également dans quelles commandes (et de là où ils sont lancés) ils sont traités et si un quelconque de ces Templates a des commutateurs (witch) activés ou non tels que "Clear constants" et "Clear setup"“Clear".

img-4

Cas d'e xemple : "Extension"

Les exemples ci-dessus ont indirectement montré l'ampleur des possibilités des extensions; Les changements spécifiques au site étaient des extensions (TypoScript substitués ou constantes) du Template principal.

A présent, je vais vous montrer comment les pages FAQ de la section “developer” de ce site Web ont est créées:

Tout d'abord, j'utilise un autre genre d'en-tête pour la section FAQ. Ce “headertype” a un cadre gris autour et vous pouvez choisir cet en- tête pour des items de “contenu” où que ce soit sur le site ("Layout 2"). Mais le type d'en-tête par défaut est "Layout 1". Ainsi pour la section FAQ (les pages "blueish" sur la première image ci-dessous), j'ai fait une extension car le type d'en-tête par défaut devrait être "2" et non "1" pour toutes les pages dans cette section, soit ce qui signifie "toutes les pages de la section FAQ et aussi à l'extérieur"."all pages from FAQ and outwards".

La tâche est effectuée en créant un nouveau Template sur la page "FAQ". Dans ce Template les champs "Clear" et "Rootline" ne doivent pas être activées. Si ils le sont, une nouvelle mouture du site Web démarrera en partant de ce point au lieu d'être une extension au Template de base!

Les informations du Gabarit sont montrée sur la deuxième image. Comme vous le voyez le type d'en-tête par défaut est spécifiée à "2" et la taille du bodytext par défaut est spécifiée à "1" (normalement "2").

Naturellement je pourrais changer la taille de police et le type d'en- tête pour chaque élément de contenu … mais franchement, c'est une manière tout à fait pénible de faire, alors que vous pouvez la spécifier aussi simplement que ceci …

Contrôler la section FAQ pour voir pour vous-même! Cela fonctionne. Aucune dispute.

Check the FAQ-section and see for yourself! It works. Aucun désagrément..

img-5

img-6

Managing extensions

Encore une fois, le “Template Analyzer” montre sa maniabilitéici:

img-7

Pour plus de lecture

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

Gabarit standard

Introduction

Typo3 offre une approche facile pour créer des sites Web et pour commencé avec TypoScript. Un groupe de Gabarits standards est packagé avec Typo3.

La plupart des sites Web basés sur Typo3 se fondent sur des Gabarits de TypoScript. Afin de comprendre les Gabarits, vous devriez lire cette introduction à TypoScript. Vous trouverez également une information complète dans le TSref.

Si vous voulez tester certains des Gabarits standards et étudier des exemples interactifs, se référer s'il vous plaît au “demosite” sur le site “demo.typo3.com”.

Table static_template

Les Gabarits statiques sont des enregistrements de la table "static_template" et sont des enregistrements de niveau racine. Celasignifie qu'ils sont toujours trouvés à la racine de la hiérarchie des pages (pagetree) et peuvent seulement être visualisés par des administrateurs. La table est également "en lecture seulement" (configuration dans les tables.php). C'est tous simplement parce queles Gabarits statiques ('"static_template") contiennent des enregistrements qui ne sont pas censés être changés par n'importe qui. Ils agissent comme un socle pré-définis (preset chunks) de code de TypoScript. La table "static_template" est distribuée avec chaque nouvelle version de Typo3 (contenant les enregistrements ajoutés).

Ci-dessous, vous pouvez voir le contenu du Gabarit statique tel qu'il était en septembre 2000. Celui-ci a pu avoir changé pour la version en cours de Typo3. Mais il est utile pour expliquer comment cela fonctionne:

"template: ...": C'est le Gabarit standard. Quand vous voulez créer un

a

"template: ...": C'est le Gabarit standard. Quand vous voulez créer un site Web basé sur un Gabarit standard, vous ajoutez ceci en-tête de la liste des gabarits statiques inclus dans votre GabaritTous les Gabarits standards incluent le Gabarit "content (default)" pour la fonction de restitution de Typo3.

"content (default)": Ce Gabarit contient un cOject "tt_content" qui sert pour restituer les items de contenu d'une page. Inclus par tous les Gabarits jusqu'à présent. Certains des types les plus exotiques (Ctype) concernant des items de contenu ne sont cependant pas restitués. "styles.content (défaut)" est inclus dans ce Gabarit.

"styles.content (défaut)": Cet élément contient un grand nombre d'objets TS prédéfinis pour l'usage avec par exemple “content- rendering, "powered-by"-logos, content-inserting”, "actionner- by"-logos, et ainsi de suite. Ces objets sont largement utilisés par "content (default)" et beaucoup de propriétés sont réglables en tantque constantes déclarées pour une modification facile du comportement de la restitution des contenus

"cSet (default)": C'est un genre d'extension au Gabarit "styles.content (default)". L'objectif est de substituer par exemple des définitions cibles(target-definitions) dans un grand nombre des objets du Gabarit "styles.content (default)" par une constante commune, ce qui le rend beaucoup plus commode la modification des valeurs pour tous les objets cibles.”cSet” concerne également d'autres valeurs applicables comme les couleurs de fond et les couleurs des polices et il concerne donc la couche supérieure de “restitution” (apparence). Très utile pour la création rapide des sites Web basés sur les Gabarits standards; 1) Inclure le Gabarit standard. 2) Inclure "cSet (default)". 3) Remplacer quelques paramètres de "cSet"..... Voyez comment il est utilisé dans les Gabarits sur le “demo-site”.

"frame set.": Différentsframe sets(jeu de cadre) standard. Utilisé par quelques Gabarits standards.

"styles...": Certains objets standards comme les menus, les sitemaps, les en-têtes et ainsi de suite. Cette section peut se développer avec un bon nombre depré réglagesintéressants comme des panneaux(boards), catalogues, calendriers systèmes (calender-systems) et ainsi de suite.

b

img-8

Content rendering details

Lire 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:

img-9

Dans le “Template Analyzer” il ressemble à ceci :

img-10

Tutorielde base : démarrez un nouveau website

A partir d'ici, encore plus d'exemples de TypoScript

Un simple website à partir de zéro

Si vous voulez commencer un site Web à partir du tout début, vous devez créer un Gabarit à la première page du site Web. Cette page peut être référencée comme "racine du site Web" ou généralement “Page d'accueil”. La "page d'accueil" n'est pas automatiquement la toute première page dans l'arbre hiérarchique des pages (pagetree) de Typo3 mais peut être toute page de l'arbre que vous voulez voir se comporter en tant que point de départ d'un site Web!

Le Gabarit initial doit avoir les boîtes à cocher (checkboxes) "Clear constants and setup" et "Rootlevel" activées. Afin de comprendre le pourquoi, vous devez savoir que tous les Gabarits à partir de la racine du pagetree et en parcourant le pagetree sont lus et exécutés.Ceci s'appelle le "rootline":

img-11

Dans cette image, sur la droite, le rootline (chemin à la racine) de la page "Experienced web...." (3) parcourt tout le chemin depuis la page "www.typo3.com" (zéro). Ceci parce qu' il y a un Gabarit enregistré à la page "www.typo3.com" avec l 'indicateur de rootlevel activé (voir ci-dessous). Sur la gauche vous voyez comment le rootline est représenté à l'intérieur de la zone de données PHP (PHP-array .

Si vous vous posez une question comme "Est-ce que la page 730 est dans le rootline?" alors la réponse est oui dans ce cas-ci, parce que la page avec l'identification 730 ("Introduction") s'avère justement être la deuxième page dans le rootline (à index 1). Veuillez voir le TSref pour plus d'information

La case "Rootlevel" activée implique que le Gabarit annonce le début d'un nouveau site Web pour la page où le Gabarit se trouve mis en fonction. Si vous ne placez pas ce checkbox, le Gabarit agit en tant qu'extension à n'importe quel Gabarit dans le rootline avant lui.

La case "Clear constants" activée implique que toutes les constantes des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page.

"Clear setup" activée implique que n'importe quel code de TypoScript des Gabarits précédents dans le rootline sont effacés avant que le chargement du Gabarit activé sur cette page.

img-12

Si vous essayez de regarder la page maintenant, un errormessage apparaîtra

img-13

Vous devez écriture quelques instances de TypoScript dans les champs "Constants" et "Setup". Normalement vous incluez certains des Gabarits statiques pour commencer, mais pour cet exemple nous faisons un petit Gabarit à partir de zéro. Écrivez donc les instances suivantes dans le champ "Constants":

bgCol = red

Vous avez à présent définiune constante appelée- "bgCol" – avec la valeur "red". Nous allons insérer d'autres constantes dans le champ "setup" en insérant :

page = PAGE
page.typeNum = 0

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

Ceci ressemble à ceci dans votre browser

img-14

Cet exemple montre un certain nombre de points concernant TypoScript.Commençonsavec les deux premières lignes. Ici "page" est définie pour être une “PAGE-object”. Une propriété exigée pour un “PAGE-object” est la valeur de 'typeNum” qui est spécialement utilisé quand un site Web utilise des cadres (frames) (dans ce cas, le typeNum identifierait les différents cadres). Si le typeNum est zéro, il correspond alors à une page sans la valeurdetype, soit par exemple"?id=51". C'est le cas des sites Web sans cadres (frames)

Une autre propriété de PAGE-objet est "bodyTag". A partir d'ici, vous entrez dans le domaine des étiquettes qui concernent le corps de page. Veuillez noter que la couleur de fond est rouge parce que nous avons inséré la constante dans le champ "Constants".

Enfin, un “Content-objet” du type "HTML" est défini. La valeur est mise à "Hello World". Ceci est envoyé hors fonction Typo3 au site Web (fonction Php). Mais vous verrez que la restitution est faite en “haut de casse” (majuscule) par ce que la valeur et toutes les propriétés sont analysée par la fonction "stdWrap" (habillage standard). Une propriété de "stdWrap" est le "case" qui peut être "upper" ou "lower". Faites une conjecture de ce que peut faire "lower" …

Un website avec un menu léger

Maintenant nous ajouterons un petit menu au site Web.Ce menu doit être situé au-dessus du texte "Hello World". Ajouter maintenant ceci au bas duchamp "Setup"

page.5 = HMENU
page.5.1 = TMENU
page.5.1.wrap = | <BR><BR>
page.5.1.NO {
  linkWrap = &nbsp;<font color=yellow> | </font>&nbsp;
  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'objetest 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 en rappeler, "a wrap” (enveloppe) signifiera qu'elle sera fractionnée par le caractère "|" et que les deux premières parties seront placées autour de "quelque chose". Dans ce cas-ci (page.5.1.wrap = | < BR><BR >) le menu entier est enveloppé de sorte que deux nouvelles lignes apparaissent après le menu.

Puis, quelques propriétés sont définies pour “.NO" sous TMENU. “.NO" signifiant l'installation des éléments de menu en condition “normale”. Une autre des conditions peut être "ACT" (Active) qui entraînerait que quand un menu-élément est quelque part dans le “chemin d'accès" (path), il est intégré dans le site Web. Par exemple vous pourriez changer la couleur de l'élément en blanc si vous voulez indiquer visuellement sur le menu-élément qu'un visiteur surfer a récemment écrit sur cette section du site.

Sous “.NO" vous définissez que chaque menu-élément est enveloppé dans une étiquette de police qui met en jaune le “lien”. "ATagBeforeWrap" est une option qui vous indique que l'étiquette de ”Lien” (< A >) doit être habillé dans le menu-élément avant l'application de l' étiquette de Police (ou bien la couleur jaune sera ignoré par l 'étiquette-couleur normale).

img-15

img-16

img-17

Insérer un menu graphique

Au lieu du menu textuel que vous avez juste défini, vous pourriez insérer le menu graphique du site Web Typo3. Ceci serait effectué en utilisant ce code en lieu et place du code précédent:

page.5 < temp.topmenu

Contenu du site

Maintenant vous voudriez ajouter le contenu au site Web. Dans la solution standard de TypoScript le table de contenu principale est "tt_content". Ainsi vous ajoutez un nouvel objet contenu du type CONTENT. Vous avez mis la propriété "table" avec la valeur “tt_content”.

Pour configurer la requête du “sql-select” vous définissez la propriété "pidInList" de l'objet "select". Quand vous le mettez à "this" le pid correspondant à l'enregistrement du contenu (content- record) DOIT correspondreau “id” de la page actuelle! "orderBy" est mis avec la valeur "sorting" qui correspond à la colonne dans la table tt_content qui va déterminer le tri des éléments

page.10 = CONTENT
page.10 {
  table = tt_content
  select {
    pidInList = this
    orderBy = sorting
  }
}

Pour que celafonctionne, vous devez définir comment chaque enregistrement de contenu va être disposé (layouted). Par défaut ceci est défini par le “root-object” l'objet racine "tt_content".

Voici un exemple court de TypoScript qui produirait du contenu pour l 'en-tête et le texte de CType :

tt_content = CASE
tt_content.key.field = CType

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

tt_content.text < tt_content.header
tt_content.text {
  3 = TEXT
  3.field = bodytext
  3.fontTag = {$cBodyTextWrap}
  3.br = 1
  3.space = | 10
  3.parseFunc {
    makelinks = 1
    makelinks.http.keep = path
    makelinks.http.wrap = <B>|</B>
    makelinks.mailto.keep = path
    makelinks.mailto.wrap = <FONT color="blue">|</FONT>
    makelinks.mailto.ATagBeforeWrap = 1
  }
}

Il y a deux constantes ici, cBodyTextWrap et cHeaderWrap Celles-ci doivent être alors définies dans le champ “Constantes” du Gabarit et avoir pour valeur i

cHeaderWrap = <FONT face="Verdana" size="3" color="#333333"><B>|</B></FONT>
cBodyTextWrap = <FONT face="verdana" size="2"> | </FONT><BR>

Maintenant, ceci nous donnerait une en-tête de taille 3, Verdana, en gris et gras. Le bodytext serait formaté également avec le Verdana mais en taille2 et avec une étiquette < BR>- 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 sites basés sur des cadres 'frame'. Vous pourriez l'employer pour d'autres situations également. Je n'expliquerai pas le frameset ici, mais vous trouverez de quoi dans leTutoriel3, "Frames avec Typo3". Par contre, je vais donner un conseil sur la façon dont le paramètre "type" d'un URL est employé:

Considérer le testsite:

img-18

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ésultatest identique Essayer de changer la valeur du type

&type=1
&type=2
&type=3

img-18

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

img-19

Comme vous voyez le Gabarit inclut beaucoup de “static_template” et le premier d'eux semble être un static_template avec un cadre (frameset) dedans. En jetant un coup d'oeil à ce static_template, nous voyons ceci:

img-20

3 Objets “page” sont définis, "page", "left" et "frameset". Chaque objet PAGE définit l'apparence visible à l'affichage en se servant de lavaleur"&type"

E nveloppes (wraps)

L'enveloppe est un concept très important pour beaucoup d'objets de TypoScript.. Une enveloppe "wrap" est une chaîne de caractères (text string), qui est délimité(divisé en parties) par "|" (ligne verticale, ALT+0124). Ceci est une enveloppe“wrap”:

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

Noter que quoiqu'il y ait les espaces entre les parties de l'enveloppe et le diviseur ("|"), chaque pièce d'enveloppe est équilibrée (le réglagedoit enlever les espaces blancs "whitespace" avant et après quelque chose. Les "Whitespace" sont le caractère “espace”, “tabulation” et le “linebreak”

Vous allez pouvoir réaliser que c'est très, très utile parce que le HTML est tout à fait sur le même principe qui consiste à envelopper des “choses” dans des étiquettes HTML. De cette façon, il sera très facile de le contrôler et de l'exploiter. (BTW: L'enveloppe est énumérée comme un “type de donnée” dans le Tsref).

Structure de données (a rrays) (1,2,3,4...)

Parfois, vous verrai les propriétéslisté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écessairede comprendre que TypoScript n'est pas un langage comme le Javascript. TypoScript est plus une liste de déclarations (définitions). L'ordre des déclarations est positionné par les “array numbers”. En fait TypoScript est enregistré dans une structure de données (array) PHP. Il n'est pas exact de dire qu'on ne puisse enregistrer des déclarations qu'avec TypoScript. En effet, quelques déclarations fonctionnent par appel de fonctions PHP (comme le stdWrap). Ils peuvent manipuler et même obtenir des données de résultat. C'est pourquoi TypoScript est beaucoup plus flexible et puissant que les simples descripteurs de HTML.

Un bon exemple des propriétés qui soient de type “structure de données numériques” (numerical array) est l'objet Page. Le fait à noter concernant l'objet PAGE est qu'il devrait renvoyer un certain contenu. Afin qu'il puisse le faire, vous devez lui rattacher quelques objets “contenu” (contents) (cObject) (nous le verrons plus tard). Un objet “cObject” assez simple est "HTML" ou "TEXT". Ils font la même chose (mais pas de la même manière).

page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world

Ceci définit un objet Page et affichera les textes "Hello world" sur votre browser. "10" pourrait être 934290873 ou tous nombres entiers. Mais pourquoi "10" alors. Pour moi c'est une tradition, mais ce sujet intervient maintenant, parce que si vous voulez ajouter encore plus de contenu à la page, comment vous faites cela? Et bien, vous ajoutez juste un autre cObject à la structure de données (array) comme ceci :

page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world
page.20 = TEXT
page.20.value = <BR>Are you listening?

Maintenant pourquoi utiliser "20"? Bien, en fait, utilisez n'importe quel nombre plus grand que “10”. Mais laissez de la place pour de nouveaux cObjects entre 10 et 20. On ne sait jamais…

Une chose importante à comprendre est que les alignements numériques sont toujours triés. Les alignements non numériques n'ont jamais n'importe quelle commande attachée à eux, mais les alignements numériques ont. La conséquence des alignements numériques trié par leur nombre est celle:

Une chose importante à comprendre est qu'une “structure de données” numérique est toujours triée. Les "structures de données" non numériques n'ont jamais d'ordre rattachée à eux, mais les "structures de données" numériques en ont toujours. La conséquence des "structures de données" numériques triées par leur nombre est celle-ci:

page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world
page.5 = TEXT
page.5.value = <BR>Are you listening?

... la ligne"<BR>Are you listening?" est maintenant affichéeavant "Hello world" quoiqu'elle aient été définies dans un ordre inverse. Normalement vous verrez TypoScript qui est bien codé dans l'ordre de la "structure de données" numériques, mais c'est juste une bonne habitude du programmeur du fait qu'il est plus lisible de cette façon.

String arrays (structure de données de chaîne de caractères)

Chaque fois qu'une chaîne de caractères est défini (comme l'objet de META dans TypoScript), c'est parce que les clés (éléments dans l'array) sont uniques etcelaà un sens. META est un bon exemple. Si vous voulez mettre des Méta-étiquettes "description" et "mots- clés"(keywords) sur votre page, faites ceci:

page = PAGE
page.typeNum=0
page.meta.REFRESH =  60; index.php?id=34
page.meta.DESCRIPTION = This is the description of the content in this document
page.meta.KEYWORDS = key, words, ...

Ceci a comme conséquence ce code HTML dans l'en-tête du site (qui est très, très vide, si vous essayez ceci …)

<meta http-equiv="REFRESH" content="60; index.php?id=34">
<meta name="DESCRIPTION" content="This is the description of the content in this document">
<meta name="KEYWORDS" content="key, words, ...">

“styles.content.[xxx]”

Si vous étudiez le static_template, particulièrement "content (default)", vous verrez une utilisation étendue des objets du"styles.content.[xxx]".

Tout d'abord, vous devez comprendre que les objets de niveau supérieur (toplevels object) nommés "temp" et "styles" sont totalement exclus après qu'un Gabarit ait été (parsed) analysé et "compilé" (by serialize()) pour enregistrement dans l'antémémoire allouéeau gabarits (cache_hash). La raison en est que parfois il est très utile de pouvoir réutiliser un objet dans beaucoup d'endroits du TypoScript. Créer des objets quelque part dans les objets “styles” ou “Temp” a pour avantage que les objets peuvent y être recopiés depuis vers vos scripts tout en étant à la fin éliminés pour ménager l'espace libre dans le cache de gabarits.

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

Example from "content (default)"

# CType: image
tt_content.image = COA
tt_content.image {
  10 = < lib.stdheader
  20  < styles.content.imgtext
}

Dans cet exemple un objet du static_template "styles.content (défaut)" est copié sur la position "tt_content.image.20". Etcelaressemble à ce que vous voyez dans ce navigateur d'objet (browser object):

img-21

Regarder dans le Gabarit statique (tatic_template) "styles.content (défaut)" nous voyons que l'objet "styles.content.imgtext" est défini comme ceci:

  # imgtext
styles.content.imgtext = IMGTEXT
styles.content.imgtext {
  imgList.field = image
  textPos.field = imageorient
  imgPath = uploads/pics/
  imgObjNum = 1
  1 {
     file.import.current = 1
     file.width.field = imagewidth
     params = align="top"
     imageLinkWrap = 1
    ....
  }
  maxW = {$styles.content.imgtext.maxW}
  maxW.override.data = register:maxImageWidth
....
}

Maintenant, si je veux changer la valeur de "styles.content.imgtext.maxW" en "400", alors j'ai deux options. Mais on y voit aussi une erreur très commune et on doit plutôt essayer ceci:

styles.content.imgtext.maxW = 400

Vous voyez, ceci ne vous aidera pas. La raison en est que l'on change la valeur dans l'objet "styles.content.imgtext" et pas dans "tt_content.image.20" où il est de fait et au final utilisé dans ce cas-ci. Alors, vous pouvez choisir l'une de ces possibilités

1)Puisque "styles.content.imgtext" est copié "tt_content.image.20" par l'opérateur "<" de TypoScript, toutes les propriétés de "styles.content.imgtext" sont maintenant également dans "tt_content.image.20". Par conséquent vous pouvez changer la valeur de cette façon:

tt_content.image.20.maxW = 400

C'est manifestement en accord avec le “nodetree” (arbre de noeud) du browser d'objet, n'est-ce pas?

2) Si vous changez la valeur de "styles.content.imgtext.maxW" directement, vous devez également la reproduire là ou elle est utilisée:

styles.content.imgtext.maxW = 400
     tt_content.image.20 < styles.content.imgtext

Ceci fonctionne également, mais on se rende compte qu'on efface tous les changements précédents faits dans "tt_content.image.20" (à la manière de la méthode 1 présentée dans l'exemple)

Je recommande la méthode 1

Quoi qu'il en soit vous devez vous rendre compte que l'avantage astucieux des objets 'styles.content.[xxx ]" réside dans ce qu'il fournit les propriétés par défaut qui peuvent être utilisés dans tout vos Gabarits. Alors que le fait de changer "styles.content.[xxx]" et de le recopier ailleurs n'apporte pas de changement aux autres objets qui ont été positionnés sur "styles.content.[xxx]"

Pour exemple, considérez "tt_content.textpic.20" qui utilise également "styles.content.imgtext":

tt_content.textpic = COA
tt_content.textpic {
  10 = COA
  10.if.value = 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 = 400
     tt_content.image.20 < styles.content.imgtext
     tt_content.textpic.20 < styles.content.imgtext

La réponse est "non" dans ce cas-ci, parce que si vous jetez un coup d'oeil sur le TypoScript pour “tt_content.textpic”, les propriétés de “styles.content.imgtext” sont modifiées après que l'objet soit copié

...
  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 cas spécifique vous avez l'occasion de changer la constante "styles.content.imgtext.maxW".

img-22

Sections éducatives

Introduction

A partir de maintenant, vous êtes encouragé à suivre les exemples en utilisant le “Testsite” fourni avec Typo3. A tout moment, référez- vous à TSref de manière à vous familiariser avec lui. Ce sera votre bible quand vous travaillez avec Typo3. (When you're not working with Typo3, I can recommend the true God's Word instead. Much better in real life.)

Utiliser le Testsite standard avec votre nouveau Gabarit rattaché à la racine du branchement de la page "Startpage".

img-23 img-24

img-25 Code notation conventions:

((generated))

1) Tous les codes TypoScript utilisent la fonte courrier
page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world
2) La plupart des exemples omettent les deux premières lignes qui sont supposées présentes :
page.10 = TEXT
page.10.value = Hello world
3) Le code peut être raccourci dans le cas d'exemples où le changement ne concerne qu'une seule ligne. Les changements sont mis en valeur en rouge)
page.10 = TEXT
page.10.value = Hello world
page.10.case = upper

a pu également être énoncé de cette manière:

...
page.10.case = upper

stdWrap

Le concept “stdWrap”

(Prononcé"Standard wrap" - “enveloppe standard”). stdWrap est un “assistant” quiconviensdans 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:

img-26

Le "TEXT" cObject semble avoir pour propriété “.value”.Le “Datatype” est ".value" lequel est ce que vous souhaitez du moment qu'il figure dans la liste des datatypes.(Avec datatype qui est "HTML-color", vous auriez à indiquer une couleur HTML comme valeur, telle que le “red” ou encore le code"#FF0000").

Le cOobject "HTML" lui aussi a pour propriété “.value”. Il est défini comme étant "HTML" – ce qui concrètementreviensau même que pour l'objet “TEXT”. De fait, c'est tout simplement une valeur de “chaîne de caractères” (string-value).

La différence entre les deux cObjects semble être la manière dont stdWrap est implémenté (mis en oeuvre). Mais jetez d'abord un coup d'oeil sur la description de l'objet stdWrap dans le TSref.

img-27

Ce sont certaines des propriétés de stdWrap. Fondamentalement l'objet stdWrap (parfois également appelé "fonction") traite (principalement du moins) le contenu de manière quelconque. Une propriété qui a une fonction apparente immédiate est la propriété “.case” (casse de caractère) de l'objet stdWrap. ".case" n'est pas énuméré dans ces exemples, mais aller regarder par vous-même dans le TSref (au fait, il est vraimenttemps que vous ouvriez “Le livre")

La propriété “.case” peut convertir la casse (ensemble des caractères d'une même police) en entrée. A présent, en accord avec la description des cObject TEXT et HTML, on va présenter la manière dont ilsfonctionnent:

((generated))

Le cObject TEXT :

Les propriétés de stdWrap sont incluses dans l'objet TEXT lui même. Ceci signifieque :

page = PAGE
page.typeNum=0
page.10 = TEXT
page.10.value = Hello world
page.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. Celaimpliquera que

page = PAGE
page.typeNum=0
page.10 = HTML
page.10.value = Hello world
page.10.value.case = upper

... va afficher "HELLO WORLD"

(Commentaires: Les propriétés de stdWrap sont un peuin conséquemmentmis en application sur l'objet de TEXT parce que la propriété '.value" est "mélangée" avec les propriétés de stdWrap. Heureusement la propriété ".value" n'est pas définie pour l'objet stdWrap. Mais de toute façon, c'est une mauvaise conception - peut- êtreaussiune confusion concernant l'objet "TEXT". C'est le cas également de quelques autres objets comme “CARRAY”

Tandis que vous en êtes là ...

Essayez de regarder la source de la page que vous avez juste créée. Notez que Typo3 définit par défaut une en-tête et la bodysection de HTML pour vous! En plaçant des propriétés pour l'objet “Page”, vous pourrez cependant modifier la teneur de ces derniers sections. Voir même les neutraliser.

Implémentation générale

Le stdWrap est très puissant et ainsi compense le fait que TypoScript ne peut pas vraiment être programmé pour contrôler aucun des éléments de la structure,à l'exception de "conditions", puisque vous pouvez faire en sorte que stdWrap compare des valeurs, puis sur la base du résultat de choisir de renvoyer une autre valeur, et ainsi de suite.

Normalement vous verrez des propriétés stdWrap mises en application comme vous avez pu voir la propriété de “.value” du cObject HTML. Réferrez-vous à l'exemple “acn” dans le TSref qui est tout comme.... enfin, presque la moitié des valeurs des propriétés que vous pouvez définir, y compris plusieurs des propriétés pour le stdWrap elle- même!'

Propriétés de stdWrap

Comme nous avons vu précédemment, stdWrap est un concept qui fonctionne - basé sur ses propriétés – et sur un certain “.value”. Mais il y a une autre tâche importante effectuée par stdWrap qui peut être bien plus populaire (ou nécessaire). C'est celle permettant d'aller récupérer un contenu externe, par exemple le titre de la page, la date du jour, d'un cObject, du nombre de rangées d'une requête, d'une liste de fichiers d'un répertoire ou d'une variable globale.

En fait, stdWrap est un concept divisé en trois parties.

Get data (obtenir)

Override / Conditions

Parse data (analyse et traitement)

L'exemple au-dessus montre seulement les possibilités de “parsing” du stdWrap (3). Nous allons maintenant regarder le "Get Data" (1) et le "Override/Condition" (2), qui fournissent une manière de faire des structures de commande dans Typo3 (bien que de manière un peu simpliste et compliqué)

Get data

La propriété primaire ici est "field". Ceci ramène la valeur du champ donné par la propriété. La bonne question est :"... valeur d'un champ provenant d'où, quel enregistrement?".

La réponse est par défaut la page encours " by default, the page record... " (ici, “page" se réfère à la page courante sur laquelle nous sommes) " ... Mais pour 'inside of' CONTENT, RECORD and HMENU cObjects, c'est le 'current record' avec lequel nous sommes en train d'opérer présentement . Vous trouverez des notes à ce sujet en regardant les descriptions d'objet.

Techniquement tout ceci va dans le contenu de tslib_content rattaché à la classe tslib_cObj et le 'current record' est défini parcObj->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 par la propriété de stdWrap".current = 1" (boolean).Toutes les fois que le registre "courant" devra être utilisé, ce sera précisé dans le TSref.

((generated))
Exemple:
page.10 = TEXT
page.10.value = Hello world
page.10.field = title

(Après ces lignes "page = PAGE" et "page.typeNum=0" sont présumés “vrai”)

L'affichage devient "Startpage" et non pas"Hello world". C'est parce que la valeur d'entrée du cObject TEXT est écrasée par la valeur du champ "title" , défini par la propriété du “.field” de stdWrap. Wow! Si vous voulez voir, quels champs sont disponibles et leur contenu, ajoutez la propriété".debugData=1"

C'est ce que vous obtenez (tableau en-dessous). Si vous examinez le code HTML, vous verrez que ceci doit être exactement les informations de debug ("debug-information") parce qu'elles sont envoyées sur le browser avant n'importe lequel des contenus de la page.

img-28 Maintenant, essayez d'atteindre la page une seconde fois. Ceci n'est pas réapparue parce que la page s'affiche depuis le cache stocké lors du premier affichage! Wow. Ainsi parce que ce service produit seulement l'information pendant l'exécution de TypoScript (pendant la restitution et affichage de la page), vous devez continuellement effacer le cache (ou placer une option no_cache) afin de voir le processus d'affichage complet (restitution et affichage).

Exemple: Obtenir un autre champ

page.10 = TEXT
page.10.value = Hello world
page.10.field = crdate

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

Challenge (stdWrap/1)

En utilisant les ”parsing-properties” (propriétés d'analyse et traitement) du stdWrap, pouvez-vous formater cette date sous une apparence de résultat humainement lisible?

Exemple: ”.data”

Si vous vouliez obtenir d'autres valeurs, la propriété “.data” est le plus souvent suffisante. Vous pouvez même l'employer pour obtenir vos champs comme précédemment.Ainsi

page.10 = TEXT
page.10.field = title

ET

page.10 = TEXT
page.10.data = field:title

fait la même chose dans ce cas-ci(exception de l'objet TMENU, pour lequel le '->') Va obtenir la valeur d'une variable globale.Avant que vous continuiez ici, veuillez aller sur"index.php?id=5"

page.10 = TEXT
page.10.data = global:id

donne "5"

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

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

page.10 = TEXT
page.10.data = leveltitle:1

donne "Content elements" (ce qui est le titre de la page au niveau 1 dans larootline - vous êtes actuellement dans la branche'Startpage/Content elements/Insert content')

Challenge (stdWrap/2)

Pouvez-vous faire en sorte que la propriété “.data” ramène le titre de la page située un niveau avant la page courante ('page du parent ')?

Override / Conditions

stdWrap fournit simplement un "control structures" (structure de contrôle) au moyen de la comparaison de certaines propriétés. Mentionnons certaines d'entre elles qui sont appelés “override”, “ifEmpty”, “required”, “if”, “fieldRequired”.

page.10 = TEXT
page.10.value = Hello world
page.10.override = Hello heaven

donne "Hello heaven" parce que si “override”revoitquelque contenu que ce soit, alors la valeur originale est substituée.

page.10 = TEXT
page.10.value = Hello world
page.10.override.field = subtitle

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

img-29

Challenge (stdWrap/3)

Pourriez vous le contourner en employant d'autres propriétés comparatives (comparing properties) - de sorte que la valeur par défaut soit le sous-titre, mais au cas où elle serait vide, elle serait remplacée par"Hello World"

Challenge (stdWrap/4)

Avec vos résultats obtenus lors du défi 3, pourriez vous l'envelopper en entier avec les étiquettes<h3>...</h3>? Et pourriez-vous remplacer "Hello world" avec le page-titre à sa place, lequel – dans le cas présent – est enveloppé (wrapped) par <font color="red"> ... </font>

Objets de contenu (cObject)

Introduction

Les objets de contenu (cObjects) sont ceux qui permettent à TypoScript d'y répondre. Ils fournissent des blocs de contenu de diverses sortes tels que des images, des sources de text/html, des sources à partir d'un fichier, des enregistrements choisis 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 des propriétés de stdWrap.

COA

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

page.10 = COA
page.10.10 = TEXT
page.10.10 {
  value = This is the page title:
  wrap = <font face="verdana" size=1>|</font>
  wrap2 = | <BR>
  case = upper
}
page.10.20 = TEXT
page.10.20.field = title

Donne ceci :

img-30

Cela pourrait tenir sur une ligne, mais ce choix est un atout pour s'adapter à la situation.

page.10 = TEXT
page.10.field = title
page.10.wrap = <font face="verdana" size=1>THIS IS THE PAGE TITLE:</font><BR> |

Donnons nous un autre exemple:

page.10 = COA

# Header to this section
page.10.10 = TEXT
page.10.10 {
  value = This is the page title:
  wrap = <font face="verdana" size=1>|</font>
  wrap2 = | <BR>
  case = upper
}

# Output page title / subtitle
page.10.20 = COA
page.10.20 {
  10 = TEXT
  10.field = title
  10.wrap = Page title: <B> | </B><BR>
  20 = TEXT
  20.field = subtitle
  20.wrap = Subtitle: <B> |</B>
}

donne cela :

img-31

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 dans le rootline (c'est-à-dire, si nous sommes sur une subpage, par exemple. "Content elements")

FILE

C'est très simple, aussi je vais juste montrer un exemple court:

page.10 = FILE
page.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 les fichiers doivent résider dans les répertoires /media/ /fileadmin/ et /uploads/ ou encore /typo3temp/. C'est un dispositif de sé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 “class t3lib_tstemplate”

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

IMAGE

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

((generated))
Exemple:
page.10 = IMAGE
page.10.file = fileadmin/tsbyex/alligator.jpg

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

img-32

La propriété de “.file” est une "imgResource" (prononcé "ressource d'image") et il y a plus d'options et de possibilités disponibles 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 = IMAGE
page.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'image agrandie dans une fenêtre de JavaScript?

IMG_RESOURCE

Celui-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.

((generated))
Exemple:
page.10 = IMG_RESOURCE
page.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?

CLEARGIF

Insérez un fichier “gif-file” (fichier d'une image vide), “clear.gif”:

page.10 = CLEARGIF
page.10.width = 200

produira ce code HTML :

<img src="clear.gif" width=200 height=1 border=0><BR>

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

HRULER

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

((generated))
Exemple:
page.5 = TEXT
page.5.value = Before ruler

page.10 = HRULER
page.10 {
  lineThickness = 3
  lineColor = red
}

page.15 = TEXT
page.15.value = After ruler

Donnera ce résultat:

img-33

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-vous placer 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 OTABLE

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

((generated))
Exemple of OTABLE:
page.10 = OTABLE
page.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 = |<BR>
  20 = IMAGE
  20.file = fileadmin/tsbyex/alligator.jpg
  20.file.width=200
}

a pour résultat :

img-34

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 = OTABLE
page.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 dans une 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. Il comporte un dispositif avec une colonne de contenu et quatre colonnes l'entourant. Celles-ci peuvent être utiles pour y mettre des menus. Mais regardez donc ce simple exemple tout d'abord:

page.bodyTagMargins = 0
page.10 = CTABLE
page.10 {
  tableParams = border=1 cellpadding=0 cellspacing=0
  offset = 0,20
  c.10 = TEXT
  c.10.value = CONTENT cell
}

produira quelque chosetout à fait identique à ce que produirait le OTABLE avec ceci :

page.bodyTagMargins = 0
page.10 = OTABLE
page.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>.

Regardezmaintenant un exemple plus complexe:

page.bodyTagMargins = 0
page.10 = CTABLE
page.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:

img-35

Maintenant, vous pouvez mettre n'importe quel OBJECTS que vous aimez dans les cellules. Mais il y a encore deux dispositifs àregarderen détail. Avec "cMargin" vous pouvez ajouter des marges entre les cellules et toute autour d'elles et avec “cWidth” vous pouvez automatiquementfixerl'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:

img-36

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

img-37

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.

((generated))
Exemple:

Pour que le Gabarit soit actif, c'est tout ce dont vous avez besoin:

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/tsbyex/template.html

… et ceci est apparemment ce qui obtenez:

img-38

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.
<!-- ###DOCUMENT### -->
  This is a <i>###SIMPLE_WORD###</i> textfile with a few HTML-tags in.<br>
  <br>
  Check out the <!--###LINK###-->link to the front page.<!--###LINK###-->
<!-- ###DOCUMENT###-->
</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 peut facilement 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 être dans un “comment” HTML.

Notre subpart est "###DOCUMENT###", aussi essayez avec ceci:

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/tsbyex/template.html
page.10.workOnSubpart = DOCUMENT

Bien mieux. La source du code HTML obtenu nous donne maintenant ceci:

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


  This is a <i>###SIMPLE_WORD###</i> textfile with a few HTML-tags in.<br>
  <br>
  Check out the <!--###LINK###-->link to the front page.<!--###LINK###-->

</body></html>

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

Exemple:
page.10 = TEMPLATE
page.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:

img-38

Et le code source HTML obtenu est celui-là:

...
// End Hiding Script -->
</script>

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


        This is a <i>Content elements</i> textfile with a few HTML-tags in.<br>
        <br>
        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'était le 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 pour le 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 curieux au sujet du contenu que l'objet “TEXT” contenait réellement, je l'ai étudié avec le “flag” ".debugFunc = 1" lequel – de la même manière que nous l'avons montré avec “debugData” précédemment(voir stdWrap) – restitue comme résultatla valeur contenue 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à comment faire(.data = leveluid:0 - voir stdWrap et les datatypes dans TSref), mais ne savons pas, si le paramètre de la propriété de l'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 <B>?

FORM (formulaire)

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

((generated))
Exemple:
page.10 = FORM
page.10.data = Label | input
page.10.layout = ###LABEL###: ###FIELD###<BR>

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 un minitemplate (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 le formulaire 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 une chaî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 = FORM
page.10.data = Name|input    ||    Address|textarea    ||    Send|submit|Send the form
page.10.layout = ###LABEL###: ###FIELD###<BR>

..va nous donner cela :

img-39

Le script “tslib/index_ts.php” (qui est le script d'entrée principal, voir Typo3Overview, F1) est capable d'envoyer des formulaires par emails (formmail-emails). Pour créer un formulaire pour email vous devez au moins préparer ceci:

page.10 = FORM
page.10.data = Name|*input,40 || Address|textarea,40,10 || Send it...|formtype_mail=submit|Send the form || |subject=hidden|This is the subject
page.10.recipient = your@email.com
page.10.layout = ###LABEL###: ###FIELD###<BR>
page.10.locationData = 1
page.10.REQ=1
page.10.REQ.layout = ###LABEL### (Required): ###FIELD###<BR>

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 est sur 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

|img-40|

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”

img-41

CAS d'exemple

Ce cObject fournit maintenant une "structure de commande"(control structure) à TypoScript. Cela fonctionne comme un générateur de commutateur (switch-construct) :

((generated))
Exemple:
page.10 = CASE
page.10.key = cheese

page.10.cheese = IMAGE
page.10.cheese {
  file = fileadmin/tsbyex/alligator.jpg
  file.width=200
  wrap = Cheese.... &nbsp;| &nbsp; is what this guy says
}

page.10.tomatoes = TEXT
page.10.tomatoes.value = Tomatoes are so tasty

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

Ceci est le résultat obtenu:

img-42

Comme vous pouvez le voir, la variable reservèe «key» à l'intèrieur de cObject est «cheese». Ce qui permet la recherche de 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ès utile si vous souhaitez insérer des donnèes au lieu de valeurs numèriques. Jettons un oeil aur le script.

temp.cheese = IMAGE
temp.cheese {
  file = fileadmin/tsbyex/alligator.jpg
  file.width=200
  wrap = Cheese.... &nbsp;| &nbsp; is what this guy says
}

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

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

page.10 = CASE
page.10.key.data = level:1
page.10.1 < temp.cheese
page.10.2 < temp.tomatoes
page.10.default < temp.default

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

le rèsultat :

img-43

Essayez d'atteindre les pages "Startpage", "Content elements", "Insert content" et parce que chacune est à son propre niveau spécifique, vous obtiendrez des contenus spécifiques.

...
page.10.1 < temp.cheese
page.10.2 < temp.tomatoes
page.10.default < temp.default
...

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

Challenge

Prendre un peu de temps pour examiner le static_template "content (default)". Essayer d'améliorer votre maîtrise avec le CAS 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_REGISTER

Ce cObject ne renvoie aucune valeur. Vous pouvez Plutôt l'employer pour placer quelques valeurs dans le “registre". C'est un 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 reste toujoursun groupe en grappe (bunchof configuration) de configurateurs.

Quoiqu'il en soit, cet exemple montre comment cela fonctionne:

page.10 = LOAD_REGISTER
page.10.MY_VALUE = The register value!

page.5 = TEXT
page.5.value = The default value
page.5.override.data = register:MY_VALUE
page.5.wrap = | <HR>

page.15 < page.5

This is the result:

img-44

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 plusvide, donc la valeur écrase (override) la valeur par défaut. Et le résultat en sortie devient "valeur du registre!"

img-45

Challenge

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

imgResource et GIFBUILDER

Introduction

Le datatype de quelque une des propriétés est apparemment "imgResource". En jetant un coup d'oeil à la définition du datatype, 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 quelques propriétés additionnelles pour modifier l'image.

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

Un fichier normal en entrée

Nous 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.jpg
page.bgImg.width = 200

Et vous devezvoir cela:

|img-46|

Masques Bitmap

Avant que nous continuions, amusons nous un peu. Nous allons employer un concept d'image Bitmap appelé “masque ou cache” (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 sont visibles ou pas.

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

img-47

Donc, essayons maintenant avec ceci

::
page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg page.bgImg.width = 200 page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg

Résultat:

img-48

Essayons plutôt avec ceci

page.bgImg = fileadmin/tsbyex/sunset_keywest.jpg
page.bgImg.width = 300
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.bgImg.m.bgImg.params = -rotate 90
page.bgImg.m.mask = fileadmin/tsbyex/mask.jpg

Résultat:

[N/A...]

Importer une image

OK, nous voudrions que le fond d'image soit attaché aux différentes pages, ainsi nous pouvons changer l'image facilement pour chaque page. Dans ce but nous devons associer et rattacher l'image à l'enregistrement de la page dans le champ prévu à cet effet pour incluredes fichiers médias.

img-49 Faites ceci d'abord :

Puis, essayez d'insérer ce TypoScript sur la page (champ setup=:

page.10 =TEXT
page.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 en mode debug pour l'affichage!)

img-50

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émentla deuxième image, "doggiebus.jpg" :

page.10 =TEXT
page.10.field = media
page.10.listNum = 1

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

img-51 Tout ce dont nous avons besoin est maintenant de savoir où les images sont stockées réellement, ainsi nous pourrons ajouter 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 contientla 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 petit carreau 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 dans le champ des médias associés. Pouvez-vous faire cela? (il n'est passi facile – servez-vous de TSref, bonne chance.)

GIFBUILDER

Commençons par un exemple simple:

page.10 = IMAGE
page.10.file = GIFBUILDER
page.10.file.XY = 200,300
page.10.file.backColor = olive
page.10.file.10 = BOX
page.10.file.10 {
  dimensions = 20,20,160,260
  color = green
}

Résultat:

img-52

OK, essayons en combinant avec le fond d'image précédent:

page.bgImg = GIFBUILDER
page.bgImg {
  XY = 200,300
  colbacks = olive
  10 = BOX
  10 {
    dimensions = 20,20,160,260
    color = green
  }
}
page.bgImg.m.bgImg = fileadmin/tsbyex/alligator.jpg
page.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 la valeur de l'imgResource est un nom de fichier et pas un GIFBUILDER. Dans le dernier cas, les propriétés qui s'appliquent sont 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.jpg
page.bgImg.width = 300
page.bgImg.height = 200

  # The GIFBUILDER overlay:
page.bgImg.m.bgImg = GIFBUILDER
page.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

img-53

Le masque "mask2.gif" ressemble à ceci:

img-47

GIFBUILDER - bases

Retour aux bases. Le premier exemple nous a montré comment créer une boîte colorée. Maintenant nous allons ajouter un un peu de texte:

page.10 = IMAGE
page.10.file = GIFBUILDER
page.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 :

img-54

+calc

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

img-55

((generated))
Exemple:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.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:

img-56

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:

img-56

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

.niceText

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

img-57

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

L'objet GIFBUILDER TEXT

Maintenant, 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à :

img-58

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 et non pas une valeur statique comme "Hello World"?

L'objet IMAGE

Vous pouvez également ajouter une image aux objets de GIFBUILDER.

((generated))
Exemple:
page.10 = IMAGE
page.10.file = GIFBUILDER
page.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 fois horizontalement et verticalement, l'autre étant aussi alignée au centre dans les mêmes deux directions.Résultat:

img-59

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?

PHP include-scripts

((generated))

PHP_SCRIPT cObject

Il 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 faire comme exercice.

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

img-84

img-85

img-86

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

Inspiration

Si 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 a trop.

N'oubliez pas de regarder le static_template '"content.tt_guest" également. Le TypoScript inclut dedans est la la clef pour comprendre 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.com j'énumère parfois du codeTypoScript. Cela est fait avec une étiquette spéciale que je vais vous présenter ici. Afin de l'essayer, nous le rajouterons au testsite original, parce qu'il comporte un certain contenu qui viennent nous faciliter les choses ici.

  1. Ouvrir le Template de testsite et ajouter ceci:
# Add the custom tag, <TS>...</TS> to the parseFunc of bodytext
tt_content.text.20.parseFunc.tags {
  ts.stripNL = 0
  ts = PHP_SCRIPT
  ts.file = fileadmin/tsbyex/testtag.inc
}

img-87

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 = '<B>'.$contentOfTag.'</b>';
?>

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

img-88

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

img-89

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

  1. Ajoutez/modifiez ceci au Template de TypoScript:
# Add the custom tag, <TS>...</TS> to the parseFunc of bodytext
tt_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 et vérifiez que le contenuest :

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, "<BR>")."<BR>";
                $output = '<font face=verdana size=1 color=maroon>'.$output.'</font>';
                return $output;
        }
}
?>

img-90

  1. Pour finir, saisissezceci dans le “content record”:

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

img-91

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, vous calculez 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 dans t3lib/page.php). Quels arguments prend-il et comment pourriez vous les employer effectivement?

Content rendering (restitution de contenu)

((generated))

Introduction

Vous 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 incluez avec votre Template :

img-92

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 des endroits utiles de la “nodetree” (arbres des noeuds).

Regardezdans 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 il semble débuter par un “Case” sur un objet de contenu qui détermine le type de content de l'élément content en question.

img-93

CONTENT

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

((generated))
Exemple:

(d'abord: inclure le static_template "content (default)" si vous ne l'avez pas déjà fait!)

page.10 = CONTENT
page.10 {
  table = tt_content
  select.orderBy = sorting
  select.where = colPos=0
}

Résultat:

img-94

C'est aussi simple que cela!

colPos

Mais 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 les autres colonnes:

img-95

img-96

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

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

img-97

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

img-98

La valeur est "3". Modifiezainsi votre TypoScript comme ceci:

page.10 = CONTENT
page.10 {
  table = tt_content
  select.orderBy = sorting
  select.where = colPos=3
}

Résultat:

img-99

styles.content (default)

Donnons nous une minute pour regarder dans le static_template"styles.content (default)". Tel que indiqué, il contient un gros 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:

img-100

page.10 < styles.content.get

substitutes
page.10 = CONTENT
page.10 {
  table = tt_content
  select.orderBy = sorting
  select.where = colPos=0
}

et de même avecla colonne "border":

page.10 < styles.content.getBorder

Vous l'avez? Bon.

lib.stdheader

Dans le static_template "content (default)" vous y voyez un objet "lib.stdheader" ainsi défini :

lib.stdheader = COA
lib.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: bullet
tt_content.bullets = COA
tt_content.bullets {
  10 = < lib.stdheader
  20 = CASE
...

# CType: text
tt_content.text = COA
tt_content.text {
  10 = < lib.stdheader
  20 = TEXT
  20 {
...

# CType: multimedia
tt_content.multimedia = COA
tt_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 être partagé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:

img-101

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 rendu par le même objet “lib.stdheader”, c'est le seul endroit où faire des changements pour changer le rendu du “header”!

((generated))
Exemple:
page.10 < styles.content.getBorder

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

donne le résultat:

img-102

Indépendamment de ceci, je ne vais pas vous aider davantage avec le rendu de contenu standard. En se basant sur le maté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””". : -)

RECORD

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

((generated))
Un example rapide:
page.10 = RECORDS
page.10.source = 1
page.10.tables = tt_content
page.10.conf.tt_content = TEXT
page.10.conf.tt_content {
  field = header
  case = upper
  wrap = <B> | </B>
}

résultat :

img-103

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

img-104

Un autre exemple:

dans la table “tt_address”, il y a quelquesenregistrementsavec des personnages des Simpsons. Ils sont à la page"Another site in.../Lists/Addresses/"

temp.tt_address = COA
temp.tt_address.wrap = | <HR>
temp.tt_address.10 = TEXT
temp.tt_address.10 {
  field = name
  case = upper
  wrap = <B> | </B><BR>
}
temp.tt_address.20 = IMAGE
temp.tt_address.20 {
  file.import.field = image
  file.import = uploads/pics/
  file.import.listNum = 0
  file.height = 100
}

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

Résultat ici :

img-105

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

Une exécution alternative qui fait exactement la même chose est ceci:

tt_address = COA
tt_address.wrap = | <HR>
tt_address.10 = TEXT
tt_address.10 {
  field = name
  case = upper
  wrap = <B> | </B><BR>
}
tt_address.20 = IMAGE
tt_address.20 {
  file.import.field = image
  file.import = uploads/pics/
  file.import.listNum = 0
  file.height = 100
}

page.10 = RECORDS
page.10.source = 3,1,5
page.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 de toplevel nommé comme la table. Donc "tt_address" au “toplevel” restituera l'enregistrement si cette ligne est omise et est exactement ce ce que l'exemple montre("temp.tt_address" a été changé en "tt_address").

Réponses aux Challenges

((generated))

((generated))

Challenge (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 PHP

page.10 = TEXT
page.10.field = crdate
page.10.date = d-m-y H:i

Donne

01-07-00 15:48
page.10 = TEXT
page.10.field = crdate
page.10.strftime = %A %e. %B, %I:%M %p

Donne

Saturday 1. July, 03:48 PM
page.10 = TEXT
page.10.field = crdate
page.10.strftime = %A %e. %B, %I:%M %p
config.locale_all = deutsch

Donne

Samstag 1. Juli, 03:48
Challenge (stdWrap/2)
page.10 = TEXT
page.10.data = leveltitle:-2
Challenge (stdWrap/3)
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty = Hello world
Challenge (stdWrap/4)
page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty {
  field = title
  required = 1
  wrap = <font color="red">|</font>
}
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 jeu continue, en utilisant “.field” et “.required” (lequel est retourné si “.field” retourne une valeur vide) et “.wrap” (qui est seulement exécuté si “.required” ne donne pas lieu à un retour de valeur)

Alternativement (en utilisant “.if” au lieu du “.required”)

page.10 = TEXT
page.10.field = subtitle
page.10.ifEmpty {
  field = title
  if.isTrue.field = title
  wrap = <font color="red">|</font>
}
page.10.wrap = <H3>|</H3>
Challenge (cObject/1)
page.10 = COA

# Header to this section
page.10.10 = TEXT
page.10.10 {
  value = This is the page title:
...
  20.wrap = Subtitle: <B> |</B>
  20.required=1
}
Challenge (cObject/2)
page.10 = COA
page.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-titre n'est pas vide

Challenge (cObject/3)
page.10 = COA
page.10.if.value = 1
page.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 : " if retourne “true” si le “level” où nous sommes (rootline level, démarre à zéro pour la rootpage) est plus grande que la valeur dé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'imagelors 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 temps rassemblera beaucoup d'images inutilisées.

Challenge (cObject/5)

Version exhaustive:

page.10 = IMAGE
page.10 {
  file = fileadmin/tsbyex/alligator.jpg
  file.width = 200
  imageLinkWrap = 1
  imageLinkWrap.enable = 1
  imageLinkWrap.JSwindow = 1
}

La version "Rolls Royce":

page.10 = IMAGE
page.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 la fenê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.

img-106

Challenge (cObject/6)
page.10 = IMG_RESOURCE
page.10 {
  file = fileadmin/tsbyex/alligator.jpg
  file.width = 200
}
page.10.stdWrap.wrap = <table border=1 cellpadding=30 background="|"><tr><td><BR><font color=white size=4><B>Hello World</b></font></td></tr></table>

(la dernière ligne est une ligne!)

img-107

Challenge (cObject/7)
page.5 = TEXT
page.5.value = Before ruler
page.5.wrap = | <BR>

page.10 = HRULER
page.10 {
  lineThickness = 3
  lineColor = red
}
page.10.stdWrap.spaceAfter = 20
page.10.stdWrap.spaceBefore = 10

page.15 = TEXT
page.15.value = After ruler

Ceci a comme conséquence:

img-33

Notez que nous avons du mettre une étiquette <BR> après le "Before ruler" text. Dans le cas contraire, l'espace ci-dessus n'aurait pas fonctionné.Le code HTML:

Before ruler<BR>
<img src="clear.gif" width=1 height=10 border=0><BR>
<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><BR>
After ruler
Challenge (cObject/8)
page.bodyTagMargins = 0
page.10 = OTABLE
page.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 = |<BR>

  20 = IMAGE
  20.file = fileadmin/tsbyex/alligator.jpg
  20.file.width=200

  30 = CLEARGIF
  30.width=250
  30.stdWrap.wrap = <BR> |
}
Challenge (cObject/9)
page.10 = TEMPLATE
page.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 = <B>|</B>
    target = _blank
  }
}
Challenge (PHP_SCRIPT1)

Voir le fileadmin/tsbyex/test_calculate.inc

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

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

Voici le résultat

img-108

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

img-109

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"> =<br>
        <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 (restituant de 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 fait du cache des pages!

img-110 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 le serait 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 partie provenant 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étragesdans “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_SCRIPT
page.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 OR pages.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 afficheravec 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 enregistrementssupprimé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 = IMAGE
page.10.file = GIFBUILDER
page.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:

img-111

Notez les définitions de couleur dans la propriété “.emboss”. Le TSref indique que la valeur est "GraphicColor" laquelle a une 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 beaucoup des programmes de manipulation d'image. Ces modes auraient été plus correctes dans ces situations.

Challenge (GIFBUILDER/2)
page.10 = IMAGE
page.10.file = GIFBUILDER
page.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:

img-112

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'excentrageest relatif à cette position et vous devez spécifier "-5, -5" pour décaler l'image vers le hautet la gauche.

Notez, en outre, comment la syntaxe de TypoScript est utilisée pour copier le premier objet à la position adéquate dans l'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”:

img-113

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:

img-114

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 = <br>
...
Challenge (TMENU/2)
...
    after = <br>
    ATagBeforeWrap = 1
    linkWrap= <font face=Verdana size=1 color=black> | </font>
  }
}
page.10.3 < page.10.2
page.10.3.wrap >
page.10.3.NO.before = <font size=1>&nbsp;&nbsp;&nbsp;</font>
page.10.2.expAll = 1

img-115 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 = HMENU
page.10.1 = TMENU
page.10.1.target = page
page.10.1 {
  expAll = 1
  wrap = <table width="300" border=1 cellspacing=0 cellpadding=0><tr><td><img src="clear.gif" width=1 hspace=200 height=1 vspace=3 border=0></td></tr> | </table>
  NO.linkWrap = <font face=Arial size=2 color=black><b> |</b></font>
  NO.allWrap = <tr><td><img src="clear.gif" width=1 height=1 vspace=3 border=0><br> | </td></tr>
  NO.ATagBeforeWrap = 1
  ACT < .NO
  ACT = 1
  ACT.linkWrap = <font face=Arial size=2 color=red><b> |</b></font>
}
page.10.2 = TMENU
page.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 = <br>
    ATagBeforeWrap = 1
    linkWrap= <font face=Verdana size=1 color=black> | </font>
  }
  ACT < .NO
  ACT =1
  ACT.linkWrap = <font face=Verdana size=1 color=red> | </font>
}

img-116

Challenge (TMENU/4)
temp.challengeMenu = HMENU
temp.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 = 0
temp.challengeMenu.1 = TMENU
temp.challengeMenu.1.target = _top
temp.challengeMenu.1.NO {
  allWrap = <TR><TD bgcolor="#638E7B" align="center" valign="top" width="5"><IMG src="media/bullets/blackdot.gif" width="5" height="9"></TD><TD bgcolor="#638E7B" width="160"> | </TD></TR>
  ATagBeforeWrap = 1
  linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C"> | </FONT>
  stdWrap.case = upper
}
temp.challengeMenu.1.ACT < temp.challengeMenu.1.NO
temp.challengeMenu.1.ACT = 1
temp.challengeMenu.1.ACT {
  linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="white"> | </FONT>
}
temp.challengeMenu.2 = TMENU
temp.challengeMenu.2.target = _top
temp.challengeMenu.2.NO {
  allWrap = <TR><TD colspan="2" bgcolor="#D0DCD8">|</TD></TR>
  ATagBeforeWrap = 1
  linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
  stdWrap.case = upper
}
temp.challengeMenu.2.ACT < temp.challengeMenu.2.NO
temp.challengeMenu.2.ACT = 1
temp.challengeMenu.2.ACT {
  allWrap = <TR><TD colspan="2" bgcolor="#FFFBE7">|</TD></TR>
  linkWrap = <FONT face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#004B2C">|</FONT>
}


page.noLinkUnderline =1
page.10 < temp.challengeMenu
Exemple (TMENU)
temp.leftmenu = HMENU
temp.leftmenu.entryLevel = 0
temp.leftmenu.1 = TMENU
temp.leftmenu.1.target = _top
temp.leftmenu.1.collapse = 1
temp.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 = <b><font face="verdana" size=1 color=black> | </font></b>
  stdWrap.case = upper
}

temp.leftmenu.2 = TMENU
temp.leftmenu.2.target = _top
temp.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 = <BR><img src="media/bullets/stipler3.gif" height=1 vspace=1> |*||*| <img src="clear.gif" width=1 height=1><BR>
  ATagBeforeWrap = 1
  linkWrap = <font face="verdana" size=1 color=black> | </font>
}

page.10 < temp.leftmenu

Résultat:

img-117

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
  }
}

page.10 < temp.topmenu

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

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

Résultat:

img-118

Challenge (GMENU/1)
page.10 = HMENU
page.10.1 = GMENU
page.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.NO
page.10.1.RO = 1
page.10.1.RO {
  10.emboss.offset = 2,2
}

img-72

Exemple élaboré (GMENU)

Mettre ceci dans le champ“Constants”:

buttonH = 25
buttonColor = #ccccff

Mettre ceci dans le champ “Setup”:

temp.topmenuText = TEXT
temp.topmenuText {
  text.field = title
  offset = 10,17
  fontFile = fileadmin/fonts/arial_bold.ttf
  fontSize = 15
  niceText = 1
}

temp.topmenu = HMENU
temp.topmenu.1 = GMENU
temp.topmenu.1.target = _top
temp.topmenu.1.accessKey = 1
temp.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.NO
temp.topmenu.1.RO=1
temp.topmenu.1.RO.100.fontColor = white

page.10 < temp.topmenu

Résultat:

img-75

Challenge (GMENU/2)
page.10 = HMENU
page.10.1 = GMENU
page.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
}

img-72

Challenge (GMENU_LAYERS/1)
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.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 = GMENU
page.10.2.wrap = |<BR>
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:

img-79

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 valeur seulement 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.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
  layerStyle = position:absolute;left:120px;top:30px;width:10px;VISIBILITY:hidden;
  yPosOffset =-30
  lockPosition = y
  expAll=1
  NO {
    wrap = |<BR>
    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 = GMENU
page.10.2.wrap = |<BR>
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:

img-80 Commentaires:

La chose principale est de changer l'orientation du GMENU_LAYERS ici est de réarranger les paramètres pour les couches dynamiques (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 le design de la page afin que le menu apparaissecorrectement 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:

img-119

img-120 TypoScript By Example - 92