Creates an instance of the menu bar view.
The localization services instance.
Protected_A collection of view instances, which have been added directly into the module:ui/template~Template#children.
Protected_Collections registered with #createCollection.
Collection of the child views inside the #element.
An HTML element of the view. null until module:ui/view~View#render rendered
from the module:ui/view~View#template template. The class-level example above illustrates typical usage. The
full description, fenced examples, and assignment note are in the block comment immediately above the element field
in the source.
Indicates whether the menu bar has been interacted with using the keyboard.
It is useful for showing focus outlines while hovering over the menu bar when interaction with the keyboard was detected.
Indicates whether any of top-level menus are open in the menu bar. To close the menu bar use the #close method.
ReadonlyisSet true when the view has already been module:ui/view~View#render rendered.
ReadonlylocaleA set of tools to localize the user interface.
Also see module:core/editor/editor~Editor#locale.
A list of module:ui/menubar/menubarmenuview~MenuBarMenuView instances registered in the menu bar.
Shorthand for module:utils/locale~Locale#t.
Note: If #locale instance hasn't been passed to the view this method may not be available.
OptionaltemplateTemplate of this view. It provides the #element representing the view in DOM, which is #render rendered.
OptionalviewShorthand for module:ui/template~Template.bind, a binding module:ui/template~BindChain interface pre–configured for the view instance.
It provides module:ui/template~BindChain#to to() and
module:ui/template~BindChain#if if() methods that initialize bindings with
observable attributes and attach DOM listeners.
class SampleView extends View {
constructor( locale ) {
super( locale );
const bind = this.bindTemplate;
// These {@link module:utils/observablemixin~Observable observable} attributes will control
// the state of the view in DOM.
this.set( {
elementClass: 'foo',
isEnabled: true
} );
this.setTemplate( {
tag: 'p',
attributes: {
// The class HTML attribute will follow elementClass
// and isEnabled view attributes.
class: [
bind.to( 'elementClass' )
bind.if( 'isEnabled', 'present-when-enabled' )
]
},
on: {
// The view will fire the "clicked" event upon clicking <p> in DOM.
click: bind.to( 'clicked' )
}
} );
}
}
Closes all menus in the bar.
Creates a new collection of views, which can be used as module:ui/template~Template#children of this view.
class SampleView extends View {
constructor( locale ) {
super( locale );
const child = new ChildView( locale );
this.items = this.createCollection( [ child ] );
this.setTemplate( {
tag: 'p',
// `items` collection will render here.
children: this.items
} );
}
}
const view = new SampleView( locale );
view.render();
// It will append <p><child#element></p> to the <body>.
document.body.appendChild( view.element );
A new collection of view instances.
The opposite of #registerChild. Removes a child view from this view instance. Once removed, the child is no longer managed by its parent, e.g. it can safely become a child of another parent view.
Child views to be removed.
Recursively destroys the view instance and child views added by #registerChild and residing in collections created by the #createCollection.
Destruction disables all event listeners:
view.on( 'event', () => {} ),Disables all menus in the bar.
Enables all menus in the bar.
module:ui/template~Template.extend Extends the #template of the view with with given definition.
A shorthand for:
Template.extend( view.template, definition );
Note: Is requires the #template to be already set. See #setTemplate.
Definition which extends the #template.
A utility that expands a plain menu bar configuration into a structure of menus (also: sub-menus) and items using a given module:ui/componentfactory~ComponentFactory component factory.
See the module:core/editor/editorconfig~EditorConfig#menuBar menu bar in the editor configuration reference to learn how to configure the menu bar.
OptionalextraItems: (MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu)[]Focuses the menu bar.
Registers a new child view under the view instance. Once registered, a child view is managed by its parent, including #render rendering and #destroy destruction.
To revert this, use #deregisterChild.
class SampleView extends View {
constructor( locale ) {
super( locale );
this.childA = new SomeChildView( locale );
this.childB = new SomeChildView( locale );
this.setTemplate( { tag: 'p' } );
// Register the children.
this.registerChild( [ this.childA, this.childB ] );
}
render() {
super.render();
this.element.appendChild( this.childA.element );
this.element.appendChild( this.childB.element );
}
}
const view = new SampleView( locale );
view.render();
// Will append <p><childA#element><b></b><childB#element></p>.
document.body.appendChild( view.element );
Note: There's no need to add child views if they're already referenced in the #template:
class SampleView extends View {
constructor( locale ) {
super( locale );
this.childA = new SomeChildView( locale );
this.childB = new SomeChildView( locale );
this.setTemplate( {
tag: 'p',
// These children will be added automatically. There's no
// need to call {@link #registerChild} for any of them.
children: [ this.childA, this.childB ]
} );
}
// ...
}
Children views to be registered.
Registers a menu view in the menu bar. Every module:ui/menubar/menubarmenuview~MenuBarMenuView instance must be registered in the menu bar to be properly managed.
OptionalparentMenuView: MenuBarMenuViewRecursively renders the view.
Once the view is rendered:
true.Note: The children of the view:
In general, render() method is the right place to keep the code which refers to the
#element and should be executed at the very beginning of the view's life cycle.
It is possible to module:ui/template~Template.extend the #template before
the view is rendered. To allow an early customization of the view (e.g. by its parent),
such references should be done in render().
class SampleView extends View {
constructor() {
this.setTemplate( {
// ...
} );
},
render() {
// View#element becomes available.
super.render();
// The "scroll" listener depends on #element.
this.listenTo( window, 'scroll', () => {
// A reference to #element would render the #template and make it non-extendable.
if ( window.scrollY > 0 ) {
this.element.scrollLeft = 100;
} else {
this.element.scrollLeft = 0;
}
} );
}
}
const view = new SampleView();
// Let's customize the view before it gets rendered.
view.extendTemplate( {
attributes: {
class: [
'additional-class'
]
}
} );
// Late rendering allows customization of the view.
view.render();
Sets the #template of the view with with given definition.
A shorthand for:
view.setTemplate( definition );
Definition of view's template.
The application menu bar component. It brings a set of top-level menus (and sub-menus) that can be used to organize and access a large number of buttons.