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:
![Fayout1.jpg]()
The Flyout can be created deceptively as below.
![Fayout2.jpg]()
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:
![Fayout3.jpg]()
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>
<!-- 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 the code behind on the click event of the button, the Flyout can be shown as in the following
function.
![Fayout4.jpg]()
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:
![Fayout5.jpg]()
I hope this article is useful. Thanks for reading.