Home

# 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.

Instance Method Summary
| `canDecorate(?Element element) ⇒ boolean` Default implementation of {@code canDecorate}; returns true if the element is a DIV, false otherwise.
| `createDom(?goog.ui.Container container) ⇒ ?Element` 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.
| `decorate(?goog.ui.Container container, ?Element element) ⇒ ?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.
| `decorateChildren(?goog.ui.Container container, ?Element element, ?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.
| `enableTabIndex(?Element element, boolean enable)` Enables or disables the tab index of the element. Only elements with a valid tab index can receive focus.
| `getAriaRole() ⇒ (string|undefined)` Returns the ARIA role to be applied to the container. See http://wiki/Main/ARIA for more info.
| `getClassNames(?goog.ui.Container 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.
| `getContentElement(?Element element) ⇒ ?Element` Returns the DOM element into which child components are to be rendered, or null if the container hasn't been rendered yet.
| `getCssClass() ⇒ string` Returns the CSS class to be applied to the root element of containers rendered using this renderer.
| `getDecoratorForChild(?Element 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.
| `getDefaultOrientation() ⇒ ?goog.ui.Container.Orientation` Returns the default orientation of containers rendered or decorated by this renderer. The base class implementation returns {@code VERTICAL}.
| `getKeyEventTarget(?goog.ui.Container container) ⇒ ?Element` 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.
| `initializeDom(?goog.ui.Container container)` Initializes the container's DOM when the container enters the document. Called from {@link goog.ui.Container#enterDocument}.
| `setStateFromClassName(?goog.ui.Container container, string className, string 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.

Static Method Summary

`getCustomRenderer(?Function ctor, string cssClassName) ⇒ ?goog.ui.ContainerRenderer`

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.