← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/yui/loader.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/yui/loader.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>YUI Loader</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>YUI Loader</h1>
16
 
 
17
 
    
18
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
19
 
    
20
 
 
21
 
    <div class="yui3-g">
22
 
        <div class="yui3-u-3-4">
23
 
            <div id="main">
24
 
                <div class="content"><div class="intro">
25
 
    <p>
26
 
        Loader dynamically loads script and css files for YUI modules as well as external modules.
27
 
        It includes the dependency
28
 
        infomation for the version of the library in use, and will automatically pull in
29
 
        dependencies for the modules requested. It can load the
30
 
        files from the Yahoo! CDN as well as local combo servers.
31
 
    </p>
32
 
</div>
33
 
 
34
 
<h2 id="configuration-options">Configuration Options</h2>
35
 
 
36
 
<p>The valid configuration options for Loader are as follows:<p>
37
 
<ul>
38
 
    <li><code>lang</code>: The list of preferred languages, as BCP 47 language tags, in order of preference.
39
 
    The loader uses this list to determine the best language to use for modules with
40
 
    language sensitive behavior and to load the necessary resource bundles.
41
 
    See the <a href="../intl/">Internationalization</a> module for more information.</li>
42
 
    <li><code>base</code>: The base dir</li>
43
 
    <li><code>comboBase</code>: The YUI combo service base dir. Ex: http://yui.yahooapis.com/combo?</li>
44
 
    <li><code>maxURLLength</code>: The maximum URL length a combo url should be before it's chopped into a separate request.</li>
45
 
    <li><code>comboSep</code>: The separator to use to build the combo request (defaults to &amp;)</li>
46
 
    <li><code>root</code>: The root path to prepend to module names for the combo service. Ex: 2.5.2/build/</li>
47
 
    <li><code>filter</code>: A filter to apply to result urls.  This filter will modify the default
48
 
        path for all modules.  The default path for the YUI library is the
49
 
        minified version of the files (e.g., event-min.js).  The filter property
50
 
        can be a predefined filter or a custom filter.  The valid predefined
51
 
        filters are:
52
 
        <ul>
53
 
            <li><code>DEBUG</code>: Selects the debug versions of the library (e.g., event-debug.js). </li>
54
 
            <li><code>RAW</code>: Selects the non-minified version of the library (e.g., event.js).</li>
55
 
        </ul>
56
 
        You can also define a custom filter, which must be an object literal
57
 
        containing a search expression and a replace string:
58
 
        <pre>
59
 
        myFilter: &#123;
60
 
        'searchExp': "-min\\.js",
61
 
        'replaceStr': "-debug.js"
62
 
        &#125;
63
 
        </pre>
64
 
    </li>
65
 
    <li><code>combine</code>: Use the YUI combo service to reduce the number of http connections required to load your dependencies</li>
66
 
    <li><code>ignore</code>: A list of modules that should never be dynamically loaded</li>
67
 
    <li><code>force</code>: A list of modules that should always be loaded when required, even if already present on the page</li>
68
 
    <li><code>insertBefore</code>: Node or id for a node that should be used as the insertion point for new nodes</li>
69
 
    <li><code>charset</code>: charset for dynamic nodes</li>
70
 
    <li><code>jsAttributes</code>: attributes to apply to dynamic script nodes</li>
71
 
    <li><code>cssAttributes</code>: attributes to apply to dynamic link nodes</li>
72
 
    <li><code>timeout</code>: number of milliseconds before a timeout occurs when dynamically loading nodes.  in not set, there is no timeout</li>
73
 
    <li><code>context</code>: execution context for all callbacks</li>
74
 
    <li><code>modules</code>:  A list of module definitions.  The valid module configuration data is as follows:
75
 
        <ul>
76
 
            <li><code>name</code>:       required, the component name</li>
77
 
            <li><code>type</code>:       required, the component type (js or css)</li>
78
 
            <li><code>path</code>:       required if fullpath is not specified, the path to the script from "base"</li>
79
 
            <li><code>fullpath</code>:   required if path isn't specified, the full path to the script.  "base" will not be used to build the url</li>
80
 
            <li><code>requires</code>:   array of modules required by this component</li>
81
 
            <li><code>optional</code>:   array of optional modules for this component</li>
82
 
            <li><code>supersedes</code>: array of the modules this component replaces</li>
83
 
            <li><code>after</code>:      array of modules the components which, if present, should be sorted above this one</li>
84
 
            <li><code>rollup</code>:     the number of superseded modules required for automatic rollup</li>
85
 
            <li><code>lang</code>:       array of BCP 47 language tags of languages for which this module has localized resource bundles</li>
86
 
            <li><code>condition</code>: Specifies that the module should be loaded automatically if
87
 
                a condition is met.  This is an object with up to three fields:
88
 
                <ul>
89
 
                    <li><code>trigger</code> - the name of a module that can trigger the auto-load</li>
90
 
                    <li><code>test</code> - a function that returns true when the module is to be loaded.</li>
91
 
                    <li><code>when</code> - specifies the load order of the conditional module with regard to the position of the trigger module.
92
 
                        This should be one of three values: <code>before</code>, <code>after</code>, or <code>instead</code>.  The default is <code>after</code>.</li>
93
 
                </ul>
94
 
            </li>
95
 
        </ul>
96
 
    </li>
97
 
    <li><code>groups</code>: in 3.1.0, the groups config was added as an enhancement over the 'modules' config.  Each group can override
98
 
    the <code>base</code>, <code>comboBase</code>, <code>root</code>, <code>combine</code>, <code>maxURLLength</code>, <code>comboSep</code> and <code>modules</code>
99
 
    configs listed above.  These values are used for all of the modules listed in the group</li>
100
 
</ul>
101
 
 
102
 
<h2 id="using-loader-on-nodejs">Using Loader on Node.js</h2>
103
 
 
104
 
<p>
105
 
    Loader can be used on Node.js for offline dependency calculations as well as dynamic file serving.
106
 
</p>
107
 
 
108
 
<pre class="code prettyprint">var loader = new Y.Loader({
109
 
    &#x2F;&#x2F;Don&#x27;t combine the files
110
 
    combine: false,
111
 
    &#x2F;&#x2F;Ignore things that are already loaded (in this process)
112
 
    ignoreRegistered: true,
113
 
    &#x2F;&#x2F;Set the base path
114
 
    base: &#x27;build&#x2F;&#x27;
115
 
    &#x2F;&#x2F;And the root
116
 
    root: __dirname,
117
 
    &#x2F;&#x2F;Require your deps
118
 
    require: [ &#x27;node&#x27;, &#x27;yql&#x27; ]
119
 
});
120
 
 
121
 
var out = loader.resolve(true);
122
 
 
123
 
&#x2F;&#x2F;This will be an object of js and css files needed to complete this request.
124
 
console.log(out);</pre>
125
 
 
126
 
 
127
 
<h3 id="custom-modules">Custom Modules</h3>
128
 
<p>
129
 
You can also use custom YUI modules as well as core YUI modules:
130
 
</p>
131
 
 
132
 
<pre class="code prettyprint">var loader = new Y.Loader({
133
 
    modules: {
134
 
        foo: {
135
 
            fullpath: path.join(__dirname, &#x27;.&#x2F;foo.js&#x27;)
136
 
        }
137
 
    },
138
 
    require: [&#x27;foo&#x27;]
139
 
});</pre>
140
 
 
141
 
 
142
 
<h3 id="external-modules">External Modules</h3>
143
 
<p>
144
 
    And you can even use external modules:
145
 
</p>
146
 
 
147
 
<pre class="code prettyprint">#!&#x2F;usr&#x2F;bin&#x2F;env node
148
 
 
149
 
var Y = require(&#x27;.&#x2F;yui-min&#x27;).YUI();
150
 
 
151
 
var loader = new Y.Loader({
152
 
    base: __dirname,
153
 
    modules: {
154
 
        jquery: {
155
 
            path: &#x27;&#x2F;vendor&#x2F;jquery.js&#x27;
156
 
        },
157
 
        backbone: {
158
 
            path: &#x27;&#x2F;vendor&#x2F;backbone.js&#x27;,
159
 
            requires: [ &#x27;jquery&#x27; ]
160
 
        }
161
 
    }
162
 
});
163
 
 
164
 
loader.require(&#x27;backbone&#x27;);
165
 
 
166
 
var out = loader.resolve(true);
167
 
 
168
 
console.log(out);
169
 
 
170
 
&#x2F;*
171
 
{
172
 
    js: 
173
 
      [ &#x27;&#x2F;Users&#x2F;davglass&#x2F;src&#x2F;loader&#x2F;vendor&#x2F;jquery.js&#x27;,
174
 
        &#x27;&#x2F;Users&#x2F;davglass&#x2F;src&#x2F;loader&#x2F;vendor&#x2F;backbone.js&#x27; ],
175
 
    css: []
176
 
}
177
 
*&#x2F;</pre>
178
 
 
179
 
 
180
 
<p>
181
 
    Using this approach, you can build CLI tools to concat files for deployment or even use query string parameters
182
 
    passed to a web app to return the content.
183
 
</p>
184
 
 
185
 
<h2 id="example-config">Example config</h2>
186
 
 
187
 
<pre class="code prettyprint">YUI({
188
 
       lang: &#x27;ko-KR,en-GB,zh-Hant-TW&#x27;, &#x2F;&#x2F; languages in order of preference
189
 
       base: &#x27;..&#x2F;..&#x2F;build&#x2F;&#x27;, &#x2F;&#x2F; the base path to the YUI install.  Usually not needed because the default is the same base path as the yui.js include file
190
 
       charset: &#x27;utf-8&#x27;, &#x2F;&#x2F; specify a charset for inserted nodes, default is utf-8
191
 
       loadOptional: true, &#x2F;&#x2F; automatically load optional dependencies, default false
192
 
       combine: true, &#x2F;&#x2F; use the Yahoo! CDN combo service for YUI resources, default is true unless &#x27;base&#x27; has been changed
193
 
       filter: &#x27;raw&#x27;, &#x2F;&#x2F; apply a filter to load the raw or debug version of YUI files
194
 
       timeout: 10000, &#x2F;&#x2F; specify the amount of time to wait for a node to finish loading before aborting
195
 
       insertBefore: &#x27;customstyles&#x27;, &#x2F;&#x2F; The insertion point for new nodes
196
 
       &#x2F;&#x2F; one or more external modules that can be loaded along side of YUI.  This is the only pattern
197
 
       &#x2F;&#x2F; that was supported in 3.0.0 for declaring external modules.  3.1.0 adds &#x27;groups&#x27; support,
198
 
       &#x2F;&#x2F; which is an easier way to define a group of modules.  See below.
199
 
       modules:  {
200
 
           yui2_yde_datasource: {
201
 
               fullpath: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?2.7.0&#x2F;build&#x2F;yahoo-dom-event&#x2F;yahoo-dom-event.js&amp;2.7.0&#x2F;build&#x2F;datasource&#x2F;datasource-min.js&#x27;
202
 
           },
203
 
           yui_flot: {
204
 
               fullpath: &#x27;http:&#x2F;&#x2F;bluesmoon.github.com&#x2F;yui-flot&#x2F;yui.flot.js&#x27;,
205
 
               requires: [&#x27;yui2_yde_datasource&#x27;]
206
 
           }
207
 
       },
208
 
 
209
 
       &#x2F;&#x2F; one or more groups of modules which share the same base path and
210
 
       &#x2F;&#x2F; combo service specification.
211
 
       groups: {
212
 
           &#x2F;&#x2F; Note, while this is a valid way to load YUI2, 3.1.0 has intrinsic
213
 
           &#x2F;&#x2F; YUI 2 loading built in.  See the examples to learn how to use
214
 
           &#x2F;&#x2F; this feature.
215
 
           yui2: {
216
 
               combine: true,
217
 
               base: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;2.8.0r4&#x2F;build&#x2F;&#x27;,
218
 
               comboBase: &#x27;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?&#x27;,
219
 
               root: &#x27;2.8.0r4&#x2F;build&#x2F;&#x27;,
220
 
               modules:  { &#x2F;&#x2F; one or more external modules that can be loaded along side of YUI
221
 
                   yui2_yde: {
222
 
                       path: &quot;yahoo-dom-event&#x2F;yahoo-dom-event.js&quot;
223
 
                   },
224
 
                   yui2_anim: {
225
 
                       path: &quot;animation&#x2F;animation.js&quot;,
226
 
                       requires: [&#x27;yui2_yde&#x27;]
227
 
                   }
228
 
               }
229
 
           }
230
 
       }
231
 
}).use(&#x27;dd&#x27;, &#x27;yui_flot&#x27;, function(Y) {
232
 
    &#x2F;&#x2F; All YUI modules required to get drag and drop to work are now loaded.
233
 
});</pre>
234
 
 
235
 
 
236
 
 
237
 
</div>
238
 
            </div>
239
 
        </div>
240
 
 
241
 
        <div class="yui3-u-1-4">
242
 
            <div class="sidebar">
243
 
                
244
 
                    <div id="toc" class="sidebox">
245
 
                        <div class="hd">
246
 
                            <h2 class="no-toc">Table of Contents</h2>
247
 
                        </div>
248
 
 
249
 
                        <div class="bd">
250
 
                            <ul class="toc">
251
 
<li>
252
 
<a href="#configuration-options">Configuration Options</a>
253
 
</li>
254
 
<li>
255
 
<a href="#using-loader-on-nodejs">Using Loader on Node.js</a>
256
 
<ul class="toc">
257
 
<li>
258
 
<a href="#custom-modules">Custom Modules</a>
259
 
</li>
260
 
<li>
261
 
<a href="#external-modules">External Modules</a>
262
 
</li>
263
 
</ul>
264
 
</li>
265
 
<li>
266
 
<a href="#example-config">Example config</a>
267
 
</li>
268
 
</ul>
269
 
                        </div>
270
 
                    </div>
271
 
                
272
 
 
273
 
                
274
 
                    <div class="sidebox">
275
 
                        <div class="hd">
276
 
                            <h2 class="no-toc">Examples</h2>
277
 
                        </div>
278
 
 
279
 
                        <div class="bd">
280
 
                            <ul class="examples">
281
 
                                
282
 
                                    
283
 
                                        <li data-description="Setting up a YUI Instance">
284
 
                                            <a href="yui-core.html">YUI Core</a>
285
 
                                        </li>
286
 
                                    
287
 
                                
288
 
                                    
289
 
                                        <li data-description="Working with multiple YUI instances.">
290
 
                                            <a href="yui-multi.html">Multiple Instances</a>
291
 
                                        </li>
292
 
                                    
293
 
                                
294
 
                                    
295
 
                                        <li data-description="On-demand loading of YUI and non-YUI assets">
296
 
                                            <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
297
 
                                        </li>
298
 
                                    
299
 
                                
300
 
                                    
301
 
                                        <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
302
 
                                            <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
303
 
                                        </li>
304
 
                                    
305
 
                                
306
 
                                    
307
 
                                        <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
308
 
                                            <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
309
 
                                        </li>
310
 
                                    
311
 
                                
312
 
                                    
313
 
                                        <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
314
 
                                            <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
315
 
                                        </li>
316
 
                                    
317
 
                                
318
 
                                    
319
 
                                        <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
320
 
                                            <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
321
 
                                        </li>
322
 
                                    
323
 
                                
324
 
                                    
325
 
                                        <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
326
 
                                            <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
327
 
                                        </li>
328
 
                                    
329
 
                                
330
 
                                    
331
 
                                        <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
332
 
                                            <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
333
 
                                        </li>
334
 
                                    
335
 
                                
336
 
                                    
337
 
                                        <li data-description="Working with YUI 2 in 3">
338
 
                                            <a href="yui-yui2.html">Working with YUI 2 in 3</a>
339
 
                                        </li>
340
 
                                    
341
 
                                
342
 
                                    
343
 
                                        <li data-description="Natively use YUI Gallery Modules">
344
 
                                            <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
345
 
                                        </li>
346
 
                                    
347
 
                                
348
 
                                    
349
 
                                        <li data-description="Programatically use Loader">
350
 
                                            <a href="loader-resolve.html">Programatically use Loader</a>
351
 
                                        </li>
352
 
                                    
353
 
                                
354
 
                                    
355
 
                                        <li data-description="Executing functions in parallel">
356
 
                                            <a href="parallel.html">Using Y.Parallel</a>
357
 
                                        </li>
358
 
                                    
359
 
                                
360
 
                            </ul>
361
 
                        </div>
362
 
                    </div>
363
 
                
364
 
 
365
 
                
366
 
            </div>
367
 
        </div>
368
 
    </div>
369
 
</div>
370
 
 
371
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
372
 
<script>prettyPrint();</script>
373
 
 
374
 
</body>
375
 
</html>