|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Building a UI with AsyncQueue</title> |
|
7 |
|
8 <style type="text/css"> |
|
9 /*margin and padding on body element |
|
10 can introduce errors in determining |
|
11 element position and are not recommended; |
|
12 we turn them off as a foundation for YUI |
|
13 CSS treatments. */ |
|
14 body { |
|
15 margin:0; |
|
16 padding:0; |
|
17 } |
|
18 </style> |
|
19 |
|
20 <link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}js/lib/yui/{{ YUI_VERSION }}/build/cssfonts/fonts-min.css" /> |
|
21 <script type="text/javascript" src="{{ MEDIA_URL }}js/lib/yui/{{ YUI_VERSION }}/build/yui/yui-min.js"></script> |
|
22 |
|
23 |
|
24 <!--begin custom header content for this example--> |
|
25 <style type="text/css"> |
|
26 #init { |
|
27 margin-top: 1em; |
|
28 } |
|
29 |
|
30 #demo .yui-module { |
|
31 position: relative; |
|
32 width: 28em; |
|
33 } |
|
34 #demo .yui-module .yui-hd, |
|
35 #demo .yui-module .yui-bd, |
|
36 #demo .yui-module .yui-ft { |
|
37 margin: 0; |
|
38 padding: 1ex 1em; |
|
39 } |
|
40 #demo .yui-module .yui-hd { |
|
41 background: #406ED9; |
|
42 } |
|
43 #demo .yui-module .yui-hd h4 { |
|
44 color: #fff; |
|
45 margin: 0; |
|
46 } |
|
47 #demo .yui-module .yui-bd { |
|
48 background: #ABCEFF; |
|
49 border-left: 1px solid #7A97BB; |
|
50 border-right: 1px solid #7A97BB; |
|
51 height: 5em; |
|
52 padding-top: 4.5em; |
|
53 position: relative; |
|
54 overflow: hidden; |
|
55 text-align: center; |
|
56 } |
|
57 #demo .yui-module .yui-ft { |
|
58 background: #fff; |
|
59 border: 1px solid #7A97BB; |
|
60 border-top-color: #ccc; |
|
61 padding-right: 25px; |
|
62 } |
|
63 #demo .yui-module .yui-status { |
|
64 margin: 0; |
|
65 padding: 0 25px 0 0; |
|
66 height: 1.3em; |
|
67 } |
|
68 #demo .yui-module .yui-nav { |
|
69 background: #fff; |
|
70 border-bottom: 1px solid #ccc; |
|
71 left: 0; |
|
72 padding: .5em; |
|
73 position: absolute; |
|
74 width: 27em; |
|
75 } |
|
76 #demo .yui-module .yui-nav ul, |
|
77 #demo .yui-module .yui-nav li { |
|
78 display: inline; |
|
79 list-style: none; |
|
80 margin: 0; |
|
81 padding: 0; |
|
82 } |
|
83 #demo .yui-module .yui-nav a { |
|
84 color: #ffa928; |
|
85 padding: 0 1.1em; |
|
86 } |
|
87 #demo .yui-module .working { |
|
88 background: #fff url(http://l.yimg.com/a/i/nt/ic/ut/bsc/busyarr_1.gif) no-repeat 26em 50%; |
|
89 } |
|
90 </style> |
|
91 |
|
92 <!--end custom header content for this example--> |
|
93 |
|
94 </head> |
|
95 |
|
96 <body class=" yui-skin-sam"> |
|
97 |
|
98 <h1>Building a UI with AsyncQueue</h1> |
|
99 |
|
100 <div class="exampleIntro"> |
|
101 <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> |
|
102 <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> |
|
103 |
|
104 </div> |
|
105 |
|
106 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
107 |
|
108 <div id="demo"> |
|
109 <p>The module will be inserted here. <em>Click the button below</em>.</p> |
|
110 </div> |
|
111 |
|
112 <button id="init">Initialize Application</button> |
|
113 |
|
114 <script type="text/javascript" src="{{ MEDIA_URL }}js/client/c_server_exchange.js"></script> |
|
115 <script type="text/javascript" src="{{ MEDIA_URL }}js/client/c_util.js"></script> |
|
116 <script type="text/javascript"> |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 sv_adminKey = 1; |
|
123 gInFrame = false; |
|
124 requestDone = false; |
|
125 animEnded = false; |
|
126 |
|
127 |
|
128 CY = null ; |
|
129 /* |
|
130 Coment = function(){ |
|
131 this.NAME = 'Asynchronous Queue Demo' ; |
|
132 |
|
133 this.q = new CY.AsyncQueue() ; |
|
134 this.nodes = { |
|
135 root : null, |
|
136 status : null, |
|
137 nav : null, |
|
138 content : null, |
|
139 foot : null |
|
140 } ; |
|
141 } ; |
|
142 |
|
143 Coment.prototype = { |
|
144 fun1 : function() { |
|
145 alert(CY) ; |
|
146 }, |
|
147 fun2 : function() { |
|
148 alert(CY) ; |
|
149 } |
|
150 } ; |
|
151 */ |
|
152 |
|
153 |
|
154 experimentRet = function () { |
|
155 requestDone = true ; |
|
156 CY.log("requestDone now true") ; |
|
157 } ; |
|
158 |
|
159 MyApp = function() { |
|
160 this.NAME = 'Asynchronous Queue Demo'; |
|
161 |
|
162 this.q = new CY.AsyncQueue() ; |
|
163 |
|
164 this.nodes = { |
|
165 root : null, |
|
166 status : null, |
|
167 nav : null, |
|
168 content : null, |
|
169 foot : null |
|
170 } ; |
|
171 } |
|
172 onEnd = function() { |
|
173 animEnded = true; |
|
174 } |
|
175 MyApp.prototype = { |
|
176 render : function (container) { |
|
177 if (this.nodes.root) { |
|
178 this.q.stop(); |
|
179 |
|
180 this.q.add( |
|
181 this.destroy |
|
182 ); |
|
183 } |
|
184 |
|
185 // artificial delays have been inserted to simulate _renderNav or |
|
186 // _renderContent being process intensive and taking a while to complete |
|
187 this.q.add( |
|
188 // pass the container param to the callback using Y.bind |
|
189 CY.bind(this._renderFramework, this, container), |
|
190 {fn: function () { |
|
191 doExchange("experiment", {}, null, experimentRet, {}, {}, "could not remove comment.") ; |
|
192 }, timeout: 1000}, // artificial delay |
|
193 {fn: function () {CY.log("requestDone : " + requestDone) ;}, until: function () {return requestDone ;}, timeout: 100}, // artificial delay |
|
194 {fn:CY.bind(this._renderNav, this), timeout:100}, |
|
195 {fn:function () {}, timeout:100, until:function(){return animEnded;}}, |
|
196 {fn: function () {}, timeout: 700}, // artificial delay |
|
197 CY.bind(this._renderContent,this) |
|
198 ).run(); |
|
199 }, |
|
200 |
|
201 destroy : function () { |
|
202 var root = this.nodes.root; |
|
203 |
|
204 if (root) { |
|
205 CY.Event.purgeElement(root,true); |
|
206 root.set('innerHTML',''); |
|
207 } |
|
208 }, |
|
209 |
|
210 setStatus : function (message,working) { |
|
211 this.nodes.status.set('innerHTML',message); |
|
212 |
|
213 this.nodes.foot[working?'addClass':'removeClass']('working'); |
|
214 }, |
|
215 |
|
216 _renderFramework : function (container) { |
|
217 var root = this.nodes.root = CY.get(container); |
|
218 |
|
219 root.set('innerHTML', |
|
220 '<div class="yui-module">'+ |
|
221 '<div class="yui-hd">'+ |
|
222 '<h4>'+this.NAME+'</h4>'+ |
|
223 '</div>'+ |
|
224 '<div class="yui-bd">'+ |
|
225 '<div class="yui-nav"></div>'+ |
|
226 '<div class="yui-content"></div>'+ |
|
227 '</div>'+ |
|
228 '<div class="yui-ft">'+ |
|
229 '<p class="yui-status"></p>'+ |
|
230 '</div>'+ |
|
231 '</div>'); |
|
232 |
|
233 this.nodes.status = root.query('p.yui-status'); |
|
234 this.nodes.nav = root.query('.yui-nav'); |
|
235 this.nodes.content = root.query('.yui-content'); |
|
236 this.nodes.foot = root.query('.yui-ft'); |
|
237 |
|
238 this.nodes.nav.setStyle('top','-30px'); |
|
239 this.nodes.content.setStyle('opacity',0); |
|
240 |
|
241 this.setStatus('Loading...',true); |
|
242 }, |
|
243 |
|
244 _renderNav : function () { |
|
245 var nav = this.nodes.nav; |
|
246 nav.appendChild(CY.Node.create( |
|
247 '<ul>'+ |
|
248 '<li><a href="#">Nav Lorem</a></li>'+ |
|
249 '<li><a href="#">Nav Ipsum</a></li>'+ |
|
250 '<li><a href="#">Nav Dolor</a></li>'+ |
|
251 '<li><a href="#">Nav Sit</a></li>'+ |
|
252 '</ul>')); |
|
253 |
|
254 var anim = new CY.Anim({ |
|
255 node : nav, |
|
256 to : { top : 0 }, |
|
257 duration : 3 |
|
258 }) ; |
|
259 anim.on('end', onEnd); |
|
260 anim.run(); |
|
261 }, |
|
262 |
|
263 _renderContent : function () { |
|
264 var content = this.nodes.content; |
|
265 |
|
266 content.appendChild(CY.Node.create( |
|
267 '<p>[ App content here ]</p>')); |
|
268 |
|
269 new CY.Anim({ |
|
270 node : content, |
|
271 to : { opacity : 1 }, |
|
272 duration : .8 |
|
273 }).run(); |
|
274 |
|
275 this.setStatus('App initialized',false); |
|
276 } |
|
277 }; |
|
278 |
|
279 |
|
280 |
|
281 YUI({base:"{{ MEDIA_URL }}js/lib/yui/{{ YUI_VERSION }}/build/", timeout: 10000}).use("anim", "queue", "io","json",function (Y) { |
|
282 CY = Y; |
|
283 var myApp = new MyApp() ; |
|
284 |
|
285 Y.get('#init').on('click',function (e) { |
|
286 e.preventDefault(); |
|
287 this.set('innerHTML','Re-initialize Application'); |
|
288 |
|
289 myApp.render('#demo'); |
|
290 }); |
|
291 |
|
292 // expose the example structure |
|
293 YUI.example = { MyApp : MyApp }; |
|
294 }); |
|
295 </script> |
|
296 |
|
297 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
298 |
|
299 </body> |
|
300 </html> |