OOUI/OOjs Entrée en matière

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

La bibliothèque OOUI est basée sur le modèle d'événements fourni par OOjs . Si vous n'êtes pas un habitué d'OOjs, prenez un instant pour vous familiariser avec son EventEmitter, car c'est un outil pratique et puissant utilisé souvent dans les exemples.

EventEmitter permet aux gestionnaires d'événements de se connecter à un objet, d'être appelés lorsqu'un événement se produit, et de se déconnecter si nécessaire. Les éléments sont liés à leur contexte. Par exemple, quand un bouton poussoir change d'état, l'événement n'est pas simplement 'change' mais 'change' et la valeur actuelle du bouton ('on' ou 'off').

La manière la plus élémentaire de connecter et de déconnecter un gestionnaire d'événements au EventEmitter est d'utiliser les méthodes on() et off(). Dans l'exemple suivant, la méthode on() est utilisée pour connecter un gestionnaire d'événements onChange à un bouton poussoir, qui est défini également dans l'exemple.

// L'exemple suivant utilise la méthode on() pour se connecter à un gestionnaire d'événements 
// afin d'activer un widget de bouton. La méthode off() est utilisée plus tard pour déconnecter
// le gestionnaire d'événements.

// créer un nouveau bouton poussoir
var button = new OO.ui.ToggleButtonWidget( { 
  label: 'I handle events' 
} );
// déclarer le gestionnaire d'événements. Dans cet exemple, ce gestionnaire est une 
// fonction qui affiche 'All done!' sur le bouton quand 
// l'état du bouton est modifié. La méthode off() est utilisée ensuite pour 
// déconnecter le gestionnaire d'événements du bouton poussoir afin que 
// la fonction ne soit plus appelée.
button.onChange = function () {
  button.setLabel( 'All done!' );
  button.off( 'change', button.onChange );
} 
// Utiliser la méthode on() de ButtonWidget pour connecter un gestionnaire d'événements 
// ('button.onChange', défini ci-dessus) pour le bouton pour le 
// type d'événement spécifique ('change'). 
button.on( 'change', button.onChange );
// ajouter le bouton au DOM.
$( 'body' ).append( button.$element );

Les méthodes connect() et disconnect() sont souvent utilisées pour connecter et déconnecter plusieurs gestionnaires d'événements aux objets. L'exemple suivant illustre ces méthodes.

// Cet exemple montre l'utilisation des méthodes connect() et disconnect().
// Ici la fonction 'onChange' modifie le libellé du bouton poussoir
// affiché 'try me!' pour correspondre à l'état du bouton ('on' ou 'off') sera
// exécuté à chaque fois que l'état du bouton poussoir sera modifié. La fonction 'onToggleClick'
// qui écrit 'Click!' à chaque fois que le bouton poussoir est cliqué, est
// aussi connectée au bouton poussoir via la méthode connect(). La
// méthode disconnect(), connectée au bouton 'Disconnect EventHandlers',
// est utilisée pour supprimer les deux gestionnaires d'événements du bouton poussoir.

// créer les boutons et les ajouter dans un groupe de boutons.
var toggle = new OO.ui.ToggleButtonWidget( {
  label: 'try me!'
} );

var button = new OO.ui.ButtonWidget( {
  label: 'Disconnect EventHandlers'
} );

var buttonGroup = new OO.ui.ButtonGroupWidget( {
  items: [ toggle, button ]
} );

// définir les fonctions pour connecter (toggle.onChange, toggle.onToggleClick, et
// button.onClick, dans cet exemple)

toggle.onChange = function () {
  if ( toggle.getValue() === false ) {
    toggle.setLabel( 'off' );
  } else {
    toggle.setLabel( 'on' );
  }
};

toggle.onToggleClick = function () {
  $( 'body' ).append( '<p>Click!</p>' );
};

button.onClick = function () {
  toggle.disconnect( toggle, {
    change: 'onChange',
    click: 'onToggleClick'
  } );
};

// relier les fonctions aux widgets pour les événements spécifiés.

toggle.connect( toggle, {
  change: 'onChange',
  click: 'onToggleClick'
} );

button.connect( button, {
  click: 'onClick'
} );

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

Une convention de OOjs est que toute méthode qui commence par on (comme, onClick() et onKeyPress()) est déclarée private, sauf la méthode on() .

Pour plus de détails concernant EventEmitter, voir OOjs/Events.