[new-component-method] Bug with Itemrenderer in ListView

[DominikGrebien]

Expected Behavior

I wanted to use the itemrenderer in the xml file to use it as a structure for the items. Used was the html5 backend.

Current Behavior

The problem is that the listview is correct without a itemrenderer and if the itemrenderer is set the items have the size 10 to 10 px and have no more content.

Steps to Reproduce (for bugs)

1. I have a minimal test case in the link below

Screenshot

The left listview is without the itemrenderer and the right one with the itemrenderer

Test app / minimal test case

Main.hx is this:

import haxe.ui.HaxeUIApp;
import haxe.ui.core.Component;
import haxe.ui.macros.ComponentMacros;

class Main {
    public static function main() {
        var app = new HaxeUIApp();
        app.ready(function() {
            var main:Component = ComponentMacros.buildComponent("assets/main.xml");
            app.addComponent(main);

            app.start();
        });
    }
}

Xml is this:

<?xml version="1.0" encoding="utf-8"?>
<vbox width="100%" height="100%">
    <hbox height="5%" />
    <hbox height="30%" width="30%">
        <hbox height="20%" />
        <listview id="lv1" width="100%" height="90%">
            <data>
                <item value="test1" />
                <item value="test2" />
                <item value="test3" />
            </data>
        </listview>

        <listview id="lv2" width="100%" height="90%">
            <itemrenderer>
                <label id="value2"></label>
            </itemrenderer>
            <data>
                <item value2="test1" />
                <item value2="test2" />
                <item value2="test3" />
            </data>
        </listview>
    </hbox>
</vbox>

Your Environment

• Haxe version: 4.0.0-rc.2+77068e10c
• HaxeUI version: new-component-method branch from git
• OS: Windows 10 version 1809
• Link to your project: https://drive.google.com/open?id=1o4uE8YhddPgath0bEeYYD7JX0NYjN-3T

[AdrianV]

I don't know why, but it looks like a ItemRenderer generated via markup somehow looses its _children.

[ianharrigan]

Hmmm, this is a good one... seems ive broke something somehow. :/

[ianharrigan]

Ok, this was an oversight with cloneComponent not working as it should (or as it used to before the macro refactor)... when you get a moment, can you retest, and close if its working?

Thanks, Ian

[DominikGrebien]

Hi Ian, i have tested it and there is another problem.

With the normal itemrenderer in the xml the 100% in the hbox are ignored and with the basicitemrenderer is a second button that should not be there. In this screenshot is the itemrenderer on the left side and the basicitmerenderer on the right.

The new xml is this:

<?xml version="1.0" encoding="utf-8"?>
<vbox width="100%" height="100%">
    <hbox height="5%" />
    <hbox height="30%" width="30%">
        <hbox height="20%" />
        <listview id="lv1" width="100%" height="90%">
            <itemrenderer>
                <hbox width="100%" height="100%" id="myElement">
                    <hbox width="100%">
                        <spacer id="spacer" width="10%" height="100%" hidden="true" />
                        <label id="value1" />
                        <button id="button1" hidden="false" />
                    </hbox>
                </hbox>
            </itemrenderer>
            <data>
                <item value1="test1" />
                <item value1="test2" />
                <item value1="test3" />
            </data>
        </listview>

        <listview id="lv2" width="100%" height="90%">
            <basicitemrenderer>
                <hbox width="100%" height="100%" id="myElement">
                    <hbox width="100%">
                        <spacer id="spacer" width="10%" height="100%" hidden="true" />
                        <label id="value2" />
                        <button id="button2" hidden="false" />
                    </hbox>
                </hbox>
            </basicitemrenderer>
            <data>
                <item value2="test1" />
                <item value2="test2" />
                <item value2="test3" />
            </data>
        </listview>
    </hbox>
</vbox>

In this case i only changed the xml.

Cheers, Dominik

[ianharrigan]

what if you use "contentWidth=100%" on the listview?

[ianharrigan]

Also, the itemrenderer would also need to be 100%, the reason BasicItemRenderer doesnt need it is because it does that automatically

[DominikGrebien]

If the itemrenderer is set to 100% width nothing changes and if i use "contentWidth=100%" on the listview the whole listview is only 2px wide. The same thing happens if the itemrenderer is set to 100% and "contentWidth=100%" on the listview.

The small line on the left ist lv1.

[ianharrigan]

yeah, something is defo wrong:

        <listview id="lv1" height="500" width="500" contentWidth="100%">
            <itemrenderer width="100%">
                <hbox width="100%" id="myElement">
                    <hbox width="100%">
                        <label width="100%" id="value1" />
                        <button width="100%" id="button1" text="Button" />
                    </hbox>
                </hbox>
            </itemrenderer>

            <data>
                <item value1="test1" />
                <item value1="test2" />
                <item value1="test3" />
            </data>
        </listview>

That doesnt work either - ill check it out

[ianharrigan]

Ok, i think thats working... Can you close if its working for you?

Cheers, Ian

[ianharrigan]

fyi, your "height=100%" in the item renderer breaks things (because you dont have them on parent items), though im not sure thats what you were trying to do in the first place, anyway, heres a revised version of your sample:

        <listview id="lv1" width="100%" height="90%">
            <itemrenderer width="100%">
                <hbox width="100%" id="myElement">
                    <hbox width="100%">
                        <spacer id="spacer" width="10%" hidden="true" />
                        <label width="100%" id="value1" verticalAlign="center" />
                        <button id="button1" text="Bob" hidden="false" disabled="true" />
                    </hbox>
                </hbox>
            </itemrenderer>
            <data>
                <item value1="Test 1" button1="Action 1" />
                <item value1="Test 2" button1="Action 2" />
                <item value1="Test 3" button1="Action 3" />
            </data>
        </listview>

[DominikGrebien]

Yes not it works thanks for the help.

Cheers, Domi