Accordion Control?


#1

Any plans (or a custom control available) for a smooth accordion control, similar to what you see in MS’s Outlook or on the Apple website?

Thank you.

-weenie


#2

What is an accordion control ?


#3

Consider a rectangular panel (typically vertical) with X “sections”. Each section has a list of icons/functionality that appear when in focus and/or clicked on. Contrary, when the others “sections” are out of focus, they and their functionality shrink down, like an accordion.

Another example, for those who may not use outlook (heck, I don’t even), would be similar to what you see via HTML/JS/etc. on Apple’s support site:

http://www.apple.com/support/

Look at the the way they handle the “Latest In Support” sidebar on the right. In this example, the according expands/contracts upon hover-- but it’s the same idea.

If this is called something else, then I apologize-- I’ve always called it an accordion control.

I would just love to see this in JUCE, or at least get a head start on where to start to produce it myself.

Thanks for the response.

-weenie + 1


#4

Ah, one of those things - I’d never heard them called accordian controls, but it’s not a bad name. Or “inflatables”, perhaps?

It’s certainly something that’d be nice to have, I’ll do one if I get chance!


#5

Day off? Well, why not take a break from the day-to-day coding task and help out!

This will likely want a bit of tweaking but it’s a start.
Here’s a (win32) demo, and here’s the source.

Hopefully I’ll comment it when I can be bothered, but it’s quite likely I’ll forget or not have time.

It should be reasonably straightforward to understand what’s going on though. Just create a MiniWindowList and add MiniWindow-wrapped components to it. setSingleOpenWindowMode lets you specify whether or not only one window can be open at a time.

It may be buggy, it may be rubbish, but it’s a starting point.
Things to consider implementing:

  • Rearranging of window order
  • Dock mode - tear windows off to become floating windows; this would require a MiniWindowContainer to be implemented with a resizable border to hold it, allowing only one window.

etc…

NOTES:
The MiniWindowArrangement component is separate from the Container component to make it easier to have a viewport as an option; e.g. in the ‘floating window’ scenario it won’t want a viewport, but in the list version it will. If you’re subclassing MiniWindowContainer make sure you call setArrangementComponent in the constructor so it knows where to put the windows.

The windows have a minimum ‘size’ (and not just height) for the potential floating-window feature. Just give it a dummy width value for now.

A bunch of stuff in the window content component sizing stuff is probably quite easy to break, so don’t be alarmed if you screw it up slightly by tinkering - it’s most likely because I did something in a weird way.

If i find time i’ll see about improving it, but it’d be ace if someone else took the ball!


#6

oh, and here’s a quick screenshot…

[edit] stupid links!


#7

I tried it out, that’s pretty slick.

I wrote one a few years ago using mfc, what a pain in the ass, and I didn’t have the nice smooth animation. I hope I never have to go back to mfc.


#8

Nice job haydxn. Could it be altered to allow multiple things to be open at once?


#9

yeah, there’s a function i pointed out in my post (setSingleOpenWindowMode) - call it with false and the windows don’t close automatically.

i was going to put a button on the demo to demonstrate it but i couldn’t be bothered!


#10

Nice, and thanks! This will be a great start!


#11