Layout class for GUI prototyping

Useful Tools and Components
1

Just a (few) little classes to layout components. The highlights are:

  • Only one member variable, one call in resized and adding a component can be done with one call
  • No changes to JUCE classes necessary
  • Labeled components with one call
  • Layouts can arbitrarily be nested, no additional variables needed
  • Proportions for each component can be added to distribute space

You find it at github: https://github.com/audiokinematics/juceLayouts

And the API doc also on github: https://audiokinematics.github.io/juceLayouts/

The only files needed are Layout.cpp and Layout.h

It is used like:

#include "Layout.h"

class MainContentComponent   : public Component
{
public:
    //==============================================================================
    MainContentComponent() : myLayout (Layout::LeftToRight, this) 
    {
        addAndMakeVisible (gain);
        myLayout.addLabeledComponent (&gain, "Gain");
        addAndMakeVisible (phase);
        myLayout.addLabeledComponent (&phase, "Phase");
        addAndMakeVisible (pan);
        myLayout.adLabeledComponent (&pan, "Pan");
    }
    
    virtual ~MainContentComponent() {}

    void resized() override { myLayout.updateGeometry(); }

private:
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
    
    Layout myLayout;
    
    Slider gain;
    Slider phase;
    Slider pan;
};

Let me know, if it was of any help. Criticism, feedback and improvements welcome.

N.B. I am aware of StretchableLayoutManager, I just wanted to have a simpler interface for standard cases...

 

 

2

Looks like a nice start to something interesting... 

Be good to have it as a JUCE module ;)

Thanks for sharing!

3

Be good to have it as a JUCE module ;)

That's right. Is there a way to create third party modules that can be selected in the introjucer?

Would be great to have some info how to do that...

4

You can select modules from anywhere on your computer from Introjucer.. 

Check out https://github.com/jcredland/jpm :)

It will at least help with the module creation part.
We're (slowly) working on git & database integration, towards some kind of 3rd party module repository.

 

5

...ok, it's available now as module named juce_ak_layout. I missed the right click menu in the modules section of Introjucer.

The jpm unfortunately did not help too much, but that's probably, because I had to learn some stuff about modules in general first.

I copied a manifest as template from an original juce module and found this page helpful: https://www.juce.com/learn/juce-module-format

Still there was some twiddling necessary, especially for directory names. It only works now when "copy module to project" is selected, because the module is not in the folder of the other modules.

Strangely the cpp file doesn't appear in the browse, even though I use the wildcard in the folder.

Thanks again for the initial pointers.

Edit:

a) copy module is no longer necessary, seems I missed something, or got confused copying around. It's not necessary.

b) The cpp file is listed in the folder Juce Library Code, while the header is in the Juce Modules folder.

6

Just as a follow up, the layout class now has the ability to add minimum, maximum and fixed sizes to each item.

It serves now all purpose I had, when starting it, so if anybody misses something, let me know.

When you get in trouble about your layout hierarchy you can simply add a paintOverChildren to your component and call Layout::paintBounds(Graphics&), then the bounds are visible.

Would be nice, if someone adds it into the introjucer, it is only one call to be added for each component, but reading into the introjucer's sources will be too much for me for the moment.

7

Just added the doxygen pages to the github pages: https://audiokinematics.github.io/juceLayouts/index.html

8

The Layout can be defined in an xml document now. see the example at github: https://github.com/audiokinematics/juceLayouts/tree/master/example the .jui and IntroJucedComponent.cpp

9

Great work on this I look forward to trying it out on my upcoming project.

I've been building my current mobile app's UI with React Native and it has been quite refreshing to use XML style layouts again (most of my UI experience is in Web Dev)

I'm not generally a fan of XML but for layouts I think it works really well.

10

I just added two very useful features to the Layout module:

  1. Make the component resizable with a xml property in the root node, the layout instanciates the ResizableCornerComponent and sets the constraints automatically (if given in the xml)

  2. Add a ValueTree where current size and splitter positions are saved. If you add e.g. the AudioProcessorValueTreeState.state to the layout with Layout::setSettingsTree the gui state is automatically restored (call this when the AudioProcessorEditor is created)

Hope you like it…