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. Convertir le widget en chaîne de caractères le transforme en HTML, de sorte que vous pouvez ajouter les widgets à la page en utilisant. 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 , 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
De longues structures peuvent être créées et affichées à l'aide d'un un unique appel :

, FormSpecialPage
HTMLForm prend en charge OOUI. Vous pouvez utiliser le format d'affichage  des formulaires HTMLForm pour les générer par OOUI. C'est en général plus pratique car HTMLForm fournit la fonctionnalité pour valider et gérer l'envoi du formulaire. Voir les formats d'affichage HTMLForm.

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)

Les widgets utilisés dans le formulaire seront automatiquement infusés (voir ci-dessous) si le widget JavaScript offre des capacités supplémentaires par rapport au PHP.

JavaScript


Utilisation des widgets OOUI
En fonction de la fonctionnalité vous allez utiliser, listez un ou plusieurs des modules suivants présent dans vos dépendances de modules qui utilisent OOUI :


 * &mdash; bibliothèque JavaScript du noyau OOUI. Contient les widgets de base et les affichages qui sont également disponibles en PHP (voir la liste exacte ci-dessus) avec la possibilité de les infuser.
 * &mdash; widgets et affichages supplémentaires.
 * &mdash; barre d'outils et outils.
 * &mdash; fenêtres et dialogues.
 * &mdash; styles spécifiques d'icônes en fonction des icônes que vous souhaiteriez utiliser, par exemple  pour l'icône de vérification. Les noms de groupe peuvent être vus sur la page de démonstration ou dans le 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.