• HelpOpenFL
  • A simple example of passing data in StackNavigator

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.

    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.

      8 days later

      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?

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

      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.

      12 days later

      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?

        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.

          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?

            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
            ]);

            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.

            This should hide the text in the item renderer.

            itemRenderer.showText = false;

              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?

              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?

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

              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?

                I guess something may still be wrong with your headers. Or your browser is caching the original response. It might be worth clearing the browser cache and trying again.

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

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

                I just realized that you are getting the CORS error when you try to load an image file. Headers in your PHP script probably won't affect images. You may need to set CORS headers for images in a different way. For instance, if your web server is running Apache, you may need to do it in an .htaccess file in the img directory.

                THANKS A LOT for giving me hint about code to be written in the .htaccess file. I wrote the following code in .htaccess file on my server:

                Header set Access-Control-Allow-Origin "*"

                And then images started displaying in the application. I am very much excited about it. Now I am going to convert it into Android application to see whether it is working in android app or not. In between you view it on my server at https://glug4muz.org/Haxe/FeathersUI/RegistrationForm/ by logging with username ccpplinux5 and password 123456.

                Thanking you again.

                I would like to intimate you that the images are also displaying in Android App. Thanks a lot to you for help.