How to use the PageNavigator component
The PageNavigator class supports navigation between views using a PageIndicator component to select the current view.
The Basics
Start by creating a PageNavigator, and add it to the display list.
var navigator = new PageNavigator();
this.addChild(navigator);
A view can be a Feathers UI component or any OpenFL display object. The following example creates a simple view with a label.
class Page1 extends LayoutGroup {
public function new() {
super();
var message = new Label();
message.text = "Hello World";
this.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
PageItemclass defines three static functions for creating items.
withClass()accepts any subclass ofDisplayObject. 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!
Navigation
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);