|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>YUI Library Examples: AsyncQueue: Building a UI with AsyncQueue</title>
|
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
8 |
|
|
|
9 |
<style>
|
|
|
10 |
/*Supplemental CSS for the YUI distribution*/
|
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; }
|
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
|
|
|
14 |
</style>
|
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
|
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
|
|
|
19 |
<style type="text/css">
|
|
|
20 |
#init {
|
|
|
21 |
margin-top: 1em;
|
|
|
22 |
}
|
|
|
23 |
|
|
|
24 |
#demo .yui-module {
|
|
|
25 |
position: relative;
|
|
|
26 |
width: 28em;
|
|
|
27 |
}
|
|
|
28 |
#demo .yui-module .yui-hd,
|
|
|
29 |
#demo .yui-module .yui-bd,
|
|
|
30 |
#demo .yui-module .yui-ft {
|
|
|
31 |
margin: 0;
|
|
|
32 |
padding: 1ex 1em;
|
|
|
33 |
}
|
|
|
34 |
#demo .yui-module .yui-hd {
|
|
|
35 |
background: #406ED9;
|
|
|
36 |
}
|
|
|
37 |
#demo .yui-module .yui-hd h4 {
|
|
|
38 |
color: #fff;
|
|
|
39 |
margin: 0;
|
|
|
40 |
}
|
|
|
41 |
#demo .yui-module .yui-bd {
|
|
|
42 |
background: #ABCEFF;
|
|
|
43 |
border-left: 1px solid #7A97BB;
|
|
|
44 |
border-right: 1px solid #7A97BB;
|
|
|
45 |
height: 5em;
|
|
|
46 |
padding-top: 4.5em;
|
|
|
47 |
position: relative;
|
|
|
48 |
overflow: hidden;
|
|
|
49 |
text-align: center;
|
|
|
50 |
}
|
|
|
51 |
#demo .yui-module .yui-ft {
|
|
|
52 |
background: #fff;
|
|
|
53 |
border: 1px solid #7A97BB;
|
|
|
54 |
border-top-color: #ccc;
|
|
|
55 |
padding-right: 25px;
|
|
|
56 |
}
|
|
|
57 |
#demo .yui-module .yui-status {
|
|
|
58 |
margin: 0;
|
|
|
59 |
padding: 0 25px 0 0;
|
|
|
60 |
height: 1.3em;
|
|
|
61 |
}
|
|
|
62 |
#demo .yui-module .yui-nav {
|
|
|
63 |
background: #fff;
|
|
|
64 |
border-bottom: 1px solid #ccc;
|
|
|
65 |
left: 0;
|
|
|
66 |
padding: .5em;
|
|
|
67 |
position: absolute;
|
|
|
68 |
width: 27em;
|
|
|
69 |
}
|
|
|
70 |
#demo .yui-module .yui-nav ul,
|
|
|
71 |
#demo .yui-module .yui-nav li {
|
|
|
72 |
display: inline;
|
|
|
73 |
list-style: none;
|
|
|
74 |
margin: 0;
|
|
|
75 |
padding: 0;
|
|
|
76 |
}
|
|
|
77 |
#demo .yui-module .yui-nav a {
|
|
|
78 |
color: #ffa928;
|
|
|
79 |
padding: 0 1.1em;
|
|
|
80 |
}
|
|
|
81 |
#demo .yui-module .working {
|
|
|
82 |
background: #fff url(http://l.yimg.com/a/i/nt/ic/ut/bsc/busyarr_1.gif) no-repeat 26em 50%;
|
|
|
83 |
}
|
|
|
84 |
</style>
|
|
|
85 |
|
|
|
86 |
</head>
|
|
|
87 |
<body id="yahoo-com" class=" yui-skin-sam">
|
|
|
88 |
<div id="custom-doc" class="yui-t2">
|
|
|
89 |
<div id="hd">
|
|
|
90 |
<div id="ygunav">
|
|
|
91 |
<p>
|
|
|
92 |
<em>
|
|
|
93 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
|
|
|
94 |
</em>
|
|
|
95 |
</p>
|
|
|
96 |
<form action="http://search.yahoo.com/search" id="sitesearchform">
|
|
|
97 |
<input name="vs" type="hidden" value="developer.yahoo.com">
|
|
|
98 |
<input name="vs" type="hidden" value="yuiblog.com">
|
|
|
99 |
<div id="sitesearch">
|
|
|
100 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
|
|
|
101 |
<input type="text" id="searchinput" name="p">
|
|
|
102 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
|
|
|
103 |
</div>
|
|
|
104 |
</form>
|
|
|
105 |
</div>
|
|
|
106 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
|
|
|
107 |
<div id="pagetitle"><h1>YUI Library Examples: AsyncQueue: Building a UI with AsyncQueue</h1></div>
|
|
|
108 |
</div>
|
|
|
109 |
<div id="bd">
|
|
|
110 |
|
|
|
111 |
|
|
|
112 |
<div id="yui-main">
|
|
|
113 |
<div class="yui-b">
|
|
|
114 |
<div class="yui-ge">
|
|
|
115 |
<div class="yui-u first example" id="main">
|
|
|
116 |
|
|
|
117 |
<h2>AsyncQueue: Building a UI with AsyncQueue</h2>
|
|
|
118 |
|
|
|
119 |
<div id="example" class="promo">
|
|
|
120 |
<div class="example-intro">
|
|
|
121 |
<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>
|
|
|
122 |
<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>
|
|
|
123 |
</div>
|
|
|
124 |
|
|
|
125 |
<div class="module example-container ">
|
|
|
126 |
<div class="hd exampleHd">
|
|
|
127 |
<p class="newWindowButton yui-skin-sam">
|
|
|
128 |
<a href="queue_app_clean.html" target="_blank">View example in new window.</a>
|
|
|
129 |
</p>
|
|
|
130 |
</div> <div id="example-canvas" class="bd">
|
|
|
131 |
|
|
|
132 |
|
|
|
133 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
134 |
|
|
|
135 |
<div id="demo">
|
|
|
136 |
<p>The module will be inserted here. <em>Click the button below</em>.</p>
|
|
|
137 |
</div>
|
|
|
138 |
|
|
|
139 |
<button id="init">Initialize Application</button>
|
|
|
140 |
|
|
|
141 |
<script type="text/javascript">
|
|
|
142 |
YUI({base:"../../build/", timeout: 10000}).use("anim", "async-queue",function (Y) {
|
|
|
143 |
|
|
|
144 |
var MyApp = {
|
|
|
145 |
NAME : 'Asynchronous Queue Demo',
|
|
|
146 |
|
|
|
147 |
q : new Y.AsyncQueue(),
|
|
|
148 |
|
|
|
149 |
nodes : {
|
|
|
150 |
root : null,
|
|
|
151 |
status : null,
|
|
|
152 |
nav : null,
|
|
|
153 |
content : null,
|
|
|
154 |
foot : null
|
|
|
155 |
},
|
|
|
156 |
|
|
|
157 |
render : function (container) {
|
|
|
158 |
if (MyApp.nodes.root) {
|
|
|
159 |
MyApp.q.stop();
|
|
|
160 |
}
|
|
|
161 |
|
|
|
162 |
// artificial delays have been inserted to simulate _renderNav or
|
|
|
163 |
// _renderContent being process intensive and taking a while to complete
|
|
|
164 |
MyApp.q.add(
|
|
|
165 |
// pass the container param to the callback using Y.bind
|
|
|
166 |
Y.bind(MyApp._renderFramework, MyApp, container),
|
|
|
167 |
{fn: function () {}, timeout: 700}, // artificial delay
|
|
|
168 |
MyApp._renderNav,
|
|
|
169 |
{fn: function () {}, timeout: 700}, // artificial delay
|
|
|
170 |
MyApp._renderContent).run();
|
|
|
171 |
},
|
|
|
172 |
|
|
|
173 |
setStatus : function (message,working) {
|
|
|
174 |
MyApp.nodes.status.setContent(message);
|
|
|
175 |
|
|
|
176 |
MyApp.nodes.foot[working?'addClass':'removeClass']('working');
|
|
|
177 |
},
|
|
|
178 |
|
|
|
179 |
_renderFramework : function (container) {
|
|
|
180 |
var root = MyApp.nodes.root = Y.one(container);
|
|
|
181 |
|
|
|
182 |
root.setContent(
|
|
|
183 |
'<div class="yui-module">'+
|
|
|
184 |
'<div class="yui-hd">'+
|
|
|
185 |
'<h4>'+MyApp.NAME+'</h4>'+
|
|
|
186 |
'</div>'+
|
|
|
187 |
'<div class="yui-bd">'+
|
|
|
188 |
'<div class="yui-nav"></div>'+
|
|
|
189 |
'<div class="yui-content"></div>'+
|
|
|
190 |
'</div>'+
|
|
|
191 |
'<div class="yui-ft">'+
|
|
|
192 |
'<p class="yui-status"></p>'+
|
|
|
193 |
'</div>'+
|
|
|
194 |
'</div>');
|
|
|
195 |
|
|
|
196 |
MyApp.nodes.status = root.one('p.yui-status');
|
|
|
197 |
MyApp.nodes.nav = root.one('.yui-nav');
|
|
|
198 |
MyApp.nodes.content = root.one('.yui-content');
|
|
|
199 |
MyApp.nodes.foot = root.one('.yui-ft');
|
|
|
200 |
|
|
|
201 |
MyApp.nodes.nav.setStyle('top','-30px');
|
|
|
202 |
MyApp.nodes.content.setStyle('opacity',0);
|
|
|
203 |
|
|
|
204 |
MyApp.setStatus('Loading...',true);
|
|
|
205 |
},
|
|
|
206 |
|
|
|
207 |
_renderNav : function () {
|
|
|
208 |
var nav = MyApp.nodes.nav;
|
|
|
209 |
nav.appendChild(Y.Node.create(
|
|
|
210 |
'<ul>'+
|
|
|
211 |
'<li><a href="#">Nav Lorem</a></li>'+
|
|
|
212 |
'<li><a href="#">Nav Ipsum</a></li>'+
|
|
|
213 |
'<li><a href="#">Nav Dolor</a></li>'+
|
|
|
214 |
'<li><a href="#">Nav Sit</a></li>'+
|
|
|
215 |
'</ul>'));
|
|
|
216 |
|
|
|
217 |
new Y.Anim({
|
|
|
218 |
node : nav,
|
|
|
219 |
to : { top : 0 },
|
|
|
220 |
duration : .3
|
|
|
221 |
}).run();
|
|
|
222 |
},
|
|
|
223 |
|
|
|
224 |
_renderContent : function () {
|
|
|
225 |
var content = MyApp.nodes.content;
|
|
|
226 |
|
|
|
227 |
content.appendChild(Y.Node.create(
|
|
|
228 |
'<p>[ App content here ]</p>'));
|
|
|
229 |
|
|
|
230 |
new Y.Anim({
|
|
|
231 |
node : content,
|
|
|
232 |
to : { opacity : 1 },
|
|
|
233 |
duration : .8
|
|
|
234 |
}).run();
|
|
|
235 |
|
|
|
236 |
MyApp.setStatus('App initialized',false);
|
|
|
237 |
}
|
|
|
238 |
};
|
|
|
239 |
|
|
|
240 |
Y.on('click',function (e) {
|
|
|
241 |
e.preventDefault();
|
|
|
242 |
this.set('text','Re-initialize Application');
|
|
|
243 |
|
|
|
244 |
MyApp.render('#demo');
|
|
|
245 |
},'#init');
|
|
|
246 |
|
|
|
247 |
// expose the example structure
|
|
|
248 |
YUI.example = { MyApp : MyApp };
|
|
|
249 |
|
|
|
250 |
});
|
|
|
251 |
</script>
|
|
|
252 |
|
|
|
253 |
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
254 |
|
|
|
255 |
|
|
|
256 |
</div>
|
|
|
257 |
</div>
|
|
|
258 |
</div>
|
|
|
259 |
|
|
|
260 |
<h3>The Markup</h3>
|
|
|
261 |
<p>The markup will start with just a place holder element for our application.</p>
|
|
|
262 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span>The module will be inserted here. <span class="sc2"><<span class="kw2">em</span>></span>Click the button below<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>></span>.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="kw2">button</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"init"</span>></span>Initialize Application<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span>
|
|
|
263 |
<span class="sc2"><<span class="kw2">p</span>></span>The module will be inserted here. <span class="sc2"><<span class="kw2">em</span>></span>Click the button below<span class="sc2"><<span class="sy0">/</span><span class="kw2">em</span>></span>.<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
|
|
|
264 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
265 |
|
|
|
266 |
<span class="sc2"><<span class="kw2">button</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"init"</span>></span>Initialize Application<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></pre></div><textarea id="syntax1-plain"><div id="demo">
|
|
|
267 |
<p>The module will be inserted here. <em>Click the button below</em>.</p>
|
|
|
268 |
</div>
|
|
|
269 |
|
|
|
270 |
<button id="init">Initialize Application</button></textarea></div>
|
|
|
271 |
<p>And will end with the following markup (indented for readability):</p>
|
|
|
272 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-module"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-hd"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">h4</span>></span>AsyncQueue Demo<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-bd"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-nav"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">ul</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Lorem<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Ipsum<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Dolor<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Sit<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-content"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">p</span>></span>[ App content here ]<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-ft"</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">p</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-status"</span>></span>(status message here)<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="sc2"><<span class="kw2">button</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"init"</span>></span>Re-initialize Application<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"demo"</span>></span>
|
|
|
273 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-module"</span>></span>
|
|
|
274 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-hd"</span>></span>
|
|
|
275 |
<span class="sc2"><<span class="kw2">h4</span>></span>AsyncQueue Demo<span class="sc2"><<span class="sy0">/</span><span class="kw2">h4</span>></span>
|
|
|
276 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
277 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-bd"</span>></span>
|
|
|
278 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-nav"</span>></span>
|
|
|
279 |
<span class="sc2"><<span class="kw2">ul</span>></span>
|
|
|
280 |
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Lorem<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
|
|
|
281 |
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Ipsum<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
|
|
|
282 |
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Dolor<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
|
|
|
283 |
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"#"</span>></span>Nav Sit<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
|
|
|
284 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
|
|
|
285 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
286 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-content"</span>></span>
|
|
|
287 |
<span class="sc2"><<span class="kw2">p</span>></span>[ App content here ]<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
|
|
|
288 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
289 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
290 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-ft"</span>></span>
|
|
|
291 |
<span class="sc2"><<span class="kw2">p</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-status"</span>></span>(status message here)<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
|
|
|
292 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
293 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
294 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
|
|
|
295 |
|
|
|
296 |
<span class="sc2"><<span class="kw2">button</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"init"</span>></span>Re-initialize Application<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span></pre></div><textarea id="syntax2-plain"><div id="demo">
|
|
|
297 |
<div class="yui-module">
|
|
|
298 |
<div class="yui-hd">
|
|
|
299 |
<h4>AsyncQueue Demo</h4>
|
|
|
300 |
</div>
|
|
|
301 |
<div class="yui-bd">
|
|
|
302 |
<div class="yui-nav">
|
|
|
303 |
<ul>
|
|
|
304 |
<li><a href="#">Nav Lorem</a></li>
|
|
|
305 |
<li><a href="#">Nav Ipsum</a></li>
|
|
|
306 |
<li><a href="#">Nav Dolor</a></li>
|
|
|
307 |
<li><a href="#">Nav Sit</a></li>
|
|
|
308 |
</ul>
|
|
|
309 |
</div>
|
|
|
310 |
<div class="yui-content">
|
|
|
311 |
<p>[ App content here ]</p>
|
|
|
312 |
</div>
|
|
|
313 |
</div>
|
|
|
314 |
<div class="yui-ft">
|
|
|
315 |
<p class="yui-status">(status message here)</p>
|
|
|
316 |
</div>
|
|
|
317 |
</div>
|
|
|
318 |
</div>
|
|
|
319 |
|
|
|
320 |
<button id="init">Re-initialize Application</button></textarea></div>
|
|
|
321 |
<h3>The CSS</h3>
|
|
|
322 |
<p>Some CSS is added to make it look like an application.</p>
|
|
|
323 |
<div id="syntax3" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re0">#init</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">28em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> .yui-hd<span class="sy0">,</span></div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.yui-module</span> .yui-bd<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-ft</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1ex</span> <span class="re3">1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-hd</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#406ED9</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-hd</span> h4 <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-bd</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#ABCEFF</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-left</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-right</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">5em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">4.5em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-ft</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-top-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding-right</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-status</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">25px</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">height</span><span class="sy0">:</span> <span class="re3">1.3em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#ccc</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">.5em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">27em</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> ul<span class="sy0">,</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> li <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">list-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> a <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#ffa928</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1.1em</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.working</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span> <span class="kw2">url</span><span class="br0">(</span>http<span class="sy0">:</span>//l<span class="re1">.yimg</span>.com/a/i/nt/ic/ut/bsc/busyarr_1.gif<span class="br0">)</span> <span class="kw2">no-repeat</span> <span class="re3">26em</span> <span class="re3"><span class="nu0">50</span>%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re0">#init</span> <span class="br0">{</span>
|
|
|
324 |
<span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">1em</span><span class="sy0">;</span>
|
|
|
325 |
<span class="br0">}</span>
|
|
|
326 |
|
|
|
327 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="br0">{</span>
|
|
|
328 |
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
|
|
|
329 |
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">28em</span><span class="sy0">;</span>
|
|
|
330 |
<span class="br0">}</span>
|
|
|
331 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> .yui-hd<span class="sy0">,</span>
|
|
|
332 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> .yui-bd<span class="sy0">,</span>
|
|
|
333 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-ft</span> <span class="br0">{</span>
|
|
|
334 |
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
335 |
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">1ex</span> <span class="re3">1em</span><span class="sy0">;</span>
|
|
|
336 |
<span class="br0">}</span>
|
|
|
337 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-hd</span> <span class="br0">{</span>
|
|
|
338 |
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#406ED9</span><span class="sy0">;</span>
|
|
|
339 |
<span class="br0">}</span>
|
|
|
340 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-hd</span> h4 <span class="br0">{</span>
|
|
|
341 |
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
|
|
|
342 |
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
343 |
<span class="br0">}</span>
|
|
|
344 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-bd</span> <span class="br0">{</span>
|
|
|
345 |
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#ABCEFF</span><span class="sy0">;</span>
|
|
|
346 |
<span class="kw1">border-left</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span>
|
|
|
347 |
<span class="kw1">border-right</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span>
|
|
|
348 |
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">5em</span><span class="sy0">;</span>
|
|
|
349 |
<span class="kw1">padding-top</span><span class="sy0">:</span> <span class="re3">4.5em</span><span class="sy0">;</span>
|
|
|
350 |
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span>
|
|
|
351 |
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
|
|
|
352 |
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
|
|
|
353 |
<span class="br0">}</span>
|
|
|
354 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-ft</span> <span class="br0">{</span>
|
|
|
355 |
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
|
|
|
356 |
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#7A97BB</span><span class="sy0">;</span>
|
|
|
357 |
<span class="kw1">border-top-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span>
|
|
|
358 |
<span class="kw1">padding-right</span><span class="sy0">:</span> <span class="re3">25px</span><span class="sy0">;</span>
|
|
|
359 |
<span class="br0">}</span>
|
|
|
360 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-status</span> <span class="br0">{</span>
|
|
|
361 |
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
362 |
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">25px</span> <span class="nu0">0</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
363 |
<span class="kw1">height</span><span class="sy0">:</span> <span class="re3">1.3em</span><span class="sy0">;</span>
|
|
|
364 |
<span class="br0">}</span>
|
|
|
365 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> <span class="br0">{</span>
|
|
|
366 |
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span><span class="sy0">;</span>
|
|
|
367 |
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#ccc</span><span class="sy0">;</span>
|
|
|
368 |
<span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
369 |
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">.5em</span><span class="sy0">;</span>
|
|
|
370 |
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span>
|
|
|
371 |
<span class="kw1">width</span><span class="sy0">:</span> <span class="re3">27em</span><span class="sy0">;</span>
|
|
|
372 |
<span class="br0">}</span>
|
|
|
373 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> ul<span class="sy0">,</span>
|
|
|
374 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> li <span class="br0">{</span>
|
|
|
375 |
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span>
|
|
|
376 |
<span class="kw1">list-style</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
|
|
|
377 |
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
378 |
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
|
|
|
379 |
<span class="br0">}</span>
|
|
|
380 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.yui-nav</span> a <span class="br0">{</span>
|
|
|
381 |
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#ffa928</span><span class="sy0">;</span>
|
|
|
382 |
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1.1em</span><span class="sy0">;</span>
|
|
|
383 |
<span class="br0">}</span>
|
|
|
384 |
<span class="re0">#demo</span> <span class="re1">.yui-module</span> <span class="re1">.working</span> <span class="br0">{</span>
|
|
|
385 |
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#fff</span> <span class="kw2">url</span><span class="br0">(</span>http<span class="sy0">:</span>//l<span class="re1">.yimg</span>.com/a/i/nt/ic/ut/bsc/busyarr_1.gif<span class="br0">)</span> <span class="kw2">no-repeat</span> <span class="re3">26em</span> <span class="re3"><span class="nu0">50</span>%</span><span class="sy0">;</span>
|
|
|
386 |
<span class="br0">}</span></pre></div><textarea id="syntax3-plain">#init {
|
|
|
387 |
margin-top: 1em;
|
|
|
388 |
}
|
|
|
389 |
|
|
|
390 |
#demo .yui-module {
|
|
|
391 |
position: relative;
|
|
|
392 |
width: 28em;
|
|
|
393 |
}
|
|
|
394 |
#demo .yui-module .yui-hd,
|
|
|
395 |
#demo .yui-module .yui-bd,
|
|
|
396 |
#demo .yui-module .yui-ft {
|
|
|
397 |
margin: 0;
|
|
|
398 |
padding: 1ex 1em;
|
|
|
399 |
}
|
|
|
400 |
#demo .yui-module .yui-hd {
|
|
|
401 |
background: #406ED9;
|
|
|
402 |
}
|
|
|
403 |
#demo .yui-module .yui-hd h4 {
|
|
|
404 |
color: #fff;
|
|
|
405 |
margin: 0;
|
|
|
406 |
}
|
|
|
407 |
#demo .yui-module .yui-bd {
|
|
|
408 |
background: #ABCEFF;
|
|
|
409 |
border-left: 1px solid #7A97BB;
|
|
|
410 |
border-right: 1px solid #7A97BB;
|
|
|
411 |
height: 5em;
|
|
|
412 |
padding-top: 4.5em;
|
|
|
413 |
position: relative;
|
|
|
414 |
overflow: hidden;
|
|
|
415 |
text-align: center;
|
|
|
416 |
}
|
|
|
417 |
#demo .yui-module .yui-ft {
|
|
|
418 |
background: #fff;
|
|
|
419 |
border: 1px solid #7A97BB;
|
|
|
420 |
border-top-color: #ccc;
|
|
|
421 |
padding-right: 25px;
|
|
|
422 |
}
|
|
|
423 |
#demo .yui-module .yui-status {
|
|
|
424 |
margin: 0;
|
|
|
425 |
padding: 0 25px 0 0;
|
|
|
426 |
height: 1.3em;
|
|
|
427 |
}
|
|
|
428 |
#demo .yui-module .yui-nav {
|
|
|
429 |
background: #fff;
|
|
|
430 |
border-bottom: 1px solid #ccc;
|
|
|
431 |
left: 0;
|
|
|
432 |
padding: .5em;
|
|
|
433 |
position: absolute;
|
|
|
434 |
width: 27em;
|
|
|
435 |
}
|
|
|
436 |
#demo .yui-module .yui-nav ul,
|
|
|
437 |
#demo .yui-module .yui-nav li {
|
|
|
438 |
display: inline;
|
|
|
439 |
list-style: none;
|
|
|
440 |
margin: 0;
|
|
|
441 |
padding: 0;
|
|
|
442 |
}
|
|
|
443 |
#demo .yui-module .yui-nav a {
|
|
|
444 |
color: #ffa928;
|
|
|
445 |
padding: 0 1.1em;
|
|
|
446 |
}
|
|
|
447 |
#demo .yui-module .working {
|
|
|
448 |
background: #fff url(http://l.yimg.com/a/i/nt/ic/ut/bsc/busyarr_1.gif) no-repeat 26em 50%;
|
|
|
449 |
}</textarea></div>
|
|
|
450 |
<h3>Example application structure</h3>
|
|
|
451 |
<p>For this example, we'll create a simple application that we'll contain under the <code>MyApp</code> namespace. The basic structure of the namespace will be as follows:</p>
|
|
|
452 |
|
|
|
453 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"async-queue"</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> MyApp <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// the name of the application</span></div></li><li class="li2"><div class="de2"> <span class="kw3">NAME</span> <span class="sy0">:</span> <span class="st0">"AsyncQueue Demo"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// rendering AsyncQueue</span></div></li><li class="li1"><div class="de1"> q <span class="sy0">:</span> <span class="kw2">new</span> Y.<span class="me1">AsyncQueue</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// cache of frequently used nodes in the DOM structure</span></div></li><li class="li1"><div class="de1"> nodes <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> root <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="kw3">status</span> <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> nav <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> content <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> foot <span class="sy0">:</span> <span class="kw2">null</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co2">/*** Public API methods ***/</span></div></li><li class="li2"><div class="de2"> <span class="co1">// draws the UI in the specified container</span></div></li><li class="li1"><div class="de1"> render <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// update the status bar at the bottom of the app</span></div></li><li class="li1"><div class="de1"> setStatus <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>message<span class="sy0">,</span>working<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co2">/*** private methods ***/</span></div></li><li class="li1"><div class="de1"> <span class="co1">// adds the basic app skeleton to the page</span></div></li><li class="li1"><div class="de1"> _renderFramework <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// populates the navigation section</span></div></li><li class="li1"><div class="de1"> _renderNav <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// populates the content section</span></div></li><li class="li2"><div class="de2"> _renderContent <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"async-queue"</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
|
|
|
454 |
|
|
|
455 |
<span class="kw2">var</span> MyApp <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
456 |
<span class="co1">// the name of the application</span>
|
|
|
457 |
<span class="kw3">NAME</span> <span class="sy0">:</span> <span class="st0">"AsyncQueue Demo"</span><span class="sy0">,</span>
|
|
|
458 |
|
|
|
459 |
<span class="co1">// rendering AsyncQueue</span>
|
|
|
460 |
q <span class="sy0">:</span> <span class="kw2">new</span> Y.<span class="me1">AsyncQueue</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span>
|
|
|
461 |
|
|
|
462 |
<span class="co1">// cache of frequently used nodes in the DOM structure</span>
|
|
|
463 |
nodes <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
464 |
root <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
465 |
<span class="kw3">status</span> <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
466 |
nav <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
467 |
content <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
468 |
foot <span class="sy0">:</span> <span class="kw2">null</span>
|
|
|
469 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
470 |
|
|
|
471 |
<span class="co2">/*** Public API methods ***/</span>
|
|
|
472 |
<span class="co1">// draws the UI in the specified container</span>
|
|
|
473 |
render <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span>
|
|
|
474 |
|
|
|
475 |
<span class="co1">// update the status bar at the bottom of the app</span>
|
|
|
476 |
setStatus <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>message<span class="sy0">,</span>working<span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span>
|
|
|
477 |
|
|
|
478 |
|
|
|
479 |
<span class="co2">/*** private methods ***/</span>
|
|
|
480 |
<span class="co1">// adds the basic app skeleton to the page</span>
|
|
|
481 |
_renderFramework <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span>
|
|
|
482 |
|
|
|
483 |
<span class="co1">// populates the navigation section</span>
|
|
|
484 |
_renderNav <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span><span class="sy0">,</span>
|
|
|
485 |
|
|
|
486 |
<span class="co1">// populates the content section</span>
|
|
|
487 |
_renderContent <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> ... <span class="br0">}</span>
|
|
|
488 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
489 |
|
|
|
490 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">YUI({base:"../../build/", timeout: 10000}).use("anim", "async-queue",function (Y) {
|
|
|
491 |
|
|
|
492 |
var MyApp = {
|
|
|
493 |
// the name of the application
|
|
|
494 |
NAME : "AsyncQueue Demo",
|
|
|
495 |
|
|
|
496 |
// rendering AsyncQueue
|
|
|
497 |
q : new Y.AsyncQueue(),
|
|
|
498 |
|
|
|
499 |
// cache of frequently used nodes in the DOM structure
|
|
|
500 |
nodes : {
|
|
|
501 |
root : null,
|
|
|
502 |
status : null,
|
|
|
503 |
nav : null,
|
|
|
504 |
content : null,
|
|
|
505 |
foot : null
|
|
|
506 |
},
|
|
|
507 |
|
|
|
508 |
/*** Public API methods ***/
|
|
|
509 |
// draws the UI in the specified container
|
|
|
510 |
render : function (container) { ... },
|
|
|
511 |
|
|
|
512 |
// update the status bar at the bottom of the app
|
|
|
513 |
setStatus : function (message,working) { ... },
|
|
|
514 |
|
|
|
515 |
|
|
|
516 |
/*** private methods ***/
|
|
|
517 |
// adds the basic app skeleton to the page
|
|
|
518 |
_renderFramework : function () { ... },
|
|
|
519 |
|
|
|
520 |
// populates the navigation section
|
|
|
521 |
_renderNav : function () { ... },
|
|
|
522 |
|
|
|
523 |
// populates the content section
|
|
|
524 |
_renderContent : function () { ... }
|
|
|
525 |
};
|
|
|
526 |
|
|
|
527 |
});</textarea></div>
|
|
|
528 |
<p>The <code>MyApp.render</code> function will add the rendering methods to the <code>MyApp.q</code> AsyncQueue and set it in motion. Each of the methods will be executed in turn, yielding back to the browser between steps. So as each piece of the UI is assembled, the browser is then given the opportunity to draw it.</p>
|
|
|
529 |
|
|
|
530 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"> ...</div></li><li class="li1"><div class="de1"> <span class="me1">render</span> <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// If the application is currently rendered somewhere, destroy it first</span></div></li><li class="li1"><div class="de1"> <span class="co1">// by clearing the queue and adding the destroy method to run before</span></div></li><li class="li2"><div class="de2"> <span class="co1">// the default rendering operations.</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>MyApp.<span class="me1">nodes</span>.<span class="me1">root</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">q</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span></div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">destroy</span></div></li><li class="li1"><div class="de1"> <span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Add the rendering operations to the ops.render queue and call run()</span></div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="co1">// pass the container param to the callback using Y.bind</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">bind</span><span class="br0">(</span>MyApp._renderFramework<span class="sy0">,</span> MyApp<span class="sy0">,</span> container<span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> MyApp._renderNav<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> MyApp._renderContent<span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> ...</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"> ...
|
|
|
531 |
<span class="me1">render</span> <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span>
|
|
|
532 |
<span class="co1">// If the application is currently rendered somewhere, destroy it first</span>
|
|
|
533 |
<span class="co1">// by clearing the queue and adding the destroy method to run before</span>
|
|
|
534 |
<span class="co1">// the default rendering operations.</span>
|
|
|
535 |
<span class="kw1">if</span> <span class="br0">(</span>MyApp.<span class="me1">nodes</span>.<span class="me1">root</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
536 |
MyApp.<span class="me1">q</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
537 |
|
|
|
538 |
MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span>
|
|
|
539 |
MyApp.<span class="me1">destroy</span>
|
|
|
540 |
<span class="br0">)</span><span class="sy0">;</span>
|
|
|
541 |
<span class="br0">}</span>
|
|
|
542 |
|
|
|
543 |
<span class="co1">// Add the rendering operations to the ops.render queue and call run()</span>
|
|
|
544 |
MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span>
|
|
|
545 |
<span class="co1">// pass the container param to the callback using Y.bind</span>
|
|
|
546 |
Y.<span class="me1">bind</span><span class="br0">(</span>MyApp._renderFramework<span class="sy0">,</span> MyApp<span class="sy0">,</span> container<span class="br0">)</span><span class="sy0">,</span>
|
|
|
547 |
MyApp._renderNav<span class="sy0">,</span>
|
|
|
548 |
MyApp._renderContent<span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
549 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
550 |
...</pre></div><textarea id="syntax5-plain"> ...
|
|
|
551 |
render : function (container) {
|
|
|
552 |
// If the application is currently rendered somewhere, destroy it first
|
|
|
553 |
// by clearing the queue and adding the destroy method to run before
|
|
|
554 |
// the default rendering operations.
|
|
|
555 |
if (MyApp.nodes.root) {
|
|
|
556 |
MyApp.q.stop();
|
|
|
557 |
|
|
|
558 |
MyApp.q.add(
|
|
|
559 |
MyApp.destroy
|
|
|
560 |
);
|
|
|
561 |
}
|
|
|
562 |
|
|
|
563 |
// Add the rendering operations to the ops.render queue and call run()
|
|
|
564 |
MyApp.q.add(
|
|
|
565 |
// pass the container param to the callback using Y.bind
|
|
|
566 |
Y.bind(MyApp._renderFramework, MyApp, container),
|
|
|
567 |
MyApp._renderNav,
|
|
|
568 |
MyApp._renderContent).run();
|
|
|
569 |
},
|
|
|
570 |
...</textarea></div>
|
|
|
571 |
<p>If there are any process intensive operations in the rendering steps, the UI generated in all <em>previous</em> steps will have been drawn by the browser before the heavy lifting begins. This way, the user will be shown a part of the UI and can begin to develop an understanding of its structure and operation while the rest of it is being constructed.</p>
|
|
|
572 |
|
|
|
573 |
<h3>A note on artificial delays and animation</h3>
|
|
|
574 |
<p>In this example, rather than include code that would spike your CPU, delays were simulated by inserting AsyncQueue callbacks with a timeout and a function that does nothing. There is a distinct difference between a delay caused by code execution and a delay caused by <code>setTimeout</code>. In the former case, the browser is busy and likely won't respond to user events (such as clicks) until the executing code has completed. In the latter, any number of JavaScript event threads may execute to completion in the intervening time.</p>
|
|
|
575 |
|
|
|
576 |
<p>The rendering methods include animations courtesy of <code>Y.Anim</code>. Anim is similar to AsyncQueue in that it also works by scheduling a callback (the application of the easing calculation) for repeated execution, yielding to the browser between each update. However, Anim's schedule lives entirely outside the AsyncQueue's schedule. Stopping or pausing an AsyncQueue will not stop or pause a <code>Y.Anim</code> instance that is <code>run()</code> from an AsyncQueue callback. Similarly, if a callback starts an animation, AsyncQueue <em>will not</em> wait for the animation to complete before executing the next queued callback.</p>
|
|
|
577 |
|
|
|
578 |
<h3>Full Script Source</h3>
|
|
|
579 |
<p>The complete code for this example includes the artificial delays added to <code>MyApp.q</code> in the <code>render</code> method.</p>
|
|
|
580 |
|
|
|
581 |
<div id="syntax6" class="yui-syntax-highlight yui-syntax-highlight-linenumbers"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"async-queue"</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> MyApp <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw3">NAME</span> <span class="sy0">:</span> <span class="st0">'Asynchronous Queue Demo'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> q <span class="sy0">:</span> <span class="kw2">new</span> Y.<span class="me1">AsyncQueue</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> nodes <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> root <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="kw3">status</span> <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> nav <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> content <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> foot <span class="sy0">:</span> <span class="kw2">null</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> render <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>MyApp.<span class="me1">nodes</span>.<span class="me1">root</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">q</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// artificial delays have been inserted to simulate _renderNav or</span></div></li><li class="li1"><div class="de1"> <span class="co1">// _renderContent being process intensive and taking a while to complete</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="co1">// pass the container param to the callback using Y.bind</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">bind</span><span class="br0">(</span>MyApp._renderFramework<span class="sy0">,</span> MyApp<span class="sy0">,</span> container<span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span>fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">700</span><span class="br0">}</span><span class="sy0">,</span> <span class="co1">// artificial delay</span></div></li><li class="li1"><div class="de1"> MyApp._renderNav<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span>fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">700</span><span class="br0">}</span><span class="sy0">,</span> <span class="co1">// artificial delay</span></div></li><li class="li1"><div class="de1"> MyApp._renderContent<span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> setStatus <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>message<span class="sy0">,</span>working<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">nodes</span>.<span class="kw3">status</span>.<span class="me1">setContent</span><span class="br0">(</span>message<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">nodes</span>.<span class="me1">foot</span><span class="br0">[</span>working<span class="sy0">?</span><span class="st0">'addClass'</span><span class="sy0">:</span><span class="st0">'removeClass'</span><span class="br0">]</span><span class="br0">(</span><span class="st0">'working'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> _renderFramework <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> root <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">root</span> <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span>container<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> root.<span class="me1">setContent</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="yui-module">'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="yui-hd">'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<h4>'</span><span class="sy0">+</span>MyApp.<span class="kw3">NAME</span><span class="sy0">+</span><span class="st0">'</h4>'</span><span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">'</div>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="yui-bd">'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="yui-nav"></div>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<div class="yui-content"></div>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</div>'</span><span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">'<div class="yui-ft">'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<p class="yui-status"></p>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</div>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</div>'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">nodes</span>.<span class="kw3">status</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'p.yui-status'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-nav'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">nodes</span>.<span class="me1">content</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-content'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">nodes</span>.<span class="me1">foot</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-ft'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'top'</span><span class="sy0">,</span><span class="st0">'-30px'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">nodes</span>.<span class="me1">content</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">setStatus</span><span class="br0">(</span><span class="st0">'Loading...'</span><span class="sy0">,</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> _renderNav <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> nav <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> nav.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<ul>'</span><span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">'<li><a href="#">Nav Lorem</a></li>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<li><a href="#">Nav Ipsum</a></li>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<li><a href="#">Nav Dolor</a></li>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<li><a href="#">Nav Sit</a></li>'</span><span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">'</ul>'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> node <span class="sy0">:</span> nav<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> to <span class="sy0">:</span> <span class="br0">{</span> top <span class="sy0">:</span> <span class="nu0">0</span> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration <span class="sy0">:</span> .3</div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> _renderContent <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> content <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">content</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> content.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span></div></li><li class="li1"><div class="de1"> <span class="st0">'<p>[ App content here ]</p>'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> node <span class="sy0">:</span> content<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> to <span class="sy0">:</span> <span class="br0">{</span> opacity <span class="sy0">:</span> <span class="nu0">1</span> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> duration <span class="sy0">:</span> .8</div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> MyApp.<span class="me1">setStatus</span><span class="br0">(</span><span class="st0">'App initialized'</span><span class="sy0">,</span><span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span><span class="sy0">,</span><span class="st0">'Re-initialize Application'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> MyApp.<span class="me1">render</span><span class="br0">(</span><span class="st0">'#demo'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span><span class="st0">'#init'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="co1">// expose the example structure</span></div></li><li class="li1"><div class="de1">YUI.<span class="me1">example</span> <span class="sy0">=</span> <span class="br0">{</span> MyApp <span class="sy0">:</span> MyApp <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"anim"</span><span class="sy0">,</span> <span class="st0">"async-queue"</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
|
|
|
582 |
|
|
|
583 |
<span class="kw2">var</span> MyApp <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
584 |
<span class="kw3">NAME</span> <span class="sy0">:</span> <span class="st0">'Asynchronous Queue Demo'</span><span class="sy0">,</span>
|
|
|
585 |
|
|
|
586 |
q <span class="sy0">:</span> <span class="kw2">new</span> Y.<span class="me1">AsyncQueue</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span>
|
|
|
587 |
|
|
|
588 |
nodes <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
589 |
root <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
590 |
<span class="kw3">status</span> <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
591 |
nav <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
592 |
content <span class="sy0">:</span> <span class="kw2">null</span><span class="sy0">,</span>
|
|
|
593 |
foot <span class="sy0">:</span> <span class="kw2">null</span>
|
|
|
594 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
595 |
|
|
|
596 |
render <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span>
|
|
|
597 |
<span class="kw1">if</span> <span class="br0">(</span>MyApp.<span class="me1">nodes</span>.<span class="me1">root</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
598 |
MyApp.<span class="me1">q</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
599 |
<span class="br0">}</span>
|
|
|
600 |
|
|
|
601 |
<span class="co1">// artificial delays have been inserted to simulate _renderNav or</span>
|
|
|
602 |
<span class="co1">// _renderContent being process intensive and taking a while to complete</span>
|
|
|
603 |
MyApp.<span class="me1">q</span>.<span class="me1">add</span><span class="br0">(</span>
|
|
|
604 |
<span class="co1">// pass the container param to the callback using Y.bind</span>
|
|
|
605 |
Y.<span class="me1">bind</span><span class="br0">(</span>MyApp._renderFramework<span class="sy0">,</span> MyApp<span class="sy0">,</span> container<span class="br0">)</span><span class="sy0">,</span>
|
|
|
606 |
<span class="br0">{</span>fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">700</span><span class="br0">}</span><span class="sy0">,</span> <span class="co1">// artificial delay</span>
|
|
|
607 |
MyApp._renderNav<span class="sy0">,</span>
|
|
|
608 |
<span class="br0">{</span>fn<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">700</span><span class="br0">}</span><span class="sy0">,</span> <span class="co1">// artificial delay</span>
|
|
|
609 |
MyApp._renderContent<span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
610 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
611 |
|
|
|
612 |
setStatus <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>message<span class="sy0">,</span>working<span class="br0">)</span> <span class="br0">{</span>
|
|
|
613 |
MyApp.<span class="me1">nodes</span>.<span class="kw3">status</span>.<span class="me1">setContent</span><span class="br0">(</span>message<span class="br0">)</span><span class="sy0">;</span>
|
|
|
614 |
|
|
|
615 |
MyApp.<span class="me1">nodes</span>.<span class="me1">foot</span><span class="br0">[</span>working<span class="sy0">?</span><span class="st0">'addClass'</span><span class="sy0">:</span><span class="st0">'removeClass'</span><span class="br0">]</span><span class="br0">(</span><span class="st0">'working'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
616 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
617 |
|
|
|
618 |
_renderFramework <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>container<span class="br0">)</span> <span class="br0">{</span>
|
|
|
619 |
<span class="kw2">var</span> root <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">root</span> <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span>container<span class="br0">)</span><span class="sy0">;</span>
|
|
|
620 |
|
|
|
621 |
root.<span class="me1">setContent</span><span class="br0">(</span>
|
|
|
622 |
<span class="st0">'<div class="yui-module">'</span><span class="sy0">+</span>
|
|
|
623 |
<span class="st0">'<div class="yui-hd">'</span><span class="sy0">+</span>
|
|
|
624 |
<span class="st0">'<h4>'</span><span class="sy0">+</span>MyApp.<span class="kw3">NAME</span><span class="sy0">+</span><span class="st0">'</h4>'</span><span class="sy0">+</span>
|
|
|
625 |
<span class="st0">'</div>'</span><span class="sy0">+</span>
|
|
|
626 |
<span class="st0">'<div class="yui-bd">'</span><span class="sy0">+</span>
|
|
|
627 |
<span class="st0">'<div class="yui-nav"></div>'</span><span class="sy0">+</span>
|
|
|
628 |
<span class="st0">'<div class="yui-content"></div>'</span><span class="sy0">+</span>
|
|
|
629 |
<span class="st0">'</div>'</span><span class="sy0">+</span>
|
|
|
630 |
<span class="st0">'<div class="yui-ft">'</span><span class="sy0">+</span>
|
|
|
631 |
<span class="st0">'<p class="yui-status"></p>'</span><span class="sy0">+</span>
|
|
|
632 |
<span class="st0">'</div>'</span><span class="sy0">+</span>
|
|
|
633 |
<span class="st0">'</div>'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
634 |
|
|
|
635 |
MyApp.<span class="me1">nodes</span>.<span class="kw3">status</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'p.yui-status'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
636 |
MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-nav'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
637 |
MyApp.<span class="me1">nodes</span>.<span class="me1">content</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-content'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
638 |
MyApp.<span class="me1">nodes</span>.<span class="me1">foot</span> <span class="sy0">=</span> root.<span class="me1">one</span><span class="br0">(</span><span class="st0">'.yui-ft'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
639 |
|
|
|
640 |
MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'top'</span><span class="sy0">,</span><span class="st0">'-30px'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
641 |
MyApp.<span class="me1">nodes</span>.<span class="me1">content</span>.<span class="me1">setStyle</span><span class="br0">(</span><span class="st0">'opacity'</span><span class="sy0">,</span><span class="nu0">0</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
642 |
|
|
|
643 |
MyApp.<span class="me1">setStatus</span><span class="br0">(</span><span class="st0">'Loading...'</span><span class="sy0">,</span><span class="kw2">true</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
644 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
645 |
|
|
|
646 |
_renderNav <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
647 |
<span class="kw2">var</span> nav <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">nav</span><span class="sy0">;</span>
|
|
|
648 |
nav.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>
|
|
|
649 |
<span class="st0">'<ul>'</span><span class="sy0">+</span>
|
|
|
650 |
<span class="st0">'<li><a href="#">Nav Lorem</a></li>'</span><span class="sy0">+</span>
|
|
|
651 |
<span class="st0">'<li><a href="#">Nav Ipsum</a></li>'</span><span class="sy0">+</span>
|
|
|
652 |
<span class="st0">'<li><a href="#">Nav Dolor</a></li>'</span><span class="sy0">+</span>
|
|
|
653 |
<span class="st0">'<li><a href="#">Nav Sit</a></li>'</span><span class="sy0">+</span>
|
|
|
654 |
<span class="st0">'</ul>'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
655 |
|
|
|
656 |
<span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
657 |
node <span class="sy0">:</span> nav<span class="sy0">,</span>
|
|
|
658 |
to <span class="sy0">:</span> <span class="br0">{</span> top <span class="sy0">:</span> <span class="nu0">0</span> <span class="br0">}</span><span class="sy0">,</span>
|
|
|
659 |
duration <span class="sy0">:</span> .3
|
|
|
660 |
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
661 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
662 |
|
|
|
663 |
_renderContent <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
664 |
<span class="kw2">var</span> content <span class="sy0">=</span> MyApp.<span class="me1">nodes</span>.<span class="me1">content</span><span class="sy0">;</span>
|
|
|
665 |
|
|
|
666 |
content.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">(</span>
|
|
|
667 |
<span class="st0">'<p>[ App content here ]</p>'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
668 |
|
|
|
669 |
<span class="kw2">new</span> Y.<span class="me1">Anim</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
670 |
node <span class="sy0">:</span> content<span class="sy0">,</span>
|
|
|
671 |
to <span class="sy0">:</span> <span class="br0">{</span> opacity <span class="sy0">:</span> <span class="nu0">1</span> <span class="br0">}</span><span class="sy0">,</span>
|
|
|
672 |
duration <span class="sy0">:</span> .8
|
|
|
673 |
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">run</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
674 |
|
|
|
675 |
MyApp.<span class="me1">setStatus</span><span class="br0">(</span><span class="st0">'App initialized'</span><span class="sy0">,</span><span class="kw2">false</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
676 |
<span class="br0">}</span>
|
|
|
677 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
678 |
|
|
|
679 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span><span class="kw2">function</span> <span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
680 |
e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
681 |
<span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span><span class="sy0">,</span><span class="st0">'Re-initialize Application'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
682 |
|
|
|
683 |
MyApp.<span class="me1">render</span><span class="br0">(</span><span class="st0">'#demo'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
684 |
<span class="br0">}</span><span class="sy0">,</span><span class="st0">'#init'</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
685 |
|
|
|
686 |
<span class="co1">// expose the example structure</span>
|
|
|
687 |
YUI.<span class="me1">example</span> <span class="sy0">=</span> <span class="br0">{</span> MyApp <span class="sy0">:</span> MyApp <span class="br0">}</span><span class="sy0">;</span>
|
|
|
688 |
|
|
|
689 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax6-plain">YUI({base:"../../build/", timeout: 10000}).use("anim", "async-queue",function (Y) {
|
|
|
690 |
|
|
|
691 |
var MyApp = {
|
|
|
692 |
NAME : 'Asynchronous Queue Demo',
|
|
|
693 |
|
|
|
694 |
q : new Y.AsyncQueue(),
|
|
|
695 |
|
|
|
696 |
nodes : {
|
|
|
697 |
root : null,
|
|
|
698 |
status : null,
|
|
|
699 |
nav : null,
|
|
|
700 |
content : null,
|
|
|
701 |
foot : null
|
|
|
702 |
},
|
|
|
703 |
|
|
|
704 |
render : function (container) {
|
|
|
705 |
if (MyApp.nodes.root) {
|
|
|
706 |
MyApp.q.stop();
|
|
|
707 |
}
|
|
|
708 |
|
|
|
709 |
// artificial delays have been inserted to simulate _renderNav or
|
|
|
710 |
// _renderContent being process intensive and taking a while to complete
|
|
|
711 |
MyApp.q.add(
|
|
|
712 |
// pass the container param to the callback using Y.bind
|
|
|
713 |
Y.bind(MyApp._renderFramework, MyApp, container),
|
|
|
714 |
{fn: function () {}, timeout: 700}, // artificial delay
|
|
|
715 |
MyApp._renderNav,
|
|
|
716 |
{fn: function () {}, timeout: 700}, // artificial delay
|
|
|
717 |
MyApp._renderContent).run();
|
|
|
718 |
},
|
|
|
719 |
|
|
|
720 |
setStatus : function (message,working) {
|
|
|
721 |
MyApp.nodes.status.setContent(message);
|
|
|
722 |
|
|
|
723 |
MyApp.nodes.foot[working?'addClass':'removeClass']('working');
|
|
|
724 |
},
|
|
|
725 |
|
|
|
726 |
_renderFramework : function (container) {
|
|
|
727 |
var root = MyApp.nodes.root = Y.one(container);
|
|
|
728 |
|
|
|
729 |
root.setContent(
|
|
|
730 |
'<div class="yui-module">'+
|
|
|
731 |
'<div class="yui-hd">'+
|
|
|
732 |
'<h4>'+MyApp.NAME+'</h4>'+
|
|
|
733 |
'</div>'+
|
|
|
734 |
'<div class="yui-bd">'+
|
|
|
735 |
'<div class="yui-nav"></div>'+
|
|
|
736 |
'<div class="yui-content"></div>'+
|
|
|
737 |
'</div>'+
|
|
|
738 |
'<div class="yui-ft">'+
|
|
|
739 |
'<p class="yui-status"></p>'+
|
|
|
740 |
'</div>'+
|
|
|
741 |
'</div>');
|
|
|
742 |
|
|
|
743 |
MyApp.nodes.status = root.one('p.yui-status');
|
|
|
744 |
MyApp.nodes.nav = root.one('.yui-nav');
|
|
|
745 |
MyApp.nodes.content = root.one('.yui-content');
|
|
|
746 |
MyApp.nodes.foot = root.one('.yui-ft');
|
|
|
747 |
|
|
|
748 |
MyApp.nodes.nav.setStyle('top','-30px');
|
|
|
749 |
MyApp.nodes.content.setStyle('opacity',0);
|
|
|
750 |
|
|
|
751 |
MyApp.setStatus('Loading...',true);
|
|
|
752 |
},
|
|
|
753 |
|
|
|
754 |
_renderNav : function () {
|
|
|
755 |
var nav = MyApp.nodes.nav;
|
|
|
756 |
nav.appendChild(Y.Node.create(
|
|
|
757 |
'<ul>'+
|
|
|
758 |
'<li><a href="#">Nav Lorem</a></li>'+
|
|
|
759 |
'<li><a href="#">Nav Ipsum</a></li>'+
|
|
|
760 |
'<li><a href="#">Nav Dolor</a></li>'+
|
|
|
761 |
'<li><a href="#">Nav Sit</a></li>'+
|
|
|
762 |
'</ul>'));
|
|
|
763 |
|
|
|
764 |
new Y.Anim({
|
|
|
765 |
node : nav,
|
|
|
766 |
to : { top : 0 },
|
|
|
767 |
duration : .3
|
|
|
768 |
}).run();
|
|
|
769 |
},
|
|
|
770 |
|
|
|
771 |
_renderContent : function () {
|
|
|
772 |
var content = MyApp.nodes.content;
|
|
|
773 |
|
|
|
774 |
content.appendChild(Y.Node.create(
|
|
|
775 |
'<p>[ App content here ]</p>'));
|
|
|
776 |
|
|
|
777 |
new Y.Anim({
|
|
|
778 |
node : content,
|
|
|
779 |
to : { opacity : 1 },
|
|
|
780 |
duration : .8
|
|
|
781 |
}).run();
|
|
|
782 |
|
|
|
783 |
MyApp.setStatus('App initialized',false);
|
|
|
784 |
}
|
|
|
785 |
};
|
|
|
786 |
|
|
|
787 |
Y.on('click',function (e) {
|
|
|
788 |
e.preventDefault();
|
|
|
789 |
this.set('text','Re-initialize Application');
|
|
|
790 |
|
|
|
791 |
MyApp.render('#demo');
|
|
|
792 |
},'#init');
|
|
|
793 |
|
|
|
794 |
// expose the example structure
|
|
|
795 |
YUI.example = { MyApp : MyApp };
|
|
|
796 |
|
|
|
797 |
});</textarea></div> </div>
|
|
|
798 |
<div class="yui-u sidebar">
|
|
|
799 |
|
|
|
800 |
|
|
|
801 |
<div id="examples" class="mod box4">
|
|
|
802 |
<div class="hd">
|
|
|
803 |
<h4>
|
|
|
804 |
AsyncQueue Examples:</h4>
|
|
|
805 |
</div>
|
|
|
806 |
<div class="bd">
|
|
|
807 |
<ul>
|
|
|
808 |
<li class='selected'><a href='../async-queue/queue_app.html'>Building a UI with AsyncQueue</a></li> </ul>
|
|
|
809 |
</div>
|
|
|
810 |
</div>
|
|
|
811 |
|
|
|
812 |
<div class="mod box4">
|
|
|
813 |
<div class="hd">
|
|
|
814 |
<h4>More AsyncQueue Resources:</h4>
|
|
|
815 |
</div>
|
|
|
816 |
<div class="bd">
|
|
|
817 |
<ul>
|
|
|
818 |
<!-- <li><a href="http://developer.yahoo.com/yui/async-queue/">User's Guide</a> (external)</li> -->
|
|
|
819 |
<li><a href="../../api/module_async-queue.html">API Documentation</a></li></ul>
|
|
|
820 |
</div>
|
|
|
821 |
</div>
|
|
|
822 |
</div>
|
|
|
823 |
</div>
|
|
|
824 |
|
|
|
825 |
</div>
|
|
|
826 |
</div>
|
|
|
827 |
|
|
|
828 |
|
|
|
829 |
<div class="yui-b toc3" id="tocWrapper">
|
|
|
830 |
<!-- TABLE OF CONTENTS -->
|
|
|
831 |
<div id="toc">
|
|
|
832 |
|
|
|
833 |
<ul>
|
|
|
834 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="selected "><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
|
|
|
835 |
</div>
|
|
|
836 |
</div>
|
|
|
837 |
</div><!--closes bd-->
|
|
|
838 |
|
|
|
839 |
<div id="ft">
|
|
|
840 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
|
|
|
841 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
|
842 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
|
843 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
|
844 |
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
|
845 |
</div>
|
|
|
846 |
</div>
|
|
|
847 |
<script language="javascript">
|
|
|
848 |
var yuiConfig = {base:"../../build/", timeout: 10000};
|
|
|
849 |
</script>
|
|
|
850 |
<script src="../../assets/syntax.js"></script>
|
|
|
851 |
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
|
852 |
<script language="javascript">
|
|
|
853 |
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
854 |
</script>
|
|
|
855 |
</body>
|
|
|
856 |
</html>
|