OOUI/Creating interfaces programmatically/nl

De OOUI-bibliotheek^[1] biedt de bouwstenen voor het bouwen van een objectgeoriënteerde gebruikersinterface. Het bevat veel widgets en lay-outs die klaar zijn voor gebruik, evenals basiselementen die kunnen worden samengesteld om zelf iets te bouwen. Complexe systemen, zoals vensters en werkbalken, zijn ook aanwezig en kunnen worden uitgebreid en samengesteld om aan de behoeften van uw toepassing te voldoen.

Gebruikersinterfaces worden programmatisch gemaakt in OOUI, waardoor HTML-opmaak volledig wordt geabstraheerd. Met deze techniek kan de opmaak worden gewijzigd, zolang de API's die de opmaak genereren stabiel blijven. Markeringen kunnen veranderen bij het uitbreiden van een class om een nieuwe functie te ondersteunen, of bij het oplossen van een bug om de compatibiliteit te vergroten.

Alles in OOUI dat de gebruiker kan zien, is gebouwd met behulp van elementen, die samen zijn samengesteld om afzonderlijke delen van een gebruikersinterface te vormen, en ook om die delen samen te brengen. Door het hergebruik van elementen te maximaliseren, is visuele, gedrags- en API-consistentie gemakkelijker te onderhouden.

Om te beginnen

Als u nog niet bekend bent met hoe interfaces worden gemaakt met OOUI, bevat deze sectie een korte zelfstudie over het bouwen van een widget met behulp van de bibliotheek.

Het maken van een widget omvat twee basisstappen

De widget wordt gemaakt en geconfigureerd
De widget wordt toegevoegd aan de DOM^[2]

Houd er rekening mee dat OOUI-objecten aan de DOM moeten worden toegevoegd voordat ze zichtbaar zijn voor de gebruiker. Ontwikkelaars die code schrijven, moeten rekening houden met het feit dat een widget al dan niet aan de DOM is gekoppeld en nooit aan de DOM zal worden gekoppeld tijdens de uitvoering van de constructor. Zelfs nadat een element is bevestigd, kan het weer vrijgegeven zijn. U kunt controleren of het element op dat moment gekoppeld is met behulp van de methode .isElementAttached().

Vergeet niet om de vereiste bibliotheken jQuery en Special:MyLanguage/OOjs op te nemen, evenals de relevante stijlinformatie (een van de OOUI-thema's, nu WikimediaUI, als standaard of Apex als alternatief) en de OOUI-bibliotheek zelf.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Zaken die teogevoegd moeten worden</title>
    <!-- Toevoegen stylesheet van thema WikimediaUI -->
    <link rel="stylesheet" href="resources/lib/ooui/oojs-ui-core-wikimediaui.css">
  </head>
  <body>

    <!-- jQuery -->
    <script src="resources/lib/jquery/jquery.js"></script>

    <!-- OOjs -->
    <script src="resources/lib/oojs/oojs.jquery.js"></script>

    <!-- OOUI -->
    <script src="resources/lib/ooui/oojs-ui-core.js"></script>
    <script src="resources/lib/ooui/oojs-ui-wikimediaui.js"></script>
  </body>
</html>

Een widget maken en configureren

Elke widget wordt gemaakt en geconfigureerd met een configuratieobject dat wordt doorgegeven aan de widgetconstructor of met behulp van methoden om de configuraties in te stellen (zie onderstaand voorbeeld). Veel van de methoden van de bibliotheek zijn koppelbaar, zoals uit het voorbeeld blijkt.

Zodra de widget is gemaakt en geconfigureerd, moet deze aan de DOM worden gekoppeld om zichtbaar te zijn voor de gebruiker. Gebruik de methode jQuery .append() om de nieuwe widget in de DOM in te voegen met de eigenschap $element

Het volgende voorbeeld laat zien hoe u een eenvoudige ButtonWidget maakt en toevoegt. Wanneer er op wordt geklikt, dan wordt "https://www.mediawiki.org" in een nieuw venster geopend. button1 wordt geconfigureerd met behulp van een configuratieobject. button2 is geconfigureerd met behulp van de methoden van de widget:

// Voorbeeld: een nieuwe ButtonWidget maken en configureren met een configuratieobject 
// (knop1) of methoden ButtonWidget (knop2) en het toevoegen van de knoppen 
// aan de DOM.

// Knop 1: Maak een nieuwe knop aan met de class OO.ui.ButtonWidget.
// Configuratie opties (label, href en target in dit voorbeeld) 
// worden opgegeven met een configuratieobject.
var button1 = new OO.ui.ButtonWidget( { 
  label: 'Click me!', 
  href: 'https://www.mediawiki.org', 
  target: 'new'
} );
// Knop 2: Gebruik ButtonWidget-methoden om de knop te configureren.
// Veel methoden zijn koppelbaar.
var button2 = new OO.ui.ButtonWidget()
  .setLabel( 'Click me!' )
  .setHref( 'https://www.mediawiki.org' )
  .setTarget( 'new' );
// Voeg de knoppen toe aan de DOM met de eigenschap $element en de methode .append() van jQuery.
$( 'body' ).append( button1.$element, button2.$element );

Sommige get-methoden (bijv. getItemFromData() en getElementDocument()) mogen niet worden gekoppeld. Deze methoden kunnen 'null' retourneren en als u probeert een andere methode op 'null' aan te roepen, treedt er een fout op.

Een 'event handler' verbinden met een widget

Widgets zenden gebeurtenissen uit wanneer ze op een bepaalde manier worden gebruikt of gewijzigd. Deze gebeurtenissen kunnen worden opgevangen door event-handlers aan de widget te koppelen. In het onderstaande voorbeeld wordt een zo een waarschuwing gegeven wanneer er op de knop wordt geklikt. Wanneer er op de knop wordt geklikt, wordt het label gereset om 'Do not click me!' te lezen via de methode setLabel() van de knop.

// Voorbeeld, een event-handler verbinden met een knop.

// Een nieuwe knop maken.
var button3 = new OO.ui.ButtonWidget( { 
  label: 'I handle events' 
} );
// De event-handlers instellen.
// Gebruik de methode on() van de ButtonWidget om een gebeurtenis te specificeren (bijvoorbeeldː klikken op een knop) 
// voeg een event-handler toe.
button3.on( 'click', function () {
  alert( 'I was clicked!' );
  button3.setLabel( 'Do not click me!' );
} );
// Voeg de knop toe aan de DOM.
$( 'body' ).append( button3.$element );

Gebeurtenisafhandeling wordt geleverd door de class EventEmitter, die wordt "gemengd in" met alle widgets. Voor meer informatie over EventEmitter, zie OOjs primer.

Mixins begrijpen

Het concept van mixins^[3] is fundamenteel voor de bibliotheek en veel van de elementen van de bibliotheek kunnen worden aangepast via mixin-functionaliteit. Men kan bijvoorbeeld eenvoudig een pictogram toevoegen aan een knop-widget door gebruik te maken van het feit dat de class IconElement wordt gemengd met de class ButtonWidget.

// Maak een nieuwe knop en voeg een pictogram toe met behulp van de meegeleverde configuratieoptie 
// met gebruik van de class IconElement.
var button4 = new OO.ui.ButtonWidget( { 
  label: 'Button with icon', 
  icon: 'alert'
} );

// Voeg de knop toe aan de DOM.
$( 'body' ).append( button4.$element );

Mixin classes kunnen worden gebruikt om nieuwe elementen te maken en toe te voegen aan een widget (zoals het pictogram in het bovenstaande voorbeeld) of om nieuw gedrag toe te voegen (zoals nieuwe methoden voor het verwerken van stijlvlaggen of titels).

Er zijn drie soorten element mixins, elk geïdentificeerd met een naamgevingsconventie:

Content — Inhoud mixins genereren standaardelementen (bijvoorbeeld groups, icons, indicators en labels). De namen van inhouds mixins hebben geen achtervoegsel (bijvoorbeeld GroupElement, IconElement, enz.)
Attribute — Attribuut mixins werken standaard op $element (bijvoorbeeldː flags en titles). De namen van attribuut mixins hebben "ed" achtervoegsel (bijvoorbeeld FlaggedElement, TitledElement, enz.)
Behaviour — Gedrags mixins werken standaard op $element (bijvoorbeeldː clippable). Gedrag mixins worden geïdentificeerd met een achtervoegsel "able" (bijv. ClippableElement, enz.)

Hoewel een mixin-class een object kan maken en initialiseren, wordt het niet aan de DOM toegevoegd. Dit moet handmatig worden gedaan als u het object rechtstreeks wilt manipuleren.

Het is niet ongebruikelijk om widgets te zien die zijn samengesteld uit meerdere mixins: de class ButtonWidget gebruikt bijvoorbeeld ButtonElement en IconElement mixins (en een paar andere). Men kan gemakkelijk zien welke classes zijn gemengd en beschikbaar zijn in de code-level documentatie voor elke class. Mixin classes worden altijd weergegeven in de rechterbovenhoek van het documentatiescherm voor elke class. Bovendien noteert elke configuratieoptie de naam van de class die deze definieert.

Referenties

↑ OOUI (Object-Oriented User Interface)
↑ DOM (Document Object Model)
↑ mixin^(en)

OOUI wordt onderhouden door the Design System Team.

Hulp krijgen:

#wikimedia-editing ^verbinden ← Live chat (IRC)
wikitech-l ← Mailinglijst
Talk:OOUI ← Overlegpagina
ooui (taak toevoegen) ← Phabricator projectpagina