Part 4 complete code (Windows Store apps using JavaScript and HTML) (Windows)



#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: 120px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 39px;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            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%;
    }

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }

        .fragment header[role=banner] .win-backbutton {
            margin: 0;
            margin-right: 10px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-left: 0;
            margin-top: 68px;
        }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 100px 1fr;
    }

        .fragment header[role=banner] .win-backbutton {
            margin-left: 29px;
        }
}

default.html

HTML


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

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.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

JavaScript


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

    WinJS.Binding.optimizeBindingReferences = true;

    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) {
            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

CSS


.homepage section[role=main] {
}

#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;
    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;
}


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


@media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
    }

    #contentGrid {
        margin-left: 20px;
    }

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

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

    #displayImage {
        width: 225px;
        max-height: 225px;
    }

    #imageInfoContainer > div {
        width: 250px; 
    }

}

@media screen and (-ms-view-state: fullscreen-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-left: 0px;
        margin-top: 20px;
    }
}

home.html

HTML


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

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.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 class="win-backbutton" aria-label="Back" disabled type="button"></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">Image name</div>

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

home.js

JavaScript


(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.
        }
    });
})();

navigator.js

navigator.js contains only generated code.

Build date: 3/11/2013

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)