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" ?>
<File Name="index.html" />
<File Name="about.html" />
<Directory Name="inc">
<File Name="script1.js"/>
<File Name="script2.js"/>

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:


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" />

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

Last edited Jul 1, 2011 at 6:42 PM by DavidKelley, version 1


No comments yet.