Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Fixing a WinPhone Phone Gap App: Those Darn Gray Box's

DZone's Guide to

Fixing a WinPhone Phone Gap App: Those Darn Gray Box's

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

(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. Now this is kind of a hack but if I have to do this certainly this gets rid of the gray box AND using some design skills in PhotoShop or even paint.net or even just paint, I can create the image to look like any legitimate bit of rendered HTML... AND no gray box until the windows phone team can manage a real fix for this annoying bug...

Source: http://hackingsilverlight.blogspot.com/2011/11/those-darn-gray-boxs.html

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}