Jun 26

Hosting an HTML App in Windows Phone 7 Mango

Windows Phone 7 No Comments »

Note: This is based on preliminary Information, and subject to change.. Many people think this maybe how Windows 8’s HTML5/JavaScript interface for supporting those apps alongside .NET ones may work as well.

HTML App Host Framework in Three Parts

image

Getting Started

  1. Create an empty Windows Phone Mango Silverlight Project in Visual Studio

    image

    image
  2. Reference the HTML App Host dll in your project

    image

    image

    image

  3. Create a  folder called HTML in your project

    image

  4. Add your HTML application to the HTML folder
    Make sure you have included:

    • All html files

    • Resources

    • Images

    • CSS files

    • Script files

    • All other necessary files for the app to run. Don’t forget *ANYTHING*

  5. Create whatever folder structure is needed to make your application work.

  6. You will need to create a manifest.xml file at the root that maps all the files in the HTML folder. 

       1:  <?xml version="1.0" encoding="utf-8" ?>
       2:  <IsolatedStorageManifest>
       3:  <Files> 
       4:  <File Name="index.html" /> 
       5:  <File Name="about.html" /> 
       6:  </Files> 
       7:  <Directories> 
       8:  <Directory Name="scripts"> 
       9:  <Files> 
      10:  <File Name="myscript.js"/> 
      11:  <File Name="myscript2.js"/> 
      12:  </Files> 
      13:  </Directory> 
      14:  </Directories> 
      15:  </IsolatedStorageManifest>

It should observe the structure you see above..

What is the Manifest ?

The manifest file is simply an index to all the resources your HTML app needs to run. Why do you need this ?  Html assets can't be referenced directly from a .xap  file to a webbrowser control without the use of the framework’s IsolatedStorageResourceHelper helper class and the manifest file that tells it where to locate the application’s necessary files. This also exposes the Windows  Phone  APIs to the script environment so that the script environment can access them using the TaskProcessor class.

AppHostShell exposes an event called ScriptNotify so you can extend support to handle in your own code.

What is a .XAP file ? 
If you are an HTML developer you may have never encountered one.  A .xap file is the application package that is deployed to the phone. It t is the distributable unit that allows you to install the application on a device (or emulator). A .xap file is really a ZIP file with a different extension. If you change XAP to ZIP, you'll be able to read its contents and open the file using an unzip program.

Next Steps

Add the namespace reference in the XAML of your start XAML page (mainpage.xaml)

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


Replace everything inside MainPage.xaml with this code:

<Grid x:Name="LayoutRoot" Background="Transparent"> 
<HTMLAppHost:AppHostShell Source="/index.html" /> 
</Grid> 
</phone:PhoneApplicationPage>

Now the  HTMLAppHostFramework  can  consume your application and run it on the phone.

Calling Windows Phone APIs from Javascript

if you need to call out to phone 7 api's from your javascript you can make calls like this: 

window.external.notify("Email:don@uxmagic.com:Email from DonBurnett");

the syntax of the string is: taskname:param*n 

the format for calls are:
window.external.notify(" Task Name : Paramter1 : Parameter2 : etc ");

currently supported tasks (subject to change):
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

Sample
Email send and navigate to new phone page on success using a simple Switch-Case statement:

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

Download the Framework today and get started making apps for Windows Phone 7 Mango in HTML 5/JavaScript

image

http://htmlappwp7.codeplex.com/releases/view/67979

Tags: | | | |