controlrenderer.js
No description.

File Location

/goog/ui/controlrenderer.js

Classes

goog.ui.ControlRenderer
Default renderer for goog.ui.Controls. Can be used as-is, but subclasses of Control will probably want to use renderers specifically tailored for them by extending this class. Controls that use renderers delegate one or more of the following API methods to the renderer:
  • createDom - renders the DOM for the component
  • canDecorate - determines whether an element can be decorated by the component
  • decorate - decorates an existing element with the component
  • setState - updates the appearance of the component based on its state
  • getContent - returns the component's content
  • setContent - sets the component's content
Controls are stateful; renderers, on the other hand, should be stateless and reusable.

Public Protected Private

Global Functions

goog.ui.ControlRenderer.getAriaStateForAriaRole_(elementattr) goog.a11y.aria.State
Returns the appropriate ARIA attribute based on ARIA role if the ARIA attribute is an ARIA state.
Arguments:
element : !Element
The element from which to get the ARIA role for matching ARIA state.
attr : goog.a11y.aria.State
The ARIA attribute to check to see if it can be applied to the given ARIA role.
Returns: goog.a11y.aria.State  An ARIA attribute that can be applied to the given ARIA role.
code »
goog.ui.ControlRenderer.getCustomRenderer&renderer.getCssClass() string
Returns the CSS class to be applied to the root element of components rendered using this renderer.
Returns: string  Renderer-specific CSS class.
code »
goog.ui.ControlRenderer.getCustomRenderer(ctorcssClassName) goog.ui.ControlRenderer
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 color palette:
var myCustomRenderer = goog.ui.ControlRenderer.getCustomRenderer(
    goog.ui.PaletteRenderer, 'my-special-palette');
var newColorPalette = new goog.ui.ColorPalette(
    colors, myCustomRenderer, opt_domHelper);
Your CSS can look like this now:
.my-special-palette { }
.my-special-palette-table { }
.my-special-palette-cell { }
etc.
instead of
.CSS_MY_SPECIAL_PALETTE .goog-palette { }
.CSS_MY_SPECIAL_PALETTE .goog-palette-table { }
.CSS_MY_SPECIAL_PALETTE .goog-palette-cell { }
etc.
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 are trying to create.
cssClassName : string
The name of the CSS class for this renderer.
Returns: goog.ui.ControlRenderer  An instance of the desired renderer with its getCssClass() method overridden to return the supplied custom CSS class name.
code »
goog.ui.ControlRenderer.getInstance()
No description.
code »
goog.ui.ControlRenderer.isAriaState_(attr) boolean
Determines if the given ARIA attribute is an ARIA property or ARIA state.
Arguments:
attr : goog.a11y.aria.State
The ARIA attribute to classify.
Returns: boolean  If the ARIA attribute is an ARIA state.
code »

Directory ui

File Reference