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

›UI Components

Introduction

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

    • Terminal / Command Line
    • 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

How to use the PopUpListView component

The PopUpListView class displays a button, that when triggered, renders the items from a data collection in a pop-up list view.

Live preview of the PopUpListView component

The Basics

Start by creating a PopUpListView control, pass in a collection that defines the items to render, and add it to the display list.

var listView = new PopUpListView();
addChild(listView);

Data provider

To render some data in the list view, pass in a collection that contains an object for each row.

listView.dataProvider = new ArrayCollection([
    { text: "A" },
    { text: "B" },
    { text: "C" }
]);

Set the itemToText() method to get the text from each item to display in an item renderer.

listView.itemToText = function(item:Dynamic):String {
    return item.text;
};

Items in the collection are not required to be simple object literals, like in the example above. Instances of a class are allowed too (and encouraged as a best practice).

Add an event listener for Event.CHANGE to perform an action when the user selects a different item.

listView.addEventListener(Event.CHANGE, listView_changeHandler);

Check for the new value of the selectedItem property in the listener.

function listView_changeHandler(event:Event):Void {
    var listView = cast(event.currentTarget, PopUpListView);
    trace("PopUpListView selectedItem change: " + listView.selectedItem.text);
}

Alternatively, the value of the selectedIndex property references the index of the items in the list view's collection, in the order that they were added.

function listView_changeHandler(event:Event):Void {
    var listView = cast(event.currentTarget, PopUpListView);
    trace("PopUpListView selectedIndex change: " + listView.selectedIndex);
}

Add or remove items

To add a new item at the end, pass an object to the data provider's add() method.

var newItem = { text: "New Item" };
listView.dataProvider.add(newItem);

To add a new item at a specific position, pass an object to the data provider's addAt() method.

var newItem = { text: "First Item" };
listView.dataProvider.addAt(newItem, 0);

In the example above, a new item is added to the beginning.

Similarly, to remove an item, call remove() or removeAt() on the collection.

listView.dataProvider.removeAt(0);

Styles

A number of styles may be customized on the sub-components of a PopUpListView component, including styles on the button and the list view.

Button

The button in a PopUpListView component is of type Button. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PopUpListView.

See How to use the Button component for complete details about which styles are available for the button.

Style button globally

Use the PopUpListView.CHILD_VARIANT_BUTTON constant in a theme to provide a function that globally styles the buttons in all PopUpListView components.

styleProvider.setStyleFunction(
    Button,
    PopUpListView.CHILD_VARIANT_BUTTON,
    setPopUpListView_Button_Styles);

The function should use the following signature.

function setPopUpListView_Button_Styles(button:Button):Void {
    // ... set styles here
}

Style the button in a specific PopUpListView

The buttonFactory property may be used to customize the creation of an individual button.

listView.buttonFactory = () -> {
    var button = new Button();
    // ... set styles here
    return button;
};

ListView

The list view in a PopUpListView component is of type ListView. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual PopUpListView.

See How to use the ListView component for complete details about which styles are available for the list view.

Style list view globally

Use the PopUpListView.CHILD_VARIANT_LIST_VIEW constant in a theme to provide a function that globally styles the list views in all PopUpListView components.

styleProvider.setStyleFunction(
    ListView,
    PopUpListView.CHILD_VARIANT_LIST_VIEW,
    setPopUpListView_ListView_Styles);

The function should use the following signature.

function setPopUpListView_ListView_Styles(listView:ListView):Void {
    // ... set styles here
}

Style the list view in a specific PopUpListView

The listViewFactory property may be used to customize the creation of an individual list view.

listView.listViewFactory = () -> {
    var listView = new ListView();
    // ... set styles here
    return listView;
};

Related Links

  • feathers.controls.PopUpListView API Documentation
  • How to use the ListView component
Last updated on 8/9/2022
← PopUpDatePickerHProgressBar / VProgressBar →
  • The Basics
    • Data provider
  • Add or remove items
  • Styles
    • Button
    • ListView
  • 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
  • Mastodon
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2023 Bowler Hat LLC — Illustrations by unDraw.