Those Darn Gray Box's

(if you just need the hack er I mean 'solution' skip to the end)

ok so I was talking or rather tweeting with @ColinEberhardt about this issue with the gray box in IE on #wp7 (see his post at: https://github.com/phonegap/phonegap-wp7/issues/26). I've been working on my own HTMLApplicationHost Framework for doing HTML based WP7 apps and post this on codeplex: http://htmlappwp7.codeplex.com/ since what march I think. I've gotten 3 such apps in the Windows Phone 7 market place and one in Android that are HTML based. Here are a few links to some of those.

SMART Spending Habits: Windows Phone 7 (Deeplink, Paid version): http://windowsphone.com/s?appid=b44a9f3a-3480-4923-aa35-df26f6eb3c9e

SMART Spending Habits: Android 2.2 Version: https://market.android.com/details?id=com.SMART.SpendingHabits

I'm not sure I'm an expert at HTML phone apps yet but I do strongly believe that just about anything is possible and that there must be a solution to this gray box issue on phone 7 (wp7). So I took on the task of seeing what I could do. I started with creating a new phone 7 app that used my HTML Application Host framework etc (blah blah blah setting up stuff etc) so I got to the point of having my index.html page and started my tests in #wp7.

So the first test looked like this:

function test1() {
test1Location.innerHTML = "test 1 complete";
}

<div id="test1Location"><a onclick="test1();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463#">test1</a></div>

running this clearly made the gray box... so I tried this:

<div id="test2Location"><a href="javascript:test2();">test 2

function test2() {
test2Location.innerHTML = "test 2 complete";
}

and as expected this made a nice gray box as well. So I tried this hoping it would work better:

function test3() {
test3Location.innerHTML = "test 3 complete";
}


<div onclick="test3();" id="test3Location"><u>test 3</u></div>

but alas this made a nice gray box too... *grr* so at this point I went back to Colin's post and watched the video and read a few other related posts then knowing that I didn't have a solution I had to try this:

function test4() {
test4Location.innerHTML = "test 4 complete";
}

<div id="test4Location"><a onclick="test4();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463">test4 (will break)</a></div>

and yes this created a gray box AND blew up when the control tried to navigate to no where... and finally I thought I would try something else... yes this time a bit of a hack and messy, not very clean as such but lets take a look:

function test5() {
test5Location.innerHTML = "test 5 complete";
}

<div id="test5Location"><img onclick="test5();" src="http://www.blogger.com/test.jpg" width="99" height="99" /></div>

Amazingly enough, no gray box in the emulator on my machine. Now this is kind of a hack isn't real as it only works sometimes in the emulator under certain conditions but really its still there just it can't be seen due to the speed of the hardware. If you lucky enough to not see it you still will on the phone hardware. Until the windows phone team can manage a real fix for this annoying bug... but wait I'm not willing to give up yet.

so how do we make it go away in the mean time? the real hack is to just not let the events fire. This means really thinking abit out of hte box and doing some native C# stuff to fix the problem well sort of. The solution I'm not going to give you all the code (its a bit messy and a bit much and very custom) now but I'll explain how it works.

So how about we put a native but invisable touch panel over the top of the web browser control that hosts our app. This means that all events show up on that panel then you expose on your web browser control some interface and you process the events in C# to determine what is going on. then you pipe those events into the javascript context of the webbrowser control. This also means you have to have some javascript events to handle all the events you want to call or do something with. This is very specific to phone 7 and very customized around each action or event but it does in fact work. :) problem solved albiet an extremely painful hack until they fix this bug maybe in tango or apollo...