OOUI

ooui is a modern UI toolkit for browsers.

It drives the dialogs, toolbars, and much of the other chrome of the VisualEditor.

How
ooui will be a distribution, like Mediawiki core.

Somehow it will be incorporated, like jQuery

For a developer, just depend on oo-ui in ResourceLoader.

Initially just one module, unlike jquery.ui variations

It has a lightweight classing model for UI elements, which it gets from

Dependencies
Assumes jQuery It doesn't assume MediaWiki, not even MediaWiki localization.

oojs
oojs provides
 * class inheritance
 * class mixin
 * event emitters (similar to Nodejs's emitter)
 * mix this in and you get
 * for receiving emitted events, and  to stop receiving
 * to connect names of events to your on handlers, also binding  correctly. Nice shortcut, and there's a   to unplug
 * registries for symbolic names of
 * plus some utilities.

Event emitter
In VE almost everything is an event emitter.

Registries and factories
Just a wrapper over a map, similar to

E.g. a registry of HTML tag names associated with a model, multiple tag names

Allows you to associate more than one key with the same value, e.g. aliasing.

Factory inherits from registry (using oojs inheritance).

When you register anything in a factory, the value must be a function, and the factory comes up with the key name for it.

See OO.Factory jsduck documentation

function Foo.static = { name: 'whatever' }

Our convention is lowerCamelCase.

Factory uses the symbolic name It

Tend to have multiple factories

ooui has the notion of a tool factory,

e.g. when you construct a toolbar you tell it what factory to get tools from. You only talk about toolbar components by their registry names.

First toolbar button created with name 'bold',

then if you want to have a different kind of bold button behavior, you can set a different tool.

Useful e.g. the link button in VE has a simple implementation (plain URL inserter), but mw-ve code supplies a different button class for the same registry name 'link'.

ve.ui.LinkInspector.js function definition creates class (and the constructor), then specifies static.name = 'link';

Later on, ve.ui.inspectorFactory.register( ve.ui.LinkInspector );

A factory inherits from registry, inferring the name, and then knows how to create.

When someone clicks link (using the InspectorFactory) with 'link' in it, it gets the registered inspector for that from the factory.

But then in ve.ui.MWLinkInspector.js, it creates its own class, but by specifying the same static.name, any reference to that from the factory will now use this.

Factory
Factory accepts any string for names.

Examples
OO.uiTool.js

this.toolbar.connect( this, { 'updateState': 'onUpdateState' } );

Hooks you up to updateState events from a toolbar.

Destruction
Call disconnect from event emitter and you won't get any more events, also helps with GC (alternative if you're bound to some event object won't be GC'd even when it goes out of scope). Do this in destroy.