In this article we are going to see how to develop a Windows Phone application with HTML5 based coding. With Windows Phone 8 Software development kit we can see the support for developing application that supports HTML5 browser based. To develop the HTML5 based application in Visual Studio we can see a new Template for Windows Phone 8 which is used for this purpose. Let us see the steps by step process on how to use this template to create a rich user experienced HTML 5 based windows phone application.
Open Visual Studio 2012 IDE in an administrator mode (Right Click and select Run as an Administrator) and select File à New Project to select Windows Phone HTML5 app development template that is available under the Windows Phone tab in the left menu as shown in the screen below.
Click on OK and we will not see the normal pop up wizard which asks for us to select the appropriate SDK to execute the application as we know this HTML 5 app template is newly available and its available only with the Windows Phone 8 application development Software development kit. So we can see the project is created and list of default files and folders will be added to the Solution which can be seen in the Solution Explorer as shown in the screen below.
Now analyzing the XAML code we can see the project itself has a Phone webbrowser control that is specifically used to design out HTML 5 based application. And the second half of the XAML Code is for the Application Bar which we have seen in our previous tutorial on how to use the application bar effectively. Now before making any changes to the application let us first build and execute it and we can see the application is opened in the emulator as shown in the screen below.
Ok now we can see the application is building and executing properly, to use it further let us do some modification and see how exactly we can utilize the HTML 5 capabilities in developing a Windows Phone 8 application. In the solution explorer open HTML folder and open the index.html file and we can see the complete html code which is used to design the application now make the changes accordingly as per your requirement as shown in the screen below.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>F5Debug - DNS - App</title>
<p>This is a page title</p>
Now let us build and execute the application by simple pressing F5 key from the keyboard or using the Emulator play button which provides option to select our emulator based on the available list and we can see Visual Studio will build the application and open the Emulator to display the desired output as shown in the screen below.
So in this article we have seen the newly available HTML 5 application development option for Windows Phone 8. Also we have seen how to make changes to the application that effectively changes the user interface for HTML5 app for Windows Phone 8.