New HaxeUI SideBar component

Showcase
,
1

So ive just committed an initial implementation for a new sidebar component. :partying_face:

(link for the gif doesnt seem to be showing up: http://haxeui.org/shared/sidebar5.gif | http://haxeui.org/shared/sidebar5.gif)

Its a pretty cool component that allows you to display components in a … … … side bar!

Usage is pretty simple (im going to use xml, but no reason you cant also use code ofc):

<sidebar width="300" height="100%" position="left | top | right | bottom" method="float | shift | squash">
    <vbox width="100%" height="100%">
        <hbox width="100%">
            <image id="closeSideBar" verticalAlign="center" />
            <spacer width="100%" />
            <label text="Left SideBar" style="font-size:24px;color:#888888;" />
        </hbox>    
        <rule width="100%" />
        
        <box width="100%" height="100%">
            <image resource="haxeui-core/styles/default/haxeui.png" horizontalAlign="center" verticalAlign="center" />
        </box>
    </vbox>    
</sidebar>

Then to use it you can just do:

var sidebar = ComponentMacros.buildComponent("assets/sidebar.xml")
sidebar.show();

And thats about it! Obviously you can use it as the basis for custom views to make things a little easier to work with, ie:

@:build(haxe.ui.macros.ComponentMacros.build("assets/sidebar.xml"))
class MySideBar extends SideBar {
    ...
}

Enjoy!

Cheers,
Ian

4 Likes
2

@ianharrigan
I’m trying to use the side bar
What is the structure of the sample’s xml (just the main part, not al the mumbo jumbo inside :grin: )?

I’ve added it to my “main view” but it acts weirdly
I have a box + scrollview inside a vbox and I’ve added the sidebar inside the vbox

sidebar

3

Hmmm, thats odd… is your project something that you can share? You shouldnt really be adding it to the vbox, ie, you should do something like this:

var sidebar = ComponentMacros.buildComponent("assets/sidebar.xml")
sidebar.show();

That said, the result you are getting is still a little strange. So if you could share your project that’d be great :slight_smile:

Cheers,
Ian

4

Ok, calling it this way it works
I supposed it was something that has to be added to the “main” xml and I tried to initialize it via findComponent

I can share the project but, unless you have some shelly bulb, it will be meaningless :grin:except for checking my messy xml :grin:

5

Well, if you dont mind sharing it then great, i wouldnt need to run it, just read it and see how you were using the side bar exactly… its an initial impl of the side bar, so maybe it can be improved

Cheers,
Ian

PS: if you want to email it privately: ianharrigan@hotmail.com :slight_smile:

6

yup
I’ve added you to the github repo

so you can check that parent/child classes structure too :slight_smile:

7

I get a 404 when trying to accept :thinking:

8

yep, my fault :grin: should be ok, now

9

@ianharrigan
If you have the chance, test it on android via openfl.
The bar is not fully hiding back.

10

Interesting feature !

I’m testing it also. It doesn’t work yet inside Components. For example :

<hbox width="100%" height="100%">
<vbox width="50%" height="100%" >
</vbox>
<vbox width="50%" height="100%">
	<button text="Sidebar" onClick = "sidebar.show();"/>
	<sidebar width="100%" height="700" position="bottom" method="squash" id="sidebar"/>
</vbox>
</hbox>

The side bar at the left of the screen when it should appear at the right.

11

Yeah, its not really supposed to be used that way, ie, the sidebar is ontop of all other ui elements. So like:

var sidebar = ComponentMacros.buildComponent("assets/sidebar.xml")
sidebar.show();

Im making some updates now (not related to using inside components though)

1 Like
12

When you get a moment can you pull git haxeui-core and haxeui-openfl? SideBar should be working alot better on mobile :slight_smile:

13

I’ll give it a try (yeahIknow30charminimum)

1 Like
14

Just tried
Yep, definitely better.

15

@ianharrigan
Should the bar slide back, or it just disappear (on mobile) ?

16

Should slide back i would have expected - might be an animation bug

17

Testing the component, seems to have issues with the Toolkit scale. I’m using it with openfl. The toolkit scale breaks the component underneath. For example, when setting Toolkit scale to 2, it appears it appears to be cramping the parent component to upper-left quarter of the screen, while the sidebar seems to work okay. Stumbled upon it when I tried a mobile build, and figured out it was likely the autoscale again that was messing it up. Manually set it and got similar results on the browser.

18

Hmm… I tested with a bare project, seems to be working fine. I’ll try and look into it more, see how I can replicate it.

Unrelated to the scaling issue: On the bare project, I did notice that having the sidebar on blocks the percentage resize of the components underneath. Only when toggling it off will the scale kick in. Not sure if that’s the intended behavior.

19

Interesting, its an initial impl, so its good to get this type of feedback :slight_smile:

Ill have a play soon and see if i can recreate.

Cheers,
Ian

1 Like
20

So I figured out what was causing it. I use the toolkit autoscale to make sure it doesn’t look too small on high resolution mobile devices. I only play around with Haxe and HaxeUI every now and then as a hobby, so I tested the sidebar on an existing old test project. If I remember correctly, Toolkit scale caused some cropping on mobile devices, so I had this on my code to combat that:

main.percentHeight = 100/Toolkit.scale;
main.percentWidth = 100/Toolkit.scale;

It appears this is no longer necessary when using the Toolkit scale, so I was doing an extra scale. I missed it when I started with a bare project because the current behavior is how I had imagined it to work in the first place, and had forgotten about this additional scaling.