The goog.ui.ContainerRenderer Class

goog.ui.ContainerRenderer()

Default renderer for {@link goog.ui.Container}. Can be used as-is, but subclasses of Container will probably want to use renderers specifically tailored for them by extending this class.

.CSS_CLASS {string}

Default CSS class to be applied to the root element of containers rendered by this renderer.

.canDecorate(element)

Default implementation of {@code canDecorate}; returns true if the element is a DIV, false otherwise.

element {Element}
Element to decorate.
returns {boolean}
Whether the renderer can decorate the element.

.createDom(container)

Creates and returns the container's root element. The default simply creates a DIV and applies the renderer's own CSS class name to it. To be overridden in subclasses.

container {goog.ui.Container}
Container to render.
returns {Element}
Root element for the container.

.decorate(container, element)

Default implementation of {@code decorate} for {@link goog.ui.Container}s. Decorates the element with the container, and attempts to decorate its child elements. Returns the decorated element.

container {goog.ui.Container}
Container to decorate the element.
element {Element}
Element to decorate.
returns {Element}
Decorated element.

.decorateChildren(container, element, opt_firstChild)

Takes a container and an element that may contain child elements, decorates the child elements, and adds the corresponding components to the container as child components. Any non-element child nodes (e.g. empty text nodes introduced by line breaks in the HTML source) are removed from the element.

container {goog.ui.Container}
Container whose children are to be discovered.
element {Element}
Element whose children are to be decorated.
opt_firstChild {Element=}
the first child to be decorated.
@suppress
{visibility} setElementInternal

.enableTabIndex(element, enable)

Enables or disables the tab index of the element. Only elements with a valid tab index can receive focus.

element {Element}
Element whose tab index is to be changed.
enable {boolean}
Whether to add or remove the element's tab index.

.getAriaRole()

Returns the ARIA role to be applied to the container. See http://wiki/Main/ARIA for more info.

returns {undefined|string}
ARIA role.

.getClassNames(container)

Returns all CSS class names applicable to the given container, based on its state. The array of class names returned includes the renderer's own CSS class, followed by a CSS class indicating the container's orientation, followed by any state-specific CSS classes.

container {goog.ui.Container}
Container whose CSS classes are to be returned.
returns {Array.<string>}
Array of CSS class names applicable to the container.

.getContentElement(element)

Returns the DOM element into which child components are to be rendered, or null if the container hasn't been rendered yet.

element {Element}
Root element of the container whose content element is to be returned.
returns {Element}
Element to contain child elements (null if none).

.getCssClass()

Returns the CSS class to be applied to the root element of containers rendered using this renderer.

returns {string}
Renderer-specific CSS class.

.getCustomRenderer(ctor, cssClassName)

Constructs a new renderer and sets the CSS class that the renderer will use as the base CSS class to apply to all elements rendered by that renderer. An example to use this function using a menu is:

 var myCustomRenderer = goog.ui.ContainerRenderer.getCustomRenderer(
     goog.ui.MenuRenderer, 'my-special-menu');
 var newMenu = new goog.ui.Menu(opt_domHelper, myCustomRenderer);
 
Your styles for the menu can now be:
 .my-special-menu { }
 
instead of
 .CSS_MY_SPECIAL_MENU .goog-menu { }
 
You would want to use this functionality when you want an instance of a component to have specific styles different than the other components of the same type in your application. This avoids using descendant selectors to apply the specific styles to this component.
ctor {Function}
The constructor of the renderer you want to create.
cssClassName {string}
The name of the CSS class for this renderer.
returns {goog.ui.ContainerRenderer}
An instance of the desired renderer with its getCssClass() method overridden to return the supplied custom CSS class name.

.getDecoratorForChild(element)

Inspects the element, and creates an instance of {@link goog.ui.Control} or an appropriate subclass best suited to decorate it. Returns the control (or null if no suitable class was found). This default implementation uses the element's CSS class to find the appropriate control class to instantiate. May be overridden in subclasses.

element {Element}
Element to decorate.
returns {goog.ui.Control?}
A new control suitable to decorate the element (null if none).

.getDefaultOrientation()

Returns the default orientation of containers rendered or decorated by this renderer. The base class implementation returns {@code VERTICAL}.

returns {goog.ui.Container.Orientation}
Default orientation for containers created or decorated by this renderer.

.getKeyEventTarget(container)

Returns the element within the container's DOM that should receive keyboard focus (null if none). The default implementation returns the container's root element.

container {goog.ui.Container}
Container whose key event target is to be returned.
returns {Element}
Key event target (null if none).

.initializeDom(container)

Initializes the container's DOM when the container enters the document. Called from {@link goog.ui.Container#enterDocument}.

container {goog.ui.Container}
Container whose DOM is to be initialized as it enters the document.