OOUI/Windows/Dialogs

From MediaWiki.org
< OOUI‎ | Windows
Jump to navigation Jump to search

The OOUI library contains three types of dialogs (Dialog, ProcessDialog, and MessageDialog), which render a dialog box that users can view and interact with. Each dialog is configured with the controls required—either for responding to a message or completing a process—and all configuration is handled with a common API.

Note that the Dialog (and ProcessDialog) classes themselves are not instantiated directly. By extending these classes, developers control the look and functionality of the entire window rather than injecting bits and pieces of information into it. Only MessageDialogs, which are very generic, are instantiated directly.

The Dialog class serves as the base class for the other types of dialogs. Unless extended to include controls, the rendered dialog box is a simple window that users can close by hitting the Esc key.  Every dialog provides a this.$overlay DOM element that can be used for elements (e.g., menus) that extend outside of the dialog. See OOUI/Concepts#Overlays for an example.

The following is an example of a basic Dialog window.

Example of a Dialog window .

// Creating and opening a simple dialog window.

// Subclass Dialog class. Note that the OOjs inheritClass() method extends the parent constructor's prototype and static methods and properties to the child constructor. 

function MyDialog( config ) {
  MyDialog.super.call( this, config );
}
OO.inheritClass( MyDialog, OO.ui.Dialog ); 

// Specify a name for .addWindows()
MyDialog.static.name = 'myDialog';
// Specify a title statically (or, alternatively, with data passed to the opening() method).
MyDialog.static.title = 'Simple dialog';

// Customize the initialize() function: This is where to add content to the dialog body and set up event handlers.
MyDialog.prototype.initialize = function () {
  // Call the parent method
  MyDialog.super.prototype.initialize.call( this );
  // Create and append a layout and some content.
  this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
  this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close. </p>' );
  this.$body.append( this.content.$element );
};

// Override the getBodyHeight() method to specify a custom height (or don't to use the automatically generated height)
MyDialog.prototype.getBodyHeight = function () {
  return this.content.$element.outerHeight( true );
};

// Make the window.
var myDialog = new MyDialog( {
  size: 'medium'
} );

// Create and append a window manager, which will open and close the window.
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );

// Add the window to the window manager using the addWindows() method.
windowManager.addWindows( [ myDialog ] );

// Open the window!
windowManager.openWindow( myDialog );

For more information about Dialog windows, please see the code-level documentation.