Flyout Control in a Windows 8 HTML JavaScript Metro Application

Dhananjay Kumar
Jan 13, 2012
10.1k
0
0
Article

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

The Flyout can be created deceptively as below.

Inside a Flyout we can put any HTML elements. As a purpose of this article I am going to put sports as an option and the user can select from those options. After showing the sports options the Flyout div will be modified as below:

The user can select sports from the above Flyout. As the design of the page, we have put a button and output div. We are going to popup a flyout on the 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>
    
    <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 the code behind on the click event of the button, the Flyout can be shown as in the following function.

Here we are,

Selecting Flyout div as win control.
Calling Show function to display Flyout.
There are input parameters of the Show function. The first parameter is the id of the button. In the click event of this input button, the Flyout will be displayed.
The second parameter is the position of the Flyout. Other possible values 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 the above code we are:

Displaying Flyout
Attaching change event on sports option list. In this article 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 the button you should get the Flyout to choose the sports as below:

I hope this article is useful. Thanks for reading.