Introduction
In this article I describe how to create Menu Apps in Windows Store Apps using JavaScript. In this app when you right-click on the image two options appear; one for open and the second for save. When you select open then in the output "open is selected" appears or if you select save than "save is selected" appears.
To begin add a HTML page, page1.html, by right-clicking on the name of your project in Solution Explorer the same as adding two pages in your js folder namely script1.js and utill.js. The image is shown below.
![menu-Windows-store-Apps.jpg]()
Write the following code in default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SDK Sample</title>
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/utill.js"></script>
<script src="/js/default.js"></script>
</head>
<body role="application">
<div id="rootGrid">
<div id="content">
<h1 id="featureLabel"></h1>
<div id="contentHost"></div>
</div>
</div>
</body>
</html>
Write the following code in default.js:
(function () {
"use strict";
var sampleTitle = "Context menu JS sample";
var pages = [
{ url: "page1.html", title: "Show context menu" }
];
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);
}));
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("contentHost");
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;
}));
});
WinJS.Namespace.define("App", {
sampleTitle: sampleTitle,
pages: pages
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Write the following code in script1.js:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("page1.html", {
ready: function (element, options) {
document.getElementById("attachment").addEventListener("contextmenu", attachmentHandler, false);
}
});
function pageToWinRT(pageX, pageY) {
var zoomFactor = document.documentElement.msContentZoomFactor;
return {
x: (pageX - window.pageXOffset) * zoomFactor,
y: (pageY - window.pageYOffset) * zoomFactor
};
}
function attachmentHandler(e) {
var menu = new Windows.UI.Popups.PopupMenu();
menu.commands.append(new Windows.UI.Popups.UICommand("Open with", onOpenWith));
menu.commands.append(new Windows.UI.Popups.UICommand("Save attachment", onSaveAttachment));
menu.showAsync(pageToWinRT(e.pageX, e.pageY)).then(function (invokedCommand) {
if (invokedCommand === null) {
WinJS.log && WinJS.log("Context menu dismissed", "sample", "status");
}
});
WinJS.log && WinJS.log("Context menu shown", "sample", "status");
}
function onOpenWith() {
WinJS.log && WinJS.log("'Open with' button clicked", "sample", "status");
}
function onSaveAttachment() {
WinJS.log && WinJS.log("'Save attachment' button clicked", "sample", "status");
}
})();
Write the following code in utill.js:
(function () {
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]);
}
}
);
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;
}
}
};
function activated(e) {
WinJS.Utilities.query("#featureLabel")[0].textContent = App.sampleTitle;
}
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Namespace.define("App", {
pageOutput: pageOutput
});
})();
Write the following code in page1.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script1.js"></script>
</head>
<body>
<div data-win-control="App.pageInput">
<p>Right-click the image to show a simple context menu.</p>
<br />
<img class="attachment" id="attachment" src="/images/ekonkar.jpg" />
<br />
<br />
</div>
<div data-win-control="App.pageOutput">
</div>
</body>
</html>
Your output will look like the following:
![output-windows-store-apps.jpg]()
![out-windows-store-apps.jpg]()
Summary
In this article I described how to create the context menu apps in Windows Store Apps using JavaScript. I hope this article has helped you to understand Context Menus Apps in Windows Store Apps using JavaScript. Please share it if you know more about this. Your feedback and constructive contributions are welcome.