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...

HTMLApplicationHost Framework Posted to Codeplex

One of my projects has been building an HTML Application framework for phone 7. Basically so I can build HTML5 based applications using HTML, JavaScript and CSS for mobile devices in particular Windows Phone but then being able to use that application on other platforms. Today I uploaded version 4 onto codeplex (http://htmlappwp7.codeplex.com/) which adds HTML Host Application back stack integration with the Phone's application navigation stack. On wp7 that means that when you hit the back button it doesn't just navigate out of the app but just to the last view in HTML making really applications easy to do that will get past the marketplace and into the hands of the public but even more important setting the stage for apps on iPhone and android using similar HTML5 based application frameworks.

The first app using this framework was the JavaScript application but now that test app is in the marketplace I've been working on a new real app called 'SMART Spending Habits', its a simple budgeting application designed to priority and sort your purchases automatically. Its a great little tool and it should be in the market place next week or so.

download the HTMLApplicationHost Framework Source code here:
http://htmlappwp7.codeplex.com/

Using HTML App Host Tasks from the ECMA Script Context

Using the task framework (http://htmlappwp7.codeplex.com/ and the taskprocessor are pretty easy. Basically it needs to look like this:

window.external.notify("Email:pieseczek@hotmail.com:Email from JavaScriptFWP7");

the format for calls are:

window.external.notify(" Task Name : Paramter1 : Parameter2 : etc ");

the current supported tasks include:

Email : To Email : Subject
SystemTray : Boolean Value
EnableFrameRateCounter : Boolean Value
alert : message value : message box title
play : sound uri path
vibrate : hours : minutes : seconds
MarketplaceSearchTask : app id
Analytics : Parmeters * n
MarketplaceDetailTask : app id
WebBrowserTask : URL String

There is also a custom event on the AppHostShell called ScriptNotify that allows you to extend what you can do with tasks for example in the code base the sample app does this extension from the custom event:


private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
switch (e.Value.ToString())
{
case "task1":
EmailComposeTask emailComposeTask = new EmailComposeTask();
emailComposeTask.To = "pieseczek@hotmail.com";
emailComposeTask.Body = "";
emailComposeTask.Subject = "Email from JSWP7";
emailComposeTask.Show();
break;
case "task2":
NavigationService.Navigate(new Uri("/About.xaml", UriKind.Relative));
break;
}

}

this gets around a limition with calling the navigation service that I'm currently working on.

Simple Twitter Integration

A few posts ago I did a quick post on simple Facebook integration but in HTML . Twitter is even simpler and this method can be applied to Silverlight easy enough. First lets look at the HTML version:

<a href="http://twitter.com/share?url=http://www.HackingSilverlight.net&text=check out this awesome site&via=DavidJKelley"
>Tweet</a>

you can see that basically its just a hyper link to the twitter share URL but it adds 3 query string parameters namely URL , text and via. URL gets parsed into a short URL by twitter and then the text is inserted and then a note about what user it came from meaning in this case the twitter would be something to the effect of:

check out this awesome site http://t.co/nn6oQN8 via @DavidJKelley

keep in mind that users will have to login and the tweet will be posted as them.
In HTML rendered the above code would look like this in your browser:

Tweet

now from Silverlight in C# it is about as simple with something like:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri("http://twitter.com/share?url=http://www.HackingSilverlight.net&text=check out this awesome site&via=DavidJKelley"), "_blank");

this would do effectively the same thing opening a new browser window and ask them to login to twitter and then let them post the same thing. Nice and simple :)

HTML 5 Is Dead!

“gasp” what? How can that be? What can this guy be talking about? What can this blogger possibly know and why would he say something so sacrilegious? I’m aghast…

I’m sure that is the kind of response that many of you are having when reading this article but I wanted to make a point, with all the excitement around HTML 5, not so much that its bad but people seem to be in one camp or the other and few are looking at the big picture. Yes HTML 5 is awesome and all but many of the ‘HTML 5 is awesome’ crowd is saying other RIA technologies are dead and it is just not logical to make a whole sale generalization like that and it drives me nuts. I hear things like ‘Flash is dead’ or ‘Silverlight is dead’ (even from some less then razor sharp micrsoftee’s).

HTML fine is the foundation of all our content on the web and all but a technology whose last major version is 10 years old is not making rich immersive technologies like flash out dated? That’s just crazy. Flash and Silverlight both in particular have proven over and over again that they iterate faster and more importantly ‘innovate’ faster than more open technologies like HTML. Both of those technologies do more, better and faster than HTML 5 and are more cross platform, more tool-able and have better dev/workflow stories across the board. But why do people put these technologies up against each other at all? That’s like saying apples are better than oranges? They are just different.

HTML 5 is a cross platform long term foundation for web based content and web based apps and great it now is more richer then before but RIA technologies such as Flash and Silverlight both are not nor have they ever been dubbed as a replacement for HTML (at least not anyone I know). These technologies both live out of the browser and are ways of delivering on all the promises that Java first made when it came out. Rich cross platform immersive UI experiences on so many platforms from droid phones to xbox to browsers and desktop apps.

HTML is for the rich distributed web stuff and Flash and Silverlight is for immersive experiences that may or may not be on the web at all. HTML in the browser or maybe even an HTA sort of app and Flash/Silverlight is for UX that leaps out of the browser. HTML 5 is cool but that doesn’t mean that more powerful RIA technologies are dead. To each his own and to each problem space its technology; there is room enough for it all. Let’s all be a bit less zealous about things and focus on building better apps regardless of the technology you want to use.

Heck if apple had any since they would get flash on the iphone for building cool apps so we don’t have to use that objective C…

Simple Facebook Integration

So strickly speaking this isn't about Silverlight but it is cool and relates a bit to what I do when I blog or build sites that use Silverlight. Basically here is how to add a facebook 'like' feature to any site. The HTML looks like thus:

<iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light&href=http://www.hackingsilverlight.net/" allowtransparency="true" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" frameborder="0" scrolling="no"
> </iframe>

when you run that html is should show up in your browser like this:

[ ]

So going back up to the html code above you'll note its all an iframe referencing the facebook 'like' php file via an http reference (url). when looking closely we can see that there are a number of query string parameters. for the most part the only one you need to edit is the last one which should be the url of the page in which you embed this html. and thats pretty much it. :)

Self Editing XML File

This particular post is a rehash of one I didn't some years back. Basically it is a little technique I developed some 7 or 8 years ago to solve a simple database issue once but I wanted only one file to exist in this case the exe or sorts that was also the xml file. As this applies to Silverlight in the since that I can use this application technique to also be used as a shell for a Silverlight application without all the silly security barriers... > : )

DISCLAMIER: I AM NOT RESPONSIBLE FOR THE USE OF THIS TECHNOLOGY IN FACT YOU SHOULD STOP READING NOW BEFORE YOU HURT YOUR SELF OR OTHERS...

But lets not focus on that... lets focus on the mechanics of what we are talking about. A long time ago in a galaxy far far away there was a company called Microsoft that as the center of the universe they released this cool little DHTML technology back before they changed the name to AJAX and it was still cool called an HTA or Hyper Text Application or 'HTml Application' which basically is an HTML file with the file extension of '.hta' instead of '.html' and when you have one of these locally and you click on it, it then renders without all that silly browser chrome/buttons etc. oh and with the rights of a win32 app installed locally...

Basically with a little markup you can control and manipulate the browser chrome and any com object on the system with a script friendly API you can talk to.

Now this 'hta' thing works if the page is hosted on a web page too... albeit you get ONE security dialog that doesn’t really explain what is going on and if the user clicks ok the hta runs as a locally installed app w/o silly security sandbox stuff going on... and yes that basically means it can for all intents and purposes fdisk your hard drive...

DISCLAMER 2: STOP READING HERE AND DON'T DO THIS STUFF.

Like anything though this can be used for good and evil.

Ok back to how to-do it. if you Google HTA on Bing (or Google) you can get the reference material for hta's but basically it is an html file that runs in a version of IE w/o the sandbox. so basically any html that works there works in the hta too with the added addition of this tag:

<HTA:APPLICATION id="oVDProcess"
applicationName="Virtual Desktop - Lite"
singleinstance="yes"
caption="no"
contextmenu="no"
innerborder="no"
scroll="no"
showintaskbar="no"
version="1.0.032"
SELECTION="no"
windowState="normal"
icon="img\im_gray.ico"
/ >

Now as mentioned you can also access any of your com objects the XML Document object or the 'File System' object... here is some sample code from my magic self editing file:

var oDOM = null;
var giHeight = 360;
var giWidth = 800;

function initFrm() {
try {
self.resizeTo( giWidth, giHeight );
self.moveTo( ( window.screen.availWidth - giWidth ) / 2, ( window.screen.availHeight - giHeight ) / 2 );

oDOM = new ActiveXObject("Microsoft.XMLDOM");
oDOM.async = false;
oDOM.loadXML( oXMLDATA.innerHTML );
instantReport();
} catch(e) {
alert( "Your OS is missing components or they are disabled for processing XML data!\nDESC: " + e.description );
}
}

Notice in this case the code creates the xml document object and loads part of the 'HTML' in...

And here is another sample:


function saveSelf() {
var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oTempFile = oFSO.OpenTextFile( "xLinks.XML.hta", 1 );
var sSelfSource = String( oTempFile.ReadAll() );

var oPAGEARRAY = sSelfSource.split( '<meta' + ' val="2345"/>' );

var sNewSource = oPAGEARRAY[0] + '<meta' + ' val="2345"/> <xml id="oXMLDATA"> ' + oDOM.xml + ';</xml><meta' + ' val="2345"/> ' + oPAGEARRAY[2]

var oSDOM = new ActiveXObject("Microsoft.XMLDOM");
oSDOM.async = false;
oSDOM.loadXML( sNewSource );

if( oSDOM.xml != "" ) {
var oNewFile = oFSO.CreateTextFile( "xLinks.XML.hta", 1 );
oNewFile.WriteLine( oSDOM.xml );
oNewFile.close();
oNewFile = null;
alert( "Save Success!" );
window.close();
} else {
alert( "Save Operation Failed!" );
}
}

This function creates a File System Object. The trick here is basically the file runs as an HTA i.e. executable but then loads itself as a xml file or custom xml data base and updates 'records' in itself and overwrites itself. Now the trick here is that your HTML must be XML complaint. Really if you don't know what this means maybe you should start somewhere else before reading about how to hurt yourself with this stuff... :)

Silverlight Automated UI Testing

Working with alot of larger clients at IdentityMine we frequently work with teams that use automated testing and deployment systems. I did a post last year on deployment with msbuild and build environment deployments etc and today I'd like todo a quick post on wiring up a Silverlight application for automated UI testing. This is a great way to tied into existing test structures but keep in mind there is a Unit test framework off MSDN that is a great place to start.

http://code.msdn.microsoft.com/silverlightut/

and

http://weblogs.asp.net/scottgu/archive/2008/04/02/unit-testing-with-silverlight.aspx

So quick and dirty this method is kind of a hack to expose bits to existing web testing systems that can only talk to the DOM. with that... I'm going to focus on showing you alot of code...

To start with we have this simple application using this xaml keeping in mind I excluded the extrensous stuff...

<grid>
<grid.columndefinitions>
<columndefinition>
<columndefinition>
<columndefinition>
</Grid.ColumnDefinitions>
<textbox name="inputhere" height="30">
<button name="Btn1" content="process input" click="Button_Click" column="1" height="30">
<textbox name="Output" height="30" column="2">
</grid>

and in the code we add the following C#


private string ProcessString = "complete with [{0}]";

private void Button_Click(object sender, RoutedEventArgs e)
{
Output.Text = string.Format(ProcessString, inputhere.Text);
}

this works great but pretend it is much more complicated... So then we add the following code to our code behind...:

[ScriptableMember]
public void SetTextField(String InputValue)
{
inputhere.Text = InputValue;
}

[ScriptableMember]
public void ClickButton()
{
Button_Click(new object(), null);
}

[ScriptableMember]
public string GetValue()
{
return Output.Text;
}

and then we add the following to our page constructor:


HtmlPage.RegisterScriptableObject("MainPage", this);

and we add this #include er I mean 'using' statement:

using System.Windows.Browser;

from here we have exposed the key elements so any testing system that can talk to the Browser DOM can then wire up to what appear at JavaScript objects like this:

//simulates input:
top.document.getElementById('Silverlight1').content.MainPage.SetTextField("test");

// simulates a click
top.document.getElementById('Silverlight1').content.MainPage.ClickButton();


//gets a value.
alert( top.document.getElementById('Silverlight1').content.MainPage.GetValue() );

I know quick and dirty but now our automated UI web app infrastructure can 'test' our Silverlight application easily.

Indexablity for Search Engines in Silverlight

I saw a question as of late around the indexability of Silverlight for search engines much like an html based web site or web application. I know from my work with Microsoft and the Silverlight team that this has been taken into account and goes well with the toolablity story of microsoft. Compiled Silverlight is in a 'xap' file which is really a zip which is easily opened and any text based files, xml or xaml can be indexed and this was done with intent for this purpose. That being said that doesn't mean that all the of this is working up front as to my knowledge none of the spiders actually search zips yet but we expect that to happen at some point. Assumping that this happens then we want to make sure that our Xaml has logical names related to the content for all our x:name elements and that they are not only included in the application dll but as loose xaml in the xap.

Another thing to consider though is that as mentioned zips(xaps) are not indexed yet so it is a good idea to do the same kinds of things to our host files (actually is a good idea even if the zips are indexed) that you would do to optimized the page for search indexing. ie, meta tags, install experience code etc.

Happy Search indexing optimizationizing...

google command line...

ok so this one isnt' exactly a silverlight related posted but it is very cool. :) some one with clearly to much time on their hands implemented a web page that behaves like a console app (command line shell sort of thing) ... check it out at:

http://goosh.org/

Silverlight Applications Taking All the Available Realestate

Karim sent me this. It is a simple way make sure you Silverlight Application uses all the available realestate using just CSS:


/* hide from ie on mac \*/
html
{
height: 100%;
overflow: hidden;
}
.silverlightHost
{
height: 100%;
width: 100%;
}
/* end hide */

body
{
height: 100%;
margin-left: 1px;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0;
}


Now there are other ways todo this such as from the HTML body onload event and also the resize event on the window together or other programatic ways but this is just nice and simple and I say keep it simple unless you have to.