Something to hide? You need HiddenSidesPane

One of my Gantt chart users wanted to use as much real estate on the screen as possible and asked if the scrollbars could be removed. But how do you navigate without scrollbars? Ok, there are all kinds of keyboard shortcuts and of course the usual mouse drag already supported by FlexGanttFX, but a visual control like a scrollbar is something most users would still expect to see these days (at least on desktops).

So here is the solution: I used to have a manager who when asked “do you want me to do this or that?” would always reply with “both!”. So I followed in his footsteps and implemented scrollbars that only appear when you need them and in order to support this I had to write another control for the ControlsFX project. The control is called HiddenSidesPane and supports four (initially hidden) side nodes. These nodes become visible when the user moves the mouse cursor close to the edges of the primary content node. They will slide-in with a little animation and slide-out when the mouse cursor leaves them. A side node can also be pinned, so that it stays visible.

The video below shows the control in action. I have commited it to the ControlsFX repository today and hope that it will be included in the 8.0.5 release.

The second video shows how the pane is used within FlexGanttFX.


  1. The concept is interesting, but what I don’t like is that there are no visual cues that such a side pane exists. If you gave me the user interface in the first video and removed the text instructions about how to activate it, I would have had no idea that the panels existed.

    If you told me to look for a certain thing, I would never guess that they would be inside of an area that only appeared when you moved your mouse to the border. Or if I did find them by moving the mouse, I’d have a “wait, what did I just do? And how did I do it?” moment because I have no reason to suspect that moving my mouse across the edge of the panel will do anything.

  2. The control allows you to have a node for each side that can be made visible. How this is done is up to you. There is the built-in option where the mouse has to be moved close to the edge. Another option would be the click on some other control, e.g. a toolbar button.

    A nice addition to this control would be API that allows a side to stay partially visible. This would be useful for letting something clickable “stick out” of the side, some kind of grab handle.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s