Part 2 complete code (Windows Phone Store apps using JavaScript)
This topic provides the complete code sample used in the tutorial Part 2: Manage app lifecycle and state.
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
body {
}
.headerClass {
padding:10px;
}
.mainContent {
padding:15px;
}
#greetingOutput {
font-size:x-large;
}
.toggle-on {
color:blue;
}
default.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HelloWorld</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> <!-- HelloWorld references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <h1 class="headerClass">Hello, world!</h1> <div class="mainContent"> <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> </div> </body> </html>
default.js
// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/p/?linkid=232509 (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = 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. // Retrieve our greetingOutput session state info, // if it exists. 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; } } args.setPromise(WinJS.UI.processAll()); // 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", toggleChanged); // Retrieve the button and register our event handler. var helloButton = document.getElementById("helloButton"); helloButton.addEventListener("click", buttonClickHandler, false); // Retrieve the input element and register our // event handler. var nameInput = document.getElementById("nameInput"); nameInput.addEventListener("change", 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"); } } } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). }; function buttonClickHandler(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; } function toggleChanged(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; } function nameInputChanged(eventInfo) { var nameInput = eventInfo.srcElement; // Save the session data. WinJS.Application.sessionState.nameInput = nameInput.value; } app.start(); })();
Show: