OOUI/Using OOUI in MediaWiki

From MediaWiki.org
Jump to: navigation, search

OOUI is included in MediaWiki core, available to be used by both PHP and JavaScript code.

PHP[edit]

Before you start[edit]

To use OOUI elements, you have to load the necessary styles and set up the OOUI PHP library to use the correct skin (boring details).

The most convenient way to do this is:

Special pages etc.[edit]

Whenever you have access to an OutputPage instance, call its enableOOUI() method. It is usually available as $this->getOutput() in most contexts, such as on special pages, or as $out in hook signatures.

Example:

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

$out->enableOOUI() (implemented by class OutputPage) 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 OOUI\. Stringifying the widgets converts them to HTML, so you can add widgets to the page using $out->addHTML(). 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. For example:

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();
}

Parser functions and tags, content models[edit]

If you have access to a ParserOutput instance (usually as $parser->getOutput() or $pout), call its setEnableOOUI( true ) method, and also OutputPage::setupOOUI().

If you have access to a Parser instance, instead just call its enableOOUI() method.

Example:

public static function myTagHook( $content, array $attributes, Parser $parser, PPFrame $frame ) {
	$parser->enableOOUI();
	// ... more code here ...
	$group = new OOUI\ButtonGroupWidget( [
		// ... more widgets here ...
	] );
	return [ $group->toString(), 'markerType' => 'nowiki' ];
}

Otherwise[edit]

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

Using OOUI widgets[edit]

Construct a widget:

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

Its properties can be changed using getter/setter methods:

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

When you're done creating the widget, you can treat is like a string to display it. (You can explicitly convert to string by calling the toString() method.)

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

List of available elements[edit]

See also:

As of OOUI v0.25.0, released 2017-10-17, these elements available in PHP (or in JS via oojs-ui-core, see below) are:

Widgets:

  • ButtonWidget
  • ButtonInputWidget
  • ButtonGroupWidget
  • CheckboxInputWidget
  • CheckboxMultiselectInputWidget
  • RadioInputWidget
  • RadioSelectInputWidget
  • TextInputWidget
  • MultilineTextInputWidget
  • SearchInputWidget
  • DropdownInputWidget
  • ComboBoxInputWidget
  • LabelWidget
  • IconWidget
  • IndicatorWidget
  • ProgressBarWidget

Layouts:

  • FieldLayout
  • ActionFieldLayout
  • FieldsetLayout
  • FormLayout
  • PanelLayout
  • HorizontalLayout

Example[edit]

Large structures can be created and displayed in a single call:

$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[edit]

HTMLForm has OOUI support. You can use the ooui 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.

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

On FormSpecialPage, use the getDisplayFormat() method:

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

Examples:

Widgets used in the form will be automatically infused (see below) if the JS widget offers additional capabilities over the PHP one.

JavaScript[edit]

Using OOUI widgets[edit]

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:

For example (extension.json):

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

Code in modules depending on OOUI can use the elements, as described in this OOUI documentation. Start reading it here.

Infusion[edit]

To provide progressive enhancement and avoid code duplication between PHP and JS, OOUI PHP widgets present on a page can be infused into OOUI widgets.

Assuming that a PHP widget has been made infusable when it was created:

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

It can be infused from JavaScript code:

var button = OO.ui.infuse( $( '#my-button' ) );
// Or, for self-documenting code:
var button = OO.ui.ButtonWidget.static.infuse( $( '#my-button' ) );

The widget can now be modified from JavaScript code:

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

Gadgets[edit]

OOUI can be used in on-wiki gadgets or user scripts. As above, you just need to ensure the oojs-ui-core module (or a different one, as described above) is loaded before your code runs.

For gadgets, you should add an entry in the dependencies field of gadget description. See Gadgets' documentation for instructions and examples.

For user scripts, wrap your code in a mw.loader.using( … ) call, as always when loading modules. See ResourceLoader documentation for instructions. Example:

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-specific OOUI widgets[edit]

Several MediaWiki-specific OOUI widgets are available under the mw.widgets (JavaScript) or MediaWiki\Widget (PHP) namespace, implementing interface elements common in MediaWiki.

TODO Write me.