Composeur de menu Atomic

 

Le composeur de menu Atomic permet une gestion simple et efficace des menus du portail Web. Il est accessible depuis le bouton "Menu WEB" (via le dialogue d'accès aux ressources web) dans le premier onglet du composeur de menu et de contenu.

 

Composition du contenu des différentes zones

 

 1  Zones de blocs

 

 2  Zones de menus

 

 3  Ajout / Suppression

 

 4  Hiérarchisation

 

 5  Choix des options

 

 6  Conditions

 

Le contenu se distingue en deux catégories : les zones recevant des blocs (ou ressources AWEB_) et les zones de menus hiérarchiques.

 

Les zones de blocs

 

 1  Sept zones repérées par les lettres A, B, C, D, E, F et H.

 

Ces zones sont insérées et interprétées dans les pages lors de leur construction. Elles peuvent recevoir tout ce qu'une page peut contenir : un bloc, une séquence html avec ou non exécution de formules avant envoi.

 

Insersion d'un bloc dans une zone

 

 

En cliquant sur la puce rouge située à droite de "Insérer", sont présentés les blocs (AWEB_Generic...) ainsi que les différentes recherches multi-critères possibles.

 

 

Ces zones sont insérées dans la page à l'aide de la formule suivente : !4D=exec;u_menuWEB("A")! (cf la ressource web : AWEB_kent_TopGeneric).

 

 

Zones A, B, E et F : dans la mesure où elles doivent s'inscrire dans une colonne limitée en largeur, on veillera à ce qu'aucun élément placé ne soit plus large.

 

 

Les zones de menus

 

 2  Trois zones de menu, dont deux hiérarchiques.

 

Les zones de menu peuvent être hiérarchisées. Ceci permet, dans un espace restreint, de proposer un nombre très élevé d'options.

 

 

Pour des raisons d'ergonomie, la hiérarchie est limitée à 5 niveaux. Si un menu est mis en place avec plus de 5 niveaux, les niveaux inférieurs seront remonté au 5ème niveau.

 

 

Le menu de droite ne peut être hiérarchisé et sera donc reservé à une liste "à plat" d'options.

 

 

NB : dans la mesure où les options de ces menus sont transmises par l'intermédiaire d'un fichier .js qui reste ensuite en cache du navigateur et que ces options dépendent du contexte utilisateur et de la langue choisie par l'internaute, ce fichier est appelé dans la page avec l'inclusion d'une clé afin qu'il soit recalculé dès qu'un des éléments du contexte de l'utlisateur change.

 

 

Le contenu possible des menus est proposé par le pop-up menu situé à droite de l'intitulé "Lien".

 

Supermenus

 

La zone de menu centrale est transformée en "Supermenus". Ces supermenus sont en fait des blocs de code HTML qui permettent des menus à la fois plus élégants et plus variés, puisque l'on peut y utiliser la pleine puissance du HTML5.

 

Exemple d'un supermenu personnalisé

 

Il est également possible de générer automatiquement ces supermenus avec un format hiérarchique, sans devoir créer des ressources ni toucher au code HTML. Il suffit de créer le menu hiérarchique et Kentika se chargera de le transformer en supermenu.

 

 

 

Exemple de supermenu généré automatiquement (haut) et la hiérarchie permettant de le créer (bas)

 

 

Pour les supermenus automatiques également, il convient de prendre des précautions . En effet, chaque entrée de niveau 2 créé une colonne dans le supermenu. Il vaut mieux éviter de créer ainsi plus de 5 colonnes, et cela peut donc demander de repenser la hiérarchisation du menu.

 

 

Ajout suppression d'éléments

 

 3  Boutons d'ajout et suppressions

 

La hiérarchie des éléments doit être contrôlée avant enregistrement. L'application n'interdit pas de supprimer un élément ayant des niveaux inférieurs et ne supprime pas ces niveaux lors de l'effacement d'une ligne. L'enregistrement du menu étant effectué en global à la fin, en cas d'erreur de manipulation il suffit d'annuler  globalement les manipulation à l'aide du bouton .

 

Organiser la hiérarchie

 

 4  Déplacer vers le haut ou vers le bas, indenter ou désindenter

 

Les boutons permettent d'organiser la hiérarchie des options dans les menus haut et gauche. Le fait de déplacer ou d'indenter un niveau provoque le déplacement et l'indentation des niveaux situés sous celui de l'option sélectionnée.

 

 

Vous pouvez, avec ces options, organiser mais aussi désorganiser vos menus si vous n'y prenez pas garde. Aussi, il est conseillé de demander à "appliquer" les modifications à chaque fois que vos modifications vous semblent pertinentes afin de pouvoir, si besoin est, refermer le dialogue et le réouvrir et ainsi de le retrouver dans l'état dans lequel il se trouvait lors du dernier enregistrement.

 

 

Choix des options

 

 5  Les options des menus sont définies par : un intitulé, une balise de style et un lien.

 

Cette option est proposée car la mention "OptionMenu" figure dans le commentaire de la ressource web. L'autorisation est affectée par défaut (0805 = WEB-Token : Emprunt) et le titre affecté à la variable ATitre proposé comme intitulé. L'appel à la fonction xchaine fait que la traduction dans la langue de l'internaute sera automatiquement prise en charge.

 

 

 

Une balise de style peut être indiquée si vous souhaitez qu'un des options du menu soit présentée de manière différente.

 

 

Exemple : <font color="blue">

 

 

Il est également possible d'insérer une balise html dans l'intitulé, mais dans ce cas, ce dernier ne peut bénéficier de l'affichage dans la langue de l'internaute.

 

 

Exemple : Mes requêtes <font color=red>KV</font>

 

 

Affichage des menus avec balises de titre

 

Menu hiérarchique avec icône : à la place de l'intitulé, il est possible d'insérer l'appel à une image.

 

Insertion d'une icône Kentika dans le menu

 

 

Permettra de faire afficher une option de menu sous forme d'image :

 

 

 

Note : Atomic n'inclut plus d'icônes images par défaut. Des polices d'icônes sont en revanche inclues, permettant une meilleure harmonisation des icônes. Pour en savoir plus sur ces icônes, voir Icônes Atomic.

Il est cependant toujours possible d'ajouter des images dans la table Icones et d'insérer ces icônes dans les supermenus.

 

 

Insertion d'une icône de la police d'icônes :

 

 

Permettra de faire afficher une option de menu sous la forme d'une icône se fondant dans l'interface Atomic :

 

 

Options prédéfinies : une liste d'options est proposée par défaut et tout lien vers une page html peut être appelé dans un menu.

 

Commentaire sur l'option : si la ressource correspondant à l'option contient un commentaire, ce dernier s'affiche sous le nom de la page html.

 

 

Autres options : tout type de lien peut en fait être utilisé dans un menu.

 

Lien vers le site "www.adbs.fr" et l'ouverture se fera dans une nouvelle page (target=blank)

 

Lier une option à une condition

 

 6  Si une option ne doit être proposée que sous certaines conditions.

 

Cette condition peut être exprimée sous forme d'autorisation ou bien sous forme de formule.

 

Autorisation : l'élément n'est inclu dans la page que si l'internaute dispose de l'autorisation correspondante.

Formule : l'élément n'est inclu que si la formule renvoie une valeur vraie. La zone d'expression de la formule peut contenir un script simple ou complexe faisant appel à de la programmation. Le résultat doit cependant être un booléen exprimé en $0 (variable de résultat).

 

 

 

Dans cet exemple : l'élément ne sera inclu dans la page que si l'internaute s'est préalablement identifié et donc que la variable contenant son identifiant est non vide.

 

 

Pour conditionner la présence d'une option à l'espace dans lequel se trouve l'utilisateur, il suffit de tester le contenu de la variable eContext.

 

 

Exemple : pour qu'une option n'apparaisse que dans l'espace 2, il suffit d'inscrire la formule suivante :

$0:=(AIdent#"") & (eContext=2)

 

Une condition ne peut être contextuelle (exemple : afficher une option si c'est un liste de documents qui est affichée, ne pas l'afficher sinon). Une condition n'est testée que lors du calcul initial du menu et son contenu est ensuite envoyé dans la page menus_dyn.js stockée temporairement dans le cache du navigateur de l'internaute.