Part 13 - Working with the Web View App Template

Sign in to queue

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In my personal opinion, the WebView App template featuring the Web View control, is probably the easiest way to create an app IF you already have basic HTML, CSS and JavaScript knowledge.  In this lesson, we’ll look at the basics, in the next lesson we’ll build an app based on something from the JavaScript and JQuery Fundamentals for Absolute Beginners series just to demonstrate what’s possible and to demonstrate the types of issues you might face when converting an existing JavaScript-based app to the Web View App Template.

Consequently, these are the only two lessons in this series that do not primarily use XAML and the Phone API for layout, navigation, etc.  Feel free to skip these lessons if you do not intend to utilize the web-stack of technologies for building apps.

(1) I’ll begin by creating a new WebView App project called “WebViewExample”. 

clip_image002
You’ll immediately notice the presence of the \Html subfolder along with an index.html file and a \css subfolder with a phone.css file.

clip_image004

If you take a look at the MainPage.xaml, it hosts a WebViewControl and a CommandBar with a Forward and Home app bar button.

clip_image006

In the MainPage.xaml.cs, there’s a HomeUri referencing the \Html\index.html. 

private static readonly Uri HomeUri = new Uri("ms-appx-web:///Html/index.html", UriKind.Absolute);

In the OnNavigatedTo() method, the WebViewControl is told to navigate to the HomeUri as well as some event handlers for the physical back button and the forward AppBarButton in the CommandBar.  In fact, most of the code on this page is attempting to manipulate the “page stack” — page that have been visited, going back, going forward, etc.  We’ll see those at work in a moment. 

In fact, you may notice that the WebViewControl has a very similar set of Navigate methods as the Frame.  We can leverage what we already know about the Frame to take control of the navigation experience if we want to, but most of that has been taken care of for us already by the WebView project template.

(2) The templated index.html has the following definition:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/phone.css" />
    <title>Windows Phone</title>
</head>
<body>
    <div>
        MY APPLICATION
    </div>
    <div id="page-title">
        page title
    </div>

</body>
</html>

Two items to note: <link> references the \css\phone.css file, and there are two <div> elements to create the now familiar app name and page title.  If we were to run the app right now, we would see the following:

clip_image008

Take a look at the phone.css file and match up the styles defined in the CSS with what you see on screen.  Notice the first two @media definitions are to help with orientation, while the remaining styles affect the layout of the page.  You are free to add to this file, but I would recommend that you add additional CSS files and link to them so that, if Microsoft ever updates this file, your changes will not have to be merged.

(3) Add a second html page called “Page2.html”. 

clip_image010
In my version of the page, it does not have the link to the phone.css nor does it have the the <div> tags.  Instead, you get this:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

So, I’ll copy the HTML from index.html into the new Page2.html to make sure they’re consistent.  I’ll then modify Page2.html so that it has the proper app name and page title:

<body>
    <div>
        WEBVIEWCONTROL EXAMPLE
    </div>
    <div id="page-title">
        page two
    </div>

</body>

And I’ll modify index.html in a similar way:

    <div>
        WEBVIEWCONTROL EXAMPLE
    </div>
    <div id="page-title">
        page one
    </div>

(4) Add these lines to index.html:

    <h1>Test H1</h1>
    <h2>Test H2</h2>
    <h3>Test H3</h3>
    <p>This is a paragraph.</p>

    <p>This is a <a href="Page2.html">hyperlink to a second page</a>.</p>
    <p>This is a <a href="https://www.microsoft.com">hyperlink to Microsoft.com</a>.</p>

(5) Test your changes by Debugging the app.

You should now see how common tags are styled by default:

clip_image012

Additionally, if you click the “hyperlink to a second page”, Page2.html should appear:

clip_image014

If you click the back arrow on the Phone’s face, you should be returned to index.html:

clip_image016

When back on index.html, you hsould be able to click the Forward arrow AppBarButton on the CommandBar to return to Page2.html:

clip_image018

While on Page2.html, you should abe able to click (1) the elipsis to expand the CommandBar, and (2) click the “home” AppBarButton (menu) to return to index.html:

clip_image020

And finally, when you’re on index.html, you should be able to click the “hyperlink to Microsoft.com” …

clip_image022

… and be able to navigate to Microsoft’s home page:

clip_image024

Recap

Those are the basics of using the WebViewControl and the Web View Project template.  Note that you’re not limited to just HTML and CSS, you can also add JavaScript and jQuery and I’ll demonstrate how to do that in the next lesson with a more full-fledged example featuring an interactive mini-game.

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents