Home

# Class goog.ui.Component

Default implementation of UI component.

extends goog.events.EventTarget

Instance Method Summary
| `addChild(?goog.ui.Component child, boolean= opt_render)` Adds the specified component as the last child of this component. See {@link goog.ui.Component#addChildAt} for detailed semantics.

`addChildAt(?goog.ui.Component child, number index, boolean= opt_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.

If {@code opt_render} is true and the parent component is not already in the document, {@code enterDocument} will not be called on this component at this point. Finally, this method also throws an error if the new child already has a different parent, or the given index is out of bounds.

| `canDecorate(?Element element) ⇒ boolean` Determines if a given element can be decorated by this type of component. This method should be overridden by inheriting objects.
| `createDom()` Creates the initial DOM representation for the component. The default implementation is to set this.element_ = div.
| `decorate(?Element element)` Decorates the element for the UI component.
| `decorateInternal(?Element 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.
| `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.
| `enterDocument()` Called when the component's element is known to be in the document. Anything using document.getElementById etc. should be done at this stage. If the component contains child components, this call is propagated to its children.
| `exitDocument()` Called by dispose to clean up the elements and listeners created by a component, or by a parent component/application who has removed the component from the document but wants to reuse it later. If the component contains child components, this call is propagated to its children. It should be possible for the component to be rendered again once this method has been called.
| `forEachChild(?Function f, ?Object= opt_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.
| `getChild(string id) ⇒ ?goog.ui.Component` Returns the child with the given ID, or null if no such child exists.
| `getChildAt(number index) ⇒ ?goog.ui.Component` Returns the child at the given index, or null if the index is out of bounds.
| `getChildCount() ⇒ number` Returns the number of children of this component.
| `getChildIds() ⇒ ?Array.<string>` Returns an array containing the IDs of the children of this component, or an empty array if the component has no children.
| `getContentElement() ⇒ ?Element` 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.
| `getDomHelper() ⇒ !goog.dom.DomHelper` Returns the dom helper that is being used on this component.
| `getElement() ⇒ ?Element` Gets the component's element.
| `getElementByClass(string className) ⇒ ?Element` Returns the first element in this component's DOM with the provided className.
| `getElementByFragment(string idFragment) ⇒ ?Element` Helper function for returning an element in the document with a unique id generated using makeId().
| `getElementsByClass(string className) ⇒ !goog.array.ArrayLike` Returns an array of all the elements in this component's DOM with the provided className.
| `getFragmentFromId(string id) ⇒ string` Helper function for returning the fragment portion of an id generated using makeId().
| `getHandler() ⇒ !goog.events.EventHandler` Returns the event handler for this component, lazily created the first time this method is called.
| `getId() ⇒ string` Gets the unique ID for the instance of this component. If the instance doesn't already have an ID, generates one on the fly.
| `getModel() ⇒ <Any Type>` Returns the model associated with the UI component.
| `getParent() ⇒ ?goog.ui.Component` Returns the component's parent, if any.
| `hasChildren() ⇒ boolean` Returns true if the component has children.
| `indexOfChild(?goog.ui.Component child) ⇒ number` Returns the 0-based index of the given child component, or -1 if no such child is found.
| `isInDocument() ⇒ boolean` Determines whether the component has been added to the document.
| `isRightToLeft() ⇒ boolean` 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.
| `makeId(string idFragment) ⇒ string` 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.
| `makeIds(?Object object) ⇒ ?Object` Makes a collection of ids. This is a convenience method for makeId. The object's values are the id fragments and the new values are the generated ids. The key will remain the same.

`removeChild((goog.ui.Component|null|string) child, boolean= opt_unrender) ⇒ ?goog.ui.Component`

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.

| `removeChildAt(number index, boolean= opt_unrender) ⇒ ?goog.ui.Component` 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.
| `removeChildren(boolean= opt_unrender)` Removes every child component attached to this one.

`render(?Element= opt_parentElement)`

Renders the component. If a parent element is supplied, 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. If this component has a parent component, and the parent component is not in the document already, then this will not call {@code enterDocument} on this component. Throws an Error if the component is already rendered.

| `renderBefore(?Node sibling)` Renders the component before another element. The other element should be in the document already. Throws an Error if the component is already rendered.

`render_(?Element= opt_parentElement, ?Node= opt_beforeNode)`

Renders the component. If a parent element is supplied, 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. If this component has a parent component, and the parent component is not in the document already, then this will not call {@code enterDocument} on this component. Throws an Error if the component is already rendered.

| `setElementInternal(?Element element)` Sets the component's root element to the given element. Considered protected and final. This should generally only be called during createDom. Setting the element does not actually change which element is rendered, only the element that is associated with this UI component.
| `setId(string 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.
| `setModel(<Any Type> obj)` Sets the model associated with the UI component.
| `setParent(?goog.ui.Component 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.
| `setParentEventTarget(?goog.events.EventTarget parent)` Overrides {@link goog.events.EventTarget#setParentEventTarget} to throw an error if the parent component is set, and the argument is not the parent.
| `setRightToLeft(boolean 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).
| `wasDecorated() ⇒ boolean`

Static Method Summary
| `getStateTransitionEvent(?goog.ui.Component.State state, boolean isEntering) ⇒ ?goog.ui.Component.EventType` Static helper method; returns the type of event components are expected to dispatch when transitioning to or from the given state.
| `setDefaultRightToLeft(?boolean rightToLeft)` Set the default right-to-left value. This causes all component's created from this point foward to have the given value. This is useful for cases where a given page is always in one directionality, avoiding unnecessary right to left determinations.