Layout question - full width grid

[3vilguy]

Hello again

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

It looks something like this:

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

1. it doesn’t look right
   
   

Changing grid width to fixed value makes it a bit better

but it’s not exactly what I wanted. I need them to stretch.

2. 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.

Thanks

[ianharrigan]

Hi there,

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

<vbox style="padding: 5px;">
    <!-- default content width, content will grow, and scroll -->
	<scrollview width="150" height="100">
        <button text="Button" width="300" />
        <button text="Button" width="300" />
        <button text="Button" width="300" />
        <button text="Button" width="300" />
        <button text="Button" width="300" />
    </scrollview>    

    <!-- 100% content width, cotent wont grow, or scroll -->
	<scrollview width="150" height="100" contentWidth="100%">
        <button text="Button" width="100%" />
        <button text="Button" width="100%" />
        <button text="Button" width="100%" />
        <button text="Button" width="100%" />
        <button text="Button" width="100%" />
    </scrollview>    
</vbox>

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!

Let me know if that helps…

Cheers,
Ian

[ianharrigan]

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:

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

Cheers,
Ian

[ianharrigan]

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):

<vbox style="padding: 5px;">
    <script>
        function add() {
            var item = new Button();
            item.text = "Button " + (theGrid.childComponents.length + 1);
            item.percentWidth = 100;
            theGrid.addComponent(item);
            childCount.text = "Child count: " + theGrid.childComponents.length;
        }
        function remove() {
            theGrid.removeComponent(theGrid.childComponents[theGrid.childComponents.length - 1]);
            childCount.text = "Child count: " + theGrid.childComponents.length;
        }
    </script>
    <hbox width="100%">
        <button text="Add Child" onclick="add()" />
        <button text="Remove Child" onclick="remove()" />
        <spacer width="100%" />
        <label text="Columns: " verticalAlign="center" />
        <number-stepper pos="4" onchange="theGrid.columns = this.pos" />
    </hbox>
    <grid width="400" height="400" id="theGrid" columns="4" style="padding: 5px;background-color:#FFCCCC;">
    </grid>
    <hbox width="100%">
        <label text="Width: " verticalAlign="center" />
        <slider min="200" max="600" pos="400" verticalAlign="center" onchange="theGrid.width = this.pos" />
        <spacer width="100%" />
        <label id="childCount" text="Child count: 0" verticalAlign="center" />
    </hbox>
</vbox>

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

Cheers,
Ian

[3vilguy]

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.

[3vilguy]

WUT?

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.

For now, let my actually support you on Patreon

Thanks!

[ianharrigan]

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

[ianharrigan]

FYI, that playground link works now:

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

[3vilguy]

Hi there!

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)

[ianharrigan]

You’ll need git versions of haxeui-core, haxeui-hxwidgets and hxWidgets. That should fix it

Cheers,
Ian

[3vilguy]

Dang it, forgot about hxWidgets. It’s building now, but I’m afrain changing columns value doesn’t work.

Cheers,
Sławek

[ianharrigan]

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?)

Ian

[3vilguy]

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.

<vbox style="padding: 5px;">
<script>
    function add() {
        var item = new Button();
        item.text = "Button " + (theGrid.childComponents.length + 1);
        item.percentWidth = 100;
        theGrid.addComponent(item);
        childCount.text = "Child count: " + theGrid.childComponents.length;
    }
    function remove() {
        theGrid.removeComponent(theGrid.childComponents[theGrid.childComponents.length - 1]);
        childCount.text = "Child count: " + theGrid.childComponents.length;
    }
    function updateColumns(pos) {
        theGrid.columns = pos;
        columnsCount.text = "Cols: " + pos;
    }
</script>
<hbox width="100%">
    <button text="Add Child" onclick="add()" />
    <button text="Remove Child" onclick="remove()" />
    <spacer width="100%" />
    <label text="Columns: " verticalAlign="center" />
    <number-stepper pos="4" onchange="updateColumns(this.pos)" />
</hbox>
<grid width="400" height="400" id="theGrid" columns="4" style="padding: 5px;background-color:#FFCCCC;">
</grid>
<hbox width="100%">
    <label text="Width: " verticalAlign="center" />
    <slider min="200" max="600" pos="400" verticalAlign="center" onchange="theGrid.width = this.pos" />
    <spacer width="100%" />
    <label id="childCount" text="Child count: 0" verticalAlign="center" />
</hbox>
<hbox width="100%">
    <label text="Columns: " verticalAlign="center" />
    <slider min="1" max="15" pos="4" verticalAlign="center" precision="0" onchange="updateColumns(this.pos)" />
    <spacer width="100%" />
    <label id="columnsCount" text="Cols: 4" verticalAlign="center" />
</hbox>

Cheers

[ianharrigan]

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

Needless to say this is also fixed.

Cheers,
Ian

[3vilguy]

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

Cheers,
Sławek

[Sartoric]

@ianharrigan
Can you take a look at this ?

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 ?

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

[ianharrigan]

Do you mean shrink and grow with the width of the grid? Like this: Builder - HaxeUI

(i just added width=100% to the textfields)

Ian

[Sartoric]

Yep …

I tried to apply width=100% everywhere except to the label or textfield
I missed you did this item.percentWidth = 100; on the button