Working With the Message Dialog Control in Windows 8 HTML Metro Application

Dhananjay Kumar
Jan 09, 2012
11.3k
0
0
Article

In this article, I will discuss how to work with the Message Dialog in a Windows 8 Metro application. I will use WinJS to create a message dialog. The Message dialog looks like below:

The Message Dialog is part of UI surfaces in Windows 8. There are four types of UI surfaces in Windows 8.

App Bar
Context Menu
Message Dialog
Fly Out

We are going to popup a message dialog box on click event of a button. Let us put a button and output span on default.html as below:

Default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DataBindingSample</title>
    
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h2>metro message dialog demo</h2>
    <br />
    <button id="btnShowMessage" > Want to Make a call </button>
    <br />
    <span id="resultDiv" />
</body>
</html>

We are going to display the result of user selection in a message dialog box on the span resultDiv.

A Message Dialog can be created by making a call to the following function.

Windows.UI.Popups.MessageDialog function is overloaded. It either takes content or content and title both as input parameters.

Message dialog can be created with content and title as following:

Once we have created message dialog, we need to add commands to that. A command can be added as in the following:

We can add as many commands as we want in the same way. After adding all the commands we need to start operation as in the following:

By putting all codes together, the code behind will have the following codes.

Default.js

(function (){
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: startup code here
//adding click event to button
var buttonToPopup = document.getElementById('btnShowMessage');
buttonToPopup.addEventListener('click', function()
{
ShowPopUp();
});
}
}
function ShowPopUp() {
var resultDiv = document.getElementById('resultDiv');
//Creating message dialog box
var messagedialogpopup = new Windows.UI.Popups.MessageDialog
('Allow to use your location ',
'Location Application');
// adding command to message dialog box
messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('yes', function () {
//calling callback function for Yes command
resultDiv.innerHTML = "<h2>Yes</h2>";
}));
messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('no', function () {
//calling callback function for No command
resultDiv.innerHTML = "<h2>no</h2>";
}));
messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand('Yes but with limitd data', function () {
//calling callback function for Yes but with limited data command
resultDiv.innerHTML = "<h2>Yes but with limited data</h2>";
}));
messagedialogpopup.showAsync().operation.start();
}
WinJS.Application.start();
})();
}

When running it you should prduce the following message dialog on click event of the button.