# Yahoo! UI Library

### widget 3.0.0b1

Yahoo! UI Library > widget > Widget
Search:
Filters Show Private Show Protected Show Deprecated

## Class Widget - extends Base

Known Subclasses:
  Console Overlay Slider

A base class for widgets, providing:

- The render lifecycle method, in addition to the init and destroy lifecycle methods provide by Base
- Abstract methods to support consistent MVC structure across widgets: renderer, renderUI, bindUI, syncUI
- Support for common widget attributes, such as boundingBox, contentBox, visible, disabled, focused, strings

### Constructor

Widget `( config )`

Parameters:
  `config <Object>` Object literal specifying widget configuration properties.

### Properties

#### _buildCfg - `private static final Object`

The build configuration for the Widget class.

Defines the static fields which need to be aggregated, when this class is used as the main class passed to the Base.build method.

#### _strings - `private Object`

Private stings hash, used to store strings in locale specific buckets.

#### BOUNDING_TEMPLATE - `String`

Static property defining the markup template for bounding box.

#### CONTENT_TEMPLATE - `String`

Static property defining the markup template for content box.

#### DEF_UNIT - `object`

Default unit to use for dimension values

#### Widget._NAME_LOWERCASE - `private static object`

Cached lowercase version of Widget.NAME

#### Widget.ATTRS - `static Object`

Static property used to define the default attribute configuration for the Widget.

#### Widget.HTML_PARSER - `static Object`

Object hash, defining how attribute values are to be parsed from markup contained in the widget's content box. e.g.:

    {
    // Set single Node references using selector syntax
    // (selector is run through node.query)
    titleNode: "span.yui-title",
    // Set NodeList references using selector syntax
    // (array indicates selector is to be run through node.queryAll)
    listNodes: ["li.yui-item"],
    // Set other attribute types, using a parse function.
    // Context is set to the widget instance.
    label: function(contentBox) {
    return contentBox.query("span.title").get("innerHTML");
    }
    }

#### Widget.NAME - `static String`

Static property provides a string to identify the class.

Currently used to apply class identifiers to the bounding box and to classify events fired by the widget.

#### Widget.UI_SRC - `static final String`

Constant used to identify state changes originating from the DOM (as opposed to the JavaScript model).

#### WRAP_STYLES - `Object`

Static property listing the styles that are mimiced on the bounding box from the content box.

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

### Methods

#### _afterDisabledChange

`protected void _afterDisabledChange ( evt )`
Default disabled attribute state change handler

Parameters:
  `evt <EventFacade>` The event facade for the attribute change

Returns: `void`

#### _afterFocusedChange

`protected void _afterFocusedChange ( evt )`
Default focused attribute state change handler

Parameters:
  `evt <EventFacade>` The event facade for the attribute change

Returns: `void`

#### _afterHeightChange

`protected void _afterHeightChange ( evt )`
Default height attribute state change handler

Parameters:
  `evt <EventFacade>` The event facade for the attribute change

Returns: `void`

#### _afterVisibleChange

`protected void _afterVisibleChange ( evt )`
Default visible attribute state change handler

Parameters:
  `evt <EventFacade>` The event facade for the attribute change

Returns: `void`

#### _afterWidthChange

`protected void _afterWidthChange ( evt )`
Default widget attribute state change handler

Parameters:
  `evt <EventFacade>` The event facade for the attribute change

Returns: `void`

#### _bindDOMListeners

`protected void _bindDOMListeners ( )`
Sets up DOM listeners, on elements rendered by the widget.

Returns: `void`

#### _bindUI

`protected void _bindUI ( )`
Sets up DOM and CustomEvent listeners for the widget.

Returns: `void`

#### _defRenderFn

`protected void _defRenderFn ( e , parentNode )`
Default render handler

Parameters:
  `e <EventFacade>` The Event object
  `parentNode <Node>` The parent node to render to, if passed in to the `render` method

Returns: `void`

#### _getHtmlParser

`Object _getHtmlParser ( )`
Gets the HTML_PARSER definition for this instance, by merging HTML_PARSER definitions across the class hierarchy.

Returns: `Object`
  HTML_PARSER definition for this instance

#### _getStrings

`protected void _getStrings ( locale )`
Returns the strings key/value hash for a paricular locale, without locale lookup applied.

Parameters:
  `locale <Object>`

Returns: `void`

#### _moveStyles

`private void _moveStyles ( nodeFrom , nodeTo )`
Moves a pre-defined set of style rules (WRAP_STYLES) from one node to another.

Parameters:
  `nodeFrom <Node>` The node to gather the styles from
  `nodeTo <Node>` The node to apply the styles to

Returns: `void`

#### _onDocMouseDown

`protected void _onDocMouseDown ( evt )`
"mousedown" event handler for the owner document of the widget's bounding box.

Parameters:
  `evt <EventFacade>` The event facade for the DOM focus event

Returns: `void`

#### _onFocus

`protected void _onFocus ( evt )`
DOM focus event handler, used to sync the state of the Widget with the DOM

Parameters:
  `evt <EventFacade>` The event facade for the DOM focus event

Returns: `void`

#### _parseHTML

`private Object _parseHTML ( node )`
Utilitity method used to apply the `HTML_PARSER` configuration for the instance, to retrieve config data values.

Parameters:
  `node <Node>` Root node to use to parse markup for configuration data

Returns: `Object`
  config configuration object, with values found in the HTML, populated

#### _renderBox

`private void _renderBox ( parentNode )`
Helper method to collect the boundingBox and contentBox, set styles and append to the provided parentNode, if not already a child. The owner document of the boundingBox, or the owner document of the contentBox will be used as the document into which the Widget is rendered if a parentNode is node is not provided. If both the boundingBox and the contentBox are not currently in the document, and no parentNode is provided, the widget will be rendered to the current document's body.

Parameters:
  `parentNode <Node>` The parentNode to render the widget to. If not provided, and both the boundingBox and the contentBox are not currently in the document, the widget will be rendered to the current document's body.

Returns: `void`

#### _renderBoxClassNames

`protected void _renderBoxClassNames ( )`
Applies standard class names to the boundingBox and contentBox

Returns: `void`

#### _renderUI

`protected void _renderUI ( The )`
Initializes the UI state for the Widget's bounding/content boxes.

Parameters:
  `The <Node>` parent node to rendering the widget into

Returns: `void`

#### _setBoundingBox

`private _setBoundingBox ( Node/String )`
Setter for the boundingBox attribute

Parameters:
  `Node/String <object>`

#### _setBox

`private Node _setBox ( node , template )`
Helper method to set the bounding/content box, or create it from the provided template if not found.

Parameters:
  `node <Node|String>` The node reference
  `template <String>` HTML string template for the node

Returns: `Node`
  The node

#### _setContentBox

`private _setContentBox ( node )`
Setter for the contentBox attribute

Parameters:
  `node <Node|String>`

#### _setStrings

`protected void _setStrings ( strings , locale )`
Sets strings for a particular locale, merging with any existing strings which may already be defined for the locale.

Parameters:
  `strings <Object>` The hash of string key/values to set
  `locale <Object>` The locale for the string values being set

Returns: `void`

#### _syncUI

`protected void _syncUI ( )`
Updates the widget UI to reflect the attribute state.

Returns: `void`

#### _uiSetDisabled

`protected void _uiSetDisabled ( val )`
Sets the disabled state for the UI

Parameters:
  `val <boolean>`

Returns: `void`

#### _uiSetFocused

`protected void _uiSetFocused ( val , src )`
Sets the focused state for the UI

Parameters:
  `val <boolean>`
  `src <string>` String representing the source that triggered an update to the UI.

Returns: `void`

#### _uiSetHeight

`protected void _uiSetHeight ( val )`
Sets the height on the widget's bounding box element

Parameters:
  `val <String | Number>`

Returns: `void`

#### _uiSetTabIndex

`protected void _uiSetTabIndex ( Number )`
Set the tabIndex on the widget's rendered UI

Parameters:
  `Number <object>`

Returns: `void`

#### _uiSetVisible

`protected void _uiSetVisible ( val )`
Sets the visible state for the UI

Parameters:
  `val <boolean>`

Returns: `void`

#### _uiSetWidth

`protected void _uiSetWidth ( val )`
Sets the width on the widget's bounding box element

Parameters:
  `val <String | Number>`

Returns: `void`

#### bindUI

`protected void bindUI ( )`
Configures/Sets up listeners to bind Widget State to UI/DOM This method is not called by framework and is not chained automatically for the class hierarchy.

Returns: `void`

#### blur

`void blur ( )`
Causes the Widget to lose focus by setting the "focused" attribute to "false"

Returns: `void`

#### destructor

`protected void destructor ( )`
Descructor lifecycle implementation for the Widget class. Purges events attached to the bounding box (and all child nodes) and removes the Widget from the list of registered widgets.

Returns: `void`

#### disabled

`void disabled ( )`
Set the Widget's "disabled" attribute to "true".

Returns: `void`

#### enable

`void enable ( )`
Set the Widget's "disabled" attribute to "false".

Returns: `void`

#### focus

`void focus ( )`
Causes the Widget to receive the focus by setting the "focused" attribute to "true".

Returns: `void`

#### getClassName

`void getClassName ( args* )`
Generate a standard prefixed classname for the Widget, prefixed by the default prefix defined by the `Y.config.classNamePrefix` attribute used by `ClassNameManager` and `Widget.NAME.toLowerCase()` (e.g. "yui-widget-xxxxx-yyyyy", based on default values for the prefix and widget class name).

The instance based version of this method can be used to generate standard prefixed classnames, based on the instances NAME, as opposed to Widget.NAME. This method should be used when you need to use a constant class name across different types instances.

Parameters:
  `args* <String*>` 0..n strings which should be concatenated, using the default separator defined by ClassNameManager, to create the class name

Returns: `void`

#### getDefaultLocale

`String getDefaultLocale ( )`
Returns the default locale for the widget (the locale value defined by the widget class, or provided by the user during construction).

Returns: `String`
  The default locale for the widget

#### getString

`void getString ( key , locale )`
Gets the string for a particular key, for a particular locale, performing locale lookup.

If no values if defined for the key, for the given locale, the value for the default locale (in initial locale set for the class) is returned.

Parameters:
  `key <String>` The key.
  `locale <String>` (optional) The locale for which the string value is required. Defaults to the current locale, if not provided.

Returns: `void`

#### getStrings

`void getStrings ( locale )`
Gets the entire strings hash for a particular locale, performing locale lookup.

If no values of the key are defined for a particular locale the value for the default locale (in initial locale set for the class) is returned.

Parameters:
  `locale <String>` (optional) The locale for which the string value is required. Defaults to the current locale, if not provided.

Returns: `void`

#### hide

`void hide ( )`
Shows the Module element by setting the "visible" attribute to "false".

Returns: `void`

#### initializer

`protected void initializer ( config )`
Initializer lifecycle implementation for the Widget class. Registers the widget instance, and runs through the Widget's HTML_PARSER definition.

Parameters:
  `config <Object>` Configuration object literal for the widget

Returns: `void`

#### render

`final void render ( parentNode )`
Establishes the initial DOM for the widget. Invoking this method will lead to the creating of all DOM elements for the widget (or the manipulation of existing DOM elements for the progressive enhancement use case).

This method should only be invoked once for an initialized widget.

It delegates to the widget specific renderer method to do the actual work.

Parameters:
  `parentNode <Object | String>` Optional. The Node under which the Widget is to be rendered. This can be a Node instance or a CSS selector string.

  If the selector string returns more than one Node, the first node will be used as the parentNode. NOTE: This argument is required if both the boundingBox and contentBox are not currently in the document. If it's not provided, the Widget will be rendered to the body of the current document in this case.

Returns: `void`

Chainable: This method is chainable.

#### renderer

`protected void renderer ( )`
Creates DOM (or manipulates DOM for progressive enhancement) This method is invoked by render() and is not chained automatically for the class hierarchy (like initializer, destructor) so it should be chained manually for subclasses if required.

Returns: `void`

#### renderUI

`protected void renderUI ( )`
Adds nodes to the DOM This method is not called by framework and is not chained automatically for the class hierarchy.

Returns: `void`

#### show

`void show ( )`
Shows the Module element by setting the "visible" attribute to "true".

Returns: `void`

#### syncUI

`void syncUI ( )`
Refreshes the rendered UI, based on Widget State This method is not called by framework and is not chained automatically for the class hierarchy.

Returns: `void`

#### toString

`String toString ( )`
Generic toString implementation for all widgets.

Returns: `String`
  The default string value for the widget [ displays the NAME of the instance, and the unique id ]

#### Widget.getByNode

`static Widget Widget.getByNode ( node )`
Returns the widget instance whose bounding box contains, or is, the given node.

In the case of nested widgets, the nearest bounding box ancestor is used to return the widget instance.

Parameters:
  `node <Node | String>` The node for which to return a Widget instance. If a selector string is passed in, which selects more than one node, the first node found is used.

Returns: `Widget`
  Widget instance, or null if not found.

#### Methods inherited from EventTarget:

`_getType, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, on, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttrInitVal, _isLazyAttr, _set, _setAttr, _setAttrVal, _splitAttrVals, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, _plug, _unplug, hasPlugin, plug, unplug`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, destroy, init, toString`

### Events

#### boundingBoxChange

`boundingBoxChange ( event )`
Fires when the value for the configuration attribute 'boundingBox' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### contentBoxChange

`contentBoxChange ( event )`
Fires when the value for the configuration attribute 'contentBox' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### disabledChange

`disabledChange ( event )`
Fires when the value for the configuration attribute 'disabled' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### focusedChange

`focusedChange ( event )`
Fires when the value for the configuration attribute 'focused' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### heightChange

`heightChange ( event )`
Fires when the value for the configuration attribute 'height' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### localeChange

`localeChange ( event )`
Fires when the value for the configuration attribute 'locale' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### moveStylesChange

`moveStylesChange ( event )`
Fires when the value for the configuration attribute 'moveStyles' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### renderedChange

`renderedChange ( event )`
Fires when the value for the configuration attribute 'rendered' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### stringsChange

`stringsChange ( event )`
Fires when the value for the configuration attribute 'strings' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### tabIndexChange

`tabIndexChange ( event )`
Fires when the value for the configuration attribute 'tabIndex' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### visibleChange

`visibleChange ( event )`
Fires when the value for the configuration attribute 'visible' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### widget:contentUpdate

`widget:contentUpdate ( e )`
Notification event, which widget implementations can fire, when they change the content of the widget. This event has no default behavior and cannot be prevented, so the "on" or "after" moments are effectively equivalent (with on listeners being invoked before after listeners).

Parameters:
  `e <EventFacade>` The Event Facade

Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is false.

#### widget:render

`widget:render ( e )`
Lifcyle event for the render phase, fired prior to rendering the UI for the widget (prior to invoking the widgets renderer method).

Subscribers to the "on" moment of this event, will be notified before the widget is rendered.

Subscribers to the "after" momemt of this event, will be notified after rendering is complete.

Parameters:
  `e <EventFacade>` The Event Facade

Preventable: This event is preventable by method e.preventDefault(). The default function executed by this event is _defRenderFn.

#### widthChange

`widthChange ( event )`
Fires when the value for the configuration attribute 'width' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### boundingBox `- Node`

The outermost DOM node for the Widget, used for sizing and positioning of a Widget as well as a containing element for any decorator elements used for skinning.

#### contentBox `- Node`

A DOM node that is a direct descendent of a Widget's bounding box that houses its content.

#### disabled `- boolean`

Boolean indicating if the Widget should be disabled. The disabled implementation is left to the specific classes extending widget.
Default Value: false

#### focused `- boolean`

Boolean indicating if the Widget, or one of its descendants, has focus.
Default Value: false

#### height `- {String | Number}`

String with units, or number, representing the height of the Widget. If a number is provided, the default unit, defined by the Widgets DEF_UNIT, property is used.
Default Value: ""

#### locale `- String`

The default locale for the widget. NOTE: Using get/set on the "strings" attribute will return/set strings for this locale.
Default Value: "en"

#### moveStyles `- boolean`

Flag defining whether or not style properties from the content box should be moved to the bounding box when wrapped (as defined by the WRAP_STYLES property)
Default Value: false

#### rendered `- boolean`

Flag indicating whether or not this object has been through the render lifecycle phase.
Default Value: false

#### strings `- Object`

Collection of strings used to label elements of the Widget's UI.
Default Value: null

#### tabIndex `- Number`

Number (between -32767 to 32767) indicating the widget's position in the default tab flow. The value is used to set the "tabIndex" attribute on the widget's bounding box. Negative values allow the widget to receive DOM focus programmatically (by calling the focus method), while being removed from the default tab flow. A value of null removes the "tabIndex" attribute from the widget's bounding box.
Default Value: null

#### visible `- boolean`

Boolean indicating weather or not the Widget is visible.
Default Value: true

#### width `- {String | Number}`

String with units, or number, representing the width of the Widget. If a number is provided, the default unit, defined by the Widgets DEF_UNIT, property is used.
Default Value: ""

#### Configuration attributes inherited from Base:

`destroyed, initialized,`

Copyright © 2009 Yahoo! Inc. All rights reserved.