controlrenderer.js
Base class for control renderers. TODO: If the renderer framework works well, pull it into Component.

File Location

ui/controlrenderer.js

Classes

goog.ui.ControlRenderer
Default renderer for {@link goog.ui.Control}s. 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:
  • {@code createDom} - renders the DOM for the component
  • {@code canDecorate} - determines whether an element can be decorated by the component
  • {@code decorate} - decorates an existing element with the component
  • {@code setState} - updates the appearance of the component based on its state
  • {@code getContent} - returns the component's content
  • {@code 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.getCustomRenderer(ctor, cssClassName) ⇒
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 »

Global Properties

goog.ui.ControlRenderer.CSS_CLASS :
string
Default CSS class to be applied to the root element of components rendered by this renderer.
Code »
goog.ui.ControlRenderer.IE6_CLASS_COMBINATIONS :
Array.<Array.<string>>
Array of arrays of CSS classes that we want composite classes added and removed for in IE6 and lower as a workaround for lack of multi-class CSS selector support. Subclasses that have accompanying CSS requiring this workaround should define their own static IE6_CLASS_COMBINATIONS constant and override getIe6ClassCombinations to return it. For example, if your stylesheet uses the selector .button.collapse-left (and is compiled to .button_collapse-left for the IE6 version of the stylesheet,) you should include ['button', 'collapse-left'] in this array and the class button_collapse-left will be applied to the root element whenever both button and collapse-left are applied individually. Members of each class name combination will be joined with underscores in the order that they're defined in the array. You should alphabetize them (for compatibility with the CSS compiler) unless you are doing something special.
Code »

Directory ui

File Reference