Adding jQuery mobile swipe event to pui widget for PhoneGap app

[drussellau75]

Is it possible to add a jQuery mobile "swipe" event to a pui widget, such as an image? I have a mobile app that is using Phone Gap and I would like to take advantage of the "swipe" ability provided on Android and iOS phone screens to swipe the image and make the image appear to visually slide off the screen. I can use the "click" event on the image to fire the jQuery slide action and that works perfectly, but a swipe event would be much more natural in the mobile environement. I've tried using the addEvent function on the 'onload' event of the screen format to attach a swipe event to the image, but I get a PUI Error saying that "swipe" is not a function. I have the jquery css and js files defined in the external css and js properties for the screen format.

Here is the simple javascript I'm using on the "onload" event to attempt to attach the "swipe" event...

var imgobj = window.document.getElementById("Image1");

alert("Image width ="+ imgobj.width); // just a message to let me know I've got a handle on the image

// the following line gets a PUI error saying that "swipe" is not a function

addEvent(imgobj, "swipe", function ()
{
alert("swiped!"); // simple action to fire when swipe is handled
});

[Scott Klement]

Our image widget simply puts an HTML <img> tag onto your display. I am not familiar with jQuery, but if it works with a standard <img> tag, it should work with Profound UI's image widget.

One of the great things about PUI is that it does use standard HTML5, CSS and JavaScript. For that reason, you can use it with lots of other web tools out there, and combine those tools with PUI to do all sorts of wonderful things. That's a vey powerful thing! But, on the other hand, it does not mean that Profound's staff is familiar with all of the frameworks and tools on the market. I can tell you what PUI's tools do, but I can't tell you how jQuery or other frameworks work.

[drussellau75]

Thanks so much for your reply Scott.

Here's a little more detail about what I'm trying to accomplish...

I’m trying to add an event handler to a PUI image widget for a mobile application that uses PhoneGap. Since PUI does not provide a built-in widget event property for a mobile “swipe”, “swipeleft”, or “swiperight” event, I was attempting to use the PUI “addEvent” javascript function to add those events to the image widget. The swipe events are available in jQuery mobile, so I referenced the jQuery mobile “js” and “css” files in the “external css” and “external js” properties for the widget, and then tried to add the event to the widget from the “onload” event of the screen format. Apparently the PUI “addEvent” javascript function does not recognize the “swipe” events of jQuery, or perhaps I’m trying to access it the wrong way, but I can’t seem to get it to add the events to the widget.

I have since been able to simulate a mobile swipe event by using PUI’s “drag and drop” events. By making the image draggable, it becomes movable with a finger swipe in the mobile environment. This gives it access to the “ondragstart” and “ondrop” events, where I can use the jQuery “animate” action to make the image appear to slide off to the right or left as someone swipes the mobile screen with their finger. The only problem was determining if the drag was moving left to right or right to left. I used empty simple containers on both left and right sides of the image and defined them as drop targets for the image. I was then able to use the DragDropInfo function to determine what target the dragged image was over when the drop happened (that is, when the finger was lifted from the mobile screen at the end of the swipe). If the image was over the container to the right, I animated the image to move right off the screen. If the image was over the container to the left, I animated the image to move off the screen to the left. So this will work, but it’s not very elegant. I was hoping to be able to attach actual jQuery event handlers to the image.

This may be something that will not work in the Profound environment, or it may be that my approach is wrong, but any advice is definitely appreciated!

[matt.denninghoff]

A google search for "javascript swipe event" lead me to conclude that "swipe" is not a standard HTML/JavaScript event. Rather, it is a specific event to jQuery library.

Our Profound addEvent API uses standard JavaScript to attach web-standard events, so I don't see how addEvent would work with jQuery's swipe. I think you'll find answers in the jQuery documentation about attaching the jQuery swipe event to an element.

This page may also be useful:
http://www.w3schools.com/jquerymobile/event_swipe.asp

[Scott Klement]

Again, I can't tell you how to use jQuery Mobile. I can only tell you how PUI works. The image is just a standard HTML <img> tag. The addEvent() API is standard JavaScript, it is not jQuery, so won't work with any jQuery-specific things like "swipe"

Presumably when you read about "swipe" in the jQuery Mobile docs/examples it does NOT use addEvent() to add it, since that is a Profound API. You need to find out what method it uses to add the event, and use that same method.

[drussellau75]

Scott,

Thanks for sending me in the right direction. Instead of attempting to add a jQuery event to the image, I used standard javascript to attach web-standard events to the image. In the 'onload' event of my screen format, I was able to use the javascript 'addEventListener' method to add 'touchstart', 'touchmove', and 'touchend' events to the image object. By accessing the xy coordinates with the 'clientX' and 'clientY' attributes at the end of a 'touchmove' event, I was able to determine the direction of the swipe and then use the jQuery 'animate' method to slide the image off the screen. So essentially I've used the same procedures jQuery uses in its 'swipe' events. Thanks so much for the help!