Yahoo! UI Library

widget  3.0.0

Yahoo! UI Library > widget > Widget
Search:
 
Filters

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

_afterFocusedChange

protected void _afterFocusedChange ( evt )
Default focused attribute state change handler
Parameters:
evt <EventFacade> The event facade for the attribute change

_afterHeightChange

protected void _afterHeightChange ( evt )
Default height attribute state change handler
Parameters:
evt <EventFacade> The event facade for the attribute change

_afterVisibleChange

protected void _afterVisibleChange ( evt )
Default visible attribute state change handler
Parameters:
evt <EventFacade> The event facade for the attribute change

_afterWidthChange

protected void _afterWidthChange ( evt )
Default widget attribute state change handler
Parameters:
evt <EventFacade> The event facade for the attribute change

_bindDOMListeners

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

_bindUI

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

_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

_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>

_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

_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

_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

_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.

_renderBoxClassNames

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

_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

_setBoundingBox

private _setBoundingBox ( Node/String )
Setter for the boundingBox attribute
Parameters:
Node/String <object>
Returns:
Node

_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>
Returns:
Node

_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

_syncUI

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

_uiSetDisabled

protected void _uiSetDisabled ( val )
Sets the disabled state for the UI
Parameters:
val <boolean>

_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.

_uiSetHeight

protected void _uiSetHeight ( val )
Sets the height on the widget's bounding box element
Parameters:
val <String | Number>

_uiSetTabIndex

protected void _uiSetTabIndex ( Number )
Set the tabIndex on the widget's rendered UI
Parameters:
Number <object>

_uiSetVisible

protected void _uiSetVisible ( val )
Sets the visible state for the UI
Parameters:
val <boolean>

_uiSetWidth

protected void _uiSetWidth ( val )
Sets the width on the widget's bounding box element
Parameters:
val <String | Number>

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.

blur

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

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.

disabled

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

enable

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

focus

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

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

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.

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.

hide

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

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

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.

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.

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.

show

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

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.

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.

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,

Classes

Files

Copyright © 2009 Yahoo! Inc. All rights reserved.