Learn YUI3 – What is Widget in YUI3 and Know common Attributes and Interfaces in Widget

You may like to read before reading this.

This article is mostly scraped but shorten version of the article from the YUI article on Widget. I have published it here so that you read this before reading any widget related article on YUI. It will greatly enhance the understanding.

Widget is the foundation class from which all YUI 3 widgets are derived.

Widget class is provided to be extended by YUI widget developer. It provides common sets of methods and attributes. It helps in creating widget with know and common sets of methods and attributes. So, here we will learn about the functionalities and attributes we can hope to get in all YUI3 widgets.

Widget class extends Base class.

Widget's Class Attributes: Once knowing these attributes, it is easier to play with any Widget on YUI as all those widgets will extend this Widget Class.

AttributeDescription
boundingBoxThe widget's outermost node, used for sizing and positioning; this element can also serve as a containing node for any decorator elements used for skinning.
contentBoxA node that is a direct descendant of a widget's bounding box and houses its content. This will generally be the node that establishes the look and feel for the widget.
srcNodeAn existing node in the document provided by application developers when progressively enhancing existing markup to create the widget. By default, this resolves to the contentBox.
tabIndexThe tabIndex, applied to the bounding box.
focusedFlag, indicating if the widget currently has focus. Widget marks the bounding box with a "focused" class, but other than that the focus implementation is left to the specific widget class.
disabledFlag, indicating if the widget is disabled. Widget marks the bounding box with a "disabled" class, but other than that the disabled implementation is left to the specific widget class.
visibleFlag, indicating whether or not the widget is visible. Widget marks the bounding box with a "hidden" class. The hidden implementation is left to the CSS delivered by the specific widget class (viz. whether or not the widget uses visibility, display or off screen positioning to actually hide the widget).
heightString with units, or a number, representing the height of the widget. If a number is provided, the default unit, defined by Widget's DEF_UNIT, property is used. The height is applied to the bounding box.
widthString with units, or a number, representing the width of the widget. If a number is provided, the default unit, defined by Widget's DEF_UNIT, property is used. The width is applied to the bounding box.
stringsThe collection of strings used to label elements of the widget's UI.

Widget Class Methods:

Base Class which widget class extends provide init() and destroy() method. Widget class adds one more render() method. It render the html and add the html to DOM. Seperate render() method help in working on background on widget before it is visible to user.

init() method - It attributes for each class and call initializer method for the class. First Base class init() method is called then it moves up to the each subclass. init() method fires init event

destroy() - destroy() travels from subclass to Base class. It invokes the destructor() method.

render() - This method is not chained as init() and destroy(). This calls the renderer() method which in turn invokes renderUI(), bindUI(), and syncUI().

The render method accepts a parentNode argument, which can be used to specify an existing node in the document, where the widget should be appended, when rendered. If the widget's contentBox or boundingBox don't already exist in the document, and the parentNode argument is not provided, the widget is inserted as the first child of the document's body element (we insert as the default behavior, to avoid IE6 "Operation Aborted" errors).

To make Widgets progressively enhance so that user cannot see ugly html when CSS and Js are getting applied there, YUI has added few features. YUI3 seed file adds .yui3-js-enabled class to theelement. This helps widgets js to know whether Js is enabled or not. .yui3-widget-loading and .yui3-widgetName-loading CSS class is there to apply CSS on the Widget HTML while loading.

.yui3-js-enabled .yui3-widget-loading {
   display: none;
}
.yui3-js-enabled .yui3-overlay-loading {
   /* Hide overlay markup offscreen */
   position:absolute;
   top:-1000em;
   left:-1000em;
}

Widget's renderer will remove the "loading" class names from both the bounding box and content box once the widget is rendered, allowing the fully functional widget to be revealed.

Widget Markup: YUI3 provide consistent markup resulted from Widget. boundingBox and contentBox attribute. boundingBox is outer most div and contentBox is the content carrying div in Widget. boundingBox is used for functionality whereas contentBox is for content carrying div. boundingBox is not expected to have visual properties (border, padding, etc) applies to it. Class name used for state management (yui3-overlay-hidden, yui3-slider-enabled, etc) applies to boundingBox (outer box).

Detail about YUI3 Widget Class. Many of the properties used here are used on Overlay tutorial in previous post.