OOUI/Eléments/Groupes

OOUI
Introduction
A propos de la bibliothèque OOjs entrée en matière
Pour commencer
Créer les interfaces par programme Exemples PHP Utiliser OOUI dans MediaWiki
Travailler avec les widgets
Eléments Eléments groupés Eléments marqués Recherche d'éléments Eléments déplaçables Widgets Icônes, indicateurs et étiquettes Boutons et bascules Sélecteurs et options Entrées Fenêtres spontanées Barres de progression Affichages Champs et groupes de champs Formulaires Piles et panneaux Menus Livrets et pages Index et éléments d'onglet Fenêtres Messages simples Dialogues Gérer les dialogues Messages de dialogue Gestionnaires de fenêtres Barres d'outils Thèmes Autres concepts
Voir aussi
Corriger les scripts et les gadgets

Tout widget OOUI contenant d'autres widgets (tels que les boutons, les options, les champs de saisie, les outils, etc.) mixe dans GroupElement. Ajouter, supprimer, et réiniitaliser des éléments se fait via ce que l'interface GroupElement propose.

SelectWidgets contient des options exclusives; il présente des exemples communs d'une classe qui réalise des mixages dans GroupElement. ButtonGroupWidgets est utilisé lorsque les boutons sont groupés logiquement et qu'ils ne sont pas mutuellement exclusifs; c'est un autre exemple. StackLayouts est aussi un autre exemple.

Tous les éléments d'un groupe sont adressés à l'aide d'une référence unique. Si un élément est ajouté dans un groupe où il y a déjà un élément qui porte la même référence, ce dernier sera retiré et le nouvel élément sera ajouté à la fin du tableau des éléments.

L'exemple suivant montre un ButtonGroupWidget contenant deux boutons. Notez que les boutons sont créés mais ne sont pas ajoutés au DOM. Par contre ils sont ajoutés dans le groupe de boutons en utilisant l'option de configuration items du widget. La liste complète des méthodes prises en charge ainsi que les options de configuration, sont décrites dans la documentation du code de OO.ui.ButtonGroupWidget.

// exemple: un ButtonGroupWidget qui mixe dans GroupElement. Les autres classes
// qui mixent dans GroupElement incluent SelectWidgets et StackLayouts.

// créer les boutons; notez qu'ils seront ajoutés au DOM ultérieurement.
// lorsque le groupe sera ajouté.
var button1 = new OO.ui.PopupButtonWidget( {
  label: 'Select a category',
  icon: 'menu',
  popup: {
    $content: $( '<p>List of categories...</p>' ),
    padded: true,
    align: 'left'
  }
} );
var button2 = new OO.ui.ButtonWidget( {
  label: 'Add item'
})

// créer un nouveau groupe de boutons et lui ajouter les boutons via
// l'option de configuration 'items' de ButtonGroupWidget.
var buttonGroup = new OO.ui.ButtonGroupWidget( {
  items: [ button1, button2 ]
} );

// ajouter le groupe de boutons au DOM.
$( 'body' ).append( buttonGroup.$element );

La classe mixin GroupElement contient plusieurs méthodes pouvant être utilisées pour ajouter, supprimer, ou effacer les widgets d'un groupe. Pour avoir la liste complète des méthodes reconnues, voir la OO.ui.mixin.GroupElement pour GroupElement.

Agréger des événements

Vous pouvez invoquer la méthode aggregate de GroupElement pour lui demander de capter l'événement que vous spécifiez en écoutant sur tous les éléments qu'il contient, et d'émettre un nouvel événement emit en réponse. Par exemple le ToolGroup utilise cela pour se désactiver lorsque tous les éléments qu'il contient sont désactivés. D'une manière similaire, un élément de groupe que vous pouvez faire glisser écoute les déplacements de chacun de ses éléments (dragstart, dragend, drop) et émet un événement de synthèse pour réordonner les fils.