Phone_81_Development_for_Absolute_Beginners

In a nutshell, the NavigationHelper was really meant for this scenario … to help you maintain application state. We’ve already used the NavigationHelper_LoadState method in the previous example. It fires each time the OnNavigatedTo() event for the page fires. How that all works, I’ll leave to a future discussion.

We’ll focus on the NavigationHelper_SaveState() method that’s defined on each page. Let’s look at Page2.xaml.cs:

private void NavigationHelper_SaveState(object sender, SaveStateEventArgs e)

{

}

The SaveStateEventArgs has a property called PageState, which is a dictionary. So, we can add this line of code:

e.PageState["value"] = valueTextBox.Text;

Now, whenever the app is suspended, the NavigationHelper_SaveState() method is called on each page the Frame knows about. It will add a key called “value” and set it to the string typed into the valueTextBox.

To restore the state of this data, we’ll work again with the NavigationHelper_LoadState:

private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)

{

if (e.PageState != null && e.PageState.ContainsKey("value"))

{

valueTextBox.Text = e.PageState["value"].ToString();

}

}

Again, we do a check to make sure the LoadStateEventArgs has something in it called

“value” and if it does, then set the valueTextBox.Text property to that value.

Run the app, navigate to page 2, type in something like so:

Windows Phone 8.1 Development for Absolute Beginners – Page 140

Then back in Visual Studio, select Lifecycle Events “Suspend and Shutdown”. Re-run the app, navigate back to Page 2 and the text box should be populated with your original entry.

Recap

The key is to understand that your app has a life cycle, and you have the tools to prepare for the move from suspension to termination … you can save the application state such as the Frame’s BackStack and current page, as well as the application’s data.

Windows Phone 8.1 Development for Absolute Beginners – Page 141

Windows Phone 8.1 Development for Absolute Beginners – Page 142

Lesson 13: Working with the Web View App Template

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”.

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 143

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 144

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 145

Take a look at the phone.css file … 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:

Windows Phone 8.1 Development for Absolute Beginners – Page 146

<!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>

Windows Phone 8.1 Development for Absolute Beginners – Page 147

<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="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:

Windows Phone 8.1 Development for Absolute Beginners – Page 148

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” …

Windows Phone 8.1 Development for Absolute Beginners – Page 149