Différences

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

--- guides:utilisation:fidspage:modelefids [26/05/2017 15:20]
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 ======
-{{:guides:utilisation:fidspage:modelefids_image_0.png?100}}
+{{:logo:eaf_log_fids_201607-001_logo.png?100|}}
 ===== 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 :
+| \\  **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**
+  * JS→ **/fids/source/javascript/**
+  * Jquery→ **/fids/source/javascript/jquery/**
-Contient les informations compagnies (logos, images…)
+**__Note : __  **
-* **airport** \\  \\ Contient les informations par site (logos, images, css…)
+Etant donné que les fichiers seront lus depuis un serveur web, la présence du **slash (/)**  en début de chemin indique que le dossier est placé à la **racine**  du serveur web.
-*** services** \\  \\ **Contient des web services (météo, flux RSS…) ** \\ * source** ** \\  \\ Contient des ressources necessaires aux templates :
+En cas d’absence de ce caractère, le fichier sera recherché à partir du dossier où la page HTML est présente.
-* 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/** * Jquery→ ** /fids/source/javascript/jquery/__Note : __  ** Etant donné que les fichiers seront lus depuis un serveur web, la présence du **slash (/)** en début de chemin indique que le dossier est placé à la **racine** du serveur web. 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 ==== === Créer la page html === Pour commencer, créer la page ** /fids/templates/0/veille_test.htm **: '' <!DOCTYPE HTML PUBLIC __GESHI_QUOT__-//W3C//DTD HTML 4.01 Transitional//EN////__GESHI_QUOT__> <html> <head> <title>Airport Manager - TEST</title> <meta http-equiv=__GESHI_QUOT__Content-Type__GESHI_QUOT__  content=__GESHI_QUOT__text/html; charset=UTF-8__GESHI_QUOT__  /> <link type=__GESHI_QUOT__text/css__GESHI_QUOT__  href=__GESHI_QUOT__ /fids/source/css/veille_test.css__GESHI_QUOT__  rel=__GESHI_QUOT__stylesheet__GESHI_QUOT__  /> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/jquery/jquery-1.4.4.min.js__GESHI_QUOT__></script> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/jquery/jquery.functions.js__GESHI_QUOT__></script> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/veille_test.js__GESHI_QUOT__></script> </head> <body> <div id=__GESHI_QUOT__header__GESHI_QUOT__>Airport Manager vous souhaite un bon voyage.</div> <div id=__GESHI_QUOT__content__GESHI_QUOT__> <img src=__GESHI_QUOT__ /fids/airport/EAF/veille.jpg__GESHI_QUOT__  /> </div> <div id=__GESHI_QUOT__footer__GESHI_QUOT__></div> </body> </html> //'' //   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 **<script></script>**  et **<body></body>**). * être auto-fermantes (ex. : balises **<meta/>**  et **<link/>**). 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 __GESHI_QUOT__Arial__GESHI_QUOT__  */ 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 : ////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é. 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 <div **id** ="**header**"></div>). * 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 <div **class** ="**section**"></div>). * * 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**></**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}}// ====
+\\
+==== Premier template : veille ====
+=== Créer la page html ===
+Pour commencer, créer la page **/fids/templates/0/veille_test.htm **:
+<code>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN////">
+<html>
+<head>
+<title>Airport Manager - TEST</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link type="text/css" href="/fids/source/css/veille_test.css" rel="stylesheet" />
+<script type="text/javascript" src="/fids/source/javascript/jquery/jquery-1.4.4.min.js"></script>
+<script type="text/javascript" src="/fids/source/javascript/jquery/jquery.functions.js"></script>
+<script type="text/javascript" src="/fids/source/javascript/veille_test.js"></script>
+</head>
+<body>
+<div id="header">Airport Manager vous souhaite un bon voyage.</div>
+<div id="content"> <img src="/fids/airport/EAF/veille.jpg" /> </div>
+<div id="footer"></div>
+</body>
+</html>
+</code>
+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 **<script></script>**  et **<body></body>**).
+  * être auto-fermantes (ex. : balises **<meta/>**  et **<link/>**).
+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**  : //
+<code>
+//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%;
+}
+</code>
+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 "**<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é.
+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 <div **id**  ="**header**"></div>).
+  * 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 <div **class**  ="**section**"></div>).
+  * * 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**></**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.
+<code>
+<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN">
+<html>
+<head>
+<title>Airport Manager - TEST</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link type="text/css" href="/fids/source/css/veille_test.css" rel="stylesheet" />
+<script type="text/javascript" src="/fids/source/javascript/jquery/jquery-1.4.4.min.js"></script>
+<script type="text/javascript" src="/fids/source/javascript/jquery/jquery.functions.js"></script>
+<script type="text/javascript" src="/fids/source/javascript/veille_test.js"></script>
+</head>
+<body>
+<div id="header">Airport Manager vous souhaite un bon voyage.</div>
+<div id="content"></div>
+<div id="footer">
+**<div id="messages">
+<div id="message1" class="messages">{$MSG1}</div>
+<div id="message2" class="messages">{$MSG2}</div>
+<div id="message3" class="messages">{$MSG3}</div>**
+</div>
+</div>
+</body>
+</html>
+</code>
-{{:guides:utilisation:fidspage:modelefids_image_8.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. '' <!DOCTYPE HTML PUBLIC __GESHI_QUOT__-W3CDTD HTML 4.01 TransitionalEN__GESHI_QUOT__> <html> <head> <title>Airport Manager - TEST</title> <meta http-equiv=__GESHI_QUOT__Content-Type__GESHI_QUOT__  content=__GESHI_QUOT__text/html; charset=UTF-8__GESHI_QUOT__  /> <link type=__GESHI_QUOT__text/css__GESHI_QUOT__  href=__GESHI_QUOT__ /fids/source/css/veille_test.css__GESHI_QUOT__  rel=__GESHI_QUOT__stylesheet__GESHI_QUOT__  /> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/jquery/jquery-1.4.4.min.js__GESHI_QUOT__></script> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/jquery/jquery.functions.js__GESHI_QUOT__></script> <script type=__GESHI_QUOT__text/javascript__GESHI_QUOT__  src=__GESHI_QUOT__ /fids/source/javascript/veille_test.js__GESHI_QUOT__></script> </head> <body> <div id=__GESHI_QUOT__header__GESHI_QUOT__>Airport Manager vous souhaite un bon voyage.</div> <div id=__GESHI_QUOT__content__GESHI_QUOT__></div> <div id=__GESHI_QUOT__footer__GESHI_QUOT__> '' **''<div id=__GESHI_QUOT__messages__GESHI_QUOT__> <div id=__GESHI_QUOT__message1__GESHI_QUOT__  class=__GESHI_QUOT__messages__GESHI_QUOT__>{$MSG1}</div> <div id=__GESHI_QUOT__message2__GESHI_QUOT__  class=__GESHI_QUOT__messages__GESHI_QUOT__>{$MSG2}</div> <div id=__GESHI_QUOT__message3__GESHI_QUOT__  class=__GESHI_QUOT__messages__GESHI_QUOT__>{$MSG3}</div> </div> </div> </body> </html> ''
 Le corps de la page s’est enrichi d’une section "**messages**" composée de sous-section "**messages**" :
@@ Ligne 76: / Ligne 199: @@
 img {width: 100%;height: 100%;}
 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;
 }
@@ Ligne 112: / 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**.
-**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 :**
 <code>
 $().ready(function() { ///* attend que le document soit prêt*//  /
-///*initialise les repertoires*//  /
+/*initialise les repertoires*/
 js_path = '/fids/source/javascript/';
@@ Ligne 125: / Ligne 247: @@
 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');
-///* lance la fonction de défilement sur la balise id="messages"*//  /
+/* lance la fonction de défilement sur la balise id="messages"*/
 $('#messages').cycle({
@@ Ligne 147: / Ligne 269: @@
 Le résultat final, pris lors du déroulement entre les messages 1 et 2
 ===== Debugger un template =====
@@ Ligne 178: / Ligne 301: @@
 </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.
+<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**}
@@ Ligne 192: / Ligne 315: @@
 {/**if**}
+</code>
 ==== Liste des variables FIDS ====
@@ Ligne 245: / Ligne 369: @@
 Code pour afficher une expression dans toutes les langues disponibles :
 <code>
 {foreach from=$languages item=language} ///*pour chaque langue*//  /

Différences

Besoin d'aide ? Appelez-nous

du lundi au vendredi de 9h à 18h

+33 (0)553 801 366 ou support@edge-airport.com