OOUI/MediaWikiでのOOUIの使用
OOUI は MediaWiki コアに含まれており、PHP コードと JavaScript コードの両方で使用できます。
PHP
始める前に
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.
特別ページなど
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.
例:
function execute( $param ) {
$out = $this->getOutput();
$out->enableOOUI();
// … コードを記入 …
$group = new OOUI\ButtonGroupWidget( [
// … ウィジェットを記入 …
] );
$out->addHTML( $group );
}
OutputPageインスタンスへのアクセスが困難な時に有用な例：
RequestContext::getMain()->getOutput()->enableOOUI();
Note that the method 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\ or imported.
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.
例:
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();
}
パーサー関数、タグ、コンテンツ モデル
If you have access to a ParserOutput instance (usually as $parser->getOutput() or $pout), call its setEnableOOUI( true ) method, and also OutputPage::setupOOUI().
例:
public static function myTagHook( $content, array $attributes, Parser $parser, PPFrame $frame ) {
OutputPage::setupOOUI();
$parser->getOutput()->setEnableOOUI( true );
// … コードを記入 …
$group = new OOUI\ButtonGroupWidget( [
// … More widgets here …
] );
return [ $group->toString(), 'markerType' => 'nowiki' ];
}
Otherwise
OOUI/PHPの例#始める前にを参照。
(Instead of <link> tags use the ResourceLoader style modules described below.)
OOUI ウィジェットの使用
ウィジェットを構成：
$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 are done creating the widget, you can treat it like a string to display it.
(You can explicitly convert to string by calling the toString() method.)
$this->getOutput()->addHTML( "<div>$btn</div>" );
利用できる要素の一覧 =
関連項目:
- Automatically updated list: https://doc.wikimedia.org/oojs-ui/master/php/annotated.html
- 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:
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
例
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
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.
$htmlForm = HTMLForm::factory( 'ooui', $formDescriptor, $this->getContext() );
On FormSpecialPage, use the getDisplayFormat() method:
protected function getDisplayFormat() {
return 'ooui';
}
例：
- 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 ウィジェットの使用
OOUIを使用するあなたのモジュールの依存関係として以下のモジュールから使いたい機能を列挙します。
oojs-ui-core— OOUIのコアJavaScriptライブラリ。 PHPでも利用可能（上記の正確な一覧を参照）な基本的なウィジェットとレイアウトに加えそれらを注入する機能を格納しています。oojs-ui-widgets— 追加のウィジェットとレイアウト。oojs-ui-toolbars— ツールバーとツールoojs-ui-windows— ウィンドウとダイアログoojs-ui.styles.icons-*— 必要に応じた特定のアイコンのスタイル。例：oojs-ui.styles.icons-interactionsはチェックアイコンです。 アイコンのグループ名はデモページやコードで確認できます。
例（extension.json）：
{
"ResourceModules": {
"ext.myExtension": {
"dependencies": [
"oojs-ui-core",
"oojs-ui-windows"
],
"scripts": [
...
]
}
}
}
OOUI に依存するモジュール内のコードでは、この OOUI の解説文書で説明されている要素を使用できます。 まずはここから読み始めましょう。
注入
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!' );
} );
ガジェット
OOUIはウィキ内のガジェットや利用者スクリプトでも使用できます。
上記の通り、コードの実行の前にoojs-ui-coreモジュール（または上記の別のもの）が読み込まれていることを確かめるだけです。
ガジェットの場合、ガジェットの説明の dependencies 欄にエントリを追加する必要があります。
See Gadgets' documentation for instructions and examples.
利用者スクリプトでは、モジュールを読み込む際に常に行うように、コードを mw.loader.using( … ) で囲んでください。
See ResourceLoader documentation for instructions.
例:
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 固有の OOUI ウィジェット
Several MediaWiki-specific OOUI widgets are available under the mw.widgets (JavaScript) or MediaWiki\Widget (PHP) namespace, implementing interface elements common in MediaWiki.
- Manual:TitleInputWidget
- Manual:UserInputWidget
- Manual:SearchInputWidget
- Manual:NamespaceInputWidget
- Manual:DateInputWidget (example call)
- Manual:DateTimeInputWidget
- Manual:CategoryMultiselectSelector
テーマの使用
OOUI comes with two themes, and every widget you create will use the theme defined by the current skin using SkinOOUIThemes in extension.json.
Custom themes can also be provided by the skin.
詳細はOOUI/テーマを参照ください。
OOUI は the Design System Team によって保守されています。
ヘルプを得る:
|
