ui.Container Extends goog.ui.Component
Base class for containers. Extends {@link goog.ui.Component} by adding the following:
  • a {@link goog.events.KeyHandler}, to simplify keyboard handling,
  • a pluggable renderer framework, to simplify the creation of containers without the need to subclass this class,
  • methods to manage child controls hosted in the container,
  • default mouse and keyboard event handling methods.

Inheritance

Object
     goog.Disposable
          goog.events.EventTarget
               goog.ui.Component
                    goog.ui.Container

Constructor

goog.ui.Container(opt_orientationopt_rendereropt_domHelper)

Parameters

opt_orientation :
?goog.ui.Container.Orientation
Container orientation; defaults to {@code VERTICAL}.
opt_renderer :
Renderer used to render or decorate the container; defaults to {@link goog.ui.ContainerRenderer}.
opt_domHelper :
DOM helper, used for document interaction.

Instance Methods

Public Protected Private
addChild(childopt_render)
Adds the specified control as the last child of this container. See {@link goog.ui.Container#addChildAt} for detailed semantics.
Arguments:
child :
The new child control.
opt_render :
Whether the new child should be rendered immediately after being added (defaults to false).
code »
addChildAt(controlindexopt_render)
Adds the control as a child of this container at the given 0-based index. Overrides {@link goog.ui.Component#addChildAt} by also updating the container's highlight index. Since {@link goog.ui.Component#addChild} uses {@link #addChildAt} internally, we only need to override this method.
Arguments:
control :
New child.
index :
Index at which the new child is to be added.
opt_render :
Whether the new child should be rendered immediately after being added (defaults to false).
code »
canDecorate(element)
Returns true if the given element can be decorated by this container. Overrides {@link goog.ui.Component#canDecorate}.
Arguments:
element :
Element to decorate.
Returns:   True iff the element can be decorated.
code »
canHighlightItem(item)
Returns whether the given item can be highlighted.
Arguments:
item :
The item to check.
Returns:   Whether the item can be highlighted.
code »
createDom()
No description.
code »
decorateInternal(element)
Decorates the given element with this container. Overrides {@link goog.ui.Component#decorateInternal}. Considered protected.
Arguments:
element :
Element to decorate.
code »
disposeInternal()
No description.
code »
enableFocusHandling_(enable)
Sets up listening for events applicable to focusable containers.
Arguments:
enable :
Whether to enable or disable focus handling.
code »
enterDocument()
No description.
code »
exitDocument()
No description.
code »
getContentElement()
Returns the DOM element into which child components are to be rendered, or null if the container itself hasn't been rendered yet. Overrides {@link goog.ui.Component#getContentElement} by delegating to the renderer.
Returns:   Element to contain child elements (null if none).
code »
getHighlighted()
Returns the currently highlighted item (if any).
Returns:   Highlighted item (null if none).
code »
getHighlightedIndex()
Returns the index of the currently highlighted item (-1 if none).
Returns:   Index of the currently highlighted item.
code »
getKeyEventTarget()
Returns the DOM element on which the container is listening for keyboard events (null if none).
Returns:   Element on which the container is listening for key events.
code »
getKeyHandler()
Returns the keyboard event handler for this container, lazily created the first time this method is called. The keyboard event handler listens for keyboard events on the container's key event target, as determined by its renderer.
Returns:   Keyboard event handler for this container.
code »
getOrientation()
?goog.ui.Container.Orientation
Returns the container's orientation.
Returns: 
?goog.ui.Container.Orientation
  Container orientation.
code »
getOwnerControl(node)
Returns the child control that owns the given DOM node, or null if no such control is found.
Arguments:
node :
DOM node whose owner is to be returned.
Returns:   Control hosted in the container to which the node belongs (if found).
code »
getRenderer()
Returns the renderer used by this container to render itself or to decorate an existing element.
Returns:   Renderer used by the container.
code »
handleBlur(e)
Handles blur events raised when the container's key event target loses keyboard focus. The default implementation clears the highlight index.
Arguments:
e :
Blur event to handle.
code »
handleChildMouseEvents(e)
Handles mouse events originating from nodes belonging to the controls hosted in the container. Locates the child control based on the DOM node that dispatched the event, and forwards the event to the control for handling.
Arguments:
e :
Mouse event to handle.
code »
handleCloseItem(e)
Handles CLOSE events dispatched by items in the container when they are closed.
Arguments:
e :
Close event to handle.
code »
handleDocumentMouseUp(e)
Handles mouseup events over the document. The default implementation clears the "mouse button pressed" flag.
Arguments:
e :
Mouseup event to handle.
code »
handleEnterItem(e)
Handles ENTER events raised by child controls when they are navigated to.
Arguments:
e :
ENTER event to handle.
Returns:   Whether to prevent handleMouseOver from handling the event.
code »
handleFocus(e)
Handles focus events raised when the container's key event target receives keyboard focus.
Arguments:
e :
Focus event to handle.
code »
handleHighlightItem(e)
Handles HIGHLIGHT events dispatched by items in the container when they are highlighted.
Arguments:
e :
Highlight event to handle.
code »
handleKeyEvent(e)
Attempts to handle a keyboard event, if the control is enabled, by calling {@link handleKeyEventInternal}. Considered protected; should only be used within this package and by subclasses.
Arguments:
e :
Key event to handle.
Returns:   Whether the key event was handled.
code »
handleKeyEventInternal(e)
Attempts to handle a keyboard event; returns true if the event was handled, false otherwise. If the container is enabled, and a child is highlighted, calls the child control's {@code handleKeyEvent} method to give the control a chance to handle the event first.
Arguments:
e :
Key event to handle.
Returns:   Whether the event was handled by the container (or one of its children).
code »
handleMouseDown(e)
Handles mousedown events over the container. The default implementation sets the "mouse button pressed" flag and, if the container is focusable, grabs keyboard focus.
Arguments:
e :
Mousedown event to handle.
code »
handleOpenItem(e)
Handles OPEN events dispatched by items in the container when they are opened.
Arguments:
e :
Open event to handle.
code »
handleUnHighlightItem(e)
Handles UNHIGHLIGHT events dispatched by items in the container when they are unhighlighted.
Arguments:
e :
Unhighlight event to handle.
code »
highlightFirst()
No description.
code »
highlightHelper(fnstartIndex)
Helper function that manages the details of moving the highlight among child controls in response to keyboard events.
Arguments:
fn :
function(number, number) : number
Function that accepts the current and maximum indices, and returns the next index to check.
startIndex :
Start index.
Returns:   Whether the highlight has changed.
code »
highlightLast()
No description.
code »
highlightNext()
No description.
code »
highlightPrevious()
No description.
code »
isEnabled()
Returns true if the container is enabled, false otherwise.
Returns:   Whether the container is enabled.
code »
isFocusable()
Returns true if the container is focusable, false otherwise. The default is true. Focusable containers always have a tab index and allocate a key handler to handle keyboard events while focused.
Returns:   Whether the component is focusable.
code »
isFocusableChildrenAllowed()
Returns true if the container allows children to be focusable, false otherwise. Only effective if the container is not focusable.
Returns:   Whether children should be focusable.
code »
isMouseButtonPressed()
Returns true if the mouse button is pressed, false otherwise.
Returns:   Whether the mouse button is pressed.
code »
isVisible()
Returns true if the container's visibility is set to visible, false if it is set to hidden. A container that is set to hidden is guaranteed to be hidden from the user, but the reverse isn't necessarily true. A container may be set to visible but can otherwise be obscured by another element, rendered off-screen, or hidden using direct CSS manipulation.
Returns:   Whether the container is set to be visible.
code »
registerChildId_(child)
Creates a DOM ID for the child control and registers it to an internal hash table to be able to find it fast by id.
Arguments:
child :
The child control. Its root element has to be created yet.
code »
removeChild(controlopt_unrender)
Removes a child control. Overrides {@link goog.ui.Component#removeChild} by updating the highlight index. Since {@link goog.ui.Component#removeChildAt} uses {@link #removeChild} internally, we only need to override this method.
Arguments:
control :
The ID of the child to remove, or the control itself.
opt_unrender :
Whether to call {@code exitDocument} on the removed control, and detach its DOM from the document (defaults to false).
Returns:   The removed control, if any.
code »
setEnabled(enable)
Enables/disables the container based on the {@code enable} argument. Dispatches an {@code ENABLED} or {@code DISABLED} event prior to changing the container's state, which may be caught and canceled to prevent the container from changing state. Also enables/disables child controls.
Arguments:
enable :
Whether to enable or disable the container.
code »
setFocusable(focusable)
Sets whether the container is focusable. The default is true. Focusable containers always have a tab index and allocate a key handler to handle keyboard events while focused.
Arguments:
focusable :
Whether the component is to be focusable.
code »
setFocusableChildrenAllowed(focusable)
Sets whether the container allows children to be focusable, false otherwise. Only effective if the container is not focusable.
Arguments:
focusable :
Whether the children should be focusable.
code »
setHighlighted(item)
Highlights the given item if it exists and is a child of the container; otherwise un-highlights the currently highlighted item.
Arguments:
item :
Item to highlight.
code »
setHighlightedIndex(index)
Highlights the item at the given 0-based index (if any). If another item was previously highlighted, it is un-highlighted.
Arguments:
index :
Index of item to highlight (-1 removes the current highlight).
code »
setHighlightedIndexFromKeyEvent(index)
Helper method that sets the highlighted index to the given index in response to a keyboard event. The base class implementation simply calls the {@link #setHighlightedIndex} method, but subclasses can override this behavior as needed.
Arguments:
index :
Index of item to highlight.
code »
setKeyEventTarget(element)
Attaches an element on which to listen for key events.
Arguments:
element :
Element | undefined
The element to attach, or null/undefined to attach to the default element.
code »
setMouseButtonPressed(pressed)
Sets or clears the "mouse button pressed" flag.
Arguments:
pressed :
Whether the mouse button is presed.
code »
setOrientation(orientation)
Sets the container's orientation.
Arguments:
orientation :
goog.ui.Container.Orientation
Container orientation.
code »
setRenderer(renderer)
Registers the given renderer with the container. Changing renderers after the container has already been rendered or decorated is an error.
Arguments:
renderer :
Renderer used by the container.
code »
setVisible(visibleopt_force)
Shows or hides the container. Does nothing if the container already has the requested visibility. Otherwise, dispatches a SHOW or HIDE event as appropriate, giving listeners a chance to prevent the visibility change.
Arguments:
visible :
Whether to show or hide the container.
opt_force :
If true, doesn't check whether the container already has the requested visibility, and doesn't dispatch any events.
Returns:   Whether the visibility was changed.
code »
addChild(childopt_render)
Adds the specified component as the last child of this component. See {@link goog.ui.Component#addChildAt} for detailed semantics.
Arguments:
child :
The new child component.
opt_render :
If true, the child component will be rendered into the parent.
code »
addChildAt(childindexopt_render)
Adds the specified component as a child of this component at the given 0-based index. Both {@code addChild} and {@code addChildAt} assume the following contract between parent and child components:
  • the child component's element must be a descendant of the parent component's element, and
  • the DOM state of the child component must be consistent with the DOM state of the parent component (see {@code isInDocument}).
In particular, {@code parent.addChild(child)} will throw an error if the child component is already in the document, but the parent isn't. Clients of this API may call {@code addChild} and {@code addChildAt} with {@code opt_render} set to true. If {@code opt_render} is true, calling these methods will automatically render the child component's element into the parent component's element. However, {@code parent.addChild(child, true)} will throw an error if:
  • the parent component has no DOM (i.e. {@code parent.getElement()} is null), or
  • the child component is already in the document, regardless of the parent's DOM state.
Finally, this method also throws an error if the new child already has a different parent, or the given index is out of bounds.
Arguments:
child :
The new child component.
index :
0-based index at which the new child component is to be added; must be between 0 and the current child count (inclusive).
opt_render :
If true, the child component will be rendered into the parent.
code »
canDecorate(element)
Determines if a given element can be decorated by this type of component. This method should be overridden by inheriting objects.
Arguments:
element :
Element to decorate.
Returns:   True if the element can be decorated, false otherwise.
code »
createDom()
No description.
code »
decorate(element)
Decorates the element for the UI component.
Arguments:
element :
Element to decorate.
code »
decorateInternal(element)
Actually decorates the element. Should be overridden by inheriting objects. This method can assume there are checks to ensure the component has not already been rendered have occurred and that enter document will be called afterwards. This method is considered protected.
Arguments:
element :
Element to decorate.
code »
disposeInternal()
Disposes of the component. Calls {@code exitDocument}, which is expected to remove event handlers and clean up the component. Propagates the call to the component's children, if any. Removes the component's DOM from the document unless it was decorated.
code »
enterDocument()
No description.
code »
exitDocument()
No description.
code »
forEachChild(fopt_obj)
Calls the given function on each of this component's children in order. If {@code opt_obj} is provided, it will be used as the 'this' object in the function when called. The function should take two arguments: the child component and its 0-based index. The return value is ignored.
Arguments:
f :
The function to call for every child component; should take 2 arguments (the child and its index).
opt_obj :
Used as the 'this' object in f when called.
code »
getChild(id)
Returns the child with the given ID, or null if no such child exists.
Arguments:
id :
Child component ID.
Returns:   The child with the given ID; null if none.
code »
getChildAt(index)
Returns the child at the given index, or null if the index is out of bounds.
Arguments:
index :
0-based index.
Returns:   The child at the given index; null if none.
code »
getChildCount()
Returns the number of children of this component.
Returns:   The number of children.
code »
getChildIds()
Returns an array containing the IDs of the children of this component, or an empty array if the component has no children.
Returns:   Child component IDs.
code »
getContentElement()
Returns the DOM element into which child components are to be rendered, or null if the component itself hasn't been rendered yet. This default implementation returns the component's root element. Subclasses with complex DOM structures must override this method.
Returns:   Element to contain child elements (null if none).
code »
getDomHelper()
Returns the dom helper that is being used on this component.
Returns:   The dom helper used on this component.
code »
getElement()
Gets the component's element.
Returns:   The element for the component.
code »
getElementByFragment(idFragment)
Helper function for returning an element in the document with a unique id generated using makeId().
Arguments:
idFragment :
The partial id.
Returns:   The element with the unique id, or null if it cannot be found.
code »
getFragmentFromId(id)
Helper function for returning the fragment portion of an id generated using makeId().
Arguments:
id :
Id generated with makeId().
Returns:   Fragment.
code »
getHandler()
Returns the event handler for this component, lazily created the first time this method is called.
Returns:   Event handler for this component.
code »
getId()
Gets the unique ID for the instance of this component. If the instance doesn't already have an ID, generates one on the fly.
Returns:   Unique component ID.
code »
getModel()
*
Returns the model associated with the UI component.
Returns: 
*
  The model.
code »
getParent()
Returns the component's parent, if any.
Returns:   The parent component.
code »
hasChildren()
Returns true if the component has children.
Returns:   True if the component has children.
code »
indexOfChild(child)
Returns the 0-based index of the given child component, or -1 if no such child is found.
Arguments:
child :
The child component.
Returns:   0-based index of the child component; -1 if not found.
code »
isInDocument()
Determines whether the component has been added to the document.
Returns:   TRUE if rendered. Otherwise, FALSE.
code »
isRightToLeft()
Returns true if the component is rendered right-to-left, false otherwise. The first time this function is invoked, the right-to-left rendering property is set if it has not been already.
Returns:   Whether the control is rendered right-to-left.
code »
makeId(idFragment)
Helper function for subclasses that gets a unique id for a given fragment, this can be used by components to generate unique string ids for DOM elements
Arguments:
idFragment :
A partial id.
Returns:   Unique element id.
code »
removeChild(childopt_unrender)
Removes the given child from this component, and returns it. Throws an error if the argument is invalid or if the specified child isn't found in the parent component. The argument can either be a string (interpreted as the ID of the child component to remove) or the child component itself. If {@code opt_unrender} is true, calls {@link goog.ui.component#exitDocument} on the removed child, and subsequently detaches the child's DOM from the document. Otherwise it is the caller's responsibility to clean up the child component's DOM.
Arguments:
child :
The ID of the child to remove, or the child component itself.
opt_unrender :
If true, calls {@code exitDocument} on the removed child component, and detaches its DOM from the document.
Returns:   The removed component, if any.
code »
removeChildAt(indexopt_unrender)
Removes the child at the given index from this component, and returns it. Throws an error if the argument is out of bounds, or if the specified child isn't found in the parent. See {@link goog.ui.Component#removeChild} for detailed semantics.
Arguments:
index :
0-based index of the child to remove.
opt_unrender :
If true, calls {@code exitDocument} on the removed child component, and detaches its DOM from the document.
Returns:   The removed component, if any.
code »
removeChildren(opt_unrender)
Removes every child component attached to this one.
Arguments:
opt_unrender :
If true, calls {@link #exitDocument} on the removed child components, and detaches their DOM from the document.
code »
render(opt_parentElement)
Renders the component. If a parent element is supplied, it should already be in the document and then the component's element will be appended to it. If there is no optional parent element and the element doesn't have a parentNode then it will be appended to the document body. Throws an Error if the component is already rendered.
Arguments:
opt_parentElement :
Optional parent element to render the component into.
code »
renderBefore(siblingElement)
Renders the component before another element. The other element should be in the document already. Throws an Error if the component is already rendered.
Arguments:
siblingElement :
Element to render the component before.
code »
render_(opt_parentElementopt_beforeElement)
Renders the component. If a parent element is supplied, it should already be in the document and then the component's element will be appended to it. If there is no optional parent element and the element doesn't have a parentNode then it will be appended to the document body. Throws an Error if the component is already rendered.
Arguments:
opt_parentElement :
Optional parent element to render the component into.
opt_beforeElement :
Element before which the component is to be rendered. If left out the node is appended to the parent element.
code »
setElementInternal(element)
Sets the component's root element to the given element. Considered protected and final.
Arguments:
element :
Root element for the component.
code »
setId(id)
Assigns an ID to this component instance. It is the caller's responsibility to guarantee that the ID is unique. If the component is a child of a parent component, then the parent component's child index is updated to reflect the new ID; this may throw an error if the parent already has a child with an ID that conflicts with the new ID.
Arguments:
id :
Unique component ID.
code »
setModel(obj)
Sets the model associated with the UI component.
Arguments:
obj :
*
The model.
code »
setParent(parent)
Sets the parent of this component to use for event bubbling. Throws an error if the component already has a parent or if an attempt is made to add a component to itself as a child. Callers must use {@code removeChild} or {@code removeChildAt} to remove components from their containers before calling this method.
Arguments:
parent :
The parent component.
code »
setParentEventTarget(parent)
Overrides {@link goog.events.EventTarget#setParentEventTarget} to throw an error if the parent component is set, and the argument is not the parent.
Arguments:
parent :
Parent EventTarget (null if none).
code »
setRightToLeft(rightToLeft)
Set is right-to-left. This function should be used if the component needs to know the rendering direction during dom creation (i.e. before {@link #enterDocument} is called and is right-to-left is set).
Arguments:
rightToLeft :
Whether the component is rendered right-to-left.
code »
wasDecorated()
No description.
Returns:   Whether the component was decorated.
code »
addEventListener(typehandleropt_captureopt_handlerScope)
Adds an event listener to the event target. The same handler can only be added once per the type. Even if you add the same handler multiple times using the same type then it will only be called once when the event is dispatched. Supported for legacy but use goog.events.listen(src, type, handler) instead.
Arguments:
type :
The type of the event to listen for.
handler :
The function to handle the event. The handler can also be an object that implements the handleEvent method which takes the event object as argument.
opt_capture :
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope :
Object in whose scope to call the listener.
code »
dispatchEvent(e)
Dispatches an event (or event like object) and calls all listeners listening for events of this type. The type of the event is decided by the type property on the event object. If any of the listeners returns false OR calls preventDefault then this function will return false. If one of the capture listeners calls stopPropagation, then the bubble listeners won't fire.
Arguments:
e :
Event object.
Returns:   If anyone called preventDefault on the event object (or if any of the handlers returns false this will also return false.
code »
disposeInternal()
Unattach listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners, it should be something like this:
MyClass.prototype.disposeInternal = function() {
MyClass.superClass_.disposeInternal.call(this);
// Dispose logic for MyClass
};
code »
getParentEventTarget()
Returns the parent of this event target to use for bubbling.
Returns:   The parent EventTarget or null if there is no parent.
code »
removeEventListener(typehandleropt_captureopt_handlerScope)
Removes an event listener from the event target. The handler must be the same object as the one added. If the handler has not been added then nothing is done.
Arguments:
type :
The type of the event to listen for.
handler :
The function to handle the event. The handler can also be an object that implements the handleEvent method which takes the event object as argument.
opt_capture :
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope :
Object in whose scope to call the listener.
code »
setParentEventTarget(parent)
Sets the parent of this event target to use for bubbling.
Arguments:
parent :
Parent EventTarget (null if none).
code »
dispose()
No description.
code »
disposeInternal()
Deletes or nulls out any references to COM objects, DOM nodes, or other disposable objects. Classes that extend {@code goog.Disposable} should override this method. For example:
mypackage.MyClass = function() {
goog.Disposable.call(this);
// Constructor logic specific to MyClass.
...
};
goog.inherits(mypackage.MyClass, goog.Disposable);

mypackage.MyClass.prototype.disposeInternal = function() {
mypackage.MyClass.superClass_.disposeInternal.call(this);
// Dispose logic specific to MyClass.
...
};
code »
getDisposed()
No description.
Returns:   Whether the object has been disposed of.
code »
isDisposed()
No description.
Returns:   Whether the object has been disposed of.
code »

Instance Properties

allowFocusableChildren_ :
Whether focus of child componenets should be allowed. Only effective if focusable_ is set to false.
Code »
childElementIdMap_ :
Map of DOM IDs to child controls. Each key is the DOM ID of a child control's root element; each value is a reference to the child control itself. Used for looking up the child control corresponding to a DOM node in O(1) time.
Code »
enabled_ :
Whether the container is enabled and reacting to keyboard and mouse events. Defaults to true.
Code »
focusable_ :
Whether the container supports keyboard focus. Defaults to true. Focusable containers have a {@code tabIndex} and can be navigated to via the keyboard.
Code »
highlightedIndex_ :
The 0-based index of the currently highlighted control in the container (-1 if none).
Code »
keyHandler_ :
Keyboard event handler.
Code »
mouseButtonPressed_ :
Whether the mouse button is held down. Defaults to false. This flag is set when the user mouses down over the container, and remains set until they release the mouse button.
Code »
openItem_ :
The currently open (expanded) control in the container (null if none).
Code »
Renderer for the container. Defaults to {@link goog.ui.ContainerRenderer}.
Code »
visible_ :
Whether the container is set to be visible. Defaults to true.
Code »
childIndex_ :
Map of child component IDs to child components. Used for constant-time random access to child components by ID. Lazily initialized on first use. Must be kept in sync with {@code children_}. This property is strictly private and must not be accessed directly outside of this class! We use a plain Object, not a {@link goog.structs.Map}, for simplicity. This means components can't have children with IDs such as 'constructor' or 'valueOf', but this shouldn't really be an issue in practice, and if it is, we can always fix it later without changing the API.
Code »
children_ :
Array of child components. Lazily initialized on first use. Must be kept in sync with {@code childIndex_}. This property is strictly private and must not be accessed directly outside of this class!
Code »
DomHelper used to interact with the document, allowing components to be created in a different window.
Code »
element_ :
The DOM element for the component.
Code »
idGenerator_ :
Generator for unique IDs.
Code »
id_ :
Unique ID of the component, lazily initialized in {@link goog.ui.Component#getId} if needed. This property is strictly private and must not be accessed directly outside of this class!
Code »
inDocument_ :
Whether the component is in the document.
Code »
parent_ :
Parent component to which events will be propagated. This property is strictly private and must not be accessed directly outside of this class!
Code »
rightToLeft_ :
Whether the component is rendered right-to-left. Right-to-left is set lazily when {@link #isRightToLeft} is called the first time, unless it has been set by calling {@link #setRightToLeft} explicitly.
Code »
wasDecorated_ :
Flag used to keep track of whether a component decorated an already existing element or whether it created the DOM itself. If an element was decorated dispose will remove the node from the document, it is left up to the app.
Code »
customEvent_ :
Used to tell if an event is a real event in goog.events.listen() so we don't get listen() calling addEventListener() and vice-versa.
Code »
parentEventTarget_ :
Parent event target, used during event bubbling.
Code »
disposed_ :
Whether the object has been disposed of.
Code »

Package ui

Package Reference