OOUI/OOjs Entrée en matière

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.