OOUI/Using OOUI in MediaWiki/fr

 est inclus dans le noyau de MediaWiki; il peut être utilisé à la fois par le code PHP et par JavaScript.

PHP


Avant de commencer
Pour utiliser les éléments OOUI, la bibliothèque PHP OOUI doit être chargée et les styles nécessaires doivent avoir été définis par l'habillage adéquat (détails fastidieux).

La manière la plus pratique est de parcourir les éléments suivants.



Pages spéciales etc.
Partout où vous avez accès à une instance de OutputPage, appelez sa méthode. Elle est actuellement accessible via  dans la plupart des contextes, comme sur les pages spéciales, ou comme   dans la signature des accroches.

Exemple :

Autre exemple, utile quand vous n'avez pas d'accès facile à une instance de OutputPage :

Notez que la méthode  (implémentée par la classe  ) assure que le bon thème et la directionalité sont bien configurés, et que la page charge les styles OOUI. Les widgets OOUI sont répartis par espace de noms, ils doivent donc être préfixés avec  ou être importés. Stringifying the widgets converts them to HTML, so you can add widgets to the page using. Notez également que dans certains cas, activer OOUI n'est pas suffisant. Par exemple si vous voulez ajouter une icône spécifique, vous devrez explicitement ajouter le paquet d'icônes associé.

Exemple :



Fonctions et balises d'analyseur, modèles de contenu
Si vous avez accès à une instance de ParserOutput (habituellement comme  ou  ), appelez sa méthode   et également.

Exemple :

Dans les autres cas
Voir Avant de commencer. (au lieu d'utiliser les balises, servez vous des modules de style ResourceLoader décrits ci-dessous).



Utiliser les widgets OOUI
Construire un widget :

Ses propriétés peuvent être modifiées à l'aide de ses méthodes getter et setter :

Une fois la création du widget terminée, vous pouvez l'utiliser comme une chaîne pour l'afficher (vous pouvez faire explicitement la conversion en chaîne en appelant la méthode ).



Liste des éléments disponibles
Voir aussi :

Depuis OOUI v0.34.0 diffusé le 4 septembre 2019, les éléments disponibles dans PHP (ou dans JavaScript via oojs-ui-core, voir ci-dessous) sont :
 * Liste mise à jour automatiquement : https://doc.wikimedia.org/oojs-ui/master/php/annotated.html
 * Démonstration en direct avec des exemples (page de démonstration dans la branche master)

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 prend en charge OOUI. 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#Display formats.

Sur FormSpecialPage, utilisez la méthode  :

Exemples :


 * 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.