PageNavigator Not Working

ccpplinux

Hi,
As per instruction given on the page https://feathersui.com/learn/haxe-openfl/page-navigator/ when I am running the code then I am getting following error message:

PageNavigator has no field dataProvider
PageNavigator has no field selectedIndex

Can you please help me fixing this error message?

joshtynjala

PageNavigator definitely has dataProvider and selectedIndex properties.

https://github.com/feathersui/feathersui-openfl/blob/v1.0.0/src/feathers/controls/navigators/PageNavigator.hx#L105
https://github.com/feathersui/feathersui-openfl/blob/v1.0.0/src/feathers/controls/navigators/PageNavigator.hx#L154

Please share your code, and I'll be happy to help.

ccpplinux

import feathers.controls.Application;
import feathers.controls.Label;
import feathers.controls.navigators.PageNavigator;
import feathers.controls.LayoutGroup;
import feathers.data.ArrayCollection;
import feathers.controls.navigators.PageItem;

class PageNavigator extends Application 
{
	public function new() 
	{
		super();

		var navigator = new PageNavigator();

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

		addChild(navigator);
	}
}

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

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

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

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

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

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

ccpplinux

This is my code. You can also download the file from the link https://filetransfer.io/data-package/S7Yn0fEx#link

ccpplinux

I am using the command openfl test html5 to run this code.

joshtynjala

Here's the issue:

class PageNavigator extends Application

Your class is called PageNavigator, so new PageNavigator() will instantiate your class, and not feathers.controls.navigators.PageNavigator.

Rename your class to something else, and it should start to recognize the real PageNavigator.

ccpplinux

Thanks a lot for finding the issue. I will rename my class and then test it.

ccpplinux

Thanks. It is working now. But the problem is that when I am running this code then I am getting output Page1. As in the code I have written navigator.selectedIndex = 2; and so it should display Page3 but why it is displaying Page1. Can you please explain it?

ccpplinux

import feathers.controls.Application;
import feathers.controls.Label;
import feathers.controls.navigators.PageNavigator;
import feathers.controls.LayoutGroup;
import feathers.data.ArrayCollection;
import feathers.controls.navigators.PageItem;

class PageNavigatorTest extends Application 
{
	public function new() 
	{
		super();

		var navigator = new PageNavigator();

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

		addChild(navigator);
	}
}

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

        var message = new Label();
        message.text = "Welcome to Page1";
        addChild(message);
    }
}

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

        var message = new Label();
        message.text = "Welcome to Page2";
        addChild(message);
    }
}

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

        var message = new Label();
        message.text = "Welcome to Page3";
        addChild(message);
    }
}

ccpplinux

This is my new code which is running but always displaying the message "Welcome to Page1".

joshtynjala

It looks like there is a bug in PageNavigator. I'll get that fixed in the next update.

Until then, as a workaround, you can set selectedIndex after the PageNavigator has validated for the first time.

var navigator = new PageNavigator();
navigator.dataProvider = new ArrayCollection([PageItem.withClass(Page1), PageItem.withClass(Page2), PageItem.withClass(Page3)]);
addChild(navigator);
navigator.validateNow();
navigator.selectedIndex = 2;

ccpplinux

Thanks for reply. Yes after using the code navigator.validateNow(); it is working now. Thanks a lot for help.