In this post, I will discuss how to work with Message Dialog in Windows 8 Metro application. I will use WinJS to create message dialog. Message dialog look like below,
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> <!-- WinJS references --> <link rel="stylesheet" href="/winjs/css/ui-dark.css" /> <script src="/winjs/js/base.js"></script> <script src="/winjs/js/wwaapp.js"></script> <!-- DataBindingSample references --> <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 result out of user selection in message dialog box on the span resultDiv.
Message Dialog can be created by making a call to below 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 below,
Once we have created message dialog, we need to add commands to that. Command can be added as below,
We can add as many commands as we want in the same way. After adding all the commands we need to start operation as below,
By putting all codes together code behind will have below 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();
})();
On running you should be getting below message dialog on click event of the button.
![clip_image002[6]](https://dhananjay25.files.wordpress.com/2012/01/clip_image00261.jpg "clip_image002[6]")
I hope this post is useful. Thanks for reading
Dhananjay Kumar 
Leave a comment