OOUI/PHP examples/nl

Als u OOUI gebruiktː

• in een MediaWiki-extensie, zie OOUI/Using OOUI in MediaWiki/nl .
• in een standalone PHP-project, voer composer require oojs/oojs-ui uit.

Een uitgebreidere set van de meeste PHP widget voorbeelden is beschikbaar in de broncode repository. Wanneer u de repository kloont en / of installeert met behulp van composer, kijk dan eens naar /demos/widgets.php.

De bibliotheek instellen

Voordat u OOUI-widgets weergeeft, moet u de bibliotheek instellen door de volgende functies aan te roepen:

OOUI\Theme::setSingleton( new WikimediaUITheme() ); // of: nieuwe ApexTheme()
OOUI\Element::setDefaultDir( 'ltr' );               // of: 'rtl'

U moet ook de CSS laden:

<!-- Gebruik 'wikimediaui' of 'apex' -->
<link rel="stylesheet" href="dist/oojs-ui-core-wikimediaui.css">   <!-- of: .rtl.css -->
<link rel="stylesheet" href="dist/oojs-ui-images-wikimediaui.css"> <!-- of: .rtl.css-->

Een knop aanmaken

Als u een knop wilt maken, gebruikt u de class OOUI\ButtonWidget. Het eerste en enige argument voor de constructor van een knop is de configuratie.

$btn = new OOUI\ButtonWidget( [
    'label' => 'Click me!'
] );

Voordat de knop wordt geconverteerd naar HTML en wordt uitgezonden, kunnen het label, het doel en de href worden gewijzigd met behulp van de methoden setTarget en setHref.

$btn
    ->setLabel( 'Still click me!' )
    ->setTarget( 'blank' )
    ->setHref( 'https://mediawiki.org/' );

De knop is nu gemaakt en heeft een label met de tekst "Still click me!", maar is nog niet zichtbaar voor de gebruiker, omdat deze eerst moet worden geconverteerd naar HTML en in het document moet worden weergegeven:

echo $btn;

JavaScript toevoegen

Het instellen van de property href zorgt ervoor dat bij het klikken op de knop een nieuwe PHP-pagina wordt geladen. Maar als u de techniek van progressieve verbetering wilt gebruiken om JavaScript-gedrag aan de clientzijde aan de knop toe te voegen, kunt u het object aan de clientzijde "infuseren" met de JavaScript-methode OO.ui.infuse. U moet de eigenschap infusable instellen wanneer de widget is geconfigureerd:

<?php
$btn = new OOUI\ButtonWidget( [
    'infusable' => true,
    'label' => 'Click me!',
    'target' => 'blank',
    'href' => 'https://www.mediawiki.org/'
] );
echo $btn;

Vervolgens laadt u wat JavaScript aan de cliëntzijde om deze widget te verbeteren:

// Het argument hier moet ofwel een string zijn die overeenkomt met de 'id' die je de widget in de PHP-code hebt gegeven,
// of jQuery-knooppunt dat de widget vertegenwoordigt die u in de PHP-code hebt gemaakt.
var myButton = OO.ui.infuse( 'my-button' );
// Voeg nieuwe acties aan de cliëntzijde toe.
myButton.on( 'click', function () {
    window.alert( 'I was clicked!' );
} );

Het veilig gebruiken

Voor extra typeveiligheid kunt u de methode infuse gebruiken van het specifieke type widget dat u verwacht. Dat isː

var myButton = OO.ui.ButtonWidget.static.infuse( 'my-button' );

Dit zal een exception genereren tijdens runtime als PHP en JavaScript het niet eens zijn over het widgettype van my-button. (Op 05-2015 is dit nog niet geïmplementeerd, maar zal het in de toekomst wel zijn.)