Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›Miscellaneous

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

Displaying pop-ups and modals above other content in Feathers UI

Feathers UI includes a PopUpManager that allows content to be displayed over the rest of the application. It provides options to make the pop-up modal, meaning that mouse and touch events will be prevented from reaching the rest of the application unless the pop-up is removed. Additionally, if focus management is enabled, modal pop-ups will be given exclusive access to focus while they are open, and focus cannot be passed to components below the modal overlay.

Add a pop-up

PopUpManager.addPopUp() may be used to add any UI component as a pop-up over the rest of the application.

var popUp = new Panel();
panel.header = new Header("Warning");
panel.addChild(new Label("This is a very important message"));
panel.addChild(new Button("OK"));
PopUpManager.addPopUp(panel, parent, true, true);

The first argument is the display object that should be added as a pop-up. It is not required to be a Feathers UI component, and it may include any type of simple OpenFL display object, such as a Sprite or a Bitmap.

The second argument is the origin display object that the pop-up should be associated with. This argument is used to determine which Stage the pop-up should be added to. This becomes important when multiple windows are open in desktop applications.

The third argument is an optional Bool value that determines if the pop-up is modal or not. When a pop-up is modal, mouse and touch events cannot be passed to the rest of the application below, and keyboard focus changes will be kept within the modal pop-up. If a pop-up is not modal, the user may interact with the rest of the application normally.

The fourth argument an optional Bool value that determines if the pop-up should be centered within the stage bounds. When a pop-up is centered in this way, the PopUpManager will automatically reposition the pop-up if the stage (or the pop-up itself) resizes.

Remove a pop-up

To remove a pop-up, call PopUpManager.removePopUp().

PopUpManager.removePopUp(popUp);

To remove all pop-ups, call PopUpManager.removeAllPopUps().

PopUpManager.removeAllPopUps();

Center a pop-up

There are two different ways to center pop-ups, depending on your needs.

The first way to center a pop-up is to pass a value of true to the fourth argument of PopUpManager.addPopUp(). In this case, the pop-up will be centered immediately when it is added to the display list. Then, if the stage resizes or if the pop-up itself resizes, the pop-up will be repositioned in order to remain centered.

The pop-up manager can only detect when the pop-up resizes if it is a Feathers UI component. Simple OpenFL display objects, such as Sprite or Shape, do not dispatch any event to indicate that they have been resized.

If you choose not to center a pop-up when you call PopUpManager.addPopUp(), you can center it manually by calling PopUpManager.centerPopUp(). This will center the pop-up immediately. However, if the pop-up resizes or the stage resizes, you will need to call PopUpManager.centerPopUp() again to reposition it so that it remains centered.

Related Links

  • feathers.core.PopUpManager API Documentation
Last updated on 3/10/2022
← haxedef optionsSemantic versioning →
  • Add a pop-up
  • Remove a pop-up
  • Center a pop-up
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.