OOUI/Using OOUI in MediaWiki/fr

 est inclus dans le noyau de MediaWiki, disponible pour être utilisé à la fois par le code PHP et par JavaScript.

PHP


Avant de commencer
To use OOUI elements, the OOUI PHP library has to be loaded and the necessary styles have to be set up per the correct skin (boring details).

The most convenient way to do this is:



Pages spéciales etc.
Whenever you have access to an OutputPage instance, call its  method. It is usually available as  in most contexts, such as on special pages, or as   in hook signatures.

Example:

Another example, useful when you have no easy access to an OutputPage instance:

Note that the method  (implemented by class  ) ensures that the proper theme and directionality is configured, and that the page loads the OOUI styles. The OOUI widgets are namespaced, so they must be prefixed with  or imported. Stringifying the widgets converts them to HTML, so you can add widgets to the page using. Also note that in some cases, just enabling OOUI is not enough. For example, if you need a certain icon added, you need to explicitly add the related icon pack. For example:



Fonctions et balises d'analyseur, modèles de contenu
If you have access to a ParserOutput instance (usually as  or  ), call its   method, and also.

Example:

Dans les autres cas
See OOUI/PHP examples. (Instead of tags use the ResourceLoader style modules described below.)



Utiliser les widgets OOUI
Construct a widget:

Its properties can be changed using getter/setter methods:

When you're done creating the widget, you can treat it like a string to display it. (You can explicitly convert to string by calling the  method.)



Liste des éléments disponibles
See also:


 * Automatically updated list: https://doc.wikimedia.org/oojs-ui/master/php/annotated.html
 * Live demo with examples (demo page in master branch)

As of OOUI v0.34.0, released 2019-09-04, these elements available in PHP (or in JS via, see below) are:

Widgets:


 * ButtonWidget
 * ButtonInputWidget
 * ButtonGroupWidget
 * CheckboxInputWidget
 * CheckboxMultiselectInputWidget
 * RadioInputWidget
 * RadioSelectInputWidget
 * TextInputWidget
 * MultilineTextInputWidget
 * NumberInputWidget
 * SearchInputWidget
 * DropdownInputWidget
 * ComboBoxInputWidget
 * LabelWidget
 * IconWidget
 * IndicatorWidget
 * ProgressBarWidget
 * SelectFileInputWidget
 * SelectWidget
 * TabSelectWidget
 * TabOptionWidget

Layouts:


 * ActionFieldLayout
 * FieldLayout
 * FieldsetLayout
 * FormLayout
 * HorizontalLayout
 * IndexLayout
 * MenuLayout
 * PanelLayout
 * TabPanelLayout
 * StackLayout

Exemple
Large structures can be created and displayed in a single call:

, FormSpecialPage
HTMLForm has OOUI support. You can use the  display format for HTMLForm forms to render them using OOUI. This is usually more convenient, as HTMLForm provides functionality for validation and handling form submission. See HTMLForm.

On FormSpecialPage, use the  method:

Examples:


 * https://phabricator.wikimedia.org/diffusion/MW/browse/master/includes/specials/SpecialMIMESearch.php (Special:MIMESearch)
 * https://phabricator.wikimedia.org/diffusion/MW/browse/master/includes/specials/SpecialResetTokens.php (Special:ResetTokens)

Widgets used in the form will be automatically infused (see below) if the JS widget offers additional capabilities over the PHP one.

JavaScript


Utilisation des widgets OOUI
Depending on which of the features you're going to use, you should list one or more of the following modules as dependencies of your modules that use OOUI:


 * : OOUI's core JavaScript library. Contains the basic widgets and layouts that are also available in PHP (see exact list above) and the ability to infuse them.
 * : Additional widgets and layouts.
 * : Toolbar and tools.
 * : Windows and dialogs.
 * : Specific icon styles depending on what icons you may want to use, e.g.  for check icon. Group names can be found in demo page or in code.

Par exemple (extension.json) :

Le code des modules qui dépendent de OOUI peut utiliser les éléments tels que ceux décrits dans cette documentation OOUI. Commencez la lecture ici.

Infusion
Afin de fournir un accroissement progressif et pour éviter la duplication du code entre PHP et JavaScript, les widgets OOUI PHP présents sur une page peuvent être infusés à l'intérieur des widgets OOUI.

En supposant qu'un widget PHP a été déclaré infusable à sa création :

Il peut être infusé à partir du code JavaScript :

Le widget peut maintenant être modifié à partir du code JavaScript :

Gadgets
OOUI peut être utilisé dans les gadgets du wiki et dans les scripts des utilisateurs. Comme ci-dessus, il suffit de s'assurer que le module  (ou un module différent) est chargé, avant d'exécuter votre code.

Pour les gadgets, vous devez ajouter une entrée dans le champ  de la description du gadget. Voir la Documentation du gadget pour les instructions et les exemples.

Pour les scripts utilisateur, entourez votre code dans un appel à, comme c'est toujours le cas lorsque vous chargez des modules. Pour les instructions, voir la documentation du ResourceLoader. Exemple :



Widgets OOUI spécifiques à MediaWiki
Plusieurs widgets OOUI spécifiques à MediaWiki sont disponibles dans les espaces de noms  (pour JavaScript) et   (pour PHP); ils implémentent les éléments communs d'interface de MediaWiki.


 * Manual:TitleInputWidget
 * Manual:UserInputWidget
 * Manual:SearchInputWidget
 * Manual:NamespaceInputWidget
 * Manual:DateInputWidget (example: 226647)
 * Manual:DateTimeInputWidget
 * Manual:CategorySelector



Utiliser les thèmes
OOUI est livré avec deux thèmes, et chaque widget que vous créez va utiliser le thème défini par l'habillage actuel en utilisant  de extension.json. Les thèmes personnalisés peuvent être également fournis par l'habillage. Pour les détails, voir les Thèmes OOUI.