Part 5 complete code (HTML)
This topic provides the complete code sample used in the tutorial Part 5: access and pickers.
This topic contains these sections:
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: // http://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."; } }); })();
Show: