← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/event-custom/flow-example.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/event-custom/flow-example.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Custom Event Bubbling and Behaviors</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>Example: Custom Event Bubbling and Behaviors</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style type="text/css">
23
 
        #fire {
24
 
        margin: 1em;
25
 
    }
26
 
        #log {
27
 
                border: 1px dotted #999;
28
 
        background-color: #FFF;
29
 
        }
30
 
        #log li {
31
 
        padding: 5px;
32
 
    }
33
 
        #log li highlight {
34
 
        color: #930;
35
 
    }
36
 
</style>
37
 
 
38
 
<div class="intro">
39
 
    <p>
40
 
        The Custom Event framework is one of the principle communication
41
 
        mechanisms in YUI.  An object can be augmented with
42
 
        <code>EventTarget</code>, enabling it to be both a host and a target
43
 
        for custom events.  Custom events fire from their host and optionally
44
 
        bubble up to one or more targets.  This allows you to make the
45
 
        interesting moments of your applications broadly available within a
46
 
        module, within a set of modules, or throughout a complex interface
47
 
        populated with rich elements.
48
 
    </p>
49
 
 
50
 
    <p>
51
 
        In this example, a simple custom event is illustrated:
52
 
        <code>testEvent</code>.  This custom event is hosted on a Publisher
53
 
        object and bubbles up to a BubbleTarget object.
54
 
    </p>
55
 
 
56
 
    <img src="../assets/event-custom/ce-example.gif"
57
 
        alt="An illustration of the relationship between the custom event, its host, and its Bubble Target.">
58
 
 
59
 
    <p>
60
 
        Like DOM events, custom event bubbling can be stopped with
61
 
        <code>e.stopPropagation()</code> and default behavior can be suppressed with
62
 
        <code>e.preventDefault()</code>.
63
 
    </p>
64
 
</div>
65
 
 
66
 
<div class="example yui3-skin-sam">
67
 
    <p>
68
 
        <button id="fire" value="Fire">Fire testEvent</button>
69
 
    </p>
70
 
 
71
 
    <div>
72
 
        <input type="checkbox" id="stopPropagation">
73
 
            <label for="stopPropagation">
74
 
                Stop Propagation (testEvent won't bubble to the BubbleTarget.)
75
 
            </label>
76
 
    </div>
77
 
    <div>
78
 
        <input type="checkbox" id="preventDefault">
79
 
            <label for="preventDefault">
80
 
                Prevent Default (testEvent's <code>defaultFn</code> won't fire.)
81
 
            </label>
82
 
    </div>
83
 
 
84
 
    <ol id="log">
85
 
        <li>Custom Event log messages will appear here.</li>
86
 
    </ol>
87
 
    <script>
88
 
    // Bubbling events are added by the event-custom module.
89
 
YUI().use('event-custom', 'node', function (Y) {
90
 
 
91
 
    var logger          = Y.one("#log");
92
 
        stopCheckbox    = Y.one("#stopPropagation"),
93
 
        preventCheckbox = Y.one("#preventDefault");
94
 
 
95
 
    // We'll create two classes, one to fire the event, and another to be a
96
 
    // bubble target for the other.  All events from the Publisher class can
97
 
    // then be subscribed from either the Publisher instance or the BubbleTarget
98
 
    // instance that it's related to.
99
 
    function BubbleTarget() {
100
 
        Y.log("BubbleTarget constructor executed.");
101
 
    }
102
 
 
103
 
    function Publisher(bubbleTo) {
104
 
        Y.log("Publisher constructor executed.");
105
 
 
106
 
        this.init(bubbleTo); // see class prototype below
107
 
    }
108
 
 
109
 
    // Publishers need to add the provided target to their bubble chain with
110
 
    // <code>addTarget</code>. We'll do this, and publish an event, in an <code>init</code> method
111
 
    Publisher.prototype = {
112
 
        init: function (bubbleTo) {
113
 
 
114
 
            // <code>addTarget</code> is the EventTarget method to register new bubble
115
 
            // targets for this instance
116
 
            this.addTarget(bubbleTo);
117
 
 
118
 
            // It's only necessary to publish events with special configuration,
119
 
            // such as default, stop, or prevent behaviors.  You can always
120
 
            // fire any event name you wish, published or unpublished.
121
 
            this.publish("testEvent", {
122
 
                // Pass an event facade to subscribers so they can call
123
 
                // e.preventDefault() and other methods.
124
 
                emitFacade: true,
125
 
 
126
 
                // An event's default behavior is defined in defaultFn.  This
127
 
                // will execute unless a subscriber calls <code>e.preventDefault()</code>
128
 
                defaultFn: function () {
129
 
                    Y.log("defaultFn: testEvent's defaultFn executed.");
130
 
                },
131
 
 
132
 
                // You can react to subscribers preventing default behavior as
133
 
                // well, by defining a preventedFn.
134
 
                preventedFn: function () {
135
 
                    Y.log("preventedFn: A subscriber to testEvent called preventDefault().");
136
 
                },
137
 
 
138
 
                // If a subscriber calls <code>e.stopPropagation()</code>, the event won't
139
 
                // bubble any further, and the stoppedFn will be called if one
140
 
                // is defined.
141
 
                stoppedFn: function () {
142
 
                    Y.log("stoppedFn: A subscriber to testEvent called stopPropagation().");
143
 
                }
144
 
            });
145
 
        }
146
 
    };
147
 
 
148
 
 
149
 
    // To fire events or be a bubble target, augment a class with EventTarget
150
 
    Y.augment(Publisher, Y.EventTarget);
151
 
    Y.augment(BubbleTarget, Y.EventTarget);
152
 
 
153
 
 
154
 
    // SEE IT IN ACTION
155
 
 
156
 
    var bubbleTarget = new BubbleTarget();
157
 
 
158
 
    // You can subscribe to the "testEvent" from the BubbleTarget, even before
159
 
    // a Publisher is created
160
 
    bubbleTarget.subscribe("testEvent", function (e) {
161
 
        Y.log("testEvent fired on the BubbleTarget object.");
162
 
    });
163
 
 
164
 
    // Create a Publisher instance, and link it to our BubbleTarget
165
 
    var publisher = new Publisher(bubbleTarget);
166
 
 
167
 
    // We can also subscribe to the testEvent on the Publisher instance.
168
 
    publisher.on("testEvent", function (e) {
169
 
        Y.log("testEvent subscriber fired on the publisher object.");
170
 
 
171
 
        if (stopCheckbox.get("checked")) {
172
 
            e.stopPropagation();
173
 
        }
174
 
        
175
 
        if (preventCheckbox.get("checked")) {
176
 
            e.preventDefault();
177
 
        }
178
 
    });
179
 
 
180
 
 
181
 
    // Wire up the example button to fire the event from our publisher
182
 
    Y.one("#fire").on("click", function (e) {
183
 
        logger.empty(); // clear out the logger:
184
 
 
185
 
        publisher.fire("testEvent");
186
 
    });
187
 
 
188
 
    // A little supporting magic to output Y.log() statements to the screen
189
 
    Y.on("yui:log", function (e) {
190
 
        logger.append("<li>" + e.msg + "</li>");
191
 
    });
192
 
 
193
 
});
194
 
 
195
 
    </script>
196
 
</div>
197
 
 
198
 
<h2>Source Code</h2>
199
 
 
200
 
<p>
201
 
    The full source code for this example follows.  Read through the comments
202
 
    and code to get an understanding of how you can make use of custom events
203
 
    in your own application development.
204
 
</p>
205
 
 
206
 
<pre class="code prettyprint">&#x2F;&#x2F; Bubbling events are added by the event-custom module.
207
 
YUI().use(&#x27;event-custom&#x27;, &#x27;node&#x27;, function (Y) {
208
 
 
209
 
    var logger          = Y.one(&quot;#log&quot;);
210
 
        stopCheckbox    = Y.one(&quot;#stopPropagation&quot;),
211
 
        preventCheckbox = Y.one(&quot;#preventDefault&quot;);
212
 
 
213
 
    &#x2F;&#x2F; We&#x27;ll create two classes, one to fire the event, and another to be a
214
 
    &#x2F;&#x2F; bubble target for the other.  All events from the Publisher class can
215
 
    &#x2F;&#x2F; then be subscribed from either the Publisher instance or the BubbleTarget
216
 
    &#x2F;&#x2F; instance that it&#x27;s related to.
217
 
    function BubbleTarget() {
218
 
        Y.log(&quot;BubbleTarget constructor executed.&quot;);
219
 
    }
220
 
 
221
 
    function Publisher(bubbleTo) {
222
 
        Y.log(&quot;Publisher constructor executed.&quot;);
223
 
 
224
 
        this.init(bubbleTo); &#x2F;&#x2F; see class prototype below
225
 
    }
226
 
 
227
 
    &#x2F;&#x2F; Publishers need to add the provided target to their bubble chain with
228
 
    &#x2F;&#x2F; &#x60;addTarget&#x60;. We&#x27;ll do this, and publish an event, in an &#x60;init&#x60; method
229
 
    Publisher.prototype = {
230
 
        init: function (bubbleTo) {
231
 
 
232
 
            &#x2F;&#x2F; &#x60;addTarget&#x60; is the EventTarget method to register new bubble
233
 
            &#x2F;&#x2F; targets for this instance
234
 
            this.addTarget(bubbleTo);
235
 
 
236
 
            &#x2F;&#x2F; It&#x27;s only necessary to publish events with special configuration,
237
 
            &#x2F;&#x2F; such as default, stop, or prevent behaviors.  You can always
238
 
            &#x2F;&#x2F; fire any event name you wish, published or unpublished.
239
 
            this.publish(&quot;testEvent&quot;, {
240
 
                &#x2F;&#x2F; Pass an event facade to subscribers so they can call
241
 
                &#x2F;&#x2F; e.preventDefault() and other methods.
242
 
                emitFacade: true,
243
 
 
244
 
                &#x2F;&#x2F; An event&#x27;s default behavior is defined in defaultFn.  This
245
 
                &#x2F;&#x2F; will execute unless a subscriber calls &#x60;e.preventDefault()&#x60;
246
 
                defaultFn: function () {
247
 
                    Y.log(&quot;defaultFn: testEvent&#x27;s defaultFn executed.&quot;);
248
 
                },
249
 
 
250
 
                &#x2F;&#x2F; You can react to subscribers preventing default behavior as
251
 
                &#x2F;&#x2F; well, by defining a preventedFn.
252
 
                preventedFn: function () {
253
 
                    Y.log(&quot;preventedFn: A subscriber to testEvent called preventDefault().&quot;);
254
 
                },
255
 
 
256
 
                &#x2F;&#x2F; If a subscriber calls &#x60;e.stopPropagation()&#x60;, the event won&#x27;t
257
 
                &#x2F;&#x2F; bubble any further, and the stoppedFn will be called if one
258
 
                &#x2F;&#x2F; is defined.
259
 
                stoppedFn: function () {
260
 
                    Y.log(&quot;stoppedFn: A subscriber to testEvent called stopPropagation().&quot;);
261
 
                }
262
 
            });
263
 
        }
264
 
    };
265
 
 
266
 
 
267
 
    &#x2F;&#x2F; To fire events or be a bubble target, augment a class with EventTarget
268
 
    Y.augment(Publisher, Y.EventTarget);
269
 
    Y.augment(BubbleTarget, Y.EventTarget);
270
 
 
271
 
 
272
 
    &#x2F;&#x2F; SEE IT IN ACTION
273
 
 
274
 
    var bubbleTarget = new BubbleTarget();
275
 
 
276
 
    &#x2F;&#x2F; You can subscribe to the &quot;testEvent&quot; from the BubbleTarget, even before
277
 
    &#x2F;&#x2F; a Publisher is created
278
 
    bubbleTarget.subscribe(&quot;testEvent&quot;, function (e) {
279
 
        Y.log(&quot;testEvent fired on the BubbleTarget object.&quot;);
280
 
    });
281
 
 
282
 
    &#x2F;&#x2F; Create a Publisher instance, and link it to our BubbleTarget
283
 
    var publisher = new Publisher(bubbleTarget);
284
 
 
285
 
    &#x2F;&#x2F; We can also subscribe to the testEvent on the Publisher instance.
286
 
    publisher.on(&quot;testEvent&quot;, function (e) {
287
 
        Y.log(&quot;testEvent subscriber fired on the publisher object.&quot;);
288
 
 
289
 
        if (stopCheckbox.get(&quot;checked&quot;)) {
290
 
            e.stopPropagation();
291
 
        }
292
 
        
293
 
        if (preventCheckbox.get(&quot;checked&quot;)) {
294
 
            e.preventDefault();
295
 
        }
296
 
    });
297
 
 
298
 
 
299
 
    &#x2F;&#x2F; Wire up the example button to fire the event from our publisher
300
 
    Y.one(&quot;#fire&quot;).on(&quot;click&quot;, function (e) {
301
 
        logger.empty(); &#x2F;&#x2F; clear out the logger:
302
 
 
303
 
        publisher.fire(&quot;testEvent&quot;);
304
 
    });
305
 
 
306
 
    &#x2F;&#x2F; A little supporting magic to output Y.log() statements to the screen
307
 
    Y.on(&quot;yui:log&quot;, function (e) {
308
 
        logger.append(&quot;&lt;li&gt;&quot; + e.msg + &quot;&lt;&#x2F;li&gt;&quot;);
309
 
    });
310
 
 
311
 
});</pre>
312
 
 
313
 
 
314
 
</div>
315
 
            </div>
316
 
        </div>
317
 
 
318
 
        <div class="yui3-u-1-4">
319
 
            <div class="sidebar">
320
 
                
321
 
 
322
 
                
323
 
                    <div class="sidebox">
324
 
                        <div class="hd">
325
 
                            <h2 class="no-toc">Examples</h2>
326
 
                        </div>
327
 
 
328
 
                        <div class="bd">
329
 
                            <ul class="examples">
330
 
                                
331
 
                                    
332
 
                                        <li data-description="Publish an event with a default behavior, as well as behaviors for reacting to preventing the default or stopping bubbling.">
333
 
                                            <a href="flow-example.html">Custom Event Bubbling and Behaviors</a>
334
 
                                        </li>
335
 
                                    
336
 
                                
337
 
                            </ul>
338
 
                        </div>
339
 
                    </div>
340
 
                
341
 
 
342
 
                
343
 
            </div>
344
 
        </div>
345
 
    </div>
346
 
</div>
347
 
 
348
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
349
 
<script>prettyPrint();</script>
350
 
 
351
 
</body>
352
 
</html>