Create a Sample Windows 8 App (Standard 8)

Article
09/29/2016

7/8/2014

Learn how to create and package a simple Windows 8 app to allow servicing of a thin client-style Windows Embedded 8 Standard (Standard 8) device.

Introduction

A thin client computer is a dedicated device that provides access to a service or information. For example, a thin client might be anterminal that provides access to server functionality, , an airport check-in terminal, or a device that enables customers to set up and access a wedding registry.

Lab Exercise Purpose

This lab guides you through the creation and packaging of a simple JavaScript sample Windows 8 app that you can use in the Create a Thin Client-Style Device lab. It demonstrates how to create a Windows 8 app for Windows Embedded 8 Standard (Standard 8) that enables an administrator to break out of the app experience in order to service the device.

Overview of Steps

Step 1: Create the Sample App
Use Visual Studio to create a new JavaScript Windows 8 app based on the blank app template.

Step 2: Modify the Sample App
Modify the new app to add code to enable a dedicated interface. This includes a button that you can use to exit the app with a special exit value for use with Windows 8 Application Launcher, enabling an administrator to break out of the app in order to service the device.

Step 3: Create the App Package
Create an app package that you can use to deploy the app to Standard 8 devices.

Step 4: Identify the Application User Model ID (AUMID)
Identify the AUMID of your app for use when configuring Windows 8 Application Launcher.

Prerequisites

To perform the steps in this exercise, the following are required:

Required Hardware

Your development computer and your device must meet the minimum hardware requirements:

Required Software

The following software is required:

A computer running Windows 8.
Visual Studio 2012 with JavaScript extensions

Required Lab Exercises or Knowledge

No other lab exercises must be completed before you begin this lab exercise.

Knowledge of the following is recommended before you begin this lab exercise:

Step 1: Create the Sample App

In this step you will use Visual Studio 2012 to create a new JavaScript app.

To create a new project

Start Visual Studio 2012.
On the File menu, select New, then select Project.
In the New Project window, on the left side, navigate to Installed, then to Templates.
If JavaScript is not your selected default language, navigate to Other Languages.
Navigate to JavaScript, then to Windows Store, and select Blank App.
In the Name: field at the bottom, enter the name of your app. For the purposes of this lab, enter “TCSampleApp”.
Verify that the Create directory for solution box is checked, and click OK to create the project.
If you do not already have a developer license installed on your computer, Visual Studio will prompt you to sign up for one. Follow the steps to sign up for a developer license. You will need a Microsoft account to obtain a developer license.

Step 2: Modify the Sample App

In this step you will add code to display a basic interface.

In Visual Studio 2012, in the Solution Explorer pane, click on default.html to display the source html.
In default.html, locate the following section of code:
```
<body>
    <p>Content goes here<p>
</body>
```

Replace this section with the following code:

<body>
    <div id="TC">
        <h1 class="left">Sample TC App</h1>
        <br /> 
        <h2>Check in:</h2>
        <input id="textInput" type="text" />
        <button id="enterButton">Enter</button>
    </div>
    <div id="AdminArea">
        <br />
        <br />
        <button id="logoutButton">Logout</button>
    </div>       
</body>

In the Solution Explorer pane, expand js, and click on default.js to display the default JavaScript code page.

Locate the following section of code:

    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.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

On the line after args.setPromise(WinJS.UI.processAll());, add the following code to create event handlers for the two buttons:

            var enterButton = document.getElementById("enterButton");
            enterButton.addEventListener("click", enterButtonClickHandler, false);

            var logoutButton = document.getElementById("logoutButton");
            logoutButton.addEventListener("click", logoutButtonClickHandler, false);

Locate the app.start(); line near the end of the file.

On the line before app.start();, add the following code to handle the button click events:

    function enterButtonClickHandler(eventInfo) {
        // Clear out the text input field.

        textInput.value = "";
    }

    function logoutButtonClickHandler(eventInfo) {
        // Write a local application data value to simulate an exit code,
        // and then force the app to exit.
        // Windows 8 Application Launcher can use this code to determine
        // what action to take when the app exits.

        var localSettings = Windows.Storage.ApplicationData.current.localSettings;
        var errorObj = new Error();

        localSettings.values["CustomExitCode"] = 4;
        MSApp.terminateApp(errorObj);
    }

Verify that the code for default.js now looks like the following code:

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?LinkId=232509
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    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.
            }
            args.setPromise(WinJS.UI.processAll());

           var enterButton = document.getElementById("enterButton");
            enterButton.addEventListener("click", enterButtonClickHandler, false);

            var logoutButton = document.getElementById("logoutButton");
            logoutButton.addEventListener("click", logoutButtonClickHandler, false);
        }
    };

    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 enterButtonClickHandler(eventInfo) {
        // Clear out the text input field.

        textInput.value = "";
    }

    function logoutButtonClickHandler(eventInfo) {
        // Write a local application data value to simulate an exit code,
        // and then force the app to exit.
        // Windows 8 Application Launcher can use this code to determine
        // what action to take when the app exits.

        var localSettings = Windows.Storage.ApplicationData.current.localSettings;
        var errorObj = new Error();

        localSettings.values["CustomExitCode"] = 4;
        MSApp.terminateApp(errorObj);
    }

    app.start();
})();

In the Solution Explorer pane, double-click package.appxmanifest to open the manifest designer.
In the manifest designer, select the Packaging tab.
In the Package name: field, enter the name of your package. For the purposes of this lab, enter “TCSampleApp”
In Visual Studio 2012, on the File menu, click Save All.
Press F6 to build the solution.
Press F5 to run and debug the app.

Additional Information

The function logoutButtonClickHandler writes a special local app data value that Windows 8 Application Launcher can handle, and forces the app to exit. This enables an authorized user to break out of a locked down experience. For the sake of this lab, the logout button is displayed on the main screen, but you would normally require an administrator to use a non-obvious method of invoking this function. For example, you could add a page that is only displayed when an administrator presses a secret keyboard combination, which then requires the administrator to enter a password to exit the app.

For more information, see Guidelines for Developing Windows 8 Apps for Standard 8.

Step 3: Create the App Package

In this step you will use Visual Studio 2012 to create a package for the thin client sample app. You can use this package to deploy your app to a Standard 8 device.

To create an app package

In Visual Studio 2012, on the Project menu, select Store, and then click Create App Packages… to open the Create App Packages window.
Select No in response to “Do you want to build packages to upload to the Windows Store?”, and click Next.
Under Output location:, enter the location where you want to save your app package.
Under Architecture, select Neutral, and select Release (any CPU) as the Solution Configuration.
Click Create.
Visual Studio 2012 displays a Package Creation Completed window when it finishes creating the app package. You can click on the output location link to view your app package files.
Click OK.

Step 4: Identify the Application User Model ID (AUMID)

In this step you will identify the AUMID for the app. The AUMID is a unique ID that identifies the app. If you use Windows 8 Application Launcher to launch this app, you will need to supply this AUMID so that Windows 8 Application Launcher can identify which app to launch.

To identify the AUMID

In Visual Studio 2012, in the Solution Explorer pane, double-click package.appxmanifest to open the manifest designer.
In the manifest designer, select the Packaging tab.
Locate the Package family name. The AUMID is the package family name, followed by an exclamation mark, followed by the application ID, which by default is “App”.

For example, the AUMID for this sample app should resemble TCSampleApp_<PublisherID>!App.

Conclusion

After completing this lab, you will have a Windows 8 app that is specialized for use with Windows 8 Application Launcher. You can use this app in the Create a Thin Client-Style Device lab to see how to create a device with this app as the primary user experience.

The next lab walks you through creating a thin client style device, using the app you created in this lab as the primary user experience.

Create a Thin Client-Style Device

Create a Sample Windows 8 App (Standard 8)

Introduction

Lab Exercise Purpose

Overview of Steps

Prerequisites

Required Hardware

Required Software

Required Lab Exercises or Knowledge

Step 1: Create the Sample App

To create a new project

Step 2: Modify the Sample App

Additional Information

Step 3: Create the App Package

To create an app package

Step 4: Identify the Application User Model ID (AUMID)

To identify the AUMID

Conclusion

See Also

Other Resources

Additional resources

Create a Sample Windows 8 App (Standard 8)

Introduction

Lab Exercise Purpose

Overview of Steps

Prerequisites

Required Hardware

Required Software

Required Lab Exercises or Knowledge

Step 1: Create the Sample App

To create a new project

Step 2: Modify the Sample App

Additional Information

Step 3: Create the App Package

To create an app package

Step 4: Identify the Application User Model ID (AUMID)

To identify the AUMID

Conclusion

Related Lab Exercises

See Also

Other Resources

Additional resources