Introduction
In this article I describe creation of an app for accessing the user's account name, first and last name and profile picture. This is only available for Microsoft Accounts. For this app you first add a new folder named html by right-clicking on your project name and add four HTML pages:
- page1.html
- page2.html
- page3.html
- page4.html
Now add four JavaScript pages:
- script1.js
- script2.js
- script3.js
- script4.js
Add a new folder named utill and the following pages:
- One HTML page named select.html
- One .js page named utill.js
- One .css page named stylesheet.cs
Write the following code in default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>image</title>
<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>
<link rel="stylesheet" href="/utill/stylesheet.css" />
<link href="/css/default.css" rel="stylesheet" />
<script src="/utill/utill.js"></script>
<script src="/js/default.js"></script>
</head>
<body role="application">
<div id="r_grid">
<div id="content">
<h1 id="f_Label"></h1>
<div id="c_host"></div>
</div>
</div>
</body>
</html>
Write the following code in default.js:
(function () {
"use strict";
var pageTitle = "My App";
var pages = [
{ url: "/html/page1.html", title: "Display name" },
{ url: "/html/page2.html", title: "First and Last name" },
{ url: "/html/page3.html", title: "Account picture" },
{ url: "/html/page4.html", title: "Set Account picture" }
];
function activated(eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
var url = WinJS.Application.sessionState.lastUrl || pages[0].url;
return WinJS.Navigation.navigate(url);
}));
}
else {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.protocol) {
if (eventObject.detail.uri.schemeName === "ms-accountpictureprovider") {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
return WinJS.Navigation.navigate(pages[3].url);
}));
}
}
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("c_host");
host.winControl && host.winControl.unload && host.winControl.unload();
WinJS.Utilities.empty(host);
eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
WinJS.Application.sessionState.lastUrl = url;
}));
});
function ensureUnsnapped() {
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
var unsnapped = ((currentState !== Windows.UI.ViewManagement.ApplicationViewState.snapped) || Windows.UI.ViewManagement.ApplicationView.tryUnsnap());
if (!unsnapped) {
WinJS.log && WinJS.log("Cannot unsnap the sample application.", "sample", "status");
}
return unsnapped;
}
WinJS.Namespace.define("app", {
pageTitle: pageTitle,
pages: pages,
ensureUnsnapped: ensureUnsnapped
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Now write the following code in page1.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script.js"></script>
</head>
<body>
<div data-win-control="app.pageInput">
<p>
DisplayName for the current user.
</p>
<button class="action" id="getDisplayName">
DisplayName
</button>
<br />
<br />
</div>
<div data-win-control="app.pageOutput">
</div>
</body>
</html>
Write the following code in page2.html:
<html>
<head>
<title></title>
<script src="/js/scrept.js"></script>
</head>
<body>
<div data-win-control="app.pageInput">
<p>
First and Last Name for the current user.
</p>
<button class="action" id="fname">
FirstName
</button>
<button class="action secondary" id="lname">
LastName
</button>
<br />
<br />
</div>
<div data-win-control="app.pageOutput">
</div>
</body>
</html>
Write the following code in page3.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script3.js"></script>
</head>
<body>
<div data-win-control="app.pageInput">
<p>
Account Picture for the current user.
</p>
<button id="getSmallImage" class="action">
Small Image
</button>
<button id="getLargeImage" class="action">
Large Image
</button>
<button id="getVideo" class="action">
Video
</button>
<br />
<br />
</div>
<div data-win-control="app.pageOutput">
<img class="imageHolder" style="vertical-align: top" id="smallImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="96" height="96" />
<img class="imageHolder" id="largeImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="300" height="300" />
<video id="videoHolder" controls width="300" height="300">
Account Picture video
</video>
</div>
</body>
</html>
Write the following code in page4.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script4.js"></script>
</head>
<body>
<div data-win-control="app.pageInput">
<p>
Set the Account Picture image for the current logon user.
</p>
<button id="setImage" class="action">
Set image
</button>
<button id="setVideo" class="action">
Set video
</button>
<br />
<br />
</div>
<div data-win-control="app.pageOutput">
<img class="imageHolder" style="vertical-align: top" id="smallImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="96" height="96" />
<img class="imageHolder" id="largeImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="300" height="300" />
<video id="videoHolder" controls width="300" height="300">
Get Dynamic Account Picture video
</video>
</div>
</body>
</html>
Now write the following code in script1.js:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script4.js"></script>
</head>
<body>
<div data-win-control="app.pageInput">
<p>
Set the Account Picture image for the current logon user.
</p>
<button id="setImage" class="action">
Set image
</button>
<button id="setVideo" class="action">
Set video
</button>
<br />
<br />
</div>
<div data-win-control="app.pageOutput">
<img class="imageHolder" style="vertical-align: top" id="smallImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="96" height="96" />
<img class="imageHolder" id="largeImageHolder" alt="image holder" src="images/placeholder-sdk.png" width="300" height="300" />
<video id="videoHolder" controls width="300" height="300">
Get Dynamic Account Picture video
</video>
</div>
</body>
</html>
Write the following code in script2.js:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/page2.html", {
ready: function (element, options) {
document.getElementById("fname").addEventListener("click", getFirstName, false);
document.getElementById("lname").addEventListener("click", getLastName, false);
}
});
function getFirstName() {
Windows.System.UserProfile.UserInformation.getFirstNameAsync().done(function (result) {
if (result) {
WinJS.log && WinJS.log("First Name = " + result, "sample", "status");
} else {
WinJS.log && WinJS.log("No First Name was returned.", "sample", "status");
}
});
}
function getLastName() {
Windows.System.UserProfile.UserInformation.getLastNameAsync().done(function (result) {
if (result) {
WinJS.log && WinJS.log("Last Name = " + result, "sample", "status");
} else {
WinJS.log && WinJS.log("No Last Name was returned.", "sample", "status");
}
});
}
})();
Write the following code in script3.js:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/page3.html", {
ready: function (element, options) {
hideVisibleHolders();
document.getElementById("getSmallImage").addEventListener("click", getSmallImage, false);
document.getElementById("getLargeImage").addEventListener("click", getLargeImage, false);
document.getElementById("getVideo").addEventListener("click", getVideo, false);
}
});
function getSmallImage() {
hideVisibleHolders();
var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.smallImage);
if (image) {
document.getElementById("smallImageHolder").style.visibility = "visible";
document.getElementById("smallImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });
WinJS.log && WinJS.log("Small image path= " + image.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Small account picture is not available.", "sample", "status");
}
}
function getLargeImage() {
hideVisibleHolders();
var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.largeImage);
if (image) {
document.getElementById("largeImageHolder").style.visibility = "visible";
document.getElementById("largeImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });
WinJS.log && WinJS.log("Large image path= " + image.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Large account picture is not available.", "sample", "status");
}
}
function getVideo() {
hideVisibleHolders();
var video = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.video);
if (video) {
document.getElementById("videoHolder").style.visibility = "visible";
document.getElementById("videoHolder").src = URL.createObjectURL(video, { oneTimeOnly: true });
document.getElementById("videoHolder").play();
WinJS.log && WinJS.log("Video path= " + video.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Video is not available.", "sample", "status");
}
}
function hideVisibleHolders() {
document.getElementById("smallImageHolder").style.visibility = "hidden";
document.getElementById("largeImageHolder").style.visibility = "hidden";
document.getElementById("videoHolder").style.visibility = "hidden";
}
})();
Write the following code in Script4.js:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/page3.html", {
ready: function (element, options) {
hideVisibleHolders();
document.getElementById("getSmallImage").addEventListener("click", getSmallImage, false);
document.getElementById("getLargeImage").addEventListener("click", getLargeImage, false);
document.getElementById("getVideo").addEventListener("click", getVideo, false);
}
});
function getSmallImage() {
hideVisibleHolders();
var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.smallImage);
if (image) {
document.getElementById("smallImageHolder").style.visibility = "visible";
document.getElementById("smallImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });
WinJS.log && WinJS.log("Small image path= " + image.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Small account picture is not available.", "sample", "status");
}
}
function getLargeImage() {
hideVisibleHolders();
var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.largeImage);
if (image) {
document.getElementById("largeImageHolder").style.visibility = "visible";
document.getElementById("largeImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });
WinJS.log && WinJS.log("Large image path= " + image.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Large account picture is not available.", "sample", "status");
}
}
function getVideo() {
hideVisibleHolders();
var video = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.video);
if (video) {
document.getElementById("videoHolder").style.visibility = "visible";
document.getElementById("videoHolder").src = URL.createObjectURL(video, { oneTimeOnly: true });
document.getElementById("videoHolder").play();
WinJS.log && WinJS.log("Video path= " + video.path, "sample", "status");
} else {
WinJS.log && WinJS.log("Video is not available.", "sample", "status");
}
}
function hideVisibleHolders() {
document.getElementById("smallImageHolder").style.visibility = "hidden";
document.getElementById("largeImageHolder").style.visibility = "hidden";
document.getElementById("videoHolder").style.visibility = "hidden";
}
})();
Now write the following code in select.html page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="options">
<h3 id="listLabel">Select pages:</h3>
<select id="pageSelect" aria-labelledby="listLabel">
</select>
</div>
</body>
</html>
Write the following code in utill.js:
(function () {
var lastError = "";
var lastStatus = "";
var pageInput = WinJS.Class.define(
function (element, options) {
element.winControl = this;
this.element = element;
new WinJS.Utilities.QueryCollection(element)
.setAttribute("role", "main")
.setAttribute("aria-labelledby", "inputLabel");
element.id = "input";
this.addInputLabel(element);
this.addDetailsElement(element);
this.addpagesPicker(element);
}, {
addInputLabel: function (element) {
var label = document.createElement("h2");
label.textContent = "Input";
label.id = "inputLabel";
element.parentNode.insertBefore(label, element);
},
addpagesPicker: function (parentElement) {
var pages = document.createElement("div");
pages.id = "pages";
var control = new pageSelect(pages);
parentElement.insertBefore(pages, parentElement.childNodes[0]);
},
addDetailsElement: function (sourceElement) {
var detailsDiv = this._createDetailsDiv();
while (sourceElement.childNodes.length > 0) {
detailsDiv.appendChild(sourceElement.removeChild(sourceElement.childNodes[0]));
}
sourceElement.appendChild(detailsDiv);
},
_createDetailsDiv: function () {
var detailsDiv = document.createElement("div");
new WinJS.Utilities.QueryCollection(detailsDiv)
.addClass("details")
.setAttribute("role", "region")
.setAttribute("aria-labelledby", "descLabel")
.setAttribute("aria-live", "assertive");
var label = document.createElement("h3");
label.textContent = "Description";
label.id = "descLabel";
detailsDiv.appendChild(label);
return detailsDiv;
},
}
);
var pageOutput = WinJS.Class.define(
function (element, options) {
element.winControl = this;
this.element = element;
new WinJS.Utilities.QueryCollection(element)
.setAttribute("role", "region")
.setAttribute("aria-labelledby", "outputLabel")
.setAttribute("aria-live", "assertive");
element.id = "output";
this._addOutputLabel(element);
this._addStatusOutput(element);
}, {
_addOutputLabel: function (element) {
var label = document.createElement("h2");
label.id = "outputLabel";
label.textContent = "Output";
element.parentNode.insertBefore(label, element);
},
_addStatusOutput: function (element) {
var statusDiv = document.createElement("div");
statusDiv.id = "statusMessage";
element.insertBefore(statusDiv, element.childNodes[0]);
}
}
);
var pageioUrl = null;
WinJS.Navigation.addEventListener("navigating", function (evt) {
currentpageUrl = evt.detail.location;
});
WinJS.log = function (message, tag, type) {
var isError = (type === "error");
var isStatus = (type === "status");
if (isError || isStatus) {
var statusDiv = /* @type(HTMLElement) */ document.getElementById("statusMessage");
if (statusDiv) {
statusDiv.innerText = message;
if (isError) {
lastError = message;
statusDiv.style.color = "blue";
} else if (isStatus) {
lastStatus = message;
statusDiv.style.color = "green";
}
}
}
};
var pageSelect = WinJS.UI.Pages.define("/utill/select.html", {
ready: function (element, options) {
var that = this;
var selectElement = WinJS.Utilities.query("#pageSelect", element);
this._selectElement = selectElement[0];
app.pages.forEach(function (s, index) {
that._addpage(index, s);
});
selectElement.listen("change", function (evt) {
var select = evt.target;
if (select.selectedIndex >= 0) {
var newUrl = select.options[select.selectedIndex].value;
WinJS.Navigation.navigate(newUrl).then(function () {
setImmediate(function () {
document.getElementById("pageSelect").setActive();
});
});
}
});
selectElement[0].size = (app.pages.length > 5 ? 5 : app.pages.length);
if (app.pages.length === 1) {
selectElement[0].setAttribute("multiple", "multiple");
}
},
_addpage: function (index, info) {
var option = document.createElement("option");
if (info.url === currentpageUrl) {
option.selected = "selected";
}
option.text = (index + 1) + ") " + info.title;
option.value = info.url;
this._selectElement.appendChild(option);
}
});
function activated(e) {
WinJS.Utilities.query("#f_Label")[0].textContent = app.pageTitle;
}
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Namespace.define("app", {
pageInput: pageInput,
pageOutput: pageOutput
});
document.Testapp = {
getLastError: function () {
return lastError;
},
getLastStatus: function () {
return lastStatus;
},
selectpage: function (pageID) {
pageID = pageID >> 0;
var select = document.getElementById("pageSelect");
var newUrl = select.options[pageID - 1].value;
WinJS.Navigation.navigate(newUrl).then(function () {
setImmediate(function () {
document.getElementById("pageSelect").setActive();
});
});
}
};
})();
Your output will look like this:
Join the conversation! Your thoughts help the community grow.