Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

WidgetParent RenderQueue (gallery-widget-parent-renderqueue) on cdn

Last Updated: 11/9/11

+ 0 -

Lee

YUI Contributor

See 3 more by this user.

Created: 11/9/11
Last CDN Push: 11/30/11
Build Tag: gallery-2011.11.30-20-58
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.1
Free for use.

Widgets with parent/child relationships (an accordion for example) can easily cause the browser to become unresponsive when adding many child widgets to an already rendered parent. The widget-parent-renderqueue plugin uses an async-queue to render child widgets allowing the browser to remain responsive.

Note: The plugin is added to the host object under the 'renderqueue' namespace however it has no public methods, it only modifies the default WidgetParent behavior. The async-queue contained in the plugin does fire events so the plugin adds the host widget as an event target. See the async-queue documentation for event details.

Simple use-case of adding child widgets after the parent is rendered.

Code Sample

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.11.30-20-58'
}).use('widget', 'widget-parent', 'widget-child', 'gallery-widget-parent-renderqueue', function(Y) {
    var Parent, Child;
 
    Parent = Y.Base.create('parentWidget', Y.Widget, [Y.WidgetParent], {
        // widget parent implementation code
    });
 
    Child = Y.Base.create('childWidget', Y.Widget, [Y.WidgetChild], {
        // widget child implementation code
    });
 
    var p = new Parent();
 
    // plug in the WidgetParentRenderQueue plugin
    p.plug(Y.Plugin.WidgetParentRenderQueue, {
        timeout: 20  //optional, defaults to 10ms.  you probably wont ever change this.
    });
 
    p.render();
 
    // any child widgets added after the parent is rendered will be rendered
    // asynchronously.  lets say we have 100 child widgets
    var children = [];
 
    for (var i = 0; i < 100; i++) {
        children.push(new Child());
    }
 
    // adding and rendering 100 child widgets at once would almost guarantee
    // the browser would become unresponsive, and very likely generate a
    // long running script error in IE.  With the plugin, both of those situations
    // are avoided.
    p.add(children);
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.11.30-20-58'
}).use('widget', 'widget-parent', 'widget-child', 'gallery-widget-parent-renderqueue', function(Y) {
    var Parent, Child;

Parent = Y.Base.create('parentWidget', Y.Widget, [Y.WidgetParent], {
        // widget parent implementation code
    });

Child = Y.Base.create('childWidget', Y.Widget, [Y.WidgetChild], {
        // widget child implementation code
    });

var p = new Parent();

// plug in the WidgetParentRenderQueue plugin
    p.plug(Y.Plugin.WidgetParentRenderQueue, {
        timeout: 20  //optional, defaults to 10ms.  you probably wont ever change this.
    });

p.render();

// any child widgets added after the parent is rendered will be rendered
    // asynchronously.  lets say we have 100 child widgets
    var children = [];

for (var i = 0; i < 100; i++) {
        children.push(new Child());
    }

// adding and rendering 100 child widgets at once would almost guarantee
    // the browser would become unresponsive, and very likely generate a
    // long running script error in IE.  With the plugin, both of those situations
    // are avoided.
    p.add(children);
});