I’m trying to build an app where there’s a grid with many text areas. I previously started building it in WPF, but I thought maybe I can try to do it in HaxeUI
So there is a grid, always same amount of items in the row, they should resize to always take full width as the window is being resized. I thought declaring something like this should be pretty straightforwayd, but I have some issues with resizing.
I was trying something like this:
<?xml version="1.0" encoding="utf-8" ?>
<vbox width="100%" height="100%" style="background-color: red;border:1px solid red;background-opacity: .5">
<scrollview width="100%" height="100%" style="background-color: green;border:1px solid green;background-opacity: .5">
<grid width="100%" columns="4" style="background-color: blue;border:1px solid blue;background-opacity: .5">
<textarea width="25%" height="150" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<textarea width="25%" height="150" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<textarea width="25%" height="150" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<textarea width="25%" height="150" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<!-- ADD MORE TEXT AREAS HERE... -->
</grid>
</scrollview>
</vbox>
but it’s not exactly what I wanted. I need them to stretch.
Do I really have to calculate width % for each element? Later on I was hoping to have number of columns editable, so would be cool to just have all the elements stretched automatically. I was trying to give each item width=100%, but it seems like literally each was full width of the screen :V
Would be very greatful for any tips/hints about how to approach such a layout.
So the issue is that scrollview, by default, has a content that has an auto width and height, this is so that content can grow as needed and make the scrolllview scroll. If you wanted the scrollview to be 100%, you could use a style, or you could use the contentWidth property, examples: http://haxeui.org/builder/?xnvpzg
As for the second question, yes, at the moment you’ll need to calc the % sizes unfortunately i do want to change this at some point, but it wasnt there from the very beginning and will need a fair amount of thought before making the change, so it wont be for a fair amount of time. Sorry!
Btw, it might not be what you are after, but you might want to look at continuous hboxes, these grow in height depending on the items… might not be useful to you at all, but just in case you didnt know about them:
So, i was thinking about the 100% thing, and i think ive come up with a fix for it… Its very preliminary at the moment, and may cause regressions (hope not!), you’ll need git versions of haxeui-core (let me know if you arent sure how to go about that):
There is a link here to the playground, however, it breaks on the playground for an unrelated thing, which i think is to do with the haxe version on there, im currently upgrading to see: http://haxeui.org/builder/?ycairo
Hi Ian, thanks for great response (as usuall) with explanation.
I just managed to check it now and seems like 100% width and contentWidth for scroll view is exactly what I’m after
Also thanks for the hint about continous hboxes. I think I’ve seen it in the component explorer before, but for this particular project I might have to resize the stuff inside.
That’s some above and beyond response right here. I pretty much accepted that doing calculations manually would be the way to go and I definitely didn’t expect that.
I will definitely play with that a bit (this evening/night tho). And I think for git version it is: haxelib git haxeui-core https://github.com/haxeui/haxeui-core.
Its been something that id wanted to get done for a while, an never had an “excuse” or a really decent test case to do it…
To be honest, if you had of calc’ed the %'s yourself you would have been back here writing another post as there were bugs in the underlying layout class - so for that reason alone this was worth doing
Hope it helps - lemme know if you get issues.
Ian
PS: yeah, your haxelib git command looks right, you may want to get the git version of whatever backend(s) you are using too, they will probably be fine… but just in case
Sorry, just got the time to test it.
I managed to get it up and running with html5 backend (yey ), but the wxWidgets backend is giving me an error
C:\HaxeToolkit\haxe\lib\haxeui-hxwidgets/git/haxe/ui/backend/ComponentImpl.hx:187: characters 23-34 : hx.widgets.Notebook has no field setPageText (Suggestion: getPageText)
Might just be that the number stepper is giving a change event on native? Not sure, will have to check it out tomorrow (im assuming you are using the example above?)
I just double checked if I didn’t missed git link to one of the libs or something but it seems ok.
Yes, I was using the example above. You might be right about the number stepper, I just added an extra slider and label to check columns variable and it is seems to be working. Stepper doesn’t update either.
So yeah, stepper native event wasnt linked up… in fact the wxWidgets event wxEVT_SPINCTRL wasnt even defined in hxWidgets!
Anyways, they are fixed now in git (you’ll need haxeui-hxwidgets and hxWidgets ). Also in the playgound link above, you may have noticed that if you added about 30 items then the layout seemed to grind to a halt… i assumed it was to do with my initial impl but in fact, it was a bug in the scripting where i was turning the whole component tree into a string
Hah Nice one, it seems like either this component or backend are not very popular. Hopefully that’s gonna save someone’s time in the future.
Thanks for the fix, I can confirm it’s working now
I’m facing issues with a grid sizing, so I found this playground and I’ve pasted the content of my grid to test it.
Is it normal that label and textfield don’t shrink ?