ContainerRenderer (Closure Library API Documentation

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

Arguments:

element :

Element to decorate.

Returns:

Whether the renderer can decorate the element.

code »

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.

Arguments:

container :

Container to render.

Returns:

Root element for the container.

code »

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.

Arguments:

container :

Container to decorate the element.

element :

Element to decorate.

Returns:

Decorated element.

code »

decorateChildren(container, element)

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.

Arguments:

container :

Container whose children are to be discovered.

element :

Element whose children are to be decorated.

code »

enableTabIndex(element, enable)

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

Arguments:

element :

Element whose tab index is to be changed.

enable :

Whether to add or remove the element's tab index.

code »

getAriaRole() ⇒

undefined | string

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

Returns:

undefined | string

ARIA role.

code »

getClassNames(container) ⇒

Array.<string>

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.

Arguments:

container :

Container whose CSS classes are to be returned.

Returns:

Array.<string>

Array of CSS class names applicable to the container.

code »

getContentElement(element) ⇒

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

Arguments:

element :

Root element of the container whose content element is to be returned.

Returns:

Element to contain child elements (null if none).

code »

getCssClass() ⇒

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

Returns:

Renderer-specific CSS class.

code »

getDecoratorForChild(element) ⇒

?goog.ui.Control

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.

Arguments:

element :

Element to decorate.

Returns:

?goog.ui.Control

A new control suitable to decorate the element (null if none).

code »

getDefaultOrientation() ⇒

goog.ui.Container.Orientation

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.

code »

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.

Arguments:

container :

Container whose key event target is to be returned.

Returns:

Key event target (null if none).

code »

hasTabIndex(element) ⇒

Returns true if the element has a valid tab index (defined as >= 0), false otherwise. Only elements with a valid tab index can receive focus.

Arguments:

element :

Element to check.

Returns:

Whether the element has a tab index.

code »

initializeDom(container)

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

Arguments:

container :

Container whose DOM is to be initialized as it enters the document.

code »

setStateFromClassName(container, className, baseClass)

Sets the container's state based on the given CSS class name, encountered during decoration. CSS class names that don't represent container states are ignored. Considered protected; subclasses should override this method to support more states and CSS class names.

Arguments:

container :

Container to update.

className :

CSS class name.

baseClass :

goog.ui.ContainerRenderer

Base class name used as the root of state-specific class names (typically the renderer's own class name).

code »

Static Methods

goog.ui.ContainerRenderer.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.

Arguments:

ctor :

Function

The constructor of the renderer you want to create.

cssClassName :