.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
satyapriyanayak
Ashutosh Jha
ASPEvil
Mahesh

Home >> Articles >> Windows Phone >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Developing HTML5 based application for Windows Phone 8

Posted By:Karthikeyan Anbarasan       Posted Date: February 09, 2013    Points: 200    Category: Windows Phone    URL: http://www.f5debug.net/  

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
 


Introduction:


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.

Steps:


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.




C# Code:


<!DOCTYPE html>
<html>
    <head>
        <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>
    </head>
    <body>
        <div>
            <p>HTML5 Application</p>
        </div>
        <div id="page-title">
            <p>This is a page title</p>
        </div>
    </body>
</html>

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.




Conclusion:


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.
 
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend