source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-mix.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-mix.html@5259
Revision 5259, 14.4 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: The YUI Global Object: Add Behaviors to Objects with <code>mix</code></title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16
17<!--there is no custom header content for this example-->
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
21
22</head>
23<body id="yahoo-com" class=" yui-skin-sam">
24<div id="custom-doc" class="yui-t2">
25<div id="hd">
26        <div id="ygunav">
27                <p>
28            <em>
29                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
30            </em>
31                </p>
32                <form action="http://search.yahoo.com/search" id="sitesearchform">
33            <input name="vs" type="hidden" value="developer.yahoo.com">
34            <input name="vs" type="hidden" value="yuiblog.com">
35                    <div id="sitesearch">
36                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
37                            <input type="text" id="searchinput" name="p">
38                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
39                    </div>
40                </form>
41    </div>
42        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
43        <div id="pagetitle"><h1>YUI Library Examples: The YUI Global Object: Add Behaviors to Objects with <code>mix</code></h1></div>
44</div>
45<div id="bd">
46
47        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
48
49        <div id="yui-main">
50                <div class="yui-b">
51                  <div class="yui-ge">
52                          <div class="yui-u first example" id="main">
53
54        <h2>The YUI Global Object: Add Behaviors to Objects with <code>mix</code></h2>
55
56        <div id="example" class="promo">
57        <p>
58        <p>Static classes in JavaScript are implemented as object literals
59with keys corresponding to public class methods.  As such, static classes
60aren't candidates for instantiation or prototype extention.  To add
61functionality to static classes, you need to work with the class's object
62literal &amp; and that's what YUI's <code>mix</code> method helps you to do.</p>
63
64<p>Click the button below to call methods <code>mix</code>ed into a static class, then read the tutorial below for more information about using <code>mix</code>.</p>
65        </p>   
66
67        <div class="module example-container ">
68                        <div class="hd exampleHd">
69                        <p class="newWindowButton yui-skin-sam">
70                <a href="yui-mix_clean.html" target="_blank">View example in new window.</a>
71            </p>
72                </div>          <div id="example-canvas" class="bd">
73
74               
75        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
76       
77        <input type="button" name="demo_btn" id="demo_btn" value="click"/>
78<div id="demo_logger"></div>
79<script type="text/javascript">
80YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {example:true}}).use("node",
81// This method is in the core of the library, so we don't have to use() any
82// additional modules to access it.  However, this example requires 'node'.
83
84function(Y) {
85
86    Y.namespace('example.addons');
87
88    Y.example.addons.Logging = function () {
89        var logger = null;
90       
91        return {
92            initLogger : function (logNode) {
93                if (!logger) {
94                    logger = Y.get(logNode);
95                }
96            },
97
98            log : function (message) {
99                if (logger) {
100                    logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
101                }
102            }
103        }
104    }();
105
106    Y.example.PageController = function () {
107        var app_const = 12345;
108
109        return {
110            getConst : function () { return app_const },
111            logConst : function () {
112                this.initLogger('#demo_logger');
113                this.log('PageController class constant = ' +
114                          this.getConst() +
115                          '.  Logged courtesy of augmentation');
116            }
117        };
118    }();
119
120    Y.mix(
121        Y.example.PageController,
122        Y.example.addons.Logging);
123
124    Y.on('click', Y.example.PageController.logConst, 
125                  '#demo_btn', Y.example.PageController);
126});
127</script>
128       
129        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
130       
131               
132                </div>
133        </div>                 
134        </div>
135               
136        <h2 class="first">Using <code>mix</code></h2>
137
138<h3>Instantiate YUI</h3>
139<textarea name="code" class="JScript">
140<!-- include yui -->
141<script type="text/javascript" src="../../build/yui/yui.js"></script>
142YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {example:true}}).use("node",
143// This method is in the core of the library, so we don't have to use() any
144// additional modules to access it.  However, this example requires 'node'.
145
146function(Y) {
147</textarea>
148
149<h3>Adding functionality to individual objects</h3>
150<p>Static classes, such as <code>DOM</code>, are implemented as object literals
151with keys corresponding to public class methods.  As such, static classes
152aren't candidates for instantiation or prototype extention.  To add
153functionality to static classes, you need to work with the class's object
154literal.</p>
155
156<p>In this example, <code>mix</code> is used to add a set of behaviors to a static class.</p>
157
158<p>We'll create a namespace <code>example.addons</code> to hold common packages
159of static methods and members.  In this namespace, we'll create a set of
160logging functions.</p> 
161<textarea name="code" class="JScript" cols="60" rows="1">Y.namespace('example.addons');
162
163Y.example.addons.Logging = function () {
164    var logger = null;
165   
166    return {
167        initLogger : function (logNode) {
168            if (!logger) {
169                logger = Y.get(logNode);
170            }
171        },
172
173        log : function (message) {
174            if (logger) {
175                logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
176            }
177        }
178    }
179}();
180
181</textarea>
182
183<p>Now a targeted class that would benefit from these methods can add them
184using <code>mix</code> while keeping its source focused and
185unique.</p> 
186<textarea name="code" class="JScript" cols="60" rows="1">Y.example.PageController = function () {
187    var app_const = 12345;
188
189    return {
190        getConst : function () { return app_const },
191        logConst : function () {
192            this.initLogger('#demo_logger');
193            this.log('PageController class constant = ' +
194                      this.getConst() +
195                      '.  Logged courtesy of augmentation');
196        }
197    };
198}();
199
200Y.mix(
201    Y.example.PageController,
202    Y.example.addons.Logging);
203
204Y.on('click', Y.example.PageController.logConst,
205              '#demo_btn', Y.example.PageController);
206
207</textarea>
208
209<h3>Much like <code>augment</code></h3>
210<p><code>mix</code> works in similar fashion to <code>augment</code>.  In fact, <code>augment</code> uses <code>mix</code> under the hood.  However, rather than adding functionality to class definitions (i.e. function prototypes), <code>mix</code> can work with any object, including object literals and class instances.</p>
211
212<p>See <code>augment</code> and <code>extend</code> for other techniques to help manage your code structure.</p>
213                                </div>
214                                <div class="yui-u sidebar">
215                                       
216                               
217                                        <div id="examples" class="mod box4">
218                        <div class="hd">
219                                                <h4>
220    The YUI Global Object Examples:</h4>
221                        </div>
222                                                <div class="bd">
223                                                        <ul>
224                                                                <li><a href='../yui/yui-core.html'>YUI Core</a></li><li><a href='../yui/yui-more.html'>Load All Modules</a></li><li><a href='../yui/yui-multi.html'>Multiple Instances</a></li><li><a href='../yui/yui-compat.html'>YUI 2.x and 3.x</a></li><li><a href='../yui/yui-loader-ext.html'>YUI Loader - Dynamically Adding YUI and External Modules</a></li><li><a href='../yui/yui-extend.html'>Create Class Hierarchies with <code>extend</code></a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code></a></li><li class='selected'><a href='../yui/yui-mix.html'>Add Behaviors to Objects with <code>mix</code></a></li><li><a href='../yui/yui-merge.html'>Combine Data Sets with <code>merge</code></a></li><li><a href='../yui/yui-isa.html'>Check Data Types with <code>Lang</code></a></li><li><a href='../yui/yui-ua.html'>Browser Detection with <code>UA</code></a></li>                                                      </ul>
225                                                </div>
226                                        </div>
227                                       
228                                        <div class="mod box4">
229                        <div class="hd">
230                                                <h4>More The YUI Global Object Resources:</h4>
231                        </div>
232                        <div class="bd">
233                                                <ul>
234                                                        <!-- <li><a href="http://developer.yahoo.com/yui/yui/">User's Guide</a> (external)</li> -->
235                                                <li><a href="../../api/module_yui.html">API Documentation</a></li>
236</ul>
237                        </div>
238                                        </div>
239                          </div>
240                </div>
241               
242                </div>
243        </div>
244
245
246<div class="yui-b toc3" id="tocWrapper">
247<!-- TABLE OF CONTENTS -->
248<div id="toc">
249       
250<ul>
251<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</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="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="selected "><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</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="Base - Functional Examples" href="../../examples/base/index.html">Base</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="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</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="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</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 Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (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><li class="sect">YUI Articles on the YUI Website</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="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
252</div>
253</div>
254        </div><!--closes bd-->
255
256        <div id="ft">
257        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
258        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
259            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
260            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
261            <a href="http://careers.yahoo.com/">Job Openings</a></p>
262        </div>
263</div>
264<script src="../../assets/dpSyntaxHighlighter.js"></script>
265<script language="javascript"> 
266dp.SyntaxHighlighter.HighlightAll('code'); 
267</script>
268</body>
269</html>
270<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:34 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.