How to use the PageNavigator component

The PageNavigator class supports navigation between views using a PageIndicator component to select the current view.

Navigation can be enhanced with animation, called a transition. Feathers UI provides a number of animated transitions out of the box, and a simple API allows anyone to create custom transitions.

⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.

The Basics

Start by creating a PageNavigator, and add it to the display list.

var navigator = new PageNavigator();
addChild(navigator);

Data provider

A page can be a Feathers UI component or any OpenFL display object. The following example creates a simple page view with a label.

class Page1 extends LayoutGroup {
    public function new() {
        super();

        var message = new Label();
        message.text = "Hello World";
        addChild(message);
    }
}

To add a new view that the navigator can show, create one or more PageItem objects and add them to a collection:

navigator.dataProvider = new ArrayCollection([
    PageItem.withClass(Page1),
    PageItem.withClass(Page2),
    PageItem.withClass(Page3)
]);

The first argument passed to PageItem.withClass() is the text to be displayed on the page. The second argument is the Page1 class from earlier. The navigator will automatically create an instance of this class when the view needs to be shown.

The PageItem class defines three static functions for creating items.

  • withClass() accepts any subclass of DisplayObject. Each time that the view is shown, a new instance of the class will be instantiated.
  • withFunction() accepts a function that returns a display object. Each time that the view is shown, this function will be called. Using a function can be useful for adding children to a view or setting its properties before showing it in the navigator.
  • withDisplayObject() accepts an already-instantiated display object. When the view is shown, the same instance will always be reused. This one can allocate a lot of memory if overused, so be careful!

To show the view at a specific index in the data provider, set the navigator's selectedIndex property

navigator.selectedIndex = 2;

Alternatively, pass one of the PageItem instances from the collection to the selectedItem property.

navigator.selectedItem = navigator.dataProvider.get(2);