Custom drop down menu on custom component?

Development
1

Hi all,

I am wondering if someone can explain me what would be the best, easiest (for someone who has’nt used juce in 10+ years and has forgotten most of it) way to implement a drop-down menu that appears when a custom component (or a specific area inside the custom component is clicked.
The user can then select one of the items on the dropdown component.
Note that all my classes are derived from the Component class. (at the moment at least)

I’ve attached a simple mockup diagram of what I mean:

components
components1000×568 6.73 KB

I have a myCustomComponent that, if clicked somewhere inside it (I intercept the mouseclick by overriding mouseDown(…) etc…, displays the myDropdownMenuComponent.
These are all custom components as they have special stuff that the standard juce components for these don’t have…
Offcourse the myDropdownMenuComponent is going to have to be drawn outside the bounds of the myCustomComponent, over the background myWindowComponent.

Offcourse the item selected from the myDropdownMenuComponent has to be communicated back to the myCustomComponent, so that class can take the required actions needed depending on the selection the user made.

It would be of real help if someone can explain to me the best way to implement this given the fact that I am using fully custom Component-derived classes, and would like to keep things as simple as possible…

Thank you for your time, it’s really appreciated…

Cheers,
Terrence

2

Hi,
opening a PopupMenu wrapping your custom component might work.

3

Hi,

Can you please explain in detail what you mean with “wrapping your custom component might work” ?
I don’t understand…

Cheers and thanks for your time!,
Terrence

4

Just to clarify your question, are you intending to do this all as components inside your editor? As opposed to using a PopupMenu or ComboBox? So it looks like a drop-down menu, but is really just hiding and showing components? Or do you intend to float a separate window?

5

My 2c: don’t ever use PopupMenu’s any more.

Use slide-out drawers instead.

This is a better UI paradigm and makes the modality of the interface more clear to the user, while also reducing the clutter of having one window on top of another. (And as well is better for your resource management, since PopupMenu’s are in fact child windows that have to be bound to the parent and have their z-order managed in order to function properly…)

Menu’s are over. We are moving beyond menu’s in the handheld/tablet era. Make your UI responsive, add slide-out drawers for the details, instead.

/2c

6

Hi Fandusss,

Yes, all as customized components…
Do you think I should use the popupmenu ?

I was wondering if that would work (popupmenu) as it would draw outside of the component (eg rendering a list of items beneath it).

What do you think on how to implement it?

Thanks,
Terrence

7

Hi,

The particulars of my application require the setup as shown in my mockup…
The slide-out drawers are not required for my target platforms, and would’nt work for what I need them…

Terrence

1 Like