How to make children widgets interact with parent?

Hi, I have a Load Game widget, which is basically a scroll box populated with many Save Slot widgets, added as children by looping through the entries in an array, which are my existing save slots.

Currently it loads a game by simply clicking the Save Slot widget, but I wanted to add a functionality to delete a slot, so ideally clicking a slot would only “select” it and then clicking the “load” button below would load it, and then I’d be able to add a “delete” button next to it.

is this possible?

Yes easily possible. You already have a scroll box for the list of save slots. That is good.

Each save slot widget will be another container, such as HorizontalBox, ScaleBox, VerticalBox, etc. with the the text and buttons inside. UIs are usually just nests of logical containers.

To make it less cluttered you could collapse the buttons for each slot until the slot is clicked on.

Event Dispatchers would work best here:

  • let’s say this is the slot, calling a dispatcher when its border is clicked:

  • and this is the Load Game that adds those slots, we bind a delegate to the dispatcher’s call:

Above, clicking any the dynamically created widget would remove it.


How to make children widgets interact with parent?

What I posted is an answer to the topic.

ideally clicking a slot would only “select” it and then clicking the “load” button below would load it, and then I’d be able to add a “delete” button next to it.

Not sure what this has to do with the parent vs child interaction, though. Sounds like this could be handled by the slot internally. The scrollbox in the parent does not need to know what the children are up to. But…

If you want to handle the Select/Load/Delete in the scrollbox widget that houses the slots (sounds like a valid idea as it would then act as a manager and/or keep track of things) I’d do it with the dispatchers.

I think I didn’t phrase it properly, might have been misunderstood

so this is what I have:

when the game instance starts, it checks if any save game slot exists (they’re simply named as a number from 0 to 99), and if they do their ID numbers are stored in an array. then my load game screen loops through each entry in that array and adds a slot widget as a child for each one of them, pulling data from their specific save game slots.

so what I want to do is when I click one of the slots in green, it doesn’t really do anything, but simply selects it internally, saves a reference for the active slot, so just setting their assigned ID number as “active slot number” would be fine.

then I have the load and delete buttons below in red which are part of the main widget, and when I click load it should call a custom event in my game instance to load a game based on the active slot number I had selected, and when I press delete it won’t just remove from parent the child slot widget, but call another event to delete the selected save game slot based on the ID number.

so based on what you said, I’m thinking when a slot is clicked, it’ll dispatch an event, and when the slots are added to the main widget they’ll bind this dispatched event to a custom event like in your example, but it would instead be hooked to a simple integer var Set? Can I even send a variable over by event dispatcher? I’m not very familiar with even dispatchers tbh, even though I’ve read how they’re supposed to work.

But yeah to sum up I think this is just what I need, a way to send an integer variable from each slot widget to their parent load screen when the slot button is pressed, can it be done?

That’s precisely what I suggested does:

Store reference to the last clicked widget here (instead of removal - this was just an example). Delete / Load can now operate using that reference. There’s even no need to save IDs, you can use the widget directly.

If you must send just an ID, you can do it the same way; but if you have the widget, you have its ID, too…

how did you add this var to this custom event though?

It seems I’m not able to add any inputs to a custom event bound to the dispatch?

Store reference to the last clicked widget here (instead of removal - this was just an example). Delete / Load can now operate using that reference. There’s even no need to save IDs, you can use the widget directly.

my load and delete functions ask for an ID integer though, I suppose setting the whole widget as reference rather than just their id isn’t necessary?

They’re in the first pic I posted:

You can add an int ID here if that’s more convenient; that’s providing the widgets know their IDs, ofc.

Oh so you need to create the custom event first and then copy the signature from it in your event dispatcher. I was trying to do it the other way around, had an integer input, then created a custom event and was trying to drag and drop a connection line from a var into the custom event.

I think it works now yeah.

and yep the widgets know their IDs, they have that var stored in them. Otherwise I wouldn’t be able to use it even if I used a ref to the entire widget I suppose

So one last question came up as I’m going through this, wouldn’t it be easier to have this slot widget built in the main widget, rather than as a separate one? would I even be able to add multiple of them when looping the array? I tried and it doesn’t seem to work, but I’m not sure why wouldn’t it.

Nah… nobody ain’t got time for that…

So one last question came up as I’m going through this, wouldn’t it be easier to have this slot widget built in the main widget, rather than as a separate one?

It should be a separate widget.

would I even be able to add multiple of them when looping the array?

Yup:

The above would add 11 slots, each clickable and each sending its unique ID via the dispatcher.

right, that’s what I’m currently doing, I mean would I be able to add multiple if they weren’t a separate widget but just a button in the main widget. I’m guessing no

Nah… nobody ain’t got time for that…

oh so drag and select “assign”, not “bind”. I guess this makes sense.

And OT but may I ask you what software do you use for quick screen captures like that?

You can create native widgets like so:

image

But that’s just a button, not sure how that’d help here. As in, it does not have an ID and does not do anything special. But perhaps you have your own method for tracking IDs! But then you’d need to style them. Buttons are overrated. :wink: Can’t recall how many years it’s been since I used a button.

And OT but may I ask you what software do you use for quick screen captures like that?

Yeah as separate widgets I’m able to store their IDs in them, I guess I wouldn’t if they were just buttons

Alright that settles it then, thank you Everynone, helpful as always!

1 Like

Wrap a native button in a widget. Use them everywhere. Bam, a button with an entire graph and variables. And if you ever need to change how it looks, you need to only fiddle with 1 widget rather than track 15 buttons in 4 menus.

But that’s probably what you already have :smiley:

1 Like