Part 3 complete code (Windows Phone Store apps using JavaScript)
This topic provides the complete code sample used in the tutorial Part 3: PageControl objects and navigation.
This topic contains these sections:
- Technologies
- Requirements
- Download location
- Building the sample
- Running the sample
- View the code (JavaScript)
Download location
Technologies
| Programming languages | HTML, JavaScript, CSS |
|---|---|
| Programming models | Windows Runtime |
Requirements
| Minimum supported client | None supported |
|---|---|
| Minimum supported server | None supported |
| Minimum required SDK | Microsoft Visual Studio Express 2013 Update 2 for Windows |
Building the sample
See Getting started with JavaScript: Complete code for the tutorial series.
Running the sample
See Getting started with JavaScript: Complete code for the tutorial series.
View the code (JavaScript)
default.css
#contenthost {
height: 100%;
width: 100%;
}
.fragment {
/* Define a grid with rows for a banner and a body */
-ms-grid-columns: 1fr;
-ms-grid-rows: 128px 1fr;
display: -ms-grid;
height: 100%;
width: 100%;
}
.fragment header[role=banner] {
/* Define a grid with columns for the back button and page title. */
-ms-grid-columns: 37px 83px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
.fragment header[role=banner] .win-navigation-backbutton {
-ms-grid-column: 2;
margin-top: 57px;
position: relative;
z-index: 1;
}
.fragment header[role=banner] .titlearea {
-ms-grid-column: 3;
margin-top: 37px;
}
.fragment header[role=banner] .titlearea .pagetitle {
width: calc(100% - 20px);
}
.fragment section[role=main] {
-ms-grid-row: 2;
height: 100%;
}
default.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HelloWorldWithPages</title> <!-- WinJS references --> <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css based on the user’s theme setting. This is part of the MRT resource loading functionality. --> <link href="/css/ui-themed.css" rel="stylesheet" /> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script> <!-- HelloWorldWithPages references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <script src="/js/navigator.js"></script> </head> <body class="phone"> <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div> <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button> </div> --> </body> </html>
default.js
// For an introduction to the Navigation template, see the following documentation: // http://go.microsoft.com/fwlink/p/?LinkID=329110 (function () { "use strict"; var activation = Windows.ApplicationModel.Activation; var app = WinJS.Application; var nav = WinJS.Navigation; var sched = WinJS.Utilities.Scheduler; var ui = WinJS.UI; app.addEventListener("activated", function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } // Save the previous execution state. WinJS.Application.sessionState.previousExecutionState = args.detail.previousExecutionState; nav.history = app.sessionState.history || {}; nav.history.current.initialPlaceholder = true; // Optimize the load of the application and while the splash screen is shown, execute high priority scheduled work. ui.disableAnimations(); var p = ui.processAll().then(function () { return nav.navigate(nav.location || Application.navigator.home, nav.state); }).then(function () { return sched.requestDrain(sched.Priority.aboveNormal + 1); }).then(function () { ui.enableAnimations(); }); args.setPromise(p); } }); app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. If you need to // complete an asynchronous operation before your application is // suspended, call args.setPromise(). app.sessionState.history = nav.history; }; app.start(); })();
home.css
.homepage section[role=main] {
margin-left: 24px;
margin-right: 24px;
}
.fragment section[role=main] {
width: calc(100% - 48px)
}
.fragment header[role=banner] .titlearea {
-ms-grid-column: 3;
margin-top: 37px;
margin-left: -96px;
}
#greetingOutput {
font-size:x-large;
}
.toggle-on {
color:blue;
}
home.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>homePage</title> <!-- WinJS references --> <link href="//Microsoft.Phone.WinJS.2.1/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script> <link href="/css/default.css" rel="stylesheet" /> <link href="/pages/home/home.css" rel="stylesheet" /> <script src="/pages/home/home.js"></script> </head> <body> <!-- The content that will be loaded and displayed. --> <div class="fragment homepage"> <header aria-label="Header content" role="banner"> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Hello, world!</span> </h1> </header> <section aria-label="Main content" role="main"> <p>What's your name?</p> <input id="nameInput" type="text" /> <button id="helloButton">Say "Hello"</button> <div id="greetingOutput"></div> <br /> <div id="toggleControlDiv" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'Greeting Color'}"></div> <!--A hyperlink to page2.html. --> <p><a href="/pages/page2/page2.html">Go to page 2.</a></p> </section> </div> </body> </html>
home.js
(function () { "use strict"; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false); // Retrieve the div that hosts the Toggle control. var toggleControlDiv = document.getElementById("toggleControlDiv"); // Retrieve the actual Toggle control. var toggleControl = toggleControlDiv.winControl; // Register the event handler. toggleControl.addEventListener("change", this.toggleChanged, false); // Retrieve the button and register our event handler. var helloButton = document.getElementById("helloButton"); helloButton.addEventListener("click", this.buttonClickHandler, false); // Retrieve the input element and register our // event handler. var nameInput = document.getElementById("nameInput"); nameInput.addEventListener("change", this.nameInputChanged); // Restore app data. var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings; // Restore the Toggle selection. var toggleSelection = roamingSettings.values["toggleSelection"]; if (toggleSelection) { toggleControl.checked = toggleSelection; // Apply the properties of the toggle selection var greetingOutput = document.getElementById("greetingOutput"); if (toggleControl.checked == true) { greetingOutput.setAttribute("class", "toggle-on"); } else { greetingOutput.removeAttribute("class", "toggle-on"); } } // If the app was terminated last time it ran, restore the greeting // and name output if ( WinJS.Application.sessionState.previousExecutionState === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) { var outputValue = WinJS.Application.sessionState.greetingOutput; if (outputValue) { var greetingOutput = document.getElementById("greetingOutput"); greetingOutput.innerText = outputValue; } var inputValue = WinJS.Application.sessionState.nameInput; if (inputValue) { var nameInput = document.getElementById("nameInput"); nameInput.value = inputValue; } } }, buttonClickHandler: function (eventInfo) { // Get the user's name input var userName = document.getElementById("nameInput").value; // Create the greeting string and set the greeting output to it var greetingString = "Hello, " + userName + "!"; document.getElementById("greetingOutput").innerText = greetingString; // Save the session data. WinJS.Application.sessionState.greetingOutput = greetingString; }, toggleChanged: function (eventInfo) { // Get the toggle control var toggleControl = document.getElementById("toggleControlDiv").winControl; // Get the greeting output var greetingOutput = document.getElementById("greetingOutput"); // Set the CSS class for the greeting output based on the toggle's state if (toggleControl.checked == true) { greetingOutput.setAttribute("class", "toggle-on"); } else { greetingOutput.removeAttribute("class", "toggle-on"); } // Store the toggle selection for multiple sessions. var appData = Windows.Storage.ApplicationData.current; var roamingSettings = appData.roamingSettings; roamingSettings.values["toggleSelection"] = toggleControl.checked; }, nameInputChanged: function (eventInfo) { var nameInput = eventInfo.srcElement; // Store the user's name input WinJS.Application.sessionState.nameInput = nameInput.value; }, linkClickEventHandler: function (eventInfo) { eventInfo.preventDefault(); var link = eventInfo.target; WinJS.Navigation.navigate(link.href); } }); })();
navigator.js
navigator.js contains only generated code.
page2.css
.page2 section {
margin: auto 120px;
}
.phone .page2 .page-section {
margin: auto 24px;
}
.phone .page2 .page-header .titlearea {
-ms-grid-column: 3;
margin-top: 37px;
margin-left: -96px;
}
.phone .page2 .back-button {
display: none;
}
page2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>page2</title> <!-- WinJS references --> <link href="//Microsoft.Phone.WinJS.2.1/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script> <link href="page2.css" rel="stylesheet" /> <script src="page2.js"></script> </head> <body> <div class="page2 fragment"> <header class="page-header" aria-label="Header content" role="banner"> <button class="back-button" data-win-control="WinJS.UI.BackButton"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to page2</span> </h1> </header> <section class="page-section" aria-label="Main content" role="main"> <p>Content goes here.</p> </section> </div> </body> </html>
page2.js
// For an introduction to the Page Control template, see the following documentation: // http://go.microsoft.com/fwlink/p/?LinkID=232511 (function () { "use strict"; WinJS.UI.Pages.define("/pages/page2/page2.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { // TODO: Initialize the page here. }, unload: function () { // TODO: Respond to navigations away from this page. }, updateLayout: function (element) { /// <param name="element" domElement="true" /> // TODO: Respond to changes in layout. } }); })();
Show: