Building an HTML/HTML5... Based Application for Phone 7

So you want to build an HTML based application for phone 7, but wait there is not a way or at least a 'supported' way of doing that for phone 7. Why would you want to? For for starters wouldn't it be cool to have the same app/code base run on android and iphone. I realize a good portion of the 3 readers on my blog are probably aghast that I use the term 'iphone' (oops there it goes again) but in all honesty as an app developer it would be sooo cool to be able todo that. Let iterate some of the benefits: less time developing for multiple platforms, larger reach to my target demographic, really its not about the technology or the platform but reaching my target demographic.).

The obvious solution is to have a shell like a web browser control or web browser runtime using a local html file structure. But wait that is easy todo and I found that I can do that in Silverlight easy enough creating a HTML App Host Framework for phone 7. I got it working on the phone and couldn't think of a reason they would not let it go through. So I submitted a test app that was all HTML and JavaScript and what surprised me is it was accepted! (here is a deeplink if you don't believe me: http://social.zune.net/redirect?type=phoneApp&id=832ce0cd-788e-e011-986b-78e7d1fa76f8 )

So from here I decided to create a simple framework around this and post it on codeplex so others can build apps that are HTML/JavaScript based on this framework and have them deployed to the marketplace. To download the framework (dll) you can go to this link: http://htmlappwp7.codeplex.com/

Here is how to use it:

Using the HTML App Host Framework

the HTML App Host Framework current consist's of 3 critical parts. 1, the app host shell, 2, the html loader and 3 the task processor. For an HTML application developer you don't really need to worry about most of it but in the following context. To start you need to create an empty Silverlight application in visual studio and then reference the HTML App Host dll. Then you need to create a directory called HTML and add your HTML application to this. The HTML application can include html files, resources, images, css, script files etc and folder structure or whatever you need. On the downside you need to create a 'manifest.xml' file at the root of the html folder that maps all the files. This allows the HTMLAppHostFramework to consume your application and run it on the phone. Here is a typical manifest.xml file:


<?xml version="1.0" encoding="utf-8" ?>

<IsolatedStorageManifest>

<Files>

<File Name="index.html" />

<File Name="about.html" />

</Files>

<Directories>

<Directory Name="inc">

<Files>

<File Name="script1.js"/>

<File Name="script2.js"/>

</Files>

</Directory>

</Directories>

</IsolatedStorageManifest>


Basic a simple index of your html application. the trick here is that html assets can't be referenced directly from a xap to say a webbrowser control so the apphost used class called 'IsolatedStorageResourceHelper' to copy everything from the xap based on the manifest.xml file into isolated storage where it can be referenced and executed directly.

The next step is to edit your main page in your app to reference the AppHostShell and your html. The AppHostShell is used much like a webbrowser control but it extends the control to deal with the IsolatedStoargeResourceHelper' class and to expose Phone 7 API's to the script environment so that the script can call out to those API's through 'tasks' using the 'TaskProcessor' class. Also the AppHostShell exposes an event called 'ScriptNotify' so you can extend what is dealt with if there are special cases you want to handle in your own code.

After the HTML app is created, then added to the HTML directory AND you have finished the manifest.xml file, the next step is to add the namespace reference in the XAML of your start XAML page. I like to rename the default 'MainPage' to 'Shell.xaml' but if you do this you have to edit the master app manifest under properties to point at the new name or your app won't work. But you can leave it as 'MainPage'.

In any case, in this page the namespace reference should be in the rootnode and look something like this:

xmlns:HTMLAppHost="clr-namespace:HTMLApplicationHostFramework;assembly=HTMLApplicationHostFramework"

then you can add the control to the xaml surface generally you can just rip out everything in the page and replace even the root grid with this:

<Grid x:Name="LayoutRoot" Background="Transparent">

<HTMLAppHost:AppHostShell Source="/index.html" />

</Grid>

</phone:PhoneApplicationPage>


You'll note that now when you run the app your app on the phone will be entirely your app, well save the system tray and I like to turn that property off in the root node but you can do that in your javascript too using the task api that is created by the HTMLAppHost control.

If all of your app is HTML based you're done but if you need to call out to phone 7 api's from your javascript you can make calls like this:

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

Basically the syntax of the string is "[task name]:[param]*n" currently I've only added a few tasks like email but that I'll be adding much more in the coming weeks. Ping me if you use the framework for your app's, I'll give your app some social media love.