Not understanding this example...

bobvaun · April 2012

The following sample code was written for Enyo 1.0 and the first kind defined was originally VFlexBox which I understand is no longer valid so I tried changing it to enyo.Control. I am new to Enyo and fairly new to Javascript. My background is more Java, C#, firmware, etc.

I've been trying to learn Enyo for possible use in some product code. Right now I just want to learn the support Enyo has for gestures and touch events on a tablet. This demo code seemed like a perfect fit. One thing I don't understand though is how the gesture events get registered. Maybe Enyo handles that but I don't see it in the code. I don't see anywhere where gesture event handlers are referenced. So how would they ever get called? Would I find this documented anywhere?

As an aside I do want to thank everyone who posts sample code. It is invaluable. Enyo is not yet heavily documented so this tidbits are gold mines. My only wish is that more would be complete solutions. I know to the author it is obvious where and how to use their sample code but to a newbie nothing is obvious. These forums are great but a 24 hour turnaround on questions is not uncommon so the more complete and obvious the samples can be the better. :)

Is this solution missing anything:


<!DOCTYPE HTML>
<html>
  <head>
    <title>Enyo Gestures</title>
    <link href="enyo-2.0b2/enyo.css" rel="stylesheet" type="text/css" />
  	<script type="text/javascript" charset="utf-8" src="enyo-2.0b2/enyo.js"></script>  
  </head>
  <body>
	<script type="text/javascript">
		enyo.kind({
			name : "Simple",
			kind : enyo.Control,
			components : 
			[
				{
					kind : "Header",
					content : "Simple Multitouch Example",
					constructor: function() 
					{
      					this.data = [];
  					}
				},
			
				{ 
					kind: enyo.Control,
					name:"mtouch",
					id:"mtouch",
					content: "Touch, drag, or pinch-zoom inside the green box to begin."
				},
		
				{
					kind: enyo.Control,
					name: "canvas",
					nodeTag: "canvas",
					domAttributes: 
					{ 
						width:"1020px", 
						height:"656px", 
						style: "border: 2px solid #98bf21;"
					}
				}
			],
		
			rendered : function() 
			{
				this.inherited(arguments);
				this.$.canvas.hasNode();
			},
		
			gesturestartHandler: function(inSender, event) 
			{
				this.$.mtouch.setContent("***** gesturestart: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);       
			},	
		
			gesturechangeHandler: function(inSender, event) 
			{
		
				this.$.mtouch.setContent("***** gesturechange: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "blue";
				c.fillRect(event.centerX,event.centerY,10,10);	        
			},
			
			gestureendHandler: function(inSender, event) 
			{
				this.$.mtouch.setContent("***** gestureend: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);
			}, 
		
			mousedownHandler: function(inSender, event) 
			{
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "green";
				c.fillRect(event.offsetX,event.offsetY,10,10);	        
			},
		
			mousemoveHandler: function(inSender, event) 
			{	
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "red";
				c.fillRect(event.offsetX,event.offsetY,10,10);	        
			}
			
		});
		new Simple().write();
	</script>  
  </body>
</html>

omastudios · April 2012

all of the method names ending with "Handler" are registered as event handlers for their prefixes by enyo (e.g. 'gesturestartHandler' is binded to the 'ongesturestart' event). The events should fire find provided you are on touch-based device.

unwiredben · April 2012

That was the method in Enyo 1, but in Enyo 2, we use a handlers array instead where you can setup your own mappings. You'd need to add a property that looks like

handlers: {
    ongesturestart: "gesturestartHandler",
    ongesturechange: "gesturechangeHandler",
    ....
},

bobvaun · April 2012

Ok thanks. When I load the page from my TouchPad I get the text saying to "Touch, drag, ..." but there is not a green box as defined in the canvas control. The page is otherwise blank and there is nothing to do with it. I tried making the dimensions of the canvas smaller (800x600) but that did nothing.

bobvaun · April 2012

Do those mouse events cover taps? I thought taps were separate.

omastudios · April 2012

Ah sorry, was in enyo 1.0 mindset :-)

I think you have to change the name of the 'nodeTag' property in the declaration to just 'tag' (although I'm not certain if enyo 2 supports both).

unwiredben · April 2012

It only does "tag".

bobvaun · April 2012

I think you are right about 'nodeTag' being 'tag'. I also suspect 'domAttributes' should be just 'attributes'. I can't find a reference in Enyo 2.0 to 'domAttributes'. Despite those changes and adding the handler block I am still not seeing a green box...

bobvaun · April 2012

On the handler block you used square braces but the documentation shows curly braces. Does it matter?

unwiredben · April 2012

Yes, they should be curly. Square braces are for arrays, curly ones declare objects.

bobvaun · April 2012

Something is still not right. No green box appears, no header, and the alerts I added never show...


<!DOCTYPE HTML>
<html>
  <head>
    <title>Enyo Gestures</title>
    <link href="enyo-2.0b2/enyo.css" rel="stylesheet" type="text/css" />
  	<script type="text/javascript" charset="utf-8" src="enyo-2.0b2/enyo.js"></script>  
  </head>
  <body>
	<script type="text/javascript">
		enyo.kind({
			name : "Simple",
			kind : enyo.Control,
			components : 
			[
				{
					kind : "Header",
					content : "Simple Multitouch Example",
					constructor: function() 
					{
      					this.data = [];
  					}
				},
			
				{ 
					kind: enyo.Control,
					name:"mtouch",
					id:"mtouch",
					content: "Touch, drag, or pinch-zoom inside the green box to begin."
				},
		
				{
					kind: enyo.Control,
					name: "canvas",
					tag: "canvas",
					attributes: 
					{ 
						width:"800px", 
						height:"600px", 
						style: "border: 2px solid #98bf21;"
					}
				},
				
				handlers: 
				{
					ongesturestart: "gesturestartHandler",
					ongesturechange: "gesturechangeHandler",
					ongestureend: "gestureendHandler",
					onmousedown: "mousedownHandler",
					onmousemove: "mousemoveHandler",
					ontap: "tapHandler"
				},
			
			],
		
			rendered : function() 
			{
				this.inherited(arguments);
				this.$.canvas.hasNode();
				alert('rendered function called');
				if (this.$.canvas.hasNode()) {
					console.log(this.$.canvas.node.nodeType);
				}
			},

			tapHandler: function(inSender, event)
			{
				alert('tap handler entered');
			},
				
			gesturestartHandler: function(inSender, event) 
			{
				this.$.mtouch.setContent("***** gesturestart: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);       
			},	
		
			gesturechangeHandler: function(inSender, event) 
			{
		
				this.$.mtouch.setContent("***** gesturechange: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "blue";
				c.fillRect(event.centerX,event.centerY,10,10);	        
			},
			
			gestureendHandler: function(inSender, event) 
			{
				this.$.mtouch.setContent("***** gestureend: event.scale: " + event.scale + ", event.centerX: " + event.centerX + ", event.centerY: " + event.centerY);
			}, 
		
			mousedownHandler: function(inSender, event) 
			{
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "green";
				c.fillRect(event.offsetX,event.offsetY,10,10);	        
			},
		
			mousemoveHandler: function(inSender, event) 
			{	
				var can = this.$.canvas.node;  
				var c = can.getContext('2d');
		
				c.fillStyle = "red";
				c.fillRect(event.offsetX,event.offsetY,10,10);	        
			}
			
		});
		new Simple().write();
	</script>  
  </body>
</html>

sjmiles · April 2012

Look here:

http://jsfiddle.net/DTPGv/1/

bobvaun · April 2012

Thank you! I'm not sure if it was some change or moving to the beta 3 version that did the trick. Is there a way to keep the whole canvas from moving on the screen? All drag does is move the whole canvas (white area) against the gray background.

azakus · April 2012

Just FYI, there's a enyo canvas lib. https://github.com/enyojs/canvas

bobvaun · April 2012

What causes the gesture events to fire? I am running this both on a laptop and a TouchPad. On the laptop I can click with the mouse and get the "down" event. If I move the cursor around with the mouse I get the "move" event. On the TouchPad if I touch I get the "down" event but if I touch and drag I only get the "down" event when I first touch. Pinching and resizing does not generate any gesture events. I can't seem to generate any gesture events.

azakus · April 2012

Enyo doesn't listen to gesture events because they are only generated by iOS devices.
Also, touch events do not have an offsetX or offsetY.

bobvaun · April 2012

So if I wanted to write an application that responded to pinches, swipes, etc, and have it run on both iOS and non-iOS devices (e.g. Android or Windows Phone) do I have to do it all through touch events or are there other events Enyo has for this kind of thing?

bobvaun · April 2012

Ok it looks like gesture.js and drag.js contain the parts I need. I assume when you decide to use something out of such files you add them to your package.js as follows:



enyo.depends(
	"enyo-2.0b3/enyo/source/dom/gesture.js",
	"enyo-2.0b3/enyo/source/dom/drag.js"
);

My sample code is catching the 'down' and 'tap' events but nothing happens when I drag after touching. In fact the entire canvas moves. What would capture the drag event and how do you anchor the canvas so it does not move?

azakus · April 2012

Those are included by default with enyo.

The Event Handling docs cover which events enyo dispatches in the section titled "DOM and DOM-like Events" at the bottom of the page.

bobvaun · April 2012

Great thanks. So shouldn't a touch then drag generate a 'dragstart' and 'dragend' event? I have the following in my code:



			handlers: 
			{
				ondragstart: "dragstart",
				ondragend: "dragend",
				ondragover: "dragover",
				ondragout: "dragout",
				onhold: "hold",
				onrelease: "release",
				onholdpulse: "holdpulse",
				onflick: "flick"
			},

            dragstart: function(inSender, event)
            {
            	var msg = this.$.mtouch.getContent();            
            	this.$.mtouch.setContent(msg + ", DRAGSTART EVENT");
            },
            	
            dragend: function(inSender, event)
            {
            	var msg = this.$.mtouch.getContent();            
            	this.$.mtouch.setContent(msg + ", DRAGEND EVENT");
            },

At the moment I am just appending a drag event notification to a header area. I have other events and handlers not shown like 'ontap' that are getting called but nothing gets called on a drag.

bobvaun · April 2012

I read in an old post that the Enyo gesturing events do not all work in a browser but only in a local app. Is that still the case?

unwiredben · April 2012

I think it depends. On webOS, there is a native gesture event that's sent to applications, but it's in the browser. On Android/iOS, there shouldn't be much difference between the browser and the view in a PhoneGap application.

Not understanding this example...

Comments

Howdy, Stranger!

Categories