<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Building a UI with AsyncQueue</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION }}/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION }}/build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#init {
margin-top: 1em;
}
#demo .yui-module {
position: relative;
width: 28em;
}
#demo .yui-module .yui-hd,
#demo .yui-module .yui-bd,
#demo .yui-module .yui-ft {
margin: 0;
padding: 1ex 1em;
}
#demo .yui-module .yui-hd {
background: #406ED9;
}
#demo .yui-module .yui-hd h4 {
color: #fff;
margin: 0;
}
#demo .yui-module .yui-bd {
background: #ABCEFF;
border-left: 1px solid #7A97BB;
border-right: 1px solid #7A97BB;
height: 5em;
padding-top: 4.5em;
position: relative;
overflow: hidden;
text-align: center;
}
#demo .yui-module .yui-ft {
background: #fff;
border: 1px solid #7A97BB;
border-top-color: #ccc;
padding-right: 25px;
}
#demo .yui-module .yui-status {
margin: 0;
padding: 0 25px 0 0;
height: 1.3em;
}
#demo .yui-module .yui-nav {
background: #fff;
border-bottom: 1px solid #ccc;
left: 0;
padding: .5em;
position: absolute;
width: 27em;
}
#demo .yui-module .yui-nav ul,
#demo .yui-module .yui-nav li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#demo .yui-module .yui-nav a {
color: #ffa928;
padding: 0 1.1em;
}
#demo .yui-module .working {
background: #fff url(http://l.yimg.com/a/i/nt/ic/ut/bsc/busyarr_1.gif) no-repeat 26em 50%;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Building a UI with AsyncQueue</h1>
<div class="exampleIntro">
<p>This example illustrates how to break up the initial rendering of an application UI into queued code chunks, yielding back to the browser regularly to draw portions of the UI as they are ready.</p>
<p><em>Note</em>: This method is mostly useful for apps constructing complex DOM structures. While the DOM structure contained in this example is not complex, some artificial delays were injected to simulate process intensive operations that would normally cause such delays.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">
<p>The module will be inserted here. <em>Click the button below</em>.</p>
</div>
<button id="init">Initialize Application</button>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_server_exchange.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_util.js"></script>
<script type="text/javascript">
sv_adminKey = 1;
gInFrame = false;
requestDone = false;
animEnded = false;
CY = null ;
/*
Coment = function(){
this.NAME = 'Asynchronous Queue Demo' ;
this.q = new CY.AsyncQueue() ;
this.nodes = {
root : null,
status : null,
nav : null,
content : null,
foot : null
} ;
} ;
Coment.prototype = {
fun1 : function() {
alert(CY) ;
},
fun2 : function() {
alert(CY) ;
}
} ;
*/
experimentRet = function () {
requestDone = true ;
CY.log("requestDone now true") ;
} ;
MyApp = function() {
this.NAME = 'Asynchronous Queue Demo';
this.q = new CY.AsyncQueue() ;
this.nodes = {
root : null,
status : null,
nav : null,
content : null,
foot : null
} ;
}
onEnd = function() {
animEnded = true;
}
MyApp.prototype = {
render : function (container) {
if (this.nodes.root) {
this.q.stop();
this.q.add(
this.destroy
);
}
// artificial delays have been inserted to simulate _renderNav or
// _renderContent being process intensive and taking a while to complete
this.q.add(
// pass the container param to the callback using Y.bind
CY.bind(this._renderFramework, this, container),
{fn: function () {
doExchange("experiment", {}, null, experimentRet, {}, {}, "could not remove comment.") ;
}, timeout: 1000}, // artificial delay
{fn: function () {CY.log("requestDone : " + requestDone) ;}, until: function () {return requestDone ;}, timeout: 100}, // artificial delay
{fn:CY.bind(this._renderNav, this), timeout:100},
{fn:function () {}, timeout:100, until:function(){return animEnded;}},
{fn: function () {}, timeout: 700}, // artificial delay
CY.bind(this._renderContent,this)
).run();
},
destroy : function () {
var root = this.nodes.root;
if (root) {
CY.Event.purgeElement(root,true);
root.set('innerHTML','');
}
},
setStatus : function (message,working) {
this.nodes.status.set('innerHTML',message);
this.nodes.foot[working?'addClass':'removeClass']('working');
},
_renderFramework : function (container) {
var root = this.nodes.root = CY.get(container);
root.set('innerHTML',
'<div class="yui-module">'+
'<div class="yui-hd">'+
'<h4>'+this.NAME+'</h4>'+
'</div>'+
'<div class="yui-bd">'+
'<div class="yui-nav"></div>'+
'<div class="yui-content"></div>'+
'</div>'+
'<div class="yui-ft">'+
'<p class="yui-status"></p>'+
'</div>'+
'</div>');
this.nodes.status = root.query('p.yui-status');
this.nodes.nav = root.query('.yui-nav');
this.nodes.content = root.query('.yui-content');
this.nodes.foot = root.query('.yui-ft');
this.nodes.nav.setStyle('top','-30px');
this.nodes.content.setStyle('opacity',0);
this.setStatus('Loading...',true);
},
_renderNav : function () {
var nav = this.nodes.nav;
nav.appendChild(CY.Node.create(
'<ul>'+
'<li><a href="#">Nav Lorem</a></li>'+
'<li><a href="#">Nav Ipsum</a></li>'+
'<li><a href="#">Nav Dolor</a></li>'+
'<li><a href="#">Nav Sit</a></li>'+
'</ul>'));
var anim = new CY.Anim({
node : nav,
to : { top : 0 },
duration : 3
}) ;
anim.on('end', onEnd);
anim.run();
},
_renderContent : function () {
var content = this.nodes.content;
content.appendChild(CY.Node.create(
'<p>[ App content here ]</p>'));
new CY.Anim({
node : content,
to : { opacity : 1 },
duration : .8
}).run();
this.setStatus('App initialized',false);
}
};
YUI({base:"{{ CM_MEDIA_PREFIX }}js/lib/yui/{{ YUI_VERSION }}/build/", timeout: 10000}).use("anim", "queue", "io","json",function (Y) {
CY = Y;
var myApp = new MyApp() ;
Y.get('#init').on('click',function (e) {
e.preventDefault();
this.set('innerHTML','Re-initialize Application');
myApp.render('#demo');
});
// expose the example structure
YUI.example = { MyApp : MyApp };
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>