Part 5 complete code (HTML)

  • Article

[ 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 5: access and pickers.

This topic contains these sections:

  • Technologies
  • Requirements
  • View the code (XAML)

Download location

This sample is not available for download.

Technologies

Programming languages C++
Programming models Windows Runtime

Requirements

Minimum supported client Windows 8
Minimum supported server Windows Server 2012
Minimum required SDK Microsoft Visual Studio Express 2012 for Windows 8

View the code (XAML)

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%;
        width: 100%;
    }

default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>PhotoAppSample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- PhotoAppSample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>

    <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:
// https://go.microsoft.com/fwlink/p/?LinkID=232506
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.addEventListener("activated", function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

            // Save the previous execution state. 
            WinJS.Application.sessionState.previousExecutionState =
                args.detail.previousExecutionState;

            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.

            }

            if (app.sessionState.history) {
                nav.history = app.sessionState.history;
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                if (nav.location) {
                    nav.history.current.initialPlaceholder = true;
                    return nav.navigate(nav.location, nav.state);
                } else {
                    return nav.navigate(Application.navigator.home);
                }
            }));
        }
    });

    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: 120px;
    margin-right: 120px;
}

#contentGrid {
    display: -ms-grid; 
    -ms-grid-rows: 50px 70px auto; 
    margin: 20px 120px 0px 120px;
}

#getPhotoButton {
    -ms-grid-row: 1;
    width: 120px;
    height: 20px;
}

#imageName {
    -ms-grid-row: 2;
}

#imageGrid {
    -ms-grid-row: 3; 
}

.pageSubheader {
    font-family: 'Segoe UI Light';
    font-size: 20px;
    vertical-align: bottom;
    margin: 0px 0px 40px 0px;
}

#imageGrid {
    -ms-grid-row: 3; 
    display: -ms-grid;
    -ms-grid-columns: auto auto;
}

#displayImage {
    -ms-grid-column: 1;
    width: 375px;
    max-height: 375px; 
    border: 1px solid black;
    background-color: gray; 

}

#imageInfoContainer {
    -ms-grid-column: 2;
    margin-left: 20px; 
}

#imageInfoContainer > div {
    margin-left: 20px;
    margin-bottom: 40px;
    width: 400px; 
    word-wrap: break-word;
}

@media screen and (orientation: portrait) {
    .homepage section[role=main] {
        margin-left: 0px;
    }

    #imageGrid {
        -ms-grid-columns: auto;
        -ms-grid-rows: auto auto;
    }

    #imageInfoContainer {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        margin-top: 20px;
        margin-left: 0px;       
    }
}

home.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/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">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Photo app sample</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="contentGrid">
                <button id="getPhotoButton">Get photo</button>
                <div id="imageName" class="pageSubheader" 
                    data-win-bind="innerHTML: displayName">Image name</div>

                <div id="imageGrid">
                    <img id="displayImage" src="#" data-win-bind="src: src" />
                    <div id="imageInfoContainer">
                        <label for="fileName">File name:</label>
                        <div id="fileName" data-win-bind="innerHTML: name">File name</div>
                        <label for="path">Path:</label>
                        <div id="path" data-win-bind="innerHTML: path">Path</div>
                        <label for="dateCreated">Date created:</label>
                        <div id="dateCreated" 
                            data-win-bind="innerHTML: dateCreated">Date created</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

home.js

(function () {
    "use strict";

    // Use this object to store info about the loaded image.
    var photoObject =
    {
        src: null,
        displayName: null,
        name: null,
        path: null,
        dateCreated: null
    };

    var homePage = 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.

            document.getElementById("getPhotoButton")
                .addEventListener("click", this.getPhotoButtonClickHandler, false);

            if (
                WinJS.Application.sessionState.previousExecutionState
                === Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                var mruToken = WinJS.Application.sessionState.mruToken;
                if (mruToken) {
                    Windows.Storage.AccessCache.StorageApplicationPermissions.
                        mostRecentlyUsedList.getFileAsync(mruToken)
                            .done(this.loadImage, this.displayError);
                }

            }

        },

        getPhotoButtonClickHandler: function (eventInfo) {

            if (Windows.UI.ViewManagement.ApplicationView.value !=
                Windows.UI.ViewManagement.ApplicationViewState.snapped ||
                Windows.UI.ViewManagement.ApplicationView.tryUnsnap() === true) {

                var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
                openPicker.suggestedStartLocation =
                    Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
                openPicker.viewMode =
                    Windows.Storage.Pickers.PickerViewMode.thumbnail;

                openPicker.fileTypeFilter.clear();
                openPicker.fileTypeFilter.append(".bmp");
                openPicker.fileTypeFilter.append(".png");
                openPicker.fileTypeFilter.append(".jpeg");
                openPicker.fileTypeFilter.append(".jpg");

                openPicker.pickSingleFileAsync().done(
                    homePage.prototype.loadImage,
                    homePage.prototype.displayError);
            }
        },

        loadImage: function (file) {

            if (file) {
                photoObject.displayName = file.displayName;
                photoObject.name = file.name;
                photoObject.path = file.path;
                photoObject.dateCreated = file.dateCreated;

                var imageBlob = URL.createObjectURL(file, { oneTimeOnly: true });
                photoObject.src = imageBlob;

                var contentGrid = document.getElementById("contentGrid");
                WinJS.Binding.processAll(contentGrid, photoObject);

                // Add picked file to MostRecentlyUsedList.
                WinJS.Application.sessionState.mruToken =
                    Windows.Storage.AccessCache.StorageApplicationPermissions
                        .mostRecentlyUsedList.add(file);

            }
        },

        displayError: function (error) {
            document.getElementById("imageName").innerHTML = "Unable to load image.";
        }

    });
})();