Haxe #haxe-ui

`<box width="200" height="75" style="background-color:white;border:5px solid red;border-radius: 18px;" />` = fine

bright-gpu-74537

04/06/2023, 7:17 PM

<box width="200" height="75" style="background-color:white;border:5px solid red;border-radius: 18px;" />

= fine

According to that it needs a background color? Interesting

helpful-boots-41914

04/06/2023, 7:22 PM

According to that it needs a background color? Interesting

yeah, its a screw up, for sure

bright-gpu-74537

04/06/2023, 7:23 PM

yeah, its a screw up, for sure

Can a hbox have a class with a `hover` selector? IE: ```xml <style> .room-holder { background-color: red; } .room-holder:hover{ background-color: #ADD8E6; } </style> ``` This style is found inside of the root component. The `hbox` is added inside a component that's a part of the tree. `red` gets applied to it, but `:hover` doesn't seem to apply. I noticed it doesn't work in the builder, either. http://haxeui.org/builder/?c37e0879

helpful-boots-41914

04/06/2023, 7:35 PM

Can a hbox have a class with a

hover

selector? IE:

Copy code

xml
    <style>
        .room-holder { background-color: red; }
        .room-holder:hover{ background-color: #ADD8E6; }
    </style>

This style is found inside of the root component. The

hbox

is added inside a component that's a part of the tree.

red

gets applied to it, but

:hover

doesn't seem to apply. I noticed it doesn't work in the builder, either. http://haxeui.org/builder/?c37e0879

so... hboxes arent interactive by default.., they dont extend InteractiveComponent (which does some special stuff - like focus management)

bright-gpu-74537

04/06/2023, 7:37 PM

so... hboxes arent interactive by default.., they dont extend InteractiveComponent (which does some special stuff - like focus management)

you can however make them semi interactive

bright-gpu-74537

04/06/2023, 7:38 PM

you can however make them semi interactive

http://haxeui.org/builder/?5de751fe

bright-gpu-74537

04/06/2023, 7:41 PM

http://haxeui.org/builder/?5de751fe

long story short, `pointer-events:true;`

bright-gpu-74537

04/06/2023, 7:41 PM

long story short,

pointer-events:true;

keep in mind its _not_ an InteractiveComponent though

bright-gpu-74537

04/06/2023, 7:41 PM

keep in mind its not an InteractiveComponent though

That does the trick, I only wanted it to have the ability to hover so this is perfect. Thanks!

helpful-boots-41914

04/06/2023, 7:42 PM

That does the trick, I only wanted it to have the ability to hover so this is perfect. Thanks!

btw, if you are making a list, why not use a list view?

bright-gpu-74537

04/06/2023, 7:46 PM

btw, if you are making a list, why not use a list view?

http://haxeui.org/builder/?38ca3f69

bright-gpu-74537

04/06/2023, 7:51 PM

http://haxeui.org/builder/?38ca3f69

( <@845321582770913291> )

bright-gpu-74537

04/06/2023, 7:51 PM

( @helpful-boots-41914 )

> However, I'm not aware of the items being able to be separated by some margins instead of being connected together im not sure what this means > The styling criteria is not very strict as I'm just working on prototyping this view. thats kind irrelevant, you cant style it in any way you want, whatever you come up with, you can also apply to listview styles (or whatever), it all uses the same style language at a base level

bright-gpu-74537

04/06/2023, 7:57 PM

> im not sure what this means Elements in a list view seem to be selectable based on the height each item takes up, whereas I wanted their to be spacing between them that wasn't associated with any item in the list

helpful-boots-41914

04/06/2023, 7:58 PM

i mean, you can do it, i dont get why you would, but you can

bright-gpu-74537

04/06/2023, 7:59 PM

i mean, you can do it, i dont get why you would, but you can

http://haxeui.org/builder/?f1159054

bright-gpu-74537

04/06/2023, 7:59 PM

http://haxeui.org/builder/?f1159054

It's probably a bad design choice to be honest. Once there's a enough items in the list and you're scrolling it stops making sense.

helpful-boots-41914

04/06/2023, 7:59 PM

It's probably a bad design choice to be honest. Once there's a enough items in the list and you're scrolling it stops making sense.

its all just "boxes" at the end of the day...

bright-gpu-74537

04/06/2023, 8:01 PM

its all just "boxes" at the end of the day...

Ha yeah, I'll try out the list view instead. Removes some complexity on my end too

helpful-boots-41914

04/06/2023, 8:01 PM

Ha yeah, I'll try out the list view instead. Removes some complexity on my end too

add a bunch of nice features too, like only having to work with the dataSource rather than manage it all internally (which listview / tableview alreay do)

bright-gpu-74537

04/06/2023, 8:02 PM

add a bunch of nice features too, like only having to work with the dataSource rather than manage it all internally (which listview / tableview alreay do)

anyways, your call ofc, just feels like you are recreating listview (which is fine)

bright-gpu-74537

04/06/2023, 8:03 PM

anyways, your call ofc, just feels like you are recreating listview (which is fine)

Definitely was creating it to some extent. I just get going fast with what I know . . . bad habit sometimes!

helpful-boots-41914

04/06/2023, 8:04 PM

Definitely was creating it to some extent. I just get going fast with what I know . . . bad habit sometimes!

then dont let me piss on your fire... ListViewEx coming soon? 🙂

bright-gpu-74537

04/06/2023, 8:04 PM

then dont let me piss on your fire... ListViewEx coming soon? 🙂

How would I hook into the `join` button found in the item renderer for the list view? I've tried something like this but it seems like the wrong approach. ```haxe var roomsList:ListView = mainView.findComponent("roomsList"); roomsList.dataSource.onAdd = (val)-> { var container:Component = roomsList.getComponentAt(roomsList.dataSource.size-1); var btn:Button = container.findComponent("btnJoin"); btn.onClick = (e) -> { trace('clicked'); } }; ```

helpful-boots-41914

04/06/2023, 8:49 PM

How would I hook into the

join

button found in the item renderer for the list view? I've tried something like this but it seems like the wrong approach.

Copy code

haxe
var roomsList:ListView = mainView.findComponent("roomsList");
roomsList.dataSource.onAdd = (val)-> {
    var container:Component = roomsList.getComponentAt(roomsList.dataSource.size-1);
    var btn:Button = container.findComponent("btnJoin");
    btn.onClick = (e) -> { trace('clicked'); }
};

ok, so... the item renderer is repeated (cloned) for each item in the data set.. if you want events from the interactive components, you want to listen to "ItemEvent.COMPONENT_EVENT" (or something like that - ill check in a minute)... also, i dont understand what you are doing with the onAdd, thats a callback that is called when an item is added to the data source

bright-gpu-74537

04/06/2023, 8:51 PM

this feels like a documentation problem 😦

bright-gpu-74537

04/06/2023, 8:51 PM

this feels like a documentation problem 😦

its all quite simple (i think)

bright-gpu-74537

04/06/2023, 8:51 PM

its all quite simple (i think)

knocking up and example now that i think will explain it better than text

bright-gpu-74537

04/06/2023, 8:52 PM

knocking up and example now that i think will explain it better than text

Yeah so looking through the docs all I could find things related to were for the data source as far as events I could hook into went.

helpful-boots-41914

04/06/2023, 8:56 PM

Yeah so looking through the docs all I could find things related to were for the data source as far as events I could hook into went.