Airport Manager vous souhaite un bon voyage.
Airport Manager - TEST
Airport Manager vous souhaite un bon voyage.
Il s’agit d’un langage de balises :
* **DOCTYPE** : permet de définir le type de document à afficher.
* **html : **balise qui contiendra le code. Aucun attribut n’est nécessaire.
* **head **: l’en-tête du document, partie invisible mais qui permet de :
* Donner un titre au document.
* Définir l’encodage des caractères.
* lier une **feuille de style** (CSS).
* lier une page **JavaScript**.
* **body** : le corps du document, partie visible par le client.
Les balises peuvent :
* avoir des attributs.
* encadrer un contenu (ex. : balises **** et ****).
* être auto-fermantes (ex. : balises **** et ****).
Voici la structure basique d’une balise :
//{{:guides:utilisation:fidspage:modelefids_image_6.png}}//
Ce document affichera un texte sur fond blanc :
//{{:guides:utilisation:fidspage:modelefids_image_7.png}}//
=== Créer le CSS ===
//Nous pouvons maintenant créer la feuille de style **/fids/source/css/veille_test.css** : //
//body
{
/* fond d'écran*/
background-color: black; /* fond noir */
/* police */
font-family: Arial; /* police "Arial" */
color: white; /* police blanche*/
text-align: center; /*centre le texte*/
font-weight: bold; /* police en gras*/
font-size: 25px; /* hauteur 25 pixels*/
overflow: hidden;
}
img
{
width: 100%;
}
Une fois que la feuille de style est définie, la page html affiche :
//{{:guides:utilisation:fidspage:modelefids_image_8.png?400}}//
Une relation va automatiquement être créée entre la balise "****" dans le document HTML et la règle **body** de la feuille de style. Le navigateur va interpréter les **déclarations** du **sélecteur **concerné.
Voici la structure d’une règle CSS :
**__Note : __ **
En CSS, il existe 4 types de sélecteurs :
* * (étoile), qui force toutes les balises à appliquer sa déclaration.
* Les sélecteurs précédés du caractère **#** (dièse) s’appliquent pour **une** balise ayant l’attribut **id** du même nom (ex. : le sélecteur** #header** s’appliquera pour la balise ).
* Les sélecteurs précédés du caractère **.** (point) s’appliquent pour **toute** balise ayant l’attribut **class** du même nom (ex. : le selécteur**.section** s’appliquera pour les balises ).
* * Les autres règles s’appliqueront pour les balises ayant le même nom (ex. : le sélecteur **body** s’appliquera pour la balise <**body**>).
Il est possible de concaténer les sélecteurs afin d’affiner le style de balises filles.
//{{:guides:utilisation:fidspage:modelefids_image_9.png?400}}//
==== Second template : veille messages ====
**Airport Manager ****FiDS** met à disposition une série d’informations qui peuvent être affichées depuis les templates. Dans ce cas présent nous ferons défiler les variables **MSG1, MSG2** et **MSG3** fournies par le système.
Airport Manager - TEST
Airport Manager vous souhaite un bon voyage.
Le corps de la page s’est enrichi d’une section "**messages**" composée de sous-section "**messages**" :
//{{:guides:utilisation:fidspage:modelefids_image_10.png?400}}//
Sans modifier le CSS, les textes s’affichent en-dessous du premier texte car seul le corps de texte (la balise body) a été définie dans la feuille de style.
* {padding: 0;margin: 0;}
html, body{width: 100%;height: 100%;}
img {width: 100%;height: 100%;}
body {
background-color: black; /* fond noir */
/* police */
font-family: Arial; /* police "Arial" */
color: white; /* police blanche*/
text-align: center; /*centre le texte*/
font-weight: bold; /* police en gras*/
font-size: 25px; /* hauteur 25 pixels*/
overflow: hidden;
}
#header {
width: 100%;
height: 92px;
line-height: 92px;
}
#content {
width: 100%;
height: 738px;
}
#footer {
width: 100%;
height: 92px;
}
#footer #messages {
width: 100%;
text-align: center;
}
#footer #messages .message {
width: 100%;
text-align: center;
}
//{{:guides:utilisation:fidspage:modelefids_image_11.png?400}}//
Les balises appliquent leur règle CSS et les messages sont bien en bas de page, mais ne défilent pas encore. Cette partie sera effectuée par le **javascript**, plus précisément par une librairie nommée **jQuery**.
**jQuery** permet d’écrire du javascript en utilisant le système de sélecteurs en CSS, il est donc plus facile d’appliquer des animations sur une balise. Cette librairie est extensible et permet d’intégrer des fonctions personnalisées.
Un appel à cette librairie aura été fait au préalable (ligne 7) ainsi qu’à des fonctions nécessaires (ligne 8). Nous allons donc pouvoir écrire le fichier **veille_test.js :**
$().ready(function() { ///* attend que le document soit prêt*// /
/*initialise les repertoires*/
js_path = '/fids/source/javascript/';
jquery_path = js_path+'jquery/';
/* importe l’extension de défilement*/
$.includeJS(jquery_path+'jquery.cycle.all.min.js');
/* lance la fonction de défilement sur la balise id="messages"*/
$('#messages').cycle({
fx: 'scrollUp',
speed: 2000
});
});
La présence de jQuery se reconnait dans l’utilisation de la syntaxe** $(selecteur).uneFonction()**. Ici, ces quelques lignes permettent, lorsque le navigateur a fini de charger la page, de lancer un défilement (cycle) sur les messages avec un effet de déroulement qui prend 2 secondes par page.
{{:guides:utilisation:fidspage:modelefids_image_12.png?400}}
Le résultat final, pris lors du déroulement entre les messages 1 et 2
===== Debugger un template =====
Google Chrome intègre un mode debugger dans le navigateur. Il permet de s’assurer de la gestion des ressources (mauvais chemin d’un fichier, page introuvable…), du bon fonctionnement des scripts JS et de la bonne interprétation des règles CSS.
Il est disponible en pressant la touche **F12** ou dans la **paramètres > Outils > Outils de développement**. Une fenêtre apparaitra sous la page affichée
{{:guides:utilisation:fidspage:modelefids_image_13.png?400}}
La documentation de cette fenêtre est disponible à cette adresse :
[[https://developers.google.com/chrome-developer-tools/docs/overview?hl=fr#window|https://developers.google.com/chrome-developer-tools/docs/overview?hl=fr#window]]
Les onglets Elements et Console permettront :
* de parcourir le code HTML du template généré par le serveur.
* de parcourir les règles CSS pour chaque balise.
* de parcourir les erreurs retournées par Javascript.
===== Variables FiDS =====
Un template peut contenir des variables afin d’en personnaliser l’affichage.
==== Appel des variables ====
Les variables sont interprétées côté serveur. Pour les intégrer, une syntaxe bien précise doit être respectée dans le document HTML.
** {$uneVariable**}
Les accolades impliquent que tout ce qui sera à l’intérieur va être interprété côté serveur. Le caractère **$** (dollar) précède toutes les variables.
Les accolades peuvent aussi contenir des fonctions natives afin d’effectuer un traitement plus profond des variables comme des conditions ou des boucles.
{**if** $flight→countEscales() > 0} ///*si le vol contient une escale*// /
{**foreach** from=$flight→getEscales() item=escale name=ligne} ///* pour chaque escale que contient le vol*// /
/ {$escale→getAirportName()} ///* affiche l’aéroport escale*// /
{/**foreach**}
{/**if**}
==== Liste des variables FIDS ====
|**VARIABLE** |**DESCRIPTION** |**UTILISATION** |
|**Tous Modes** |||
|MSG1|Messages personnalisés|$MSG1|
|MSG2|$MSG2| |
|MSG3|$MSG3| |
|VIDEO|Chemin d’une vidéo|$VIDEO|
|SOC|Code Aéroport|$SOC|
|CLASS|Classe de l’écran|$CLASS|
|ECRFILE|Fichier lié à l’écran (image, séquence…)|$ECRFILE|
|RSS|url d’un flux RSS|$RSS|
|TerminalTitle|Nom du terminal où se situe l’écran|$TerminalTitle|
|languages|Tableau qui contient les termes les plus courant en aeroportuaire dans les langues définies par l’administrateur| |
|**Check-In, Boarding et Bagage** |||
|flights|Liste des vols selectionnés|$flights|
|flight1|Vols sélectionnés|$flight1|
|flight2|$flight2| |
|flight3|$flight3| |
|airline_class|Classe de la compagnie|$airline_class|
|IMAGEBG|Image de fond de la compagnie|$IMAGEBG|
|**Liste Arrivée/Départ** |||
|flights|Liste des vols du jour|$flights|
|nblines|Nombre de lignes autorisées à afficher par l’écran|$nblines|
==== Variables de vols ====
Les variables de vols ont une utilisation différente des autres variables. Elles sont composées de variables imbriquées mais aussi de **méthodes** à appeler pour récupérer une information spécifique d’un vol. Voici la liste des méthodes :
|**METHODE** |**DESCRIPTION** |**UTILISATION** |
|getId()|Identifiant abstrait du vol|$flight→getId()|
|getCLI()|Code compagnie du vol|$flight→getCLI()|
|getLocalPlannedDate()|Date locale du vol|$flight→getLocalPlannedDate()|
|getLocalPlannedTime()|Heure locale du vol|$flight→getLocalPlannedTime()|
|getLastCheckInTime()|Heure limite d’enregistrement|$flight→getLastCheckInTime()|
|getLogo()|Chemin du logo de la compagnie|$flight→getLogo()|
|getNum()|Numéro de vol|$flight→getNum()|
|getSharedFlights()|Tableau des vols en "codeShare". \\ Cette méthode accepte un paramètre qui définit si le vol principal est intégré dans le tableau. \\ Si aucun paramètre n’est entré, le système interprètera que ce paramètre est à **true****.** |$flight→getSharedFlights(true) \\ Ou \\ $flight→getSharedFlights(false)|
|getAirportName()|Nom de l’aéroport de destination ou en provenance|$flight→getAirportName()|
|getAirportNames()|Liste du nom de l’aéroport de destination ou en provenance dans les langues définies par l’administrateur.|$flight1→getAirportNames()|
|countEscales()|Nombre d’escales|$flight→countEscales()|
|getEscales()|Tableau d’escales|$flight→getEscales()|
|getGate()|Code porte|$flight→getGate()|
|getInfos()|Tableau des informations de vol|$flight→getInfos()|
==== Variable "langages" ====
La variable langages est une matrice à deux dimensions :
* La première dimension stocke la langue (français, anglais, espagnol, arabe…)
* La deuxième dimension stocke un mot ou une expression dans la langue définie au-dessus.
Code pour afficher une expression dans toutes les langues disponibles :
{foreach from=$languages item=language} ///*pour chaque langue*// /
{$language.time}
///*afficher l’expression "time"*// /
{/foreach}
La liste des mots qu’elle contient est extensible. Chaque aéroport peut ajouter des expressions qui seront nécessaires au système de télé-affichage. Voici une liste non exhaustive :
* arrival
* domesticArrival
* internationalArrival
* nationalArrival
* businessArrival
* cargoArrival
* departure
* domesticDeparture
* internationalDeparture
* nationalDeparture
* businessDeparture
* cargoDeparture
* date
* time
* flight
* flightNumber
* destination
* baggage
* baggageClaim
* gate
* status
* origin
* airport
* stopover
* via
* boarding
* checkIn
\\