OOUI/Using OOUI in MediaWiki/nl

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

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 enableOOUI() aan. Het is meestal beschikbaar als $this->getOutput(), zoals op speciale pagina's, of als $out in hook-handtekeningen.

Voorbeeld:

function execute( $param ) {
	$out = $this->getOutput();
	$out->enableOOUI();
	// … Hier meer code …
	$group = new OOUI\ButtonGroupWidget( [
		// … Hier meer widgets …
	] );
	$out->addHTML( $group );
}

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

RequestContext::getMain()->getOutput()->enableOOUI();

Merk op dat de methode enableOOUI() (geïmplementeerd met de class OutputPage ) 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 OOUI\ 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 $out->addHTML(). 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:

public function load() {
    $this->getOutput()->enableOOUI();
    $this->getOutput()->addModuleStyles( [ 'oojs-ui.styles.icons-moderation' ] );
    return ( new OOUI\IconWidget(
		[
			'icon' => 'block',
			'classes' => [ 'flaggedrevs-icon' ],
			'title' => 'Block',
		]
	) )->toString();
}

Parserfuncties en tags, inhoudmodellen

Als u toegang hebt tot een ParserOutput-instantie (meestal als $parser->getOutput() of $pout), roept u de methode setEnableOOUI( true ) aan en ook OutputPage::setupOOUI().

Voorbeeld:

public static function myTagHook( $content, array $attributes, Parser $parser, PPFrame $frame ) {
	OutputPage::setupOOUI();
	$parser->getOutput()->setEnableOOUI( true );
	// … Hier meer code …
	$group = new OOUI\ButtonGroupWidget( [
		// … Hier meer widgets …
	] );
	return [ $group->toString(), 'markerType' => 'nowiki' ];
}

Anders

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

OOUI widgets gebruiken

Een widget maken:

$btn = new OOUI\ButtonWidget( [
    'label' => 'Click me!',
    'href' => 'https://example.com',
] );

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

$btn->setLabel( 'Still click me!' );

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 toString().)

$this->getOutput()->addHTML( "<div>$btn</div>" );

Lijst met beschikbare elementen

Zie ook:

• Automatisch bijgewerkte lijst: https://doc.wikimedia.org/oojs-ui/master/php/annotated.html
• Demo met voorbeelden (Demo pagina in master branch)

Vanaf OOUI v0.34.0, uitgebracht op 04-09-2019, zijn deze elementen beschikbaar in PHP (of in JavaScript via oojs-ui-core, zie hieronder):

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:

$this->getOutput()->addHTML( new OOUI\FormLayout( [
	'method' => 'POST',
	'action' => 'login.php',
	'items' => [
		new OOUI\FieldsetLayout( [
			'label' => 'Form layout',
			'items' => [
				new OOUI\FieldLayout(
					new OOUI\TextInputWidget( [
						'name' => 'username',
					] ),
					[
						'label' => 'User name',
						'align' => 'top',
					]
				),
				new OOUI\FieldLayout(
					new OOUI\TextInputWidget( [
						'name' => 'password',
						'type' => 'password',
					] ),
					[
						'label' => 'Password',
						'align' => 'top',
					]
				),
				new OOUI\FieldLayout(
					new OOUI\CheckboxInputWidget( [
						'name' => 'rememberme',
						'selected' => true,
					] ),
					[
						'label' => 'Remember me',
						'align' => 'inline',
					]
				),
				new OOUI\FieldLayout(
					new OOUI\ButtonInputWidget( [
						'name' => 'login',
						'label' => 'Log in',
						'type' => 'submit',
						'flags' => [ 'primary', 'progressive' ],
						'icon' => 'check',
					] ),
					[
						'label' => null,
						'align' => 'top',
					]
				),
			]
		] )
	]
] ) );

HTMLForm , FormSpecialPage

HTMLForm heeft OOUI ondersteuning. U kunt de weergave-indeling ooui 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.

$htmlForm = HTMLForm::factory( 'ooui', $formDescriptor, $this->getContext() );

Op FormSpecialPage, gebruik de methode getDisplayFormat():

protected function getDisplayFormat() {
	return 'ooui';
}

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:

• oojs-ui-core — 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.
• oojs-ui-widgets — Aanvullende widgets en lay-outs.
• oojs-ui-toolbars — Werkbalk en hulpmiddelen.
• oojs-ui-windows — Windows en dialogen.
• oojs-ui.styles.icons-* — Specifieke pictogramstijlen, afhankelijk van welke pictogrammen u mogelijk wilt gebruiken, bijvoorbeeld oojs-ui.styles.icons-interactions voor het pictogram controleren. Groepsnamen staan hier en in de code.

Bijvoorbeeld (extension.json):

{
	"ResourceModules": {
		"ext.myExtension": {
			"dependencies": [
				"oojs-ui-core",
				"oojs-ui-windows"
			],
			"scripts": [
				...
			]
		}
	}
}

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

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:

$btn = new OOUI\ButtonWidget( [
    'infusable' => true,
    'id' => 'my-button',
    'label' => 'Click me!',
    'href' => 'https://example.com',
] );

Dat uitbreiden kan met JavaScript-codeː

var button = OO.ui.infuse( $( '#my-button' ) );
// Of, bij zelfdocumenterende code:
var button = OO.ui.ButtonWidget.static.infuse( $( '#my-button' ) );

De widget kan nu worden gewijzigd met JavaScript-code:

button
	.setLabel( 'Really click me!' )
	.on( 'click', function () {
		alert( 'I was clicked!' );
	} );

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 oojs-ui-core (of een andere, zoals hierboven beschreven) wordt geladen voordat uw code wordt uitgevoerd.

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

Voor gebruikersscripts verpak uw code in een aanroep van mw.loader.using( … ), zoals altijd bij het laden van modules. ResourceLoader instructies Voorbeeld:

mw.loader.using( 'oojs-ui-core' ).done( function () {
	$( function () {
		var button = new OO.ui.ButtonWidget( {
			label: 'Click me!'
		} );
		button.on( 'click', function () {
			alert( 'You clicked the button!' );
		} );
		$( '#mw-content-text' ).append( button.$element );
	} );
} );

MediaWiki-specifieke OOUI widgets

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

Nog te doen: Schrijf mij.

• Manual:TitleInputWidget
• Manual:UserInputWidget
• Manual:SearchInputWidget
• Manual:NamespaceInputWidget
• Manual:DateInputWidget (example: gerrit: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 SkinOOUIThemes in extension.json. In de skin kunnen ook aangepaste thema's worden geleverd. Details