A simple example of passing data in StackNavigator

ccpplinux

I am trying to fetch the list of pathological tests from my server from the API https://dakshalab.com/dakshalab/admin/api.php?apicall=test_list and display it on my app. For this purpose I have written the following code:

	var loader1 = new URLLoader();
	var url1 = new URLRequest("https://dakshalab.com/dakshalab/admin/api.php?apicall=test_list");
	loader1.load(url1);

            var json;
            loader1.addEventListener(Event.COMPLETE, (event:Event) -> {
                var loader = cast(event.currentTarget, URLLoader);
                var data = Std.string(loader.data);
                json = haxe.Json.parse(data);
                trace("test_list: "+json.test_list[0]);
                
                for(obj in json.test_list)
                {
                    var obj1 = haxe.Json.stringify(obj);
		trace(obj1);
                    var obj2 = haxe.Json.parse(obj1);
		trace(obj2);
		trace(obj2.name);
		listView.dataProvider.add({"text": obj2.name});
                }
            });

This code is working fine in browser. In the browser console I view the output like below:

src/pages/TestListPage.hx:121: {"id":"19","name":"BLOOD Grouping"}
MyApplication.js:37776 src/pages/TestListPage.hx:123: {
id : 19,
name : BLOOD Grouping
}
MyApplication.js:37776 src/pages/TestListPage.hx:124: BLOOD Grouping

This is the output of one of the iteration of for loop.

But when I am running the same code in the android using command openfl test android -debug then I am getting output like below:

07-07 23:51:19.639 11881 11936 I trace : src/pages/TestListPage.hx:121: "{ name => BLOOD Grouping, id => 19 }"
07-07 23:51:19.639 11881 11936 I trace : src/pages/TestListPage.hx:123: { name => BLOOD Grouping, id => 19 }
07-07 23:51:19.639 11881 11936 I trace : src/pages/TestListPage.hx:124: null

So it looks like the stringify function is working differently. In case of browser the stringify function is generating the output like {"id":"19","name":"BLOOD Grouping"} but in case of android app the stringify function is generating output like "{ name => BLOOD Grouping, id => 19 }". Due to this the JSON is not parsed correctly on android app and so the value of obj2.name is displayed as null in case of android app.

Can you please figure out why stringify function is working differently on both platforms? How to fix this problem?

joshtynjala

When I hover over the obj and json.test_list symbols in VSCode, it appears that Haxe's type inference is treating json.test_list as type Array<String>. I don't know why it does that. However, you can work around it by storing the value in a variable with the correct type, like this:

var test_list:Array<Dynamic> = json.test_list;
for (obj in test_list) {

ccpplinux

Thanks for giving me a hint. Now the code is working in both the browser and Android app. Thanks a lot for this. One thing more. At this moment, the list of tests is displayed inside a box as I am using ListView. Is there any UI component with the help of which I can display the list full screen, just like a list of posts on Facebook? If yes, then what it the name of that UI component?

joshtynjala

ListView is most likely the correct UI component to use. You can use a layout on its parent container to resize the ListView to fill the entire available width and height. For instance, you might use AnchorLayout, and then set the layoutData property of the ListView to AnchorLayoutData.fill().

https://feathersui.com/learn/haxe-openfl/anchor-layout/

Be sure to look at the Feathers UI sample projects. Many of them use AnchorLayout exactly as I describe.

ccpplinux

Thanks for giving me hint. By viewing the code of sample project at https://github.com/feathersui/feathersui-openfl/tree/v1.1.0/samples/list-view-data-provider-collection-sorting/ I am now able to display the test list in full screen. You can view the demo at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/. Just login with username ccpplinux5 and password 123456 and then click on Test List button. You will see the list of tests. The header is containing a button named Dashboard and the footer is containing a button Logout. Now I have following questions:

How to display more than one button in header/footer?
Is is possible to use a Label in addition to button in header/footer?
How to display a sidebar on the screen. Suppose I want to display left and right sidebars. The content of these sidebars will not scroll but only the list of tests in the middle should scroll. How to achieve it?
4.Is it possible to display more than one column content in ListView? Suppose I want to display the image of test along with the name of test in ListView. Then how to achieve it?

Best Regards ...
Pankaj Kumar

joshtynjala

Assuming that you are using the Header component, instead of passing a Button directly to leftView or rightView, you can add more than one Button to a LayoutGroup, and use that container as the leftView or rightView.
The Header component has a text property to display a title. You can certainly add a separate Label component to the leftView or rightView, if desired.
There are multiple ways to create a layout with a sidebar. You've inspired me to create a new sample, which I've named anchor-layout-three-column-header-and-footer. It demonstrates how to do a three column layout with a header and a footer in one container using AnchorLayout. It may be a bit more complicated than what you need, but it's not very difficult to create a simplified version with only two columns, or without the header and footer, if needed.

If you're using the Panel container, the header and footer layout is already handled for you. In that case, you could also consider using HorizontalLayout with HorizontalLayoutData and percentWidth.

There's also ResponsiveGridLayout, which works a bit like Bootstrap, if you're familiar with that JS library/framework. One advantage of this one is that it can modify the layout for different widths.
The ItemRenderer class has two properties that you will probably consider useful, icon and accessoryView. Both of these may be used for displaying an image next to the text.

Alternatively, there is also the GridView component, which can display more than one column, like a table.

ccpplinux

joshtynjala Assuming that you are using the Header component, instead of passing a Button directly to leftView or rightView, you can add more than one Button to a LayoutGroup, and use that container as the leftView or rightView

I am not using the Header component rather I am using header and footer of Panel component. Now I will try to use the Header component.

joshtynjala Alternatively, there is also the GridView component, which can display more than one column, like a table.

How to display image in GridView? The example given at https://feathersui.com/learn/haxe-openfl/grid-view/ uses three text columns. There is no example of column with image.

joshtynjala

ccpplinux How to display image in GridView? The example given at https://feathersui.com/learn/haxe-openfl/grid-view/ uses three text columns. There is no example of column with image.

You can use any Feathers UI component as the "cell renderer" for a GridViewColumn. By default, it is ItemRenderer. To display an image, you might consider using ImageLoader. Or you could continue to use ItemRenderer, but set its icon property to an ImageLoader. Your options are very flexible.

ccpplinux

joshtynjala You can use any Feathers UI component as the "cell renderer" for a GridViewColumn. By default, it is ItemRenderer. To display an image, you might consider using ImageLoader. Or you could continue to use ItemRenderer, but set its icon property to an ImageLoader. Your options are very flexible.

I have used the GridView component to display the name of test as well as URL of images corresponding to test. You can view it online at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/ by logging with username ccpplinux5 and password 123456. On the Test List page there are two columns - name and image. Name column displays the name of test and Image column displays the URL of image corresponding to that test, Now I want to display actual image in place of image URL. For this I have taken help from the tutorial given at https://feathersui.com/learn/haxe-openfl/cookbook/item-renderer-image-url/. This tutorial is in regard to ListView. I have customised it as per GridView component. Here the code corresponding to that:

	this.gridView.columns = new ArrayCollection([
		new GridViewColumn("Name", (data) -> data.name),
		new GridViewColumn("Image", (data) -> data.image)
	]);


	var recycler = DisplayObjectRecycler.withFunction(() -> {
		var itemRenderer = new ItemRenderer();
	
		itemRenderer.icon = new AssetLoader();
	
		return itemRenderer;
	});
	gridView.cellRendererRecycler = recycler;
	

	recycler.update = (itemRenderer:ItemRenderer, state:GridViewCellState) -> {
		itemRenderer.text = state.text;
	
		var loader = cast(itemRenderer.icon, AssetLoader);
		loader.source = state.data.image;
	};

But even after this code the URL of the image is being displayed. What could be problem? Can you please help me in displaying image from URL in a GridView component?

ccpplinux

I have tried to integrate your https://github.com/feathersui/feathersui-openfl/tree/master/samples/anchor-layout-three-column-header-and-footer layout into my project. Now my Test List page is containing a header, a footer, a left sidebar, a right sidebar and a center column. In the center column I am displaying the ListView. You can view it at my server at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/ by logging with username ccpplinux5 and password 123456. But the problem is that the List View is not covering the whole width and height of central column. So how to achieve it? In my program I have written the following code:

this.listView.layoutData = centerColumnLayoutData;

But even after that the List View is not occupying the whole width and height of central column. So how to achieve it?
Further you can see that the alignment of header and footer is left. Although I have written following code in my program:

testListHeader.layoutData = AnchorLayoutData.center();
logoutButton.layoutData = AnchorLayoutData.center();

But even after that the content of header and footer is left. So how to make is center?

joshtynjala

I can't see you source code, so I can only guess what's happening. However, it appears that you may have kept the LayoutGroup objects from the example, and added your views as children of those LayoutGroup objects. I probably would have completely removed the LayoutGroup objects from the example and replaced them with the actual views to display. For instance, you might replace the centerColumn LayoutGroup with your ListView instead.

var centerColumn = new ListView();
var centerColumnLayoutData = new AnchorLayoutData();
centerColumnLayoutData.top = new Anchor(0.0, header);
centerColumnLayoutData.bottom = new Anchor(0.0, footer);
centerColumnLayoutData.right = new Anchor(0.0, rightColumn);
centerColumnLayoutData.left = new Anchor(0.0, leftColumn);
centerColumn.layoutData = centerColumnLayoutData;
addChild(centerColumn);

That being said, if you want to keep the LayoutGroup objects, and add your views as children, that's certainly allowed. However, you will need to pass an appropriate layout to each of the LayoutGroup objects, if you want to use layout data on their children. For instance, when you use AnchorLayoutData.center(), the parent LayoutGroup needs to be using AnchorLayout, otherwise the AnchorLayoutData will be ignored.

var footer = new LayoutGroup();
footer.layout = new AnchorLayout();
logoutButton = new Button();
logoutButton.layoutData = AnchorLayoutData.center();
footer.addChild(logoutButton);

ccpplinux

Thanks for giving me hint. I have achieved what I want. Now the header and footer are in center alignment and the test list is occupying full width and height of center column. You can view at my server at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/ by logging with username ccpplinux5 and password 123456. Now I am going to use GridViewColumn to display the list of tests along with their images.

joshtynjala

new GridViewColumn("Image", (data) -> data.image)

The function is meant to return the text to display in the column. That's why it is displaying the URL in the second column.

ccpplinux gridView.cellRendererRecycler = recycler;

I think you will have difficulty trying to use the same recycler for all columns. Instead, you should provide a custom recycler for the second column. That will allow you to display only an image without any text. The GridViewColumn class also has its own cellRendererRecycler property, which may be used to customize the cell renderer for a single column only.

ccpplinux

joshtynjala The function is meant to return the text to display in the column. That's why it is displaying the URL in the second column.

So I should remove this code from ArrayCollection of gridView.columns? Please confirm.

joshtynjala I think you will have difficulty trying to use the same recycler for all columns. Instead, you should provide a custom recycler for the second column. That will allow you to display only an image without any text. The GridViewColumn class also has its own cellRendererRecycler property, which may be used to customize the cell renderer for a single column only.

How to provide a custom recycler for the second column? How to use cellRendererRecycler property of GridViewColumn class for the second column? Can you please give some hint in terms of code?

joshtynjala

ccpplinux So I should remove this code from ArrayCollection of gridView.columns? Please confirm.

Yes, it's probably a good idea to remove it.

ccpplinux How to provide a custom recycler for the second column? How to use cellRendererRecycler property of GridViewColumn class for the second column? Can you please give some hint in terms of code?

var column2 = new GridViewColumn("Image");
column.cellRendererRecycler = /* your custom cell renderer recycler code */;
this.gridView.columns = new ArrayCollection([
	new GridViewColumn("Name", (data) -> data.name),
	column2
]);

ccpplinux

Thanks for reply. When I am using your code then in place of image I am getting code of whole object received from the server. The content being displayed in the image column is as follows:

{
name : BLOOD Grouping&RH Factor,
image : https://dakshalab.com/dakshalab/admin/assets/img/11.png,
_id__:397
}

You can view it at my server at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/ by logging with username ccpplinux5 and password 123456. Here is the corresponding code used by me:

	this.gridView.dataProvider = new ArrayCollection([]);

	var recycler = DisplayObjectRecycler.withFunction(() -> {
		var itemRenderer = new ItemRenderer();
	
		itemRenderer.icon = new AssetLoader();
	
		return itemRenderer;
	});

	var column2 = new GridViewColumn("Image");
	column2.cellRendererRecycler = recycler;

	this.gridView.columns = new ArrayCollection([
		new GridViewColumn("Name", (data) -> data.name),
		column2
	]);

	recycler.update = (itemRenderer:ItemRenderer, state:GridViewCellState) -> {
		itemRenderer.text = state.text;
	
		var loader = cast(itemRenderer.icon, AssetLoader);
		loader.source = state.data.image;
	};

Please help me in fixing this issue.

joshtynjala

This should hide the text in the item renderer.

itemRenderer.showText = false;

ccpplinux

joshtynjala itemRenderer.showText = false;

When I am writing this code either inside the body of the function DisplayObjectRecycler.withFunction or inside the body of the function recycler.update then the Image column becomes blank. Nothing is being displayed inside the Image column. But still the image is not being displayed in the Image column. How to display actual image in the Image column?

ccpplinux

I have done some experiment with the code of the function recycler.update which is as follows:

	recycler.update = (itemRenderer:ItemRenderer, state:GridViewCellState) -> {
		itemRenderer.text = state.text;
	
		var loader1 = cast(itemRenderer.icon, AssetLoader);
		loader1.source = state.data.image;
	};

In place of the code itemRenderer.text = state.text; if I am using the code itemRenderer.text = state.data.name; then the name of the test is being displayed in the Image column. If I am using the code itemRenderer.text = state.data.image; then the URL of the image is being displayed in the Image column. And the code itemRenderer.text = state.text; is being displayed the code of whole object in the Image column. When I am commenting this code the image column becomes blank. I think that the following code is not working:

		var loader1 = cast(itemRenderer.icon, AssetLoader);
		loader1.source = state.data.image;

Something is missing in this code due to which actual image is not being displayed in the Image column. Can you please check what code is missing from the above code?

joshtynjala

You are setting the source property of the ImageLoader correctly. You could try setting the width and height properties of the ImageLoader. In some cases, the width and height can incorrectly measure as 0.

If that doesn't work, I'd open up the web browser's developer tools and see if there are any errors thrown by JavaScript. You might also check the network section to see if the images have loaded (you may need to reload the page before the images appear in the network section).

« Previous Page Next Page »