Haxe #haxe-ui

purple-businessperson-14467

08/02/2022, 6:32 PM

I think if you are making custom itemrenderers then datasource makes sense. But I dont manage Open Source and have to deal with people like...well...like me? 🙂 So your call, of course

gifted-dream-38721

08/02/2022, 7:00 PM

Newbie troubles 🙂 It's my first time trying to use HaxeUI but I'm having some trouble getting

haxeui-heaps

to work. I get the following errors after creating the project and attempting to run it:

Copy code

C:\HaxeToolkit\haxe\lib\haxeui-heaps/1,4,0/haxe/ui/backend/TextDisplayImpl.hx:107: characters 14-23 : h2d.Text has no field lineBreak
C:\HaxeToolkit\haxe\lib\haxeui-heaps/1,4,0/haxe/ui/backend/TextDisplayImpl.hx:36: characters 49-58 : h2d.Text has no field lineBreak
C:\HaxeToolkit\haxe\lib\haxeui-heaps/1,4,0/haxe/ui/backend/TextDisplayImpl.hx:37: characters 24-33 : h2d.Text has no field lineBreak
C:\HaxeToolkit\haxe\lib\haxeui-heaps/1,4,0/haxe/ui/backend/TextInputImpl.hx:16: characters 19-28 : h2d.TextInput has no field lineBreak

This is using the latest version of Haxe, Heaps, and HaxeUI (all installed today). Any ideas?

bright-gpu-74537

08/02/2022, 7:18 PM

i think you need the git version of all those libs (including heaps)

bright-gpu-74537

08/02/2022, 7:19 PM

im not 100% sure it does make sense, i mean, the item renderer should only be concerned with its data, not the whole data source - i get that you might want the renderer to remove items, so there is an edge case, but i would consider it non standard, and i guess really the item renderer should dispatch an event that something would listen to and do the removing

gifted-dream-38721

08/02/2022, 7:20 PM

Oh okay. So the latest **latest **😅 I'll try that. Thanks!

bright-gpu-74537

08/02/2022, 7:48 PM

So now that i think more about it, events are the way to go here - its how "normal" item renderers would do it, you could still use the "findAncestor(TableView)" if you want, but upon reflection i dont think im going to add a "parentDataSource" or whatever - at least not yet, i think its just asking for trouble / confusion - if you want to edit the data source, the right way to go about it would be to have the the custom renderer pass an event and then have something listen to that event and do the "thing"

purple-businessperson-14467

08/02/2022, 7:50 PM

sure. it sounds like more work but keeps things cleaner?

bright-gpu-74537

08/02/2022, 7:50 PM

(fyi, "normal" item renderers dispatch an

ItemEvent.COMPONENT_EVENT

when an interactive component is clicked or changed)

bright-gpu-74537

08/02/2022, 7:55 PM

its not alot more work is it? http://haxeui.org/builder/?smkfrh

purple-businessperson-14467

08/02/2022, 7:56 PM

I meant work on your end

bright-gpu-74537

08/02/2022, 7:56 PM

note that i had to use

this.dataSource.removeAt(cast(event, haxe.ui.events.ItemEvent).itemIndex)

- but thats just for the xml. It seems the function it builds is just using a UIEvent, not the correct ItemEvent - but im going to fix this

bright-gpu-74537

08/02/2022, 7:56 PM

what do you mean? There is no work on my end... ?

purple-businessperson-14467

08/02/2022, 7:56 PM

looks good

purple-businessperson-14467

08/02/2022, 7:57 PM

no. I just meant it was going to be more coding than a simple pointer. But its seems mostly done

purple-businessperson-14467

08/02/2022, 7:58 PM

for you. for me your solution seems simple

purple-businessperson-14467

08/02/2022, 7:58 PM

and makes sense

bright-gpu-74537

08/02/2022, 7:58 PM

should be totally done... i mean, that example above is just using the event system and the ItemRenderer automatically registers change / click events on interactives and dispatches a special event - but in

MySuperCustomItemRenderer

you could do anything ofc (event wise)

purple-businessperson-14467

08/02/2022, 7:59 PM

right, nice. I'll take a spin

bright-gpu-74537

08/02/2022, 8:41 PM

fyi, i fixed the code gen, so now you dont have to cast the event, ie, the generated handler will use the correct event type (not always

UIEvent

), eg: http://haxeui.org/builder/?fzodae

purple-businessperson-14467

08/03/2022, 2:00 AM

So....I needed to add a "Are you sure?" dialog before truly deleting. Because the event is associated with the table, not the ItemRenderer, I had to this.findAncestor anyways

Copy code

haxe
class DeleteRenderer extends ItemRenderer {
  public function new() {
    super();
    deleteBtn.onClick=(e)->{    
      Dialogs.messageBox('Deleting a note is permanent. Are you sure?', 'Question', 'yesno', true, (e) -> {
        if (e == "{{yes}}") {    
          var event = new ItemEvent(ItemEvent.COMPONENT_EVENT, false, data);
          //this.findAncestor(TableView).dataSource.remove(data); //worked!!
          //btn.dispatch(new ItemEvent(event); //didntwork
          //deleteBtn.dispatch(event); //didnt    
          this.findAncestor(TableView).dispatch(event); //worked
        }
      });
    }        
  }
}

purple-businessperson-14467

08/03/2022, 2:29 AM

the listener

Copy code

haxe
notesTable.onComponentEvent = (e:ItemEvent)->{
  if (e.sourceEvent.target.id == "deleteBtn"){
    notesTable.dataSource.remove(e.data);
  }
}

bright-gpu-74537

08/03/2022, 6:31 AM

OK, that feels like a bug - i would have expected you to be able to do

this.dispatch

best-agent-85158

08/03/2022, 7:06 AM

i get this when clicking on dropdowns, this appears randomly on one complie and doesnt go away

bright-gpu-74537

08/03/2022, 7:15 AM

you'll have to see if you can minimally repro it in a blank project or something - not enough information to even guess

bright-gpu-74537

08/03/2022, 7:33 AM

OK, so the issue here is that you arent bubbling the event - but ive also noticed a subtle issue (nothing to do with the above) that im just going to sort out really quick

bright-gpu-74537

08/03/2022, 7:37 AM

right, so this worked fine for me:

bright-gpu-74537

08/03/2022, 7:37 AM

Copy code

haxe
@:xml('
<item-renderer width="100%" layoutName="horizontal" autoRegisterInteractiveEvents="false">
    <label id="myText" width="100%" verticalAlign="center" />
    <button id="myAction" text="Remove" />
</item-renderer>
')
class MyCustomRenderer extends ItemRenderer {
    @:bind(myAction, MouseEvent.CLICK)
    private function onMyAction(event:MouseEvent) {
        Dialogs.messageBox("You sure you want to delete?", "Confirm", MessageBoxType.TYPE_YESNO, function(button) {
            if (button == DialogButton.YES) {
                trace("DO DELETE", this.data);
                var e = new ItemEvent(ItemEvent.COMPONENT_EVENT);
                e.bubble = true;
                e.source = event.target;
                e.sourceEvent = event;
                e.itemIndex = itemIndex;
                e.data = _data;
                dispatch(e);
            }
        });
    }
}

bright-gpu-74537

08/03/2022, 7:38 AM

Copy code

xml
    <listview id="myList" width="200" height="200">
        <my-custom-renderer />
        <data>
            <item myText="Item 1" />
            <item myText="Item 2" />
            <item myText="Item 3" />
            <item myText="Item 4" />
            <item myText="Item 5" />
            <item myText="Item 6" />
            <item myText="Item 7" />
            <item myText="Item 8" />
            <item myText="Item 9" />
        </data>
    </listview>

bright-gpu-74537

08/03/2022, 7:38 AM

Copy code

haxe
        myList.onComponentEvent = function(e) {
            trace("onComponentEvent - " + e.source.id);
            myList.dataSource.removeAt(e.itemIndex);
        }

bright-gpu-74537

08/03/2022, 7:41 AM

few notes: * the main reason it wasnt working for you was "bubbles" on the event was false, with it set to true it will "bubble up" through the parents * i was getting a "double event" for the button click, because the underlying item renderer was also adding events, so ive added an "autoRegisterInteractiveEvents" property * you can (and probably should) use things like

MessageBoxType.TYPE_YESNO

and

DialogButton.YES

rather than their string values, as these may change