Windows 8 adventures: using the Flyout control

According to the docs, the Flyout control allows us to add lightweight popups which relate to what the user is currently doing. Creating a flyout is a simple operation which evolves a couple of steps:

  1. create the HTML snippet shown by the flyout;
  2. create the Flyout control and associate it with the HTML snippet created in step 1;
  3. control the dismissal of the flyout and perform a specific operation when the flyout is dismissed (if required).

To illustrate its use, let’s build a simple app which shows a flyout in response to a button click.  Here’s the HTML snippet responsible for the button and for the contents presented by the flyout:

<p>
 <input type="button" value="show Flyout" id="showFlyout" />
</p>
<div id="flyout" data-win-control="WinJS.UI.Flyout">
 <div>Your account will be charged!</div>
 <input type="button" id="confirmFlyout" value="Confirm" />
 </div>
<div id="info"></div>

The info div is used for showing a message which explains how the flyout was dismissed (since flyouts can be dismissed by just clicking outside them, we’ll be using this div to show a message which says how the flyout was dismissed). Notice that we don’t need to hide the flyout by setting its display to none because it will be automatically hidden from the display when we associate it with the Flyout control that is created during the ready event:

WinJS.Utilities.ready(initializeSample, true);
var _flyout = null;
function initializeSample() {
 WinJS.UI.processAll()
 .then(function () {
 _flyout = WinJS.UI.getControl( document.getElementById("flyout"));
_flyout.addEventListener(
 "afterhide", performFlyoutAction, false);
 });
 document.getElementById("confirmFlyout").addEventListener(
  "click", confirmFlyoutDlg, false);
 document.getElementById("showFlyout").addEventListener(
 "click", showFlyout, false);
}

The initializeSample function will only be called after the DOMContentLoaded event has been fired. Internally, the ready method will resort to a Promise in order to execute the initializeSample callback. If you prefer, you can still rely on the DOMContentLoaded event to run your initialization logic.

After initializing all the controls defined in the HTML document (notice the WinJS.UI.processAll method call), we initialize a global variable with a reference to our Flyout control and set up an event handler which will be called in response to the afterhide event (this event is raised by the flyout after is has been fully hidden). You’ve probably noticed that we’ve hooked up the click events raised by the showFlyout and confirmFlyout buttons.

In the showFlyout button click’s event, we’re just showing the flyout:

function showFlyout(evt) {
 _flyout.show(evt.target, "top");
}

Showing the flyout requires us to pass an anchor control (in this case, we’re passing it the object responsible for raising the event) and specify it’s relative position to the anchor control (in this case, we’re showing it over the button). The relative position is used as a hint and the flyout position will also be influenced by the current available space (for instance, if our button is placed at the top of the screen, then you shouldn’t really be surprised to see the flyout shown below it, event though you’ve passed top as the flyout’s relative position).

The confirmFlyout’s click event handler will only be called when the user clicks over the button shown by the flyout. Since flyouts can also be dismissed by just clicking outside of them, then we’ll use this event handler to change the value of another global variable (_flyoutConfirmed) before closing the flyout:

var _flyoutConfirmed = false;
function confirmFlyoutDlg() {
 _flyoutConfirmed = true; _flyout.hide();
}

We’ll be using this global variable from within the flyout’s afterhide event handler to see if the flyout was dismissed because the user clicked outside of the flyout or because the user clicked in the confirmFlyout button:

function performFlyoutAction() {
 document.getElementById("info").innerHTML =
 _flyoutConfirmed ? "YES" : "NO"; _flyoutConfirmed = false;
}

In this example, we’re just writing yes or no to a div, but you can easily adapt the code to start some action in response to a flyout’s button click. Notice that we’re also reseting the _flyoutConfirmed variable so that future flyout dismissals are correctly processed

Besides the methods and events shown in this small example, the Flyout control exposes others properties, methods and events. You can find more info about them in the online docs.

And that’s all for now. Stay tuned for more.

Advertisements

~ by Luis Abreu on January 11, 2012.

2 Responses to “Windows 8 adventures: using the Flyout control”

  1. Your nested pre tags with the horizontal scrollbar are utterly unreadable.

  2. True. Unfortunately, there was a problema with the server and when then recovered the posts, it lost all formatting ans I still didn’t have any time to fix it up. Sorry about that.

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

 
%d bloggers like this: