Part 2 complete code (Windows Phone Store apps using JavaScript)
Collapse the table of content
Expand the table of content

Part 2 complete code (Windows Phone Store apps using JavaScript)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This topic provides the complete code sample used in the tutorial Part 2: Manage app lifecycle and state.

This topic contains these sections:

Download location

Technologies

Programming languagesHTML, JavaScript, CSS
Programming modelsWindows Runtime

Requirements

Minimum supported clientNone supported
Minimum supported serverNone supported
Minimum required SDKMicrosoft 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:
© 2017 Microsoft