Get access to button in particular list item in ListVIew

,
1

Hi!
I created in ListView item-renderer with two labels and button:

<listview id="Mods" width="500" height="300">
    <item-renderer width="100%" layoutName="horizontal">
        <vbox width="100%">
            <label id="Name" width="100%" style="font-bold:true; font-underline:true"></label>
            <label id="Directory" width="100%" style="color:#888888; font-size:9px"></label>
        </vbox>
        <button id="SaveMod" verticalAlign="center" text="Save"></button>
    </item-renderer>
</listview>

Next, in code i added some data:

var rawData = LoadFile(pathToModsList);
var modsData:Array<ModData> = ParseData(rawData);
var modsList:ListView = main.findComponent("Mods", ListView, true);
for (modData in modsData) {
    modsList.dataSource.add({Name:modData.Name, Directory:modData.Directory});
}

But how can i reach button component in list items for settings onClick event?

2

I think the event you are after is ItemEvent.COMPONENT_EVENT which is dispatched via the ListView when a subcomponent (InteractiveComponent) fires a UIEvent.CHANGE event.

If im understanding correctly?

Cheers,
Ian

3

Hi!
Main+2020-05-31+13-00-34
I want call some function after press on “Save” button from list element like
someSaveButtonFromListViewItem.onClick = function(mouseEvent) {some expressions;}
For this purpose i using var openFileDialog:Button = main.findComponent(“OpenFileDialog”, Button, true); and then subscribed to onClick, but in this case i found button which already exist in my window, what i should do for dynamic generating elements and how can i find buttons, like “Save” button in listItem from picture above?

4

So, i would do something like this (im using xml here, but you wouldnt have to ofc):

    <listview id="lv" width="200" height="200">
        <item-renderer width="100%" layoutName="horizontal">
            <label width="100%" id="value" verticalAlign="center" />
            <button text="Save" verticalAlign="center" />
        </item-renderer>
        
        <data>
            <item value="Item 1" anotherField="data 1" />
            <item value="Item 2" anotherField="data 2" />
            <item value="Item 3" anotherField="data 3" />
            <item value="Item 4" anotherField="data 4" />
            <item value="Item 5" anotherField="data 5" />
            <item value="Item 6" anotherField="data 6" />
            <item value="Item 7" anotherField="data 7" />
            <item value="Item 8" anotherField="data 8" />
            <item value="Item 9" anotherField="data 9" />
            <item value="Item 10" anotherField="data 10" />
        </data>
    </listview>

            lv.onComponentEvent = function(e:ItemEvent) {
                trace("ON COMPONENT EVENT - " + e.data.anotherField);
            }

Also, just so you know, you could create your whole dialog as a custom component and use the @:build macro (assuming you are using xml), it means you wont ever have to use findComponent or anything like that, it will all be nice and easy for you :slight_smile:

Let me know if any of that helps, ill knock up a really silly example of how i would do the dialog (but ofc, feel free to ignore :slight_smile: )

Cheers,
Ian

5

So using the same xml as above, i can just do:

@:build(haxe.ui.macros.ComponentMacros.build("assets/main.xml"))
class MyDialog extends Dialog {
    public function new() {
        super();    
    }
    
    @:bind(lv, ItemEvent.COMPONENT_EVENT)
    private function onComponentEvent(e:ItemEvent) {
        trace("ON COMPONENT EVENT - " + e.data.anotherField);
    }
}

And then just show it with:

var dialog = new MyDialog();
dialog.show();

Note that as well as the “@:bind” meta data making it easier to link up events (you can also bind variables to values too fyi), it also means that any component in the xml, that has an id, will automatically become a typed member variable of the class

6

Hi!
Thanks for advices, i’ll try it :slight_smile:

1 Like