FR 2. Breadcrumbs

Composition d'un Breadcrumb

Fondamentalement, le Breadcrumb généré par AJUI_BreadCrumb est une variable objet de formulaire de type image que vous pouvez créer vous-même dans le contexte d'un formulaire.

Néanmoins, nous vous mettons à dispositions un modèle prédéfini de cette variable objet de formulaire contenant toutes les propriétés appropriées pour la création d’un BreadCrumb. Celle-ci est fournie dans un fichier de librairie d’objet « BreadCrumb.4dlibrary ».

Structure et modèle de Breadcrumb

Un Breadcrumb généré par le composant est composé d’un "conteneur" qui peut être dimensionné manuellement ou dynamiquement. Le conteneur va contenir des sections. Vous pouvez définir le nombre de sections que vous souhaitez.

Une section est associée à un "modèle" et elle peut contenir des éléments textuels, une image et un callback. Elle possède également un identifiant (id) la rendant unique et permettant de l’identifier lors de l’interaction avec le Breadcrumb.

AJUI_Breadcrumb offre deux principaux modèles de Breadcrumb.

• Le modèle simple
• Le modèle arrow
• Le modèle groupedButtons

Le modèle simple est un enchaînement de sections, dans un seul conteneur, séparées par un divider (séparateur) de type texte, c'est-à-dire une chaîne de caractère quelconque (par exemple : ">", "/", "|", etc.)

Le modèle arrow est différent. Chaque section possède son conteneur dont les extrémités avant et arrière peuvent être représentées par une forme de flèche ou un trait vertical. Un divider (séparateur) permet de définir la taille du trait de chaque flèche.

 

Le modèle groupedButtons est un peu particulier parce que ce n’est pas exactement un nouveau modèle. Il se base sur le modèle arrow en utilisant des propriétés prédéfinies afin de garder un design propre à ce modèle. Lors de l’utilisation de ce modèle, les sections peuvent être soit type « standard », soit de type « current ». Le type « current » désigne la section sélectionnée et il n’y en peut y avoir qu’une seule à la fois. En clair, le modèle fonctionne comme des boutons radios.

⚠️ Petite précision sur les identifiants (id) de sections. Dans le cadre du modèle simple, l'id permet l’interaction de la souris avec le texte et l’image de la section. Concernant le modèle arrow et groupedButtons, l'id s’applique sur toute la zone graphique du conteneur de la section.  

Section - types et états

Il existe cinq types de section :

• Standard
• First
• Current
• Previous
• Next

A chaque type de section sont associés quatre états :

• default
  • C’est l’état d’une section lorsqu’un utilisateur n’interagit pas avec elle et que celle-ci n’est pas désactivée.
• hover
  • Cet état intervient lorsque l’événement « On Mouse Enter » ou « On Mouse Move » (id de section trouvé) se déclenche. Concrètement, cela correspond au survol de la section avec la souris. Il se termine sur l’événement « On Mouse Leave » ou sur « On Mouse Move » (id de section différent ou nul).
• active
  • Cet état intervient sur l’évènement « On Clicked » et se termine sur l’événement « On Mouse Up. À noter qu’il a la priorité sur l’état « hover ». Concrètement, l’utilisateur clique sur une section et l’état perdure jusqu’au relâchement de celui-ci.
• disable
  • C'est l'état que prend une section si sa propriété « disable » est à vrai. Lorsque la section est « disable », seul cet état est pris en compte à l'exclusion de tous les autres (hover et active).

Une section peut prendre une apparence et afficher un contenu différent en fonction de son type et de son état.

Les états différents de l'état « default », héritent de l'ensemble des propriétés de celui-ci. Chaque propriété peut se voir affecter des exceptions.

Les événements et callbacks

Le Breadcrumb nécessite que plusieurs événements soient activés sur l’objet de formulaire image afin de pouvoir gérer les différents états. Voici la liste de ceux-ci :

• On Load
• On Clicked
• On Double Clicked (optionnel)
• On Mouse Enter
• On Mouse Leave
• On Mouse Up
• On Mouse Move

Pour les deux événements (On Clicked, On Double Clicked) il est possible de leur associer des callbacks à l’aide des fonctions membres.

⚠️ Toutes méthodes utilisées comme callback doivent être partagées (propriétés de la méthode) avec le composant pour que celui-ci puisse l'appeler. Pour éviter qu’une erreur se produise pour ce genre de cas, le composant vérifiera si la méthode est bien partagée et si ce n’est pas le cas, il la partagera de lui-même lors de l’exécution d’un callback. De plus, le composant proposera de créer la méthode de callback si elle n’existe pas lors de l’utilisation des Setters pour les callbacks et également avant l’exécution d’un callback.

Gestion des exceptions et des constantes

Le composant utilise un système d’exception afin de distinguer quelle valeur des propriétés liées aux états il doit utiliser lors de la génération du Breadcrumb.

Il faut savoir que lors de la création d’une instance, le composant affecte des valeurs par défaut aux propriétés de type « standard » et pour l'état « default ». Donc, quand vous allez utiliser des fonctions membres liées aux états (voir le sous-chapitre 3.9 : Section type), vous devrez passer en premier paramètre, une constante qui désignera le type et l'état pour lequel vous voulez recevoir ou passer une valeur (Getter/Setter).

Exemple :

  //setter
$bc.SectionBGColor(AJUI_bc_standard_default;$color)

  //Getter
$colorSection:=$bc.SectionBGColor(AJUI_bc_standard_default)

Comment le composant gère les exceptions :

Pour expliquer cela, nous allons prendre un exemple concret. J’ai une section de type « first » et l'on veut définir son état « hover ».

Le composant va donc d'abord vérifier s’il existe des exceptions au niveau de l’objet « monInstance.breadCrumb.sectionTypes.first.hover ». S'il en trouve, il utilise ces valeurs. S'il ne trouve pas d'exceptions pour l’ensemble ou pour une partie des propriétés, il va contrôler les exceptions pour « monInstance.breadCrumb.sectionTypes.first.default ». Après cela, il vérifiera « monInstance.breadCrumb.sectionTypes.standard.hover » et pour finir « monInstance.breadCrumb.sectionTypes.standard.default » s’il reste des propriétés à définir.

Il n’ira pas plus loin, car les valeurs de « standard-default » ne sont pas des exceptions, mais les valeurs de bases.

List des constantes :

• AJUI_bc_standard_default
• AJUI_bc_standard_hover
• AJUI_bc_standard_active
• AJUI_bc_standard_disable

• AJUI_bc_first_default
• AJUI_bc_first_hover
• AJUI_bc_first_active
• AJUI_bc_first_disable

• AJUI_bc_current_default
• AJUI_bc_current_hover
• AJUI_bc_current_active
• AJUI_bc_current_disable

• AJUI_bc_previous_default
• AJUI_bc_previous_hover
• AJUI_bc_previous_active
• AJUI_bc_previous_disable