In this post, I will discuss how to work with Flyout in Windows 8 Metro application. Flyout is a type of UI surface in Windows 8 metro application. It is used to show simple message or popup. If user touches or clicks anywhere on the screen then Flyout disappears. It usually used to collect simple user information or show some message. Flyout should be as simple as possible. It should not have complex UI. A usual flyout can be like below,

image

Flyout can be created deceptively as below.

clip_image002

Inside Flyout we can put any HTML elements. As purpose of this post I am going to put sports as option and user can select out of that options. After putting sports options Flyout div will get modified as below,

clip_image004

User can select sports from above Flyout. As the design of the page, we have put a button and output div. We are going to popup a fly out on click event of a button. On selection of a sports option in Flyout, we will display that in output div and Flyout will disappear.

Default.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WinWebApp1todelete</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<button id="butonchooseSports" type="button"
style="margin-left:900px;
margin-top:20px;font-size:x-large">
Choose Sports
</button>
<div id="sportsFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Format text flyout}">
<label for="scenario3TextColor">choose sports</label>
<br />
<select id="scenario3TextColor">
<option value="cricket">Cricket</option>
<option value="football">FootBall</option>
<option value="hocky">Hocky</option>
<option value="tenis">Tenis</option>
<option value="rugby">Rugby</option>
<option value="golf">Golf</option>
</select>
</div>
<div style="margin-left:900px;
margin-top:300px;font-size:x-large" id="outputDiv"></div>
</body>
</html>

In code behind on click event of the button Flyout can be shown as below function.

clip_image002[8]

Here we are,

  • Selecting Flyout div as win control.
  • Calling Show function to display Flyout.
  • There are input parameters of Show function. First parameter is id of button. On click event of this input button Flyout will get displayed.
  • Second parameter is position of the Flyout. Other possible value of this parameter could be top.

We are putting all code together as below,

Default.js


(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
var choosesportsbutton;
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: startup code here

WinJS.UI.processAll().then(function () {
choosesportsbutton = document.getElementById("butonchooseSports");
choosesportsbutton.addEventListener('click', showflyout);



});
}

function showflyout()
{
var flyOut = document.getElementById("sportsFlyout").winControl;
flyOut.addEventListener('change', ChangedSportsValue);
flyOut.show(choosesportsbutton, "bottom");
}

function ChangedSportsValue(e) {

var res = document.getElementById('scenario3TextColor').value;
document.getElementById('outputDiv').innerText = "You have selected " + res;
}
}

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


In above code we are,

  • Displaying Flyout
  • Attaching change event on sports option list. In this post Id of Sports option in Flyout div is seenario3TextColor
  • Attaching click event to button and on click showing Flyout.
  • Displaying selected sports in output div

If you run, on the click event of button you should get Flyout to choose the sports as below,

image

I hope this post is useful. Thanks for reading

 

Advertisements

5 thoughts on “Flyout control in Windows 8 HTML JavaScript Metro Application

  1. Hey Dhananjay, You code really helps…
    Ramaprasanna is with me and we are working together.

    Great job dude.

  2. Hey Dhananjay, Your code really helps…
    Ramaprasanna is with me and we are working together.

    Great job dude.

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