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
Om OOUI-elementen te gebruiken, moet de OOUI PHP-bibliotheek worden geladen en moeten de benodigde stijlen worden ingesteld volgens de juiste skin (details).

De handigste manier om dit te doen is met behulp van het volgende.



Speciale pagina's enz.
Wanneer u toegang heeft tot een OutputPage instantie, roep diens methode  aan. Het is meestal beschikbaar als, zoals op speciale pagina's, of als   in hook-handtekeningen.

Voorbeeld:

Een ander voorbeeld, handig wanneer u geen gemakkelijke toegang hebt tot een OutputPage-instantie:

Merk op dat de methode  (geïmplementeerd door class  ) ervoor zorgt dat het juiste thema en de juiste directionaliteit zijn geconfigureerd en dat de pagina de OOUI-stijlen laadt. De OOUI-widgets hebben een namespace, dus ze moeten worden voorafgegaan door  of ze worden geïmporteerd. Als u de widgets aaneen rijgt, worden ze geconverteerd naar HTML, zodat u widgets aan de pagina kunt toevoegen met. Merk ook op dat in sommige gevallen alleen het inschakelen van OOUI niet voldoende is. Als u bijvoorbeeld een bepaald pictogram wilt toevoegen, moet u het gerelateerde pack met pictogrammen expliciet toevoegen.

Voorbeeld:



Parserfuncties en tags, inhoudmodellen
Als u toegang hebt tot een ParserOutput-instantie (meestal als  of  ), roept u de methode   aan en ook.

Voorbeeld:

Anders
Voordat u begint, bekijk eerst dit. (Gebruik in plaats van -tags de ResourceLoader-stijlmodules die hieronder worden beschreven.)



OOUI widgets gebruiken
Een widget maken:

De eigenschappen kunnen worden gewijzigd met behulp van methoden get/set:

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, 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:


 * &mdash; 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.
 * &mdash; Additional widgets and layouts.
 * &mdash; Toolbar and tools.
 * &mdash; Windows and dialogs.
 * &mdash; 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