A simple example of passing data in StackNavigator

ccpplinux · Jul 10, 2023

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 · Jul 10, 2023

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 · Jul 17, 2023

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 · Jul 17, 2023

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 · Jul 17, 2023

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 · Jul 17, 2023

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 · Jul 25, 2023

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 · Jul 25, 2023

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 · Jul 26, 2023

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.

ccpplinux · Aug 7, 2023

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?

joshtynjala · Aug 7, 2023

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 · Aug 7, 2023

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 · Aug 7, 2023

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 · Aug 8, 2023

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 · Aug 8, 2023

This should hide the text in the item renderer.

itemRenderer.showText = false;

ccpplinux · Aug 8, 2023

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 · Aug 8, 2023

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 · Aug 8, 2023

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).

ccpplinux · Aug 9, 2023

Thanks for giving me hint. In the browser console I see the following error message:

Access to image at 'https://dakshalab.com/dakshalab/admin/assets/img/19.png' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So how to fix this problem?

ccpplinux · Aug 9, 2023

In order to solve this problem from my PHP script, I added the following code at the beginning of my PHP code:

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, PATCH, DELETE');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Authorization, Content-Type, x-xsrf-token, x_csrftoken, Cache-Control, X-Requested-With');
header('Access-Control-Max-Age: 86400');

To verify that actual headers are coming or not, I used the curl command to test the performance of my URL using the following command:

curl -i https://dakshalab.com/dakshalab/admin/api.php?apicall=test_list

The output of this command is as follows:

HTTP/2 200 
content-type: application/json
access-control-max-age: 86400
set-cookie: PHPSESSID=788b6708ed9ce77552e97f517cc3b119; path=/; secure
expires: Thu, 19 Nov 1981 08:52:00 GMT
cache-control: no-store, no-cache, must-revalidate
pragma: no-cache
access-control-allow-origin: *
access-control-allow-methods: GET, POST, OPTIONS, DELETE, PUT
access-control-allow-headers: AccountKey,x-requested-with, Content-Type, origin, authorization, accept, client-security-token, host, date, cookie, cookie2
access-control-allow-credentials: true
date: Wed, 09 Aug 2023 07:43:35 GMT
server: LiteSpeed
alt-svc: h3=":443"; ma=2592000, h3-29=":443"; ma=2592000, h3-Q050=":443"; ma=2592000, h3-Q046=":443"; ma=2592000, h3-Q043=":443"; ma=2592000, quic=":443"; ma=2592000; v="43,46"

{"test_list":[{"id":"19","name":"BLOOD Grouping","image":"https://dakshalab.com/dakshalab/admin/assets/img/19.png"},{"id":"11","name":"BLOOD Grouping&RH Factor","image":"https://dakshalab.com/dakshalab/admin/assets/img/11.png"},{"id":"18","name":"Blood Sugar","image":"https://dakshalab.com/dakshalab/admin/assets/img/18.png"},{"id":"3","name":"CCP","image":"https://dakshalab.com/dakshalab/admin/assets/img/3.png"},{"id":"17","name":"CCP-Ab to Cyclic Citrullinated Peptide, Serum by CLIA","image":"https://dakshalab.com/dakshalab/admin/assets/img/17.png"},{"id":"24","name":"HBA1C","image":"https://dakshalab.com/dakshalab/admin/assets/img/24.png"},{"id":"10","name":"Hemoglobin ","image":"https://dakshalab.com/dakshalab/admin/assets/img/10.png"},{"id":"20","name":"Rh Factor","image":"https://dakshalab.com/dakshalab/admin/assets/img/20.png"},{"id":"1","name":"Sr. TOTAL CHOLESTEROL (CHOD POD)","image":"https://dakshalab.com/dakshalab/admin/assets/img/1.png"},{"id":"2","name":"Sr. TRIGLYCERIDES (Lipase-Glycerol Kinase)","image":"https://dakshalab.com/dakshalab/admin/assets/img/2.png"},{"id":"13","name":"Test11","image":"https://dakshalab.com/dakshalab/admin/assets/img/13.png"},{"id":"5","name":"Test2","image":"https://dakshalab.com/dakshalab/admin/assets/img/5.png"},{"id":"14","name":"Test22","image":"https://dakshalab.com/dakshalab/admin/assets/img/14.png"},{"id":"6","name":"Test3","image":"https://dakshalab.com/dakshalab/admin/assets/img/6.png"},{"id":"15","name":"Test33","image":"https://dakshalab.com/dakshalab/admin/assets/img/15.png"},{"id":"7","name":"Test4","image":"https://dakshalab.com/dakshalab/admin/assets/img/7.png"},{"id":"16","name":"Test44","image":"https://dakshalab.com/dakshalab/admin/assets/img/16.png"},{"id":"8","name":"Test5","image":"https://dakshalab.com/dakshalab/admin/assets/img/8.png"},{"id":"9","name":"Test6","image":"https://dakshalab.com/dakshalab/admin/assets/img/9.png"},{"id":"21","name":"TYPHI DOT (IGM)","image":"https://dakshalab.com/dakshalab/admin/assets/img/21.png"},{"id":"23","name":"Vitamin C","image":"https://dakshalab.com/dakshalab/admin/assets/img/23.png"},{"id":"22","name":"Vitamin D","image":"https://dakshalab.com/dakshalab/admin/assets/img/22.png"}]}

It shows that the header access-control-allow-origin: * is coming from the server. But even after that in the browser console I am getting the same error message. What could be the reason behind it?