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,

image

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

  1. App Bar
  2. Context Menu
  3. Message Dialog
  4. 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.

clip_image002

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,

clip_image004

Once we have created message dialog, we need to add commands to that. Command can be added as below,

clip_image006

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,

clip_image008

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]

I hope this post is useful. Thanks for reading

Advertisements

5 thoughts on “Message Dialog Control in Windows 8 HTML JavaScript Metro Application

  1. Pingback: WindowsDevNews.com
  2. Doesn’t work :S I get the button with the “Want to Make a call” but when I click it nothing happens :S

  3. Got it to work. Changes:

    default.html
    ——————————————————————————————————————–

    ————————————————————————————————————————
    default.js

    (function () {
    ‘use strict’;
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    WinJS.Application.onactivated = 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 = “Yes”;
    }));

    messagedialogpopup.commands.append(new Windows.UI.Popups.UICommand(‘no’, function () {
    //calling callback function for No command

    resultDiv.innerHTML = “no”;
    }));

    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 = “Yes but with limited data”;
    }));

    messagedialogpopup.showAsync();

    }

    WinJS.Application.start();
    })();

  4. Hi,

    First I have to thank you for theeffort you puted in this article really think it’s very good and nicely done.
    I do have a question, this article date back in the day where WinJS wasn’t brought to the web yet I think, so now that it does work for web apps equally, is there a way to make this control work on an ASP.Net WebForm ?? concedering that it has to be done with WinJS.

    Thanks in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s