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:

Wanneer u klaar bent met het maken van de widget, kunt u deze behandelen als een tekenreeks om deze weer te geven. (U kunt expliciet converteren naar een tekenreeks door een aanroep van de methode .)



Lijst met beschikbare elementen
Zie ook:

Vanaf OOUI v0.34.0, uitgebracht op 04-09-2019, zijn deze elementen beschikbaar in PHP (of in JavaScript via, zie hieronder):
 * Automatisch bijgewerkte lijst: https://doc.wikimedia.org/oojs-ui/master/php/annotated.html
 * Demo met voorbeelden (Demo pagina in master branch)

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
Grote structuren kunnen in één aanroep worden gemaakt en weergegeven:

, FormSpecialPage
HTMLForm heeft OOUI ondersteuning. U kunt de weergave-indeling  gebruiken voor HTMLForm formulieren om ze met OOUI weer te geven. Dit is meestal handiger, omdat HTMLForm functionaliteit biedt voor validatie en het verwerken van ontvangen formulieren. Weergaveformaten.

Op FormSpecialPage, gebruik de methode :

Voorbeelden:


 * 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 die in het formulier worden gebruikt, worden automatisch infused (zie hieronder) als de JS-widget extra mogelijkheden biedt ten opzichte van de PHP-widget.

JavaScript


OOUI widgets gebruiken
Afhankelijk van welke van de functies u gaat gebruiken, moet u een of meer van de volgende modules vermelden als afhankelijkheden van uw module die OOUI gebruikt:


 * &mdash; OOUI's core JavaScript bibliotheek. Bevat de basis widgets en lay-outs die ook beschikbaar zijn in PHP (zie exacte lijst hierboven) en de mogelijkheid om ze infuse te gebruiken.
 * &mdash; Aanvullende widgets en lay-outs.
 * &mdash; Werkbalk en hulpmiddelen.
 * &mdash; Windows en dialogen.
 * &mdash; Specifieke pictogramstijlen, afhankelijk van welke pictogrammen u mogelijk wilt gebruiken, bijvoorbeeld  voor het pictogram controleren. Groepsnamen staan hier en in de 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