Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
guides:utilisation:fidspage:modelefids [26/05/2017 15:03] jdesouza |
guides:utilisation:fidspage:modelefids [13/02/2018 17:41] (Version actuelle) jdesouza [FiDS : modèles FiDS] |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| ====== FiDS : modèles FiDS ====== | ====== FiDS : modèles FiDS ====== | ||
| - | {{:guides:utilisation:fidspage:modelefids_image_0.png?100}} | + | {{:logo:eaf_log_fids_201607-001_logo.png?100|}} |
| ===== Préambule ===== | ===== Préambule ===== | ||
| Ligne 51: | Ligne 51: | ||
| Avant de créer un template pour le FiDS, il est impératif de connaitre l’arborescence du système : | Avant de créer un template pour le FiDS, il est impératif de connaitre l’arborescence du système : | ||
| - | |* **airlines**Contient les informations compagnies (logos, images…) \\ * **airport**Contient les informations par site (logos, images, css…) \\ * **services**Contient des web services (météo, flux RSS…) \\ * **source**Contient des ressources necessaires aux templates : \\ * css * font * img * javascript * jquery * lib * **templates**Contient les templates, triés par mode \\ * 0 : veille * 1 : infos bagages * 2 : infos enregistrement * 3 : infos embarquement * 4 : liste arrivées * 5 : liste departs * 6 : sequences * 7 : autres|{{:guides:utilisation:fidspage:modelefids_image_5.png}}| | + | | \\ **airlines** \\ \\ Contient les informations compagnies (logos, images…) \\ \\ **airport** \\ \\ Contient les informations par site (logos, images, css…) s**ervices ** \\ \\ Contient des web services (météo, flux RSS…) \\ \\ **source** \\ \\ Contient des ressources nécessaires aux templates : \\ \\ * css \\ \\ * font \\ \\ * img \\ \\ * javascript \\ \\ * jquery \\ \\ * lib * \\ \\ **templates** \\ \\ Contient les templates, triés par mode \\ \\ * 0 : veille \\ \\ * 1 : infos bagages \\ \\ * 2 : infos enregistrement \\ \\ * 3 : infos embarquement \\ \\ * 4 : liste arrivées \\ \\ * 5 : liste departs \\ \\ * 6 : sequences \\ \\ * 7 : autres|{{:guides:utilisation:fidspage:modelefids_image_5.png}}| |
| + | |||
| + | | | ||
| * JS→ **/fids/source/javascript/** | * JS→ **/fids/source/javascript/** | ||
| Ligne 61: | Ligne 63: | ||
| En cas d’absence de ce caractère, le fichier sera recherché à partir du dossier où la page HTML est présente. | En cas d’absence de ce caractère, le fichier sera recherché à partir du dossier où la page HTML est présente. | ||
| + | |||
| + | \\ | ||
| + | |||
| ==== Premier template : veille ==== | ==== Premier template : veille ==== | ||
| Ligne 136: | Ligne 141: | ||
| Une fois que la feuille de style est définie, la page html affiche : | Une fois que la feuille de style est définie, la page html affiche : | ||
| - | :guides:utilisation:fidspage:modelefids_image_8.png | + | //{{:guides:utilisation:fidspage:modelefids_image_8.png?400}}// |
| Une relation va automatiquement être créée entre la balise "**<body>**" 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é. | Une relation va automatiquement être créée entre la balise "**<body>**" 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é. | ||
| Ligne 153: | Ligne 158: | ||
| Il est possible de concaténer les sélecteurs afin d’affiner le style de balises filles. | Il est possible de concaténer les sélecteurs afin d’affiner le style de balises filles. | ||
| - | :guides:utilisation:fidspage:modelefids_image_9.png | + | //{{:guides:utilisation:fidspage:modelefids_image_9.png?400}}// |
| ==== Second template : veille messages ==== | ==== Second template : veille messages ==== | ||
| - | **Airport Manager ****Fi****DS** 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 ****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. |
| <code> | <code> | ||
| <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN"> | <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN"> | ||
| Ligne 176: | Ligne 181: | ||
| <div id="message1" class="messages">{$MSG1}</div> | <div id="message1" class="messages">{$MSG1}</div> | ||
| <div id="message2" class="messages">{$MSG2}</div> | <div id="message2" class="messages">{$MSG2}</div> | ||
| - | <div id="message3" class="messages">{$MSG3}</div> | + | <div id="message3" class="messages">{$MSG3}</div>** |
| + | </div> | ||
| </div> | </div> | ||
| - | **</div> | ||
| </body> | </body> | ||
| </html> | </html> | ||
| Ligne 185: | Ligne 190: | ||
| Le corps de la page s’est enrichi d’une section "**messages**" composée de sous-section "**messages**" : | 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}} | + | //{{: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. | 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. | ||
| Ligne 194: | Ligne 199: | ||
| img {width: 100%;height: 100%;} | img {width: 100%;height: 100%;} | ||
| body { | body { | ||
| - | background-color: black; ///* fond noir *// / | + | background-color: black; /* fond noir */ |
| - | ///* police *// / | + | /* police */ |
| - | font-family: Arial; ///* police "Arial" *// / | + | font-family: Arial; /* police "Arial" */ |
| - | color: white; ///* police blanche*// / | + | color: white; /* police blanche*/ |
| - | text-align: center; ///*centre le texte*// / | + | text-align: center; /*centre le texte*/ |
| - | font-weight: bold; ///* police en gras*// / | + | font-weight: bold; /* police en gras*/ |
| - | font-size: 25px; ///* hauteur 25 pixels*// / | + | font-size: 25px; /* hauteur 25 pixels*/ |
| overflow: hidden; | overflow: hidden; | ||
| } | } | ||
| Ligne 226: | Ligne 231: | ||
| </code> | </code> | ||
| - | {{:guides:utilisation:fidspage:modelefids_image_11.png}} | + | //{{: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**. | 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. | + | **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 :** | 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 :** | ||
| + | <code> | ||
| $().ready(function() { ///* attend que le document soit prêt*// / | $().ready(function() { ///* attend que le document soit prêt*// / | ||
| - | ///*initialise les repertoires*// / | + | /*initialise les repertoires*/ |
| js_path = '/fids/source/javascript/'; | js_path = '/fids/source/javascript/'; | ||
| Ligne 242: | Ligne 247: | ||
| jquery_path = js_path+'jquery/'; | jquery_path = js_path+'jquery/'; | ||
| - | ///* importe l’extension de défilement*// / | + | /* importe l’extension de défilement*/ |
| $.includeJS(jquery_path+'jquery.cycle.all.min.js'); | $.includeJS(jquery_path+'jquery.cycle.all.min.js'); | ||
| - | ///* lance la fonction de défilement sur la balise id="messages"*// / | + | /* lance la fonction de défilement sur la balise id="messages"*/ |
| $('#messages').cycle({ | $('#messages').cycle({ | ||
| Ligne 257: | Ligne 262: | ||
| }); | }); | ||
| + | </code> | ||
| 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. | 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}} | + | {{:guides:utilisation:fidspage:modelefids_image_12.png?400}} |
| Le résultat final, pris lors du déroulement entre les messages 1 et 2 | Le résultat final, pris lors du déroulement entre les messages 1 et 2 | ||
| + | |||
| ===== Debugger un template ===== | ===== Debugger un template ===== | ||
| Ligne 270: | Ligne 277: | ||
| 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 | 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}} | + | {{:guides:utilisation:fidspage:modelefids_image_13.png?400}} |
| La documentation de cette fenêtre est disponible à cette adresse : | La documentation de cette fenêtre est disponible à cette adresse : | ||
| Ligne 290: | Ligne 297: | ||
| 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. | 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. | ||
| + | <code> | ||
| <div>** {$uneVariable**} </div> | <div>** {$uneVariable**} </div> | ||
| + | </code> | ||
| - | 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 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. | Les accolades peuvent aussi contenir des fonctions natives afin d’effectuer un traitement plus profond des variables comme des conditions ou des boucles. | ||
| + | <code> | ||
| + | {**if** $flight→countEscales() > 0} ///*si le vol contient une escale*// / | ||
| - | {**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*// / |
| - | {**foreach** from=$flight→getEscales() item=escale name=ligne} ///* pour chaque escale que contient le vol*// / | + | / {$escale→getAirportName()} ///* affiche l’aéroport escale*// / |
| - | + | ||
| - | / {$escale→getAirportName()} ///* affiche l’aéroport escale*// / | + | |
| {/**foreach**} | {/**foreach**} | ||
| Ligne 306: | Ligne 315: | ||
| {/**if**} | {/**if**} | ||
| + | </code> | ||
| ==== Liste des variables FIDS ==== | ==== Liste des variables FIDS ==== | ||
| Ligne 359: | Ligne 369: | ||
| Code pour afficher une expression dans toutes les langues disponibles : | Code pour afficher une expression dans toutes les langues disponibles : | ||
| + | <code> | ||
| {foreach from=$languages item=language} ///*pour chaque langue*// / | {foreach from=$languages item=language} ///*pour chaque langue*// / | ||
| Ligne 365: | Ligne 376: | ||
| {/foreach} | {/foreach} | ||
| + | </code> | ||
| 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 : | 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 : | ||