XBoxReveal HTML5 Windows Phone Sample

May 4, 2013 — 5 Comments

Over the past few months we have been doing a lot of Windows 8 development but using HTML5 and JavaScript instead of C# and XAML. Unfortunately Windows Phone does not have built in support for WinJS but what it does have the latest IE 10 browser on board plus we have the WebBrowser control available.

Recently, with the XBox announcement, we decided to build out a Windows Phone app that counts down to the reveal date which looks as follows. We have the app in certification as of May 3 2013 (submitted April 30), but is still going through the process. As I don’t expect it to pass because of the XBox logo usage, decided to make a tutorial out of it. But for all those enthusiast (and developers), you can grab the source and install on your Windows Phone.

1-720p

I decided to build it using HTML with an embedded webBrowser control and this is how we got it done. The app above took about 1hr to build and leveraged some existing JavaScript code found on the web. Thanks to RedBit’s graphics designer Kevin Carey for the graphics, he’s the reason the app looks good!  The next few sections will walk through how to build the count down timer app.

Getting Started

First thing, open Visual Studio and create a new project. In the Windows Phone section you will see a ‘Windows Phone HTML5 App’ project template.

project

When the project gets created you will have a MainPage.xaml which will contain your WebBrowser Control. It’s wired up to do things like navigate the pages but but if you are creating an app you want it to not look like a web app in my opinion and having navigation buttons doesn’t help.

For the countdown timer we don’t require that code, so we can remove most of that code.  Your MainPage.xaml.cs you should end up with something as follows

Your MainPage.xaml, you can remove the buttons in the app and you can end up with something as follows

Some quick things to point out.

  1. I’ve left one menu item because a Windows Phone requirement is to have contact information for the app
  2. I’ve set the mode to ‘Minimized‘ and the opacity to 0.7 so it’s not overtaking the main content, the timer

Because we have a click handler for the menu item add the following stub code which we will implement later

Run the app and you’ll get something like this

baseapp

 

From the screen shot you can’t really tell the difference if it’s native or HTML but when you use it you can.

Updating the HTML Page

The app consists of a single HTML page that gets loaded within the browser control. The HTML file is located under the Html directory which also contains the CSS styles

folders

 

In your Html directory create a images folder then add the following image which is the background

bg

Open up index.html and update the code to the following which all it does is add the image to the body.

In the css folder, open up phone.css and add the following to the end of the file

When you run the app you should get a full screen image.

Implementing the Timer

Instead of re-inventing the wheel, we decided to search for some existing JavaScript code and found this http://www.rmkwebdesign.com/Countdown_Timers/Style_1_B.html. This is how we got the timer working.

In the CSS directory, create a file called timer.css and add the following (note, this was changed from the original CSS)

Under the HTML folder, create a directory called js. Create a file called timer.js and add the following CSS.

Add a file to the js directory called index.js and add the following code

Back in index.html, add the following in between the <head> tags

And add the following after the <img> tag which defines our table

Run the app and hopefully you’ll see a countdown timer as follows

finalImage

In the next few posts, I’ll follow up some polishing up of the app as well as how to support multiple resolutions in your application.

Trackbacks and Pingbacks:

  1. XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions | Mark Arteaga - May 6, 2013

    […] a previous article I wrote about writing an XBox Reveal Count Down Timer for Windows Phone using HTML5 & CSS. By the end of the article we ended up with the […]

  2. XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions | Mark Arteaga - May 6, 2013

    […] a previous article I wrote about writing an XBox Reveal Count Down Timer for Windows Phone using HTML5 & CSS. By the end of the article we ended up with the […]

  3. XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control | Mark Arteaga - May 6, 2013

    […] HTML5 & Windows Phone: XBox Reveal Sample […]

  4. XBoxReveal HTML5 Windows Phone Sample: Store Certification | Mark Arteaga - May 7, 2013

    […] XBoxReveal HTML5 Windows Phone Sample […]

  5. Windows Phone & HTML5 Sample App Summary | Mark Arteaga - May 7, 2013

    […] XBoxReveal HTML5 Windows Phone Sample […]

Leave a Reply