Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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:22]
jdesouza ancienne révision (26/05/2017 15:17) restaurée
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 182: 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 202: 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 220: 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 256: 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 269: 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 291: 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 317: 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 335: Ligne 315:
 {/**if**} {/**if**}
  
 +</​code>​
 ==== Liste des variables FIDS ==== ==== Liste des variables FIDS ====