OOUI

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

OOjs UI (Object-Oriented JavaScript – User Interface) is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers.

The OOjs UI 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.

OOjs UI is available as a library in MediaWiki Core as of version 1.23, as well as on npm, Composer and through cdnjs. The library was originally created for use by VisualEditor, which uses it for its entire user interface. OOjs UI implements a "WikimediaUI" theme – conforming to Wikimedia Foundation's user interface style guide. Interfaces built within MediaWiki use this theme by default, though different MediaWiki skins can and do over-ride this. See documentation about using OOjs UI in MediaWiki.

Introduction

• About the library
• OOjs primer

Getting started

• Creating interfaces programmatically
• PHP examples
• Using OOjs UI in MediaWiki

Working with widgets

• Elements
  • GroupElements
  • FlaggedElements
  • LookupElements
• 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 Cards
• Windows
  • Simple messages
  • Dialogs
  • Process Dialogs
  • Message Dialogs
  • Window managers
• Toolbars
• Other concepts

See also

• https://doc.wikimedia.org/oojs-ui/master/js/ is API documentation generated from the source code
• https://doc.wikimedia.org/oojs-ui/master/demos/ hosts the interactive demos in the project's demos directory
• http://moriel.smarterthanthat.com/tips/tutorial-building-a-todo-app-with-oojs-ui-part-1/ A step by step tutorial on building a Todo list application using OOjs UI

[[Category:WMF ProjectsTemplate:Translation]]