4.9 - Container et éditeur de formats

La boîte “container”

Nous avons vu que TV tools permet d’importer des éléments textuels et/ou graphiques et de les afficher tel quel, de façon plus ou moins pertinente, grâce aux différentes variables comme le #FIC (insertion d’un fichier texte brut dans une boîte texte), #FIN (insertion d’une ligne d’un fichier texte) ou #CSV (affichage d’un contenu (texte ou chemin d’une image) sous forme de lignes et colonnes d’un fichier Excel). Il se peut que vos besoins nécessitent l’emploi d’un grand nombres de boîtes texte contenant ce type de variables. 

Pour simplifier cette mise en place, TV tools dispose de “container” pour non seulement encapsuler les boîtes dans des modèles, mais aussi gérer dynamiquement vos données grâce aux conditions de “l’éditeur de formats”.

Container : exemple 1

Prenons une base de données simple avec un fichier csv dans lequel nous avons plusieurs enregistrements. Dans cet exemple, nous nous intéressons à la météo marocaine de plusieurs villes telles que Casablanca, Marrakech, Tanger, etc... Pour chaque information météo d’une ville nous avons 3 champs : le nom de la ville, le temps (nuageux, ensoleillé, etc...) puis la température.

1. Dans l’éditeur d’émissions de TV tools, dans une émission vierge, allez dans le menu du haut dans la fonction “Boîtes / Nouveau/ Container. Une boîte transparente intitulée “Container” va s’afficher sur votre page avec un message d’alerte “Vous n’avez pas de RecordSet valide pour configurer votre container, voulez-vous créer un RecordSet ?”, validez par “oui”.
2. Une nouvelle fenêtre intitulée  “Paramètres base de données” va s’ouvrir. Dans le menu déroulant nommé “type de base” choisissez la rubrique  “fichier.csv”.
   
   

3. Cliquez sur l’icône “ouvrir” du menu “nom du fichier” puis indiquez le chemin où est stocké votre fichier (dans cet exemple : c:\tvtools\misc\test.csv).
   N.B : Les champs des différents enregistrements sont séparés par défaut avec le point virgule (“;”). 
    

4. Cliquez sur OK pour valider.

5. Afin de vérifier vos paramètres, un message d’alerte va s’ouvrir pour vous proposer de tester vos données. Cliquez sur “oui”.
   
   
   
   

6. Deux nouvelles fenêtres vont s’ouvrir. La fenêtre “RecordSets” qui affiche dans la liste des jeux d’enregistrement notre “RecordSet1” que nous venons de créer.
   Vous pouvez ainsi cumuler plusieurs jeux d’enregistrements dans une même émission.
   
   
   
   
7.  La seconde fenêtre “Paramètres Container” vous permet de choisir le type d’affichage des différents enregistrements de votre base selon 4 types d’organisation : en hauteur (les lignes fixes les unes en dessous des autres), en largeur (les lignes fixes les unes derrière les autres) ou en leur donnant du mouvement avec les fonctions de rolling (lignes défilantes de droite à gauche) et de scrolling (lignes déroulantes de bas en haut). Ici nous choisissons une organisation en hauteur, validez ensuite par “OK”.
   
   
   
   La fenêtre de récapitulation des paramètres de Container s’ouvre avec vos présélections : Le “RecordSet1” est activé dans la liste des jeux d’enregistrements ainsi que l’organisation de vos données en hauteur. 
8. Choisissez la taille verticale en pixels pour la mise en forme de chacun de vos enregistrements. Entrez par exemple : 40 pixels.
   
   
9. Puis cliquez sur le bouton “Créer page modèle”.
10. sélectionnez les champs texte à faire figurer dans votre page depuis la liste “RecordSet1” puis cliquez sur le bouton “Ajouter”. Si vous désirez ajouter la totalité de vos champs texte, cliquez sur le bouton “Aj.tout”. Puis validez par OK.
    
    
    
    

    N.B : Si vous utilisez des chemins vers des images dans un champ de votre fichier csv, sélectionnez ce champ et cliquez sur le bouton “Aj.Image” pour inclure une boîte image de référence dans la page modèle.

    La fonction “Créer une page modèle” permet de créer automatiquement une seconde page dans cette émission sur laquelle seront disposées les variables des différents champs dans un gabarit (sous forme de boîte texte #BDD). 
    
    

11. Déplacez toutes les variables #BDD dans le gabarit du container matérialisé par le cadre en pointillé blanc et gris. Dans cet exemple la taille en largeur du gabarit va correspondre à la taille de la boîte “Container” (ici placé sur la 1ère page) par contre la hauteur sera de 40 pixels (taille indiquée dans l’étape n°8). Vous pouvez également donner des attributs texte différents (taille, police, couleur, etc...) aux différentes boîtes textes #BDD.
    
    
    
    Ce procédé va permettre d’incruster sur la première page le contenu de la page modèle dans la zone de la boîte Container. 
    En fonction de la taille de votre boîte container, TV tools va jouer autant de fois la page que nécessaire pour diffuser tous les enregistrements. Plus votre boîte container est petite, plus il y aura donc de pages à jouer.
    
    
12. Sur la première page élargissez manuellement la boîte container de façon à jouer tous les enregistrements en une seule fois sur la page. Donnez une durée à votre page, puis cliquez sur l’icône “oeil” pour visualiser votre émission. 
    
    
    
    a. Correspond à la variable #BDD “town”.
    b. Correspond à la variable #BDD “temperature” avec le tri par ordre décroissant.
    c. Correspond à la variable #BDD “weather”.
    
    

Nous allons partir de l’exemple précédent pour créer une variante avec deux pages modèles au lieu d’une. Ceci va nous permettre d’avoir un affichage alterné des enregistrements de deux façons différentes.

Container : exemple 2

1. Allez dans les paramètres de la boîte “Container” en double-cliquant dessus avec le bouton gauche de la souris.  Sélectionnez la fonction “de plusieurs pages modèles, prises alternativement”.
   Laissez “2” en “numéro de la page servant de modèle” et “3” dans l’emplacement intitulé “puis construire avec page”. Fermez ensuite la fenêtre.
   
   

2.  Nous allons coloriser le fond des boîtes texte avec les variables #BDD plutôt que de les laisser en transparence. Sur la seconde page donnez des différentes à chacune des 3 boîtes textes en vérifiant dans la fenêtre “Informations” qu’elles aient toutes la même hauteur (ici : 40 pixels).
   
   
   
   

3. Allez dans le menu du haut “Pages/Copier” puis Pages/Coller en Ajoutant pour obtenir une 3ème page.
   
   
   
   

4.  Sur cette 3ème page, donnez d’autres attributs (couleurs, typo, couleur de fond de boîte texte, etc...) aux 3 variables #BDD. 
   
   
   
   

5. Réduisez la boîte container sur la première page. Dans cet exemple, nous allons faire en sorte de n’afficher que 3 enregistrements par page. Nous avons déjà défini une taille verticale de 40 pixels dans les paramètres de la boîte container. A l’aide de la fenêtre “Informations”, donnez alors une taille de 120 pixels en hauteur pour la boîte container.
   
   
   
   Dans cet exemple, la boîte container va diffuser autant d’enregistrements que de multiples de 40 pixels. Exemple : 3 enregistrements pour une taille de 120 pixels ou 4 pour 160 pixels. Notez que si la taille de la boîte container ne correspond pas à un multiple de 40  il ne sera joué qu’un nombre entier d'enregistrements : par exemple 3 enregistrements pour une taille de 140 pixels. Ceci afin de ne pas couper visuellement du contenu.

6. Visualisez avec l’icône “œil” la première page de l’émission.  
   
   

L’éditeur de formats

Container : exemple 3

Nous allons cette fois remplacer les textes #BDD”weather” par des images avec des icônes météo (nuages, pluie, soleil, etc...). Pour ce faire, nous allons utiliser l’éditeur de format pour faire correspondre les images “nuages.tga”, “soleil.tga” et “pluie.tga”) aux mots “cloud”, “sun” et “rain” contenus à l’origine dans la colonne “weather” de notre fichier csv. Reprenons notre premier exemple à l’étape n°11.

1. Sur la page servant de modèle (page n°2) effacez la boîte texte avec la variable #BDD”weather” et remplacez-la par une boîte image au choix parmi : “nuage.tga”, “soleil.tga” ou “pluie.tga” (dans cet exemple : “nuage.tga”). Placez ensuite cette image dans le gabarit.
   
   
   
   
2. Allez dans le menu “Fenêtre/Editeur de Formats”, sélectionnez “est égal” dans la fonction intitulée “si valeur du champ” puis tapez “cloud” dans l’emplacement texte ci-contre.
   
   
3. Sélectionnez ensuite l’image que vous voulez faire correspondre au mot “cloud” (ici ce sera l’image nommée “nuage.tga”) en cliquant sur l’icône ouvrir.
    
4. Validez votre opération en cliquant sur le bouton MAJ (mise à jour) : votre condition va alors s’inscrire dans la liste des conditions.
    
5. De la même manière, créez deux autres conditions en cliquant sur le bouton “Nouveau” en faisant correspondre le mot “sun” à l’image “soleil.tga” et “rain” à l’image “pluie.tga”.
   
   
6. Sauvegardez votre fichier “format” en xml dans le menu du haut “Format / Sauver sous” en donnant par exemple le nom “testContainerEx1.xml”. 
   
   
7. Dans l’emplacement réservé au nom de l’image de la fenêtre “information”, tapez la formule “#BDD(format=testContainerEx1)"weather";c:\tvtools\images\Nuage.tga” devant le nom de l’image afin d’appeler le fichier “format”. Cliquez ensuite sur le bouton “mise à jour” afin de valider cette opération.
   
   
   
   Affichage des images en corrélation avec d’une part le fichier source au format “csv”et d’autre part les conditions du fichier format “testContainerEx1.xml”.
   
   
   
   Remarque : si la valeur du champ ne répond pas à une des conditions du format, ce sera l’image par défaut (ici “nuage.tga”) qui sera utilisée par le modèle à l’affichage. 

Nous allons compléter l’exemple précédent en triant par ordre décroissant les températures (du plus chaud au plus froid), tout en ajoutant également des conditions de couleurs aux températures. Prenons le cas où nous voulons afficher automatiquement les températures inférieures à 24° en rouge et les températures supérieures ou égales à 28° en vert. 

Container : exemple 4

1. Dans la fenêtre “RecordSets”, cliquez sur le bouton “Edition” afin d’ouvrir la fenêtre “Paramètres base de données”, cliquez ensuite sur l’onglet “Trier les données”. 
   
   
   
   
2. Choisissez le champ “Temperature” dans la colonne “champs de la base”, validez votre choix avec le bouton flèche du “1er champ de tri” puis cochez la fonction “ordre inverse”. Cette manipulation va permettre d’avoir un affichage par ordre décroissant des températures des différentes villes. 
   
   
   
   a. Attention : activez votre tri de données en cliquant sur le bouton vert de l’onglet. Puis fermez la fenêtre avec “OK” puis “Fermer”.
   Nous venons de procéder au tri des températures, il nous reste à donner des conditions de couleurs aux températures. Pour ceci nous allons définir un nouveau format.
   
   
3. Avant tout, créez une nouvelle boîte texte sur votre page en tapant  “#Format” avec la police et la couleur que vous souhaitez, ici en blanc. Ouvrez ensuite l’éditeur de formats et faites un copier-coller de ce texte dans l’emplacement “format par défaut”. 
   
   
   
   
4. Choisissez “est supérieur ou égal à” en valeur de champ, puis tapez “28” dans l’emplacement texte ci-contre
   
   
5. Copier-coller un autre style de texte avec le contenu “#Format”, ici en vert, par l'intermédiaire d’une boîte texte.
   
   
6. Cliquez sur le bouton “MAJ” (mise à jour) pour insérer le modèle de format dans la liste des conditions. 
   
   
7. Cliquez sur “Nouveau” pour faire un nouveau modèle de format et effectuez les mêmes manipulations avec cette fois “est inférieur” en valeur de champ, suivi de “24” dans l’emplacement texte et un copier-coller du texte “#Format” en rouge cette fois.
   
   
8. Sauvegardez votre fichier “format” en xml dans le menu du haut “Format / Sauver sous” sous le nom “testContainerEx2.xml”. Puis quittez l’éditeur de formats.
   
   
9. Remplacez sur la page modèle la variable #BDD”temperature” par la formule suivante :  #BDD(format=testContainerEx2)"temperature".
   
   
   
   Pour vous faciliter l’opération vous pouvez utiliser la zone de saisie de texte de la palette d’outils.
10.  Retournez sur la première page de votre émission, puis double-cliquez sur la boîte Container.  Cliquez ensuite sur le bouton “Paramétrer les données” puis sur le bouton “types de champ”.
    
    
    
    
11. Pour que TV tools puisse attribuer les conditions de format aux chiffres des températures, il faut avant tout  convertir le texte du fichier csv d’origine en nombre décimal. Pour ce faire cliquez sur la ligne Temperature, puis dans le menu “conversion d’un champ texte en” choisissez la mention “Nombre entier”. Cette manipulation va s’appliquer sur tous les autres enregistrements du fichier csv. Validez par “OK” puis “Fermer”.
    
    
    
    

    Affichage des températures obéissant aux conditions du fichier format “testContainerEx2.xml”.
    
    

    
    Remarque : Les valeurs comprises entre 24° et inférieures à 28° seront dans la couleur du format par défaut, en l’occurrence en blanc dans cet exemple.
     
12. En partant de cet exemple, nous allons changer le type de visualisation de ces différentes informations avec un rolling (défilant) de tous les éléments (ville, température, visuel du temps). Pour ce faire, double-cliquez sur la boîte “Container” puis choisissez dans les paramètres un type d’organisation en “rolling”.
    
    
    
    
13. Attribuez une taille horizontale d’un élément (ici valeur à “500” pixels) en veillant qu’aucun élément ne soit coupé lors de la diffusion. Cochez la case “ajustement automatique de la largeur” pour que les éléments puissent s’enchaîner correctement les uns derrière les autres. Vérifiez également que les variables #BDD contenues sur la 2ème page rentrent bien dans le nouveau gabarit du container.
    
    
14. Pour une meilleure visualisation, vous pouvez mettre une boîte de texte avec un fond de couleur en transparence en arrière plan de la boîte “Container”. Vous pouvez voir les différents éléments défiler pendant la durée de la page en cliquant sur l’icône “oeil”.
    
    

Container et flux RSS

Sur le même principe nous allons exploiter un flux RSS en jouant sur sa mise en forme graphique dans TV tools grâce à la boîte de Container. 

Container : exemple 5

1. Créez une nouvelle émission avec une boîte container sur la première page. Validez par “oui” pour la création d’un RecordSet.
    
2. Choisissez “RSS Feed” dans le menu dans le type de base, puis cliquez sur le bouton “Choisir/Modifier” afin de déterminer l’URL de votre flux. 
   
   
   
   
3. Vous pouvez saisir ou copiez-collez l’URL de votre flux RSS. Déterminez aussi ses options (nombre de sujets, utilisation en rolling, affichage de la description, etc...). Validez ensuite par “OK”. De retour sur la fenêtre des “Paramètres de base de données”, validez également par “OK” afin d’ouvrir la fenêtre des “Paramètres de Container”. 
   
   
   
   

4. Choisissez un type d’organisation en “rolling”, une taille horizontale d’un élément à “400” pixels et cochez la fonction “ajustement de la largeur”.
    

5. Sélectionnez la fonction “créer page modèle” et donnez le numéro “2” pour la page qui va servir de modèle. Validez par “Fermer”
   
    
   
   
6.  Ajouter les champs textes que vous souhaitez insérer dans la page modèle. Puis validez par “OK”. 
   
    
   
   
7. Agrandissez la boîte Container de la première page de façon à ce qu’elle prenne toute la largueur de l’écran. Puis cliquez sur le bouton “Edition” de la fenêtre RecordSets. Par ce biais, nous allons déterminer des conditions de passage du flux en imposant uniquement le dernier flux mis à jour durant les quatre dernières heures. Pour ce faire cliquez sur l’onglet “Filtrer les Données”. 
   
   
8. Activez l’onglet en actionnant le “bouton vert” puis choisissez “PubDate” et validez avec la flèche pour l’insérer dans le “1er champ de filtre”.
   
    
   
   
9. Choisissez la fonction “datant de - de x heures” et tapez “4” pour déterminer que le flux sera pris en compte s’il date de moins de 4 heures. Validez par “OK”. 
   
   
10. Dans le gabarit du container matérialisé par un cadre en pointillé blanc et gris, modifiez les deux boîtes texte #BDD”Title” (correspondant au titre du flux RSS) et #BDD”Description” (correspondant à la description du flux RSS) avec les typos et la couleur de votre choix.
    
     
     
11. Nous allons remplacer la boîte texte #BDD”Enclosure” par une image quelconque (qui servira de référence de taille). Puis dans la fenêtre “Informations” saisissez la variable #BDD”Enclosure”; avant l’emplacement et le nom de l’image utilisée. Validez par “Entrée”.
    
    
    
    
12. Visualisez l’émission. Le flux RSS va défiler avec les images contenues dans le flux dont la taille est déterminée par l’image de la page modèle (ici : 100x75 pixels). 
    
    
     

Room Booking

Nous allons créer une émission d’exemple destinée à de la gestion et de la réservation de salles. Pour ceci nous allons nous appuyer sur “l’agenda de Google”. Cet agenda peut servir pour tout besoin d’affichage de données de type calendaires (affichage d’évènements d’entreprises, de menus de cantines, de la liste des professeurs absents, de concerts, etc...). 

1. Avant tout, il faut créer un compte Google. Pour ceci, entrez le lien suivant : http://www.google.fr dans votre navigateur web, puis cliquez sur le bouton “Connexion”.
   
    
   
   
2.  Comme nous présupposons que nous n’avons pas de compte Google, cliquez à nouveau sur le lien “Créer un compte”.
   
    
   
   
3.  Remplissez le formulaire ci-contre afin de paramétrer votre compte (nom, nom d’utilisateur, mot de passe, contact mail, etc...) et cliquez sur le bouton “Etape suivante” pour valider.
   
   
   
   
4. Cliquez sur le picto “Applications”, puis sélectionnez “Agenda” pour lancer l’application.
   
   
    
   
   
5.  Vous accédez à l’interface de l’agenda Google. Dans notre exemple, nous allons afficher la grille horaire dans la vue "Jour". Nous allons ensuite double-cliquer à une heure quelconque sur la grille horaire afin d’attribuer un nouvel évènement.
   
    
    
6. Saisissez le nom de l'événement ainsi qu’une heure de début et de fin. Par exemple, saisissez "Formation : la gestion des compétences" de 10h à 16h30. Sinon vous pouvez cocher la case "toute la journée" si votre événement couvre l’ensemble de la journée. Dans notre exemple nous avons également rempli les champs "Lieu" et "Description". Cliquez sur le bouton "enregistrer" pour sauvegarder vos informations et retourner sur la fenêtre de planification.
    
7. Nous allons compéter la journée en cours par d’autres enregistrements. Dans notre exemple nous allons créer 3 enregistrements couvrant différents créneaux horaires.
   
   
   
   
8. Dans le Designer de TV tools nous allons créer une nouvelle émission avec une boîte "container" sur la première page (accès par le menu du haut "Boîte/Nouveau/Container").
   
   
   
   
9. Validez par "Oui" dans la fenêtre ci-contre afin de créer un nouveau RecordSet.
   
   
   
   
10. Dans la fenêtre "Paramètres base de données" sélectionnez la rubrique "Calendrier Google" dans le menu déroulant "Type de base".
    
     
    
    
11. Cliquez sur le bouton "Choisir" pour ouvrir la fenêtre "TVTools Google Calendar Connector".
    
     
     
12. Cliquez ensuite sur le bouton "Choisir Compte Google".
    
    
    
    
13. Validez la fenêtre de message en cliquant sur "Oui" puis cliquer sur le bouton "J’accepte" pour autoriser l’application Google à utiliser vos données.
    
     
    
14. Le champ du compte va automatiquement s’authentifier. Validez par "OK".
    
     
    
    
15. Le compte va s’identifier dans le champ "Calendriers". 
    
     
    
    
16. Dans la fenêtre "Paramètres base de données" sélectionnez l’onglet "Trier les données". Choisissiez le champ "start_time" en cliquant sur le bouton fléché pour effectuer le tri. Cette manipulation permet de faire une sélection des enregistrements en affichant uniquement ceux qui doivent se dérouler à la date du jour. Cliquez sur la boule verte de l’onglet "Trier les données" pour activer ce tri. 
    
     
    
    
17. Cliquez 2 fois sur le bouton "OK" pour valider et choisissez le type de forme "en hauteur" pour l’affichage de vos données. Validez à nouveau par "OK". 
    
     
    
    
18. Dans la fenêtre "Paramètres Container" nous allons paramétrer la taille verticale à "200px" afin de placer plusieurs enregistrements sur notre page. Nous choisissons la construction des éléments à partir "d’une page modèle" et nous cochons l’option "Contenu dynamique" afin de pouvoir attribuer des effets sur chacun des éléments qui composent notre base de donnée (boîtes titre, description, nom de salle, etc...). Nous pouvons alors cliquer sur le bouton "Fermer". 
    
     
    
    
19. Vous pouvez choisir les champs que vous souhaitez voir apparaître dans votre Design. Sélectionnez un champ dans la colonne de gauche puis cliquez sur le bouton "Ajouter" (comme dans l’exemple ci-contre avec le champ "name"). Valider par "OK".  
    
     
    
    
20. La page 2 va alors se créer avec les différents champs demandés. Vous pouvez construire votre mise en page en disposant à l’écran les différents champs à l’intérieur du cadre en pointillés. Ce cadre matérialise la taille d’un enregistrement. Vous pouvez également attribuer des paramètres typographiques (police, style, couleur...) aux différentes boîtes texte contenant les variables #BDD.
    
    NB : Dans cet exemple, nous avons défini une taille en hauteur de 200px, la longueur dépendra de la taille horizontale de la boîte container de la 1ère page. 
    
     
     
21. De retour sur la page 1, nous avons étiré notre boîte container à 600px de hauteur : nous pouvons donc afficher 3 enregistrements simultanément dans notre Design. Cliquez sur le bouton “preview” pour visualiser vos données de façon dynamique.