Gallery
Documentation
Tag Cloud
Eric Ferraiuolo
YUI Developer
Last CDN Push: 05/4/11
Build Tag: gallery-2011.05.04-20-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.
A Y.Base Extension that manages a pre-defined set of components that make up your page, allowing their dependencies to fetched lazily and instantiation on-demand. Useful when you don't need certain components to be ready and loaded on page-load, but only when the user has taken some action.
Component developers should find this module to be a cross between ATTRS and Y.use. Your components are defined statically (like ATTRS) by specifying an object literal for each component with 'requires' and 'initializer' properties.
MyBaseSubclass.COMPONENTS = {
myFancyOverlay : {
requires : ['overlay', 'gallery-overlay-extras'],
initializer : '_initMyFancyOverlay'
}
};
Somewhere else in your code you can 'use' your defined components; their dependencies will be loaded (if they aren't already) and your initializer function will be called (if the component isn't already initialized), a fully-initialized, ready-to-use instance of your component will be returned to you.
Y.one('#show-overlay').on('click', Y.bind(function(e){
this.useComponent('myFancyOverlay', function(overlay){
overlay.show();
});
}, this));
A good discussion in the Forums on [http://yuilibrary.com/forum/viewtopic.php?p=13960#p13960 Uses Cases for Component Manager]
I created a Class, MyPage, which extends Y.Base. MyPage will manage two components, myOverlay and mySlider in my example page. The UI for the example page is such that the widgets are only displayed after some user action, which is Component Manager's sweet spot. I can hold off creating instances of the widgets until they are first needed, and I can even hold off on loading their dependencies. This way my example page is loaded and ready to go as quickly as possible.
Code Sample
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>YUI.add('mypage', function(Y){
function MyPage (config) {
MyPage.superclass.constructor.apply(this, arguments);
}
Y.extend(MyPage, Y.Base, {
// *** Prototype *** //
initializer : function (config) {
// When #foo is clicked, 'use' the myOverlay component and show the Overlay.
Y.one('#foo').on('click', function(e){
this.useComponent('mySlider', function(mySlider){
// mySlider component had it's dependencies lazily loaded.
// mySlider component was lazily initialized.
// the instance returned by the initializer is cached,
// repeated calls just quickly return the instance to the callback.
mySlider.set('value', 400);
});
}, this);
// When #bar is clicked, 'use' both the myOverlay and mySlider components.
Y.one('#bar').on('click', function(e){
this.useComponent('myOverlay', 'mySlider', function(myOverlay, mySlider){
// if mySlider or myOverlay have not been initialized, then it will be by now.
myOverlay.show();
mySlider.set('value', 200);
});
}, this);
// BaseComponentManager publishes an initComponents event.
// This can be subscribed to during the initialization lifecycle stage.
// Components can be added to the set (array) which should be eagerly initialized.
// Under certain circumstances a component needs to be ready and used right away,
// like an element being present in the DOM.
this.on('initComponents', function(e){
// If #baz exists on the page, eagerly init the myOverlay component
if (Y.one('#baz')) {
e.componentsToInit.push('myOverlay');
}
});
},
_initMyOverlay : function(){
return (new Y.Overlay({
width : '200px',
height : '150px',
zInex : 100,
centered : true,
visible : false,
bodyContent : '<p>My Overlay</p>',
render : true,
plugins : [{ fn: Y.Plugin.OverlayModal }],
on : {
click : function(e){
this.hide();
}
}
}));
},
_initMySlider : function () {
return (new Y.Slider({
min : 0,
max : 500,
length : 500,
render : true
}));
}
}, {
// *** Static *** //
NAME : 'myPage',
COMPONENTS : {
myOverlay : {
requires : ['overlay', 'gallery-overlay-extras'],
initializer : '_initMyOverlay'
},
mySlider : {
requires : ['slider'],
initializer : '_initMySlider'
}
}
});
Y.MyPage = Y.Base.mix(MyPage, [Y.BaseComponentMgr]);
}, '1.0.0', { requires: ['base', 'node', 'gallery-base-componentmgr'], optional: ['overlay', 'slider', 'gallery-overlay-extras'] });
Forum Posts
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info