Framework JavaScript ACube V2.10.0
 

ergonomique/fw_navigation.js

Résumé

Ce fichier Javascript correspond au framework de gestion du composant Frameset. Cette description consiste à présenter les prototypes des fonctions, des exemples d'appel et les précisions techniques nécessaires à la mise en oeuvre de ce framework.

PRINCIPE GENERAL

Le fenêtrage des pages du framework ergonomique est constitué comme suit :
exPrincipeFrameset
Ce fenêtrage est réalisé en deux temps :

  1. Décomposition horizontale de la fenêtre principale en "ENTETE_WIN", réservée à l'entête, et "BODY_WIN", réservée au menu et au contenu.
  2. Décomposition verticale de la sous-fenêtre "BODY_WIN", en "MENU_WIN" pour le menu et "CONTENU_WIN" pour le contenu.

RENDU IHM

exComposantFrameset

Le framework Frameset utilise les pages HTML et classes utilitaires suivantes :
> ComposantMenu pour gérer le composant Menu.
> ObjectItem pour décrire les items du menu et ObjectAction pour décrire les actions de type "icône" du menu.
> ComposantEntete pour gérer le composant Entete.
> ObjectLien pour décrire les liens à afficher dans l'entête.
> XMLObject pour stocker respectivement les paramétrages XML du menu et de l'entête.
> XMLObjectCookie pour sauvegarder la sélection courante dans le menu, ainsi que le type d'affichage ( affiché ou caché).

classesFwErgoNavigationMenu
classesFwErgoNavigationEnTete
Figure 1 : Framework ergonomique de gestion du menu (fw_navigation.js)

On distingue deux types de menus différents :
·  Le menu documentaire, pour lequel tous les items se réfèrent à une fonction de navigation
·  Le menu gestion, pour lequel les items de niveaux 1 et 2 réalisent la structuration des différentes fonctions de gestion, et les items de niveau 3 se réfèrent à des actions.
Figure 2 : Framework ergonomique de gestion de l'entête (fw_navigation.js)

Ainsi, conformément aux principes du framework ergonomique, l'ensemble du contenu informatif peut être paramétré sous forme de flux XML ou par l'intermédiaire d'un tableau JavaScript :

<MENU>
    <VERSION></VERSION>
    <ACCUEIL>
       <URL></URL>
    </ACCUEIL>
    <PIED_DE_PAGE>
       <COULEUR></COULEUR>
       <COULEUR_TEXTE></COULEUR_TEXTE>
       <TEXTE></TEXTE>
    </PIED_DE_PAGE>
    <ITEM1>
        <URL></URL>
        <LIBELLE></LIBELLE>
        <LIBELLE_LONG></LIBELLE_LONG>
        <ID></ID>
    </ITEM1>
    <ITEM1>
       <URL></URL>
       <LIBELLE></LIBELLE>
      <LIBELLE_LONG></LIBELLE_LONG>
       <ID></ID>
      <OUVERTURE></OUVERTURE>
       <ITEM2>
          <URL></URL>
          <LIBELLE></LIBELLE>
           <LIBELLE_LONG></LIBELLE_LONG>
           <ID></ID>
           <ACTION>
            
<URL></URL>
            <ICONE></ICONE>
            <ALT></ALT>
           </ACTION>
           <ITEM3>
               <URL></URL>
               <LIBELLE></LIBELLE>
               <LIBELLE_LONG></LIBELLE_LONG>
               <ID></ID>
           </ITEM3>

        </ITEM2>

    </ITEM1>
</MENU>
   
<ENTETE>
    <TITLE></
TITLE>
    <INFO>
       <GRAS></GRAS>
       <NORMAL></NORMAL>
       <NORMAL></NORMAL>
    </INFO>
    <LIEN>
       <LIBELLE></
LIBELLE>
       <URL></URL>
       <ALT></ALT>
    </LIEN>
   
<DECONNEXION></DECONNEXION>
</ENTETE>


L'élément racine de la configuration XML du menu doit obligatoirement être matérialisé par la balise <MENU>.

L'élément <VERSION> contient la version du menu. Cette valeur est utilisée pour gérer la cohérence avec les informations du menu sauvegardées dans le cookie utilisateur. Il est impératif d'incrémenter cette valeur lors de tout chagement dans la configuration du menu, pour se prémunir contre tout risque d'incohérence lors de la restauration du cookie utilisateur.

L'élément <PIED_DE_PAGE> contient la configuration du pied de page du menu.

Les items de niveau 1 sont matérialisés par des éléments <ITEM1>, directement rattachés à l'élément racine. L'élément <URL> contient l'URL associée à l'item du menu, <LIBELLE> le libellé à afficher dans le menu, <LIBELLE_LONG> le libellé long à afficher dans la barre de navigation de l'entête. L'élément facultatif <OUVERTURE> est exploité uniquement pour un menu gestion de type 2 (ouverture et fermeture manuelle des items de niveau 1). Si le texte au sein au sein de cet élément vaut "oui", les sous-items de niveau 2 rattachés à cet item sont visibles à l'initialisation. Si ce texte vaut "non" ou bien si l'élément <OUVERTURE> n'est pas présent, ces sous-items ne sont pas visibles à l'initialisation. L'élément <ID> doit identifier de façon unique l'item parmi tous les autres items (tous niveaux confondus).

Les éléments <ITEM2>, rattachés à un élément <ITEM1> représentent ses sous-items. Leur structuration est identique à celle des items 1 aux diffrérences près suivantes:
·  l'élément <OUVERTURE> ne leur est pas applicable
·  ils contiennent des sous-items <ITEM3> ou bien des actions <ACTION>

Les éléments <ACTION> et/ou <ITEM3> sont rattachés à un élément <ITEM2>. Lorsque le contenu des sous-élements d'un item de niveau 2 est mixte, c'est à dire qu'il est composé d'actions et d'items de niveau 3, les éléments <ACTION> doivent impérativement être déclarés avant les éléments <ITEM3>.

La structuration des éléments <ITEM3> est identique à celle des <ITEM2>, sauf qu'il n'est pas possible de déclarer des sous-items pour un élément <ITEM3>.

Un élément <ACTION> matérialise une action de type "icône" pour un menu gestion.
L'élément racine de la configuration XML de l'élément doit obligatoirement être matérialisé par la balise <ENTETE>.

L'élément <TITLE> contient le titre de l'application à afficher dans l'entête.

L'élément <INFO> contient les informations utilisateur à afficher en bas à droite de l'entête. Il doit inclure des éléments <NORMAL> (pour une police d'affichage "normal") et/ou des éléments  <GRAS> (pour une police d'affichage "gras"). Les différentes valeurs des éléments <NORMAL> et <GRAS> sont concaténées dans le même champ information de l'entête.

Les éléments <LIEN> matérialise les différents liens à afficher dans l'entête.
Voir Exemple de structure XML de configuration pour ce composant  : Exemples de structure XML. Voir Exemple de structure XML de configuration d'entête  : Exemples de structure XML.
RENDU IHM

Menu documentaire
Menu de type Gestion
exComposantMenuDocumentaire
exComposantMenuGestion
RENDU IHM

exComposantEntete



Date: 25/10/2005

Version: 1.1

Auteur: Ministère des Affaires Etrangères, Aubay SA, Steve Péguet


Sommaire des Classes
ObjectItem La classe «ObjectItem» est la classe contenant les informations propres à un item du menu.
ObjectAction La classe «ObjectAction» est la classe permettant de décrire les actions de type «icône» d'un menu gestion.
ComposantMenu La classe «ComposantMenu» est la classe permettant de gérer le composant Menu.
ComposantEntete La classe «ComposantEntete» est la classe permettant de gérer le composant Entete.
ObjectLien La classe «ObjectLien» est la classe permettant de décrire les liens à afficher dans l'entête.

Sommaire des Fonctions Globales
static private  void ComposantEntete_constructor()
           La méthode privée «constructor()» initialise les éléments suivants:

·  le statut menu affiché/désaffiché à "affiché"
·  le cookie de sauvegarde du statut menu affiché/désaffiché
·  les informations de configuration obtenues par appel à "initByXML"
static void ComposantMenu_constructor()
           La méthode publique «constructor()» réalise les actions d'initialisation de la configuration du menu.
static void preload()
           La fonction globale «preload()» fait appel à preloadImages qui précharge les images pour les monter en mémoire (cache du navigateur) avant toute gestion d'affichage/désaffichage.

Framework JavaScript ACube V2.10.0
 


Version 2.10.0, / Etat : Validé
Cette création est mise à disposition selon le Contrat Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford,California 94305, USA.


Documentation generated by JSDoc on Wed Jan 6 17:05:02 2010