EnyoJS Tutorial #9 – Waterfalling Event

Last chapter of event handling is the waterfalling event jutsu!.

So, big question is, what’s with the waterfalling?

I’m sure you know by now, how bubbling event works in part 3 of my tutorial here. The child bubbles an event to be picked up by the parent control.

Waterfall however is the direct opposite, this time is the parent sending event to any of it’s children controls provided they have a handler ready to receive it.

By using bubbling and waterfalling technique, the kind classes you make become more encapsulated and robust.

To demonstrate a waterfalling technique. I’m going to write a scenario where, the child needs the parent to waterfall down event and the values from the bubbler down to another child kind. Notice in this tutorial, no set or get or function is used only pure event bubbling, handling and waterfalling. I also took the time to show some example on how some controls in enyo is styled in app.css.

When the button “WaterFall Now” is tapped, it will bubble an event to the parent App.js, and App.js being a parent of everything (header, footer, menu and content), will then, grab the value of the color selected, and waterfall the an event with the value to the center button changing it’s color. The highlight controls of today’s tutorial are App.js waterfalling values to the CenterButton.js (the control with the center button in the picture).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
enyo.kind({
	name: "App",
	kind: "FittableRows", 
	classes: "enyo-fit enyo-unselectable",
	components: [
            { kind:"Header" },
            { 
               classes:"center",
               components:[
                  { name:"colorMenuControl", kind:"ColorMenu" }
               ] 
           },
           {   
                name:"contentPage",
                fit:true,
                classes:"contentBg center",
                components:[
                    {
                        kind:"CenterButton"
                    }
                ]
           },
           { 
                kind:"Footer",
                onSendWaterfall:"handleButtonWaterFallTapped" 
           }
	],
	create: function(){
		  this.inherited(arguments);
	},
        handleButtonWaterFallTapped:function(inSender,inEvent) {
             // Upon receiving event onSendWaterfall bubbling from this Footer.js;
             // We need to get the values from the kind named "ColorMenu.js"
             // To obtain a radioGroup value, by default, it comes with attribute "active"
             // which is the currently active child-control. From that control we just
             // need to query it's content.
             console.log( "Content value from ColorMenu is : "+ this.$.colorMenuControl.active.content );
 
             //Next, getting it's content from ColorMenu. We then waterfall it.
             //By setting an object as 2nd parameter makes it accessible in inEvent of the handler
             //which we will handle in CenterButton.js
            this.waterfall("onParentWaterFall",{color:this.$.colorMenuControl.active.content});  
      }
});

Next, let’s look at CenterButton.js, in this class, you’ll notice there’s a new handlers:{} attribute. This is how we insert a handler which is the “bucket” to receive the incoming “waterfalled” value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
enyo.kind({
	name: "CenterButton",
	kind:"onyx.Button",
	style:"margin-top:120px",
	classes:"centerButton",
	content:"I'm Just A Button",
	handlers:{
		// Place the handler bucket and you are all set :)
		onParentWaterFall:"handleFetchWater"
	},
	handleFetchWater:function(inSender,inEvent){
		// Let's console the incoming value;
		// Notice that, it has the object properties color waterfalled
		// to it without any other function call !!. 
		console.log(inEvent);
		// Taking the value of color, we then, style the button in response.
		// add !important to force it just incase, the style is overrided.
		this.setStyle("background:"+inEvent.color+" !important");
	}
});

By combining this bubble and waterfall concept, you can make very robust, reusable and independent controls!!

That’s it for today tutorial. Next we will move on to more advance tutorials of mixing libraries and advance enyo styling! As usual today’s tutorial.
EnyoTutorial9 (696 downloads)

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *