Part 13 - Working with the Web View App Template
Download the source code for this lesson at http://absolutebeginner.codeplex.com/
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”.
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.
If you take a look at the MainPage.xaml, it hosts a WebViewControl and a CommandBar with a Forward and Home app bar button.
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:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/phone.css" />
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:
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”.
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:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
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:
And I’ll modify index.html in a similar way:
(4) Add these lines to index.html:
<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="http://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:
Additionally, if you click the “hyperlink to a second page”, Page2.html should appear:
If you click the back arrow on the Phone’s face, you should be returned to index.html:
When back on index.html, you hsould be able to click the Forward arrow AppBarButton on the CommandBar to return to Page2.html:
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:
And finally, when you’re on index.html, you should be able to click the “hyperlink to Microsoft.com” …
… and be able to navigate to Microsoft’s home page: