MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Figure 7-1 Examples of flyout controls from the HTML flyout control sample.
I’ll again encourage you to read the Guidelines and checklist for Flyouts topic that goes into detail
about how and when to use the different designs that are possible with this control. It also outlines
when not to use the control: for example, to surface errors not related to user action (use a message
dialog instead), for primary commands (use the app bar), for text selection context menus, and for UI
that is part of a workflow and should be directly on the app canvas. These guidelines also suggest
keeping a flyout small and focused (omitting unnecessary controls) and making sure a flyout is
positioned close to the object that invoked it. Let’s now see how that works in the code.
Note In addition to apps that display a WinJS.UI.Flyout on their own, some system APIs (such as that
to create a secondary tile) create a system flyout. In these cases, the app will receive a blur event, which
will cause any light dismiss app bars to be dismissed. To prevent this, set the app bar to sticky when
using those APIs.
WinJS.UI.Flyout Properties, Methods, and Events
Most of the properties, methods, and events of the WinJS.UI.Flyout control are exactly the same as
we’ve already seen for the app bar. The show and hide methods control its visibility, a hidden property
indicates its visible state, and same the beforeshow, aftershow, beforehide, and afterhide events fire as
appropriate. The afterhide event is typically used to detect dismissal of the flyout.
Like the app bar, the flyout also has a placement property, but it has different values that are only
meaningful in the context of the flyout’s alignment and anchor properties. In fact, all three properties
are optional parameters to the show method because they determine where, exactly, the flyout appears
on the screen; the default placement and alignment can also be set on the control itself because these
294