OOUI/Creating interfaces programmatically/fr

La bibliothèque OOUI contient les blocs de base pour construire une interface utilisateur orientée objet. Elle comprend beaucoup de widgets et d'affichages prêts à l'emploi, ainsi que des éléments de base pouvant être assemblés pour créer quelque chose de votre conception. Des systèmes complexes, tels que les fenêtres et les barres d'outils, sont également fournis et peuvent être étendus et associés pour répondre aux besoins de votre application.

Les interfaces utilisateur sont créés dans OOUI par programmation, ce qui supprime entièrement le balisage HTML. Cette technique permet au balisage d'évoluer, tant que l'API qui génère le balisage reste stable. Le balisage peut changer quand on étend une classe pour qu'elle prenne en compte une nouvelle fonctionnalité, ou quand on corrige un bogue pour augmenter la compatibilité.

Tout ce qui existe dans OOUI et que l'utilisateur peut voir est construit en utilisant des éléments assemblés de manière à former les parties discrètes de l'interface utilisateur, et pouvant fonctionner ensemble. En maximisant la réutilisation des éléments, l'aspect, le comportement et la cohérence de l'API sont plus faciles à maintenir.



Pour commencer
Si vous n'êtes pas encore assez familiarisé avec la manière de créer des interfaces avec OOUI, cette section contient un tutoriel rapide sur la manière de construire un widget en utilisant la bibliothèque.

Créer un widget se fait en deux étapes de base :


 * 1) le widget est créé et configuré
 * 2) le widget est ajouté au DOM

Notez que les objets OOUI doivent être ajoutés au DOM avant d'être visibles par l'utilisateur. Les développeurs qui écrivent du code doivent tenir compte du fait qu'un widget peut ou non être attaché au DOM, et ne sera jamais attaché au DOM lors de l'exécution du constructeur. Même après qu'un élément ait été attaché, il peut ultérieurement être détaché. Vous pouvez vérifier qu'un élément est actuellement attaché en utilisant la méthode.

N'oubliez pas d'inclure les bibliothèques nécessaires jQuery et Special:MyLanguage/OOjs ainsi que les informations de style pertinentes (un des thèmes OOUI, actuellement WikimediaUI par défaut ou Apex comme alternative) et la bibliothèque OOUI elle-même.



Créer et configurer un widget
Chaque widget est créé et configuré avec soit un objet de configuration qui est passé à son constructeur, soit en utilisant les méthodes pour initialiser les configurations (voir l'exemple ci-dessous). Beaucoup des méthodes de la bibliothèque sont chaînables, comme montré dans l'exemple.

Une fois le widget créé, il doit être attaché au DOM pour être visible par l'utilisateur. Utiliser la méthode jQuery  pour insérer le nouveau widget dans le DOM en utilisant sa propriété.

L'exemple suivant montre comment créer et ajouter un simple  qui, lorsqu'il est cliqué, ouvre https://www.mediawiki.org dans une nouvelle fenêtre. est configuré en utilisant un objet config. est configuré en utilisant les méthodes du widget :



Notez que certaines méthodes get comme  ou , ne doivent pas être chaînées. Ces méthodes peuvent renvoyer ‘null’, et le fait d'appeler une autre méthode avec ‘null’ provoque une erreur.



Connecter un gestionnaire d'événements à un widget
Widgets emit events when they are interacted with or changed in an interesting way. These events can be listened to by connecting event handlers to the widget. The below example uses an event handler to display an alert when the button is clicked. When the button is clicked, its label will be reset to read ‘Do not click me!’ via the button’s setLabel method.

Event handling is provided by the EventEmitter class, which is “mixed in” to all widgets. For more information about EventEmitter, please see OOjs primer.



Comprendre les mixins
The concept of mixins is fundamental to the library, and many of the library’s elements can be customized via mixin functionality. For example, one can easily add an icon to a button widget by taking advantage of the fact that the  class is mixed in to the   class.



Mixin classes can be used to create and add new elements to a widget (such as the icon in the above example) or to add new behaviors (such as new methods for handling styling flags or titles).

There are three kinds of element mixins, each identified with a naming convention:

Behavior mixins are identified with an ”able" suffix (e.g.,, etc.) Note that though a mixin class can create and initialize an object, it will not append it to the DOM. This must be done manually if you wish to manipulate the object directly.
 * Content &mdash; Content mixins generate elements by default (e.g., groups, icons, indicators and labels). The names of content mixins have no suffix (e.g.,,  , etc.)
 * Attribute &mdash; Attribute mixins operate on  by default (e.g., flags and titles). The names of attribute mixins have an "ed" suffix (e.g., ,  , etc.)
 * Behavior &mdash; Behavior mixins operate on  by default (e.g., clippable).

It is not uncommon to see widgets composed of multiple mixins: for example, the  class utilizes   and   mixins (and a few others). One can easily see which classes have been mixed and are available in the code-level documentation for each class. Mixin classes will always be displayed in the upper right of the documentation screen for each class. In addition, each configuration option notes the name of the class that defines it.