OOUI/Creating interfaces programmatically/nl

De OOUI-bibliotheek 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 klasse 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


 * 1) De widget wordt gemaakt en geconfigureerd
 * 2) De widget wordt toegevoegd aan de DOM

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.

Remember to include the required libraries jQuery and Special:MyLanguage/OOjs as well as the relevant style information (one of the OOUI themes, currently WikimediaUI as default or Apex as alternative) and the OOUI library itself.



Een widget maken en configureren
Each widget is created and configured with either a configuration object that is passed to the widget constructor or by using methods to set the configurations (see example below). Many of the library’s methods are chainable, as illustrated in the example.

Once the widget has been created and configured, it must be attached to the DOM in order to be visible to the user. Use the jQuery  method to insert the new widget into the DOM using its   property.

The following example demonstrates how to create and append a simple  that, when clicked, will open “https://www.mediawiki.org” in a new window. ‘ ’ is configured using a config object. ‘ ’ is configured using the widget’s methods:



Note that some get methods (e.g. or   ) should not be chained. These methods may return ‘null’, and trying to call another method on ‘null’ will cause an error.



Een 'event handler' verbinden met een widget
Widgets emit events when they are interacted with or changed in an interesting way. These events can be listened to by connecting event handlers to the widget. The below example uses an event handler to display an alert when the button is clicked. When the button is clicked, its label will be reset to read ‘Do not click me!’ via the button’s setLabel method.

Event handling is provided by the EventEmitter class, which is “mixed in” to all widgets. For more information about EventEmitter, please see OOjs primer.



Mixins begrijpen
The concept of mixins is fundamental to the library, and many of the library’s elements can be customized via mixin functionality. For example, one can easily add an icon to a button widget by taking advantage of the fact that the  class is mixed in to the   class.



Mixin classes can be used to create and add new elements to a widget (such as the icon in the above example) or to add new behaviors (such as new methods for handling styling flags or titles).

There are three kinds of element mixins, each identified with a naming convention:


 * Content: Content mixins generate elements by default (e.g., groups, icons, indicators and labels). The names of content mixins have no suffix (e.g.,,  , etc.)
 * Attribute: Attribute mixins operate on  by default (e.g., flags and titles). The names of attribute mixins have an "ed" suffix (e.g., ,  , etc.)
 * Behavior: Behavior mixins operate on  by default (e.g., clippable). Behavior mixins are identified with an ”able" suffix (e.g., , etc.)

Note that though a mixin class can create and initialize an object, it will not append it to the DOM. This must be done manually if you wish to manipulate the object directly.

It is not uncommon to see widgets composed of multiple mixins: for example, the  class utilizes   and   mixins (and a few others). One can easily see which classes have been mixed and are available in the code-level documentation for each class. Mixin classes will always be displayed in the upper right of the documentation screen for each class. In addition, each configuration option notes the name of the class that defines it.