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:20] jdesouza [Principe] |
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 50: | Ligne 50: | ||
| 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…) 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}}| | ||
| | | | | ||
| - | |||
| - | * **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}}| | ||
| * JS→ **/fids/source/javascript/** | * JS→ **/fids/source/javascript/** | ||
| Ligne 94: | 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. | ||
| + | |||
| + | \\ | ||
| Ligne 191: | Ligne 162: | ||
| ==== Second template : veille messages ==== | ==== 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 ****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 211: | 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> | ||
| Ligne 229: | 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 265: | Ligne 235: | ||
| 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> | <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 278: | 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 300: | Ligne 269: | ||
| 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 326: | Ligne 296: | ||
| 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> | <code> | ||
| <div>** {$uneVariable**} </div> | <div>** {$uneVariable**} </div> | ||
| </code> | </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 344: | Ligne 315: | ||
| {/**if**} | {/**if**} | ||
| + | </code> | ||
| ==== Liste des variables FIDS ==== | ==== Liste des variables FIDS ==== | ||