Onglets

Général

Le contrôle d'onglets vous permet de diviser les informations de votre application par onglets. Le comportement du contrôle d'onglet diffère selon le mode sélectionné : Statique ou Dynamique.

Onglets statiques

Lorsque vous ajoutez la commande Onglet (Tab), trois onglets s'affichent par défaut (Tab 1,Tab 2,Tab 3). Le développement de chaque onglet dans la commande affiche les propriétés suivantes :

• Nom de l’onglet : le nom complet de l’onglet.
• Page : la page d’applications à importer dans cet onglet.
• Masqué (Hidden) : si la valeur est true, masque la commande au moment du runtime.
• Désactivé (Disabled) : si la valeur est true, désactive la commande au moment du runtime.

Les propriétés suivantes s'appliquent à l'ensemble de la commande Onglet (Tab).

• Ajouter un nouvel onglet :ajoutez un nouvel onglet à vos données en cliquant sur l'icône plus « + ».
• Index des onglets actifs : accédez à un onglet spécifique à l'aide de cette propriété. L'index commence à 0. Par exemple, si vous avez quatre onglets consécutifs nommés « Tab1 », « Tab2 », « Tab3 » et « Tab4 », alors « Tab1 » a l'index 0, « Tab2 » a l'index 1, « Tab3 » a l'index 2, et « Tab4 » a l'index 3.
• Masqué : si la valeur est true, masque la commande au moment du runtime.
• Désactivé : si la valeur est true, désactive la commande au moment du runtime.

Onglets dynamiques

Les onglets dynamiques sont générés lors du runtime à partir d'une source de données de liste. Pour utiliser cette fonctionnalité, sélectionnez le mode Dynamique pour vos onglets. Cette option est utile lorsque le nombre d'onglets dont vous avez besoin varie et dépend des éléments d'une liste.

Vous pouvez configurer les propriétés suivantes :

• Source de la liste : source des éléments à afficher sous forme d’onglets. Les types de données valides incluent les tableaux de chaînes, un entier ou date/heure, une table de données ou une table d'un objet.
• Colonne : lorsque la source de la liste est de type TableDonnées ou une table d’un objet, sélectionnez la colonne spécifique (pour les types de données TableDonnées) ou la propriété spécifique (pour les tableaux d’objets).
• Source de la page : la page de l’application à utiliser dans tous les onglets dynamiques.
• Index des onglets actifs : accédez à un onglet spécifique à l'aide de cette propriété. L'index commence à 0. Par exemple, si vous avez quatre onglets consécutifs nommés « Tab1 », « Tab2 », « Tab3 » et « Tab4 », alors « Tab1 » a l'index 0, « Tab2 » a l'index 1, « Tab3 » a l'index 2, et « Tab4 » a l'index 3.

Par exemple, vous pouvez utiliser des onglets dynamiques avec des entités Data Service, comme suit :

• La propriété Source de la liste des onglets dynamiques est une entité dans Data Service, par exemple, « Service » :

  Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

• La propriété Colonne des onglets dynamiques est un champ de l'entité Data Service sélectionnée, par exemple « Nom ».
  Remarque : Au moment du runtime, vous voyez autant d'onglets que le nombre d'enregistrements dans le champ d'entité sélectionné. Le contrôle se limite à l'affichage de 50 enregistrements de votre entité. Si vous avez plus de 50 enregistrements, les 50 premiers enregistrements s'affichent.
• Pour Source de la page, vous pouvez configurer une page pour afficher une table qui sera mise à jour en fonction de l'onglet sélectionné.

Au moment de l'exécution, les onglets que vous voyez sont les enregistrements dans le champ Nom de l'entité Service. Le fait de changer d’onglet permet de mettre à jour le contenu de la table.

Events

• Valeur modifiée : configurez ce qui se passe lorsque la valeur est modifiée.

Style

• Alignement de commande : par défaut, cette option est définie sur Étirer (Stretch. Un autre alignement peut être défini.

  Remarque : l'alignement dépend de la mise en page sélectionnée pour le parent (Vertical vs Horizontal).
• Style— Le style des onglets actifs et inactifs :
  • Par défaut :les onglets sont dotés d'un style d'onglets de navigateur classiques.
  • Pellules : les onglets sont arrondis aux deux extrémités, ressemblant à une forme de bulles.
  • Couleur des onglets : la couleur du texte pour les onglets inactifs.
  • Couleur de l’onglet actif : la couleur du texte des onglets actifs.
  • Arrière-plan de l'onglet : la couleur d'arrière-plan pour les onglets de point de processus inactifs.
  • Arrière-plan de l'onglet actif : la couleur d'arrière-plan des onglets de définir actifs.
  • Grands onglets : si cette option est sélectionnée, les onglets sont agrandis.

• Bordure : la bordure de la commande. Vous pouvez configurer l' épaisseur, la couleur et le rayon.

• Police : les attributs de police du texte de l'onglet, tels que la famille de polices, la taille ou la couleur. Par défaut, la commande hérite de la famille de polices de son conteneur parent immédiat, qui est indiqué par le mot-clé « Inherited ».

• Marge : la marge de la commande. Par défaut, une marque de 4px est définie. Les propriétés des marges Haut/Bas et Gauche/Droite sont combinées. Pour définir différentes valeurs distinctes pour les marges Haut, Bas, Gauche et Droite , sélectionnez le bouton Lier situé sur le côté droit de la section Marge .

• Taille : la largeur et la hauteur de la commande. Par défaut, la taille est définie sur auto. Pour définir des valeurs minimales ou maximales, sélectionnez les trois points assistés. Si la taille du champ est inférieure à celle des options, une barre de défilement s'affiche.

Raccourcis clavier

Pour une meilleure accessibilité, vous pouvez utiliser les raccourcis clavier suivants dans la liste des onglets de l'onglet Général (General) du panneau de configuration :

• Touches fléchées haut et bas pour modifier l'onglet sélectionné.
• Alt+ Flèchehaut pour déplacer l'onglet sélectionné vers le haut.
• Alt+ Flèchevers le bas pour déplacer l'onglet sélectionné vers le bas.

Exemple : navigation vers l'onglet suivant

Cet exemple montre comment naviguer vers l'onglet suivant d'une commande Onglets (Tabs).

1. Dans votre application, ajoutez une commande Onglets et rendez-la Statique. Cela a automatiquement créé 3 onglets : « Tab 1 », « Tab 2 » et « Tab 3 ».
2. Ajoutez deux nouvelles pages et une commande Bouton (Button) sur chacune. Nommez les boutons « Tab 1 -> Suivant » et « Tab 2 -> Suivant » respectivement.
3. Pour « Tab 1 » dans le champ Source de la page (Page source), référencez la page précédemment ajoutée avec le bouton « Tab 1 -> Suivant ».
4. Pour « Tab 2 », dans le champ Source de la page (Page source), référencez la page précédemment ajoutée avec le bouton « Tab 2 -> Suivant ». Votre application doit ressembler à l'image suivante :
   
5. Créez une règle pour chaque commande Bouton (Button). La règle indique à l'application de naviguer vers l'onglet suivant lorsque vous cliquez sur le bouton.
6. Créez une variable d'application de type Int32 et nommez-la « var_tab_index ».
7. Sélectionnez la commande Onglets (Tabs) et attribuez la variable var_tab_index au champ Index de l'onglet actif (Active tab index).
   
8. Sélectionnez la page principale qui contient la commande Onglets (Tabs), accédez à l'onglet Événements (Events) et créez une règle pour l'événement Chargé (Loaded).
   1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
      • Élément à définir (Item To Set) : var_tab_index
      • Valeur (Value) : 0, qui est l'index Tab 1.
9. Sélectionnez la page qui contient la commande Bouton (Button) nommée « Tab 1 -> Suivant », accédez à l'onglet Événements (Events) et créez une règle pour l'événement Cliqué (Clicked on).
   1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
      • Élément à définir (Item To Set) : var_tab_index
      • Valeur (Value) : 1, qui est l'index Tab 2.
10. Sélectionnez la page qui contient la commande Bouton (Button) nommée « Tab 2 -> Suivant », accédez à l'onglet Événements (Events) et créez une règle pour l'événement Cliqué (Clicked on).
    1. Ajoutez la règle Définir la valeur (Set Value) et configurez-la comme suit :
       • Élément à définir (Item To Set) : var_tab_index
       • Valeur (Value) : 2, qui est l'index Tab 3.

Lorsque vous prévisualisez votre application, cliquez sur le bouton dans « Tab 1 » pour accéder à « Tab 2 », et ainsi de suite.

Propriétés VB

Propriété VB	Type de données	Description
ActiveTabIndex	Entier	Index de l'onglet actuellement actif.
ActiveTabName	Chaîne de caractères (string)	Nom de l'onglet actuellement actif.
Hidden	Booléen	Si la valeur est true, masque la commande au moment du runtime.
Disabled	Booléen	Si la valeur est true, désactive la commande au moment du runtime.