Displaying popups Using Flyouts WinJS Control

Introduction

Flyouts are also a kind of popup. They appear on the screen on request. Unlike the dialogs, flyouts are usually non-modal. It is a WinJS control which can be customized basing upon the requirement.

Unlike the dialogs, Flyouts can be closed by clicking somewhere in the screen area out side the flyout itself. We can customize the look feel along with the display position of the flyout.

HTML Part 

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>DialogDemo</title>
<!– WinJS references –>
<link href=”//Microsoft.WinJS.1.0/css/ui-dark.css” rel=”stylesheet” />
<script src=”//Microsoft.WinJS.1.0/js/base.js”></script>
<script src=”//Microsoft.WinJS.1.0/js/ui.js”></script>
<link href=”/css/default.css” rel=”stylesheet” />
<script src=”/js/default.js”></script>
</head>
<body>

<input type=”button” id=”btnShowFlyout” value=”Show Flyout” />
<div id=”myFlyOut” data-win-control=”WinJS.UI.Flyout”>
<label for=”txtName”>Enter your name</label>
<input type=”text” id=”txtName” value=”” />
<input type=”button” id=”btnWelcome” value=”Say hello” />
<br />
<br />
<span id=”welcomeText”></span>
</div>
</body>
</html>

In the above Html, we have defined a button as “btnShowFlyout” to display the flyout on click of that. Declared a div element as WinJS flyout control. In that flyout we have added a text box for user input and a button to click. On click of that button, it will display the “hello” message in the defined span.

JS Part 

(function () {
“use strict”;
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
} else {
}
args.setPromise(WinJS.UI.processAll());
}
};

app.onready = function (args) {
var btnShowFlyout = document.getElementById(“btnShowFlyout”);
btnShowFlyout.addEventListener(“click”, function () {
var myFlyout = document.getElementById(“myFlyOut”).winControl;
myFlyout.show(btnShowFlyout.parentNode,”top”,”right”);
});

document.getElementById(“btnWelcome”).addEventListener(“click”, function () {
var txtName = document.getElementById(“txtName”);
document.getElementById(“welcomeText”).innerHTML = “Hello ” + txtName.value;
});
};
app.oncheckpoint = function (args) {
};
app.start();
})();

In the onready event of the application, we have added the code to show the flyout.

Output

Output

Output

We can position the flyout as per our requirement. In the above example we have placed the flyout in top right corner of the screen. We can change the position of the flyout by controlling the parameters in the Show method as follows (few examples) :

Example One:

myFlyout.show(btnShowFlyout.parentNode);
Displays the flyout in default location

Example Two:

myFlyout.show(btnShowFlyout.parentNode,”top”);
Displays the flyout at the top of the DOM element.

Example Three:

myFlyout.show(btnShowFlyout.parentNode,”top”,”right”);
Displays the flyout at the top right of the DOM element.

Summary
Flyout has the advantage of getting displayed at the desired location with a customized look and feel. We can control the position by passing combination of the alignment and position parameters to Show method.

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

Advertisements

One thought on “Displaying popups Using Flyouts WinJS Control

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