Displaying Dialogs in WinJS

Introduction
Dialogs are the one of the most basic part of an application. Usually we need dialogs to inform the user about some kind of notifications or to take the quick user input on screen without navigating to a separate page of the application. We can display also dialogs in widows store application.

Informative Dialogs
This kind of dialogs are the one which usually used to notify the user about any information. It has an information in the body with a button to close the dialog.

HTML Part

<input type=”button” id=”btnShowDialog” value=”Show a dialog” />

In the Html file, we have added a button to show the dialog.

JS Part 

document.getElementById(“btnShowDialog”).addEventListener(“click”, function () {
var myMessage = new Windows.UI.Popups.MessageDialog(“I am testing the dialog”);
myMessage.showAsync();
});

In the JS file, we got the element from the DOM using the ID of that. Added an event handler and bind the Click event with the same handler. In the call back function we have initialized the MessageDialog class. It accepts a string in the constructor. This string will be displayed in the body of the dialog.

On calling of the showAsync method, it displays a modal dialog on screen with the content string as mentioned in the initialization along with a default Close button in it.

Output

Output

Output

Confirmation Dialog
Confirmation dialogs ask the user for input. It asks for the confirmations like Yes/No.

HTML Part

<input type=”button” id=”btnConfirm” value=”Show a confirmation” />

In the Html file, we have added a button to show the confirmation dialog.

JS Part

document.getElementById(“btnConfirm”).addEventListener(“click”, function () {
var myMessage = new Windows.UI.Popups.MessageDialog(“Are you sure you want to confirm ?”);
myMessage.commands.append(new Windows.UI.Popups.UICommand(“Yes”));
myMessage.commands.append(new Windows.UI.Popups.UICommand(“No”));
myMessage.defaultCommandIndex = 0;
myMessage.cancelCommandIndex = 1;
myMessage.showAsync();
});

As like the previously defined example we added an event handler and initialize the Message Dialog class with its details. Here we did some additional work like we have appended 2 commands to the dialog. These 2 commands will appear as 2 buttons in the dialog with text Yes and No.

On specifying the defaultCommandIndex, the dialog will respond to the Enter key of the key board and the cancelCommandIndex will respond to the Esc key of the key board, if used in a desktop. Although these are purely optional.

Since we have defined defaultComandIndex=0, on hitting of Enter key it will call the 0th button of the dialog i.e. Yes button. For the cancelCommandIndex it will call 1st button of the dialog i.e. No button on hitting Esc key.

Output

Output

Output

Dialog with Multiple Buttons
Sometimes we have seen dialogs with multiple buttons, like Retry, Ignore and Cancel.

HTML Part

<input type=”button” id=”btnRetryIngnorCancel” value=”Show a retry dialog” />

 JS Part

document.getElementById(“btnRetryIngnorCancel”).addEventListener(“click”, function () {
var myMessage = new Windows.UI.Popups.MessageDialog(“What do you want to do ?”);
myMessage.commands.append(new Windows.UI.Popups.UICommand(“Retry”, funRetry));
myMessage.commands.append(new Windows.UI.Popups.UICommand(“Ignore”));
myMessage.commands.append(new Windows.UI.Popups.UICommand(“Cancel”));
myMessage.defaultCommandIndex = 0;
myMessage.cancelCommandIndex = 2;
myMessage.showAsync();
});

Like on the above example we have added 3 commands here. As demonstrated in this example, we can add call back functions on click of Retry button. Something can also be done for other buttons too. The call back function will get called if the particular button gets clicked.

Output

Output

Output

Summary
The above was an example of different dialogs we usually deals with our day to day life during app development. We can add buttons to the dialogs as per the need and also can write callback methods to deal with the same.

Written By: Nirmal Hota, X-platform Mobile Lead, Mindfire Solutions

Advertisements

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