WP7 Mango and HTML5 applications' gestures

Ivan Chichkov's picture

I was trying to implement gestures in my prototype application for WP7 using HTML5/javascript and faced few interesting problems. After searching for solutions in developer forums, I gathered some useful information that helped me achieve the goal.
The setup - using WebBrowser control as root component in my application, to render locally available html/javascript content. My idea was to use only gestures to modify data cell content in a table, instead providing other methods to select or input the content. In short, I have numeric values in a table and would like to enable the user to select the cell and than increase/decrease the current value by swiping finger over the screen. For this to work I needed to get the manipulation delta event to work in my application.
The problem - WebBrowser component consumes these manipulation events, so they are not offered to your web application. In addition, I did not like the all the time popping copy/paste while selecting a cell in my table.
So, the search led me to few useful articles:
http://www.developer.nokia.com/Community/Wiki/Creating_GUI_applications_for_Qt_and_WP7_using_HTML - addressing the creation of HTML5 project and enabling communications between your WP7 application and javascript.
http://www.scottlogic.co.uk/blog/colin/2011/11/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control/ - some useful information about the visual tree structure of WebBrowser component in WP7.
Ok, so armed with this knowledge I approached my problem as follow:
1. In WebBrowser.LoadCompleted callback I got to the Border child consuming the manipulation events, according to second link article it is the fifth element in WebBrowser children tree:

          \-Border (*)

private void WebB_LoadCompleted(object sender, NavigationEventArgs args)
var border = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(WebB, 0), 0), 0), 0), 0);
if (border.GetType().Equals(typeof(Border)))
(border as Border).ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(WebBBorder_ManipulationDelta);

As you see, first got the Border element, than register a callback to delta event and at the end inform the script that WebBrowser is ready with loading the content.
Now I have the possibility to use the delta manipulation event, so in the callback:

double lastTouch = 0;
private void WebBBorder_ManipulationDelta(object sender, ManipulationDeltaEventArgs args)
args.Handled = true; // handle the event to avoid scrolling the viewport
//however, we need the event to trigger the javascript action, so
double x = (args.CumulativeManipulation as ManipulationDelta).Translation.X;
double y = (args.CumulativeManipulation as ManipulationDelta).Translation.Y;
double d = Math.Abs(x) + Math.Abs(y);
if (d - 30 > lastTouch)
lastTouch = d;
else if (lastTouch - 20 > d)
lastTouch = d;

The main achievement is the event cancelation at args.Handled=true;. The rest is just a calculation suitable for my case, but you may prefer to send the manipulation delta to your javascript and do any logic there. I just have two simple scripts invoked to increase or decrease the selected value.
Oh, and yes, I chose to disable the copy/paste in my table tag by adding event handler as onselectstart="return false".
Now, the result is
a. my application WebBrowser viewport is not scrolling and instead of consuming the manipulation events, I intercepted them and have a choice to call my script with their data.
b. this would enable me to use multitouch events to manipulate my html data.
c. got rid of unwanted copy/paste popup
Be aware that there is a good cross platform framework. PhoneGap, enabling many functionalities, but if you are not targeting cross platform deployment, or even if you are, you might need to do similar workarounds in your applications for HTML5. The reason is, as example, the gestures are not addressed by PhoneGap, and in any case, you may need different functionality depending on your application needs. 


Mahdi Alkhatib's picture

please can you define "callback" term and "delta"

Ivan Chichkov's picture

The callback term is used to specify a method to be called when sertein event occurs, in out case:
(border as Border).ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(WebBBorder_)ManipulationDelta);
when ManipulationDelta event occurs on the Border, WebBBorder_ManipulationDelta method is called, passing the 'object sender' and 'ManipulationDeltaEventArgs args'. 
The delta is parameter in 'args', passed back to our callback. 

archer bit's picture

nice sharing....

matthewkodyy's picture

I think if you want to take the advantage of HTML5 application development then you have to use the Google chrome browser with IDE.
PSD to Wordpress Theme

jaides singj's picture

I like HTML5 applications because it is easy to find expert for them in my area in India. Also the price I need to pay them for their services is quite reasonable. price4india.co.in

kevin stark's picture

HTML 5 allows user to do many things such as it allows you to describe content more precisely, Much more diverse range of presentation options. It also includes all user friendly features.Mobile Application development