Windows Phone HTML 5 App Basics

I’ve recently been learning to write HTML 5 / Javascript apps for Windows 8 and wanted to take some of that knowledge and transfer it over to Windows Phone 8. As I did so, I learned there are a lot of little “tweaks” that I needed to do to get things working so I thought I’d share those in a post.

If you’d like to follow along, I’m basically just tweaking and adding bits and pieces to the default HTML project available when you’ve installed the Windows Phone 8 SDK.

You can also download the project with all these examples imeplemented.

First of all, one thing I found was that I need to turn on IsScriptEnabled in the WebBrowser control in our MainPage.xaml.

<phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />

The template does this, but in the code behind and only after loading the content. We want to run all the Javascript right off the bat so we IsScriptEnabled to be turned on.

Turn Scrolling On or Off

Now we need to decide if we want our HTML app to scroll. In many cases (creating simple HTML content apps) it makes sense to have the app scroll. If this is your scenario, you’re in luck… you have to do nothing.

But in many other cases you might want to turn off scrolling. If you’re creating a game or you want your user to be able to use touch events in a very rich way. In this scenario, you can either turn off scrolling the hard way (also known as the Windows Phone 7 compatible way) or the easy way, which is to go into your phone.css and add:

body { -ms-touch-action:none; }

That takes care of some of our initial setup. Now let’s run some Javascript. We can run Javascript a couple ways.

Javascript: TheTraditional Way

This way we focus entirely on HTML/JS. So if we give our page title an id:

<p id="dynamicTitle">page title</p>

and then we add a script to change that title

<script type="text/javascript"> 
 document.getElementById('dynamicTitle').innerHTML = "running javascript"; 
</script>

we’ll see that text updated at runtime. Super easy.

Run Javascript Function From C#

We can also add a function to our HTML or Javascript files, but leave it up to our C# file to run that script. In this case we would add a function like so:

<script type="text/javascript">
 function changeTitle() { 
 document.getElementById('dynamicTitle').innerHTML = "function initiated in C#"; 
 }

 function changeTitle(someNewText) { 
 document.getElementById('dynamicTitle').innerHTML = someNewText; 
 } 
</script>

And then call that function from our C# using our WebBrowser control.

Browser.InvokeScript("changeTitle");

If our function has parameters, we can add those parameters using InvokeScript

Browser.InvokeScript("changeTitle", new string[]{"change using parameter"});

Add Javascript Using C#

The last way to run Javascript is to just inject it into the page. In this case, we could just update our app using:

Browser.InvokeScript("eval", 
 new string[] { "document.getElementById('dynamicTitle').innerHTML = 'injected javascript';" });

When the question is “which method do I use to run my Javascript” the only real answer is “whichever one fits your scenario”. If you’re writing an app using mostly HTML/JS and just relying on the WebBrowser to act as a container, I’d lean as much as possible on running Javascript in my HTML/JS files.

However if you’re using the WebBrowser in a mixed-code application using C# to do some things and HTML/JS to do others, it might make sense to add some functions as entry-points so we can launch Javascript functions based off of events in the C#.

Talk To the App (C#) From the Browser

Of course, if we’re communicating to the browser from C#, we might want to talk to C# from the browser as well. If you want to send information to C# from the browser, just run the following Javascript code:

window.external.notify("This is a notification from HTML");

and the browser will launch an event called ScriptNotify. We can tell our app to handle that script launch either in the XAML of our WebBrowser:

<phone:WebBrowser x:Name="Browser" 
 ScriptNotify="HTML_Script_Launched" />

Or by assigning it in the xaml.cs file

Browser.ScriptNotify += HTML_Script_Launched;

then we can read out the notification in our event handler. The example below just takes whatever notification we sent and puts it into a MessageBox.

private void HTML_Script_Launched(object sender, NotifyEventArgs e) 
{ 
 MessageBox.Show(e.Value); 
}

We can use this to interact with app-specific functionality like launchers and choosers or launching a MessageBox or perhaps communicating with the app bar.