OOUI/About the library

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets


v · d · e

OOUI^[1] is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers.

The OOUI library contains

a set of ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended,
a server-side component that generates compatible output in PHP for cases where JavaScript is not supported,
elements that can be easily mixed and matched to create custom user interfaces.

The library provides:

cross-browser compatibility. Interfaces built using library elements will look and act consistently across modern browsers.
understandability. Interfaces share a common API that is well documented and consistently used. Both the JavaScript and PHP components use the same class and method names. Basic elements are reused throughout the library, along with their APIs.
design. Themes specify how OOUI interfaces look and feel. Two themes are provided out of the box, the default “WikimediaUI” theme conforming to Wikimedia Foundation's design style guide and another theme called “Apex” inspired by the skin of the same name. Skin authors can create additional themes and use them in MediaWiki for a custom look and feel.
sensible event handling. OOUI components listen to low-level events and emit a meaningful event at the proper time (i.e., when something actually changes).
responsiveness. When the model changes, the view is updated automatically.
accessibility. WikimediaUI's widgets align to WCAG^[2] level AA conformance by default.
efficiency. The view is generated and updated client-side, requiring fewer road trips to the server.
object-oriented functionality. The library provides support for mixins and inheritance, including the inheritance of static properties.
openness. The library is open source and released under the MIT licence.

OOUI is available as a library in MediaWiki Core as of version 1.23. It was originally created for use by VisualEditor, which uses it for its entire user interface.

Compatibility, Dependencies, and Installation

[edit]

OOUI is compatible with most modern web browsers, and work toward supporting additional browsers is ongoing. See the VisualEditor documentation to get a general sense for which browsers are currently supported. Note that OOUI supports a superset of these browsers, as VisualEditor compatibility is especially restricted due to its use of contentEditable.

The OOUI library depends on OOjs and jQuery, both of which are available in MediaWiki core.

There are instruction on using the library in MediaWiki extensions.

Additional documentation

[edit]

The following are useful resources:

JavaScript code-level documentation — The generated documentation for the JavaScript interface provides a complete API reference, containing a description of each class along with all supported configuration options and methods. Each description also includes a list of mixin classes and subclasses.
PHP documentation — The PHP API is documented using the MediaWiki conventions and can be used to generate a readable reference (the PHP documentation may lack information on mixin methods).
Demos — Additional demos.
OOjs documentation — The OOUI library is built alongside and of and uses OOjs as its primer. The code-generated documentation might also prove useful.