OOUI/Using OOUI in MediaWiki/nl

 is onderdeel van de MediaWiki-kern, beschikbaar voor gebruik door zowel PHP- als JavaScript-code.

PHP


Voordat u begint
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 using the following.



Speciale pagina's enz.
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.

Example:



Parserfuncties en tags, inhoudmodellen
If you have access to a ParserOutput instance (usually as  or  ), call its   method, and also.

Example:

Anders
See OOUI/PHP examples#Before you start. (Instead of tags use the ResourceLoader style modules described below.)



OOUI widgets gebruiken
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.)



Lijst met beschikbare elementen
See also:

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 oojs-ui-core, see below) are:
 * Automatically updated list: https://doc.wikimedia.org/oojs-ui/master/php/annotated.html

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

Voorbeeld
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#Display formats.

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


OOUI widgets gebruiken
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.

Bijvoorbeeld (extension.json):

Code in modules die afhankelijk van OOUI is, kan de elementen gebruiken, zoals beschreven in deze OOUI-documentatiel.

Infusion
Om progressieve verbetering te bieden en codeduplicatie tussen PHP en JavaScript te voorkomen, kunnen OOUI PHP-widgets op een pagina worden opgenomen in OOUI-widgets.

Ervan uitgaande dat een PHP-widget uitbreidbaar is gemaakt toen deze werd gemaakt:

Dat uitbreiden kan met JavaScript-codeː

De widget kan nu worden gewijzigd met JavaScript-code:

Gadgets
OOUI kan worden gebruikt in on-wiki gadgets en in gebruikersscripts. Zoals hierboven, hoeft u er alleen maar voor te zorgen dat de module  (of een andere, zoals hierboven beschreven) wordt geladen voordat uw code wordt uitgevoerd.

Voor gadgets moet u een vermelding toevoegen in veld  van de gadgetbeschrijving. Gadgets instructies en voorbeelden

Voor gebruikersscripts verpak uw code in een aanroep van, zoals altijd bij het laden van modules. ResourceLoader instructies Voorbeeld:



MediaWiki-specifieke OOUI widgets
Verschillende MediaWiki-specifieke OOUI-widgets zijn beschikbaar onder de namespace  (JavaScript) en   (PHP), waarbij interface-elementen worden geïmplementeerd die gebruikelijk zijn in MediaWiki.


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



Thema's gebruiken
OOUI wordt geleverd met twee thema's en elke widget die u maakt, gebruikt het thema dat is gedefinieerd door de huidige skin met  in extension.json. In de skin kunnen ook aangepaste thema's worden geleverd. Details