How to get started: Making a GUI app with Projucer

The Projucer
1

Hi. I’m new to this but the tutorials are not very helpful.

I launched the Projucer and created a project that I want to work on Mac and Windows. I chose GUI app.

So, I have something that I can compile and launch and it creates a window. How do I edit this window and add controls and such to it? There’s a graphical way to do that, right?

I found another topic on this and tried what it said - adding a new GUI component. That let me get to some editor for that particular component but it has nothing to do with the window and I never see it.

I’m sure this is easy once you know how but there should really be an intro tutorial on creating a simple GUI app.

2

The tutorials are pretty good, I think.

In-case these are not what you found, you can find them here - https://juce.com/learn/tutorials

Probably the easiest one to start with is
https://docs.juce.com/master/tutorial_new_projucer_project.html

Then https://docs.juce.com/master/tutorial_manage_projucer_project.html

Then https://docs.juce.com/master/tutorial_create_projucer_basic_plugin.html

Then https://docs.juce.com/master/tutorial_code_basic_plugin.html

Good luck!

3

Yes, I’ve looked at those. Two of them are about plugins, which are not what I am trying to accomplish. One is about managing projects, which I believe I already understand.

The last one doesn’t show me how to create a GUI app. None of those talk about the GUI editor.

There is something called “GUI Editor” in Projucer but I don’t see anything about that in the tutorials. For someone trying to make a GUI app, I would think that is the most important step - how to use the editor.

1 Like
4

The GUI editor is more or less deprecated and won’t be developed any further (afaik). You will have way more freedom and possibilities of placing your components when you do it by hand (by code, quite similar as the plug-in tutorials show you).

1 Like
5

Maybe you should better have a look at those three tutorials:

https://docs.juce.com/master/tutorial_main_component.html
https://docs.juce.com/master/tutorial_graphics_class.html
https://docs.juce.com/master/tutorial_component_parents_children.html

They explain the very basic building blocks of a JUCE-Based GUI. I assume this might help you a lot to get startet and find the keywords to look for.

And then you might want to continue with the interface design section to find more specific UI topics.

6

Ah, thanks for the explanation, danielrudrich. That’s too bad. For rapid app development, nothing beats a GUI. It’s also the best way to learn a series of widgets/controls. Having to manually implement them is a pain.

Of course, editing/writing code is going to be more powerful but that doesn’t make it better for every situation. If I just need a quick CLI tool, writing up some code is great. And a CLI/shell can be the best way to get certain tasks done. But GUIs are our primary way to interact with computers and it’s a shame not to have a facility aid the design aspect.

Oh well…

PluginPenguin
I’ll have a look at those, thanks. However, I’m afraid it will turn out to be rather tedious to build the app, that way.

7

Not really. To get a component added you need 3 lines of code:

  • a member variable
  • an addAndMakeVisible() call in the constructor
  • a setBounds() in the resized() method of the parent component.

The problem with the GUI editor was, that it is limited to fixed layout sizes, so it is much easier to either use Rectangle::removeFromTop() to calculate fractions of the available area or use Grid and FlexBox to use modern layout methods (I stick to the first one, so easy).

HTH

2 Likes
8

Below is code produced by the near deprecated GUI tool. Each class is well documented. Good luck!

Declarations in header -

std::unique_ptr<TextButton> textButton;
std::unique_ptr<ToggleButton> toggleButton;
std::unique_ptr<Slider> slider;
std::unique_ptr<Slider> slider2;
std::unique_ptr<Slider> slider3;
std::unique_ptr<Slider> slider4;
std::unique_ptr<ComboBox> comboBox;
std::unique_ptr<TextEditor> textEditor;
std::unique_ptr<GroupComponent> groupComponent;
std::unique_ptr<HyperlinkButton> hyperlinkButton;
std::unique_ptr<TabbedComponent> tabbedComponent;
std::unique_ptr<TreeView> treeView;

In component’s constructor -

textButton.reset (new TextButton ("new button"));
addAndMakeVisible (textButton.get());
textButton->addListener (this);

textButton->setBounds (32, 32, 150, 24);

toggleButton.reset (new ToggleButton ("new toggle button"));
addAndMakeVisible (toggleButton.get());
toggleButton->addListener (this);

toggleButton->setBounds (32, 80, 150, 24);

slider.reset (new Slider ("new slider"));
addAndMakeVisible (slider.get());
slider->setRange (0, 10, 0);
slider->setSliderStyle (Slider::LinearHorizontal);
slider->setTextBoxStyle (Slider::NoTextBox, false, 80, 20);
slider->addListener (this);

slider->setBounds (32, 128, 150, 24);

slider2.reset (new Slider ("new slider"));
addAndMakeVisible (slider2.get());
slider2->setRange (0, 10, 0);
slider2->setSliderStyle (Slider::RotaryVerticalDrag);
slider2->setTextBoxStyle (Slider::TextBoxLeft, false, 80, 20);
slider2->addListener (this);

slider2->setBounds (32, 176, 190, 80);

slider3.reset (new Slider ("new slider"));
addAndMakeVisible (slider3.get());
slider3->setRange (0, 10, 0);
slider3->setSliderStyle (Slider::IncDecButtons);
slider3->setTextBoxStyle (Slider::TextBoxLeft, false, 80, 20);
slider3->addListener (this);

slider3->setBounds (24, 280, 190, 80);

slider4.reset (new Slider ("new slider"));
addAndMakeVisible (slider4.get());
slider4->setRange (0, 10, 0);
slider4->setSliderStyle (Slider::LinearHorizontal);
slider4->setTextBoxStyle (Slider::TextBoxBelow, false, 80, 20);
slider4->addListener (this);

slider4->setBounds (32, 392, 190, 80);

comboBox.reset (new ComboBox ("new combo box"));
addAndMakeVisible (comboBox.get());
comboBox->setEditableText (false);
comboBox->setJustificationType (Justification::centredLeft);
comboBox->setTextWhenNothingSelected (TRANS("nothing...."));
comboBox->setTextWhenNoChoicesAvailable (TRANS("(no choices)"));
comboBox->addItem (TRANS("item 1"), 1);
comboBox->addItem (TRANS("item 2"), 2);
comboBox->addItem (TRANS("item 3"), 3);
comboBox->addListener (this);

comboBox->setBounds (352, 32, 150, 24);

textEditor.reset (new TextEditor ("new text editor"));
addAndMakeVisible (textEditor.get());
textEditor->setMultiLine (false);
textEditor->setReturnKeyStartsNewLine (false);
textEditor->setReadOnly (false);
textEditor->setScrollbarsShown (true);
textEditor->setCaretVisible (true);
textEditor->setPopupMenuEnabled (true);
textEditor->setColour (TextEditor::backgroundColourId, Colour (0xff178dc8));
textEditor->setText (String());

textEditor->setBounds (40, 512, 190, 80);

groupComponent.reset (new GroupComponent ("new group",
                                          TRANS("group")));
addAndMakeVisible (groupComponent.get());
groupComponent->setColour (GroupComponent::outlineColourId, Colour (0xff16adda));

groupComponent->setBounds (336, 104, 200, 150);

hyperlinkButton.reset (new HyperlinkButton (TRANS("new hyperlink"),
                                            URL ("http://www.juce.com")));
addAndMakeVisible (hyperlinkButton.get());
hyperlinkButton->setTooltip (TRANS("http://www.juce.com"));

hyperlinkButton->setBounds (352, 288, 150, 24);

tabbedComponent.reset (new TabbedComponent (TabbedButtonBar::TabsAtTop));
addAndMakeVisible (tabbedComponent.get());
tabbedComponent->setTabBarDepth (30);
tabbedComponent->addTab (TRANS("Tab 0"), Colours::lightgrey, 0, false);
tabbedComponent->addTab (TRANS("Tab 1"), Colours::lightgrey, 0, false);
tabbedComponent->addTab (TRANS("Tab 2"), Colours::lightgrey, 0, false);
tabbedComponent->setCurrentTabIndex (0);

tabbedComponent->setBounds (344, 360, 200, 150);

treeView.reset (new TreeView ("new treeview"));
addAndMakeVisible (treeView.get());
treeView->setTooltip (TRANS("putz"));
treeView->setColour (TreeView::backgroundColourId, Colour (0xffeebfe4));

treeView->setBounds (576, 56, 150, 150);
9

Hi,

I’m not sure that ditching the GUI editor is such a great idea when it comes to a framework aimed to create complex and heavily visual tools.
I believe a full featured GUI editor is an essential tool and using it is simply the most efficient way to develop GUIs.

I think it’s a matter of opinion.
Building everything from scratch by hand coding is a massive PITA for any non-trivial UI, IMHO.
Sure, Projucer’s GUI editor has a couple of shortcomings but it’s still an invaluable asset for quick development.

1 Like
10

They aren’t ditching it, the just not developing it further. You still can use it, but as I said earlier, you will have more flexibility using code instead. Especially if you want your GUI to be scalable, that’s something the GUI editor won’t implement (an all-round solution for that is just impossible to achieve). Also with coding it yourself, it’s fully in your control, and there won’t be extra work to do, if you want to change something (e.g making it scalable).

Well, there are quite a lot handy functions coming with JUCE, which will help. Eventually, you will have to use them anyway for a scalable UI. But you are right, it’s a matter of opinion and workflow. For starters it’s very practically. Personally, I’ve never used it, and for example I also dislike Matlab’s GUIDE, especially as you might break code when you want to change something in the code.

11

I can’t really live without GUI editors.
I’m using Qt Designer for putting together GUIs for my daily job and before that I used DialogBox, a GUI editor (and much more) for wxWidgets.
I’ve created dozens and dozens of dialogs, panels, views, forms, etc. using these editors and it would’ve been an enormous undertaking to build all of them by coding.
The most powerful feature of the above tools is that you can get an instant preview of your design, including layout handling even for the most intricate design, all without compiling a single line of code.
That is where Projucer falls short.

12

danielrudrich
They aren’t ditching it, the just not developing it further. You still can use it, but as I said earlier, you will have more flexibility using code instead.

That does sound like they are ditching it but this brings me back to the original problem: how do I use it? I couldn’t find any way to use the editor, starting with a default GUI app. I’m not interested in scalable, in this case. A forms-style layout is perfect.

daniel
Not really. To get a component added you need 3 lines of code:

The lines of code isn’t really the issue. When I want to prototype something, it’s very helpful to be able to experiment - move buttons around, resize controls, try different controls, etc. Typing in coordinates to move things is tedious and means I need a precise spec. Experimenting with layout and controls is hard to do via code. Managing that with a visual editor is far easier and faster.

Maelcum
I can’t really live without GUI editors. […]
I’ve created dozens and dozens of dialogs, panels, views, forms, etc. using these editors and it would’ve been an enormous undertaking to build all of them by coding.
The most powerful feature of the above tools is that you can get an instant preview of your design, including layout handling even for the most intricate design, all without compiling a single line of code.

Yes. There’s simply no substitute when you want to create a GUI and especially when you want to do fast prototyping. It’s crucial in my case, where I don’t know what is going to work well for the client’s users and the client doesn’t know either. We need to be able to iterate quickly and make changes. Having to spend my time mapping out coordinates or being forced into a grid-style construction isn’t helpful.

13

File Explorer → Add new GUI Component.
When clicking on those new files, the GUI editor should appear, and you can add components to it. You can either use that class as the GUI or just copy and paste the generated code to your MainComponent.

1 Like
14

What you’re not getting at is, that it make sense for someone who is experienced in C++. Not in other languages.

15

I completely get the value of designing in a live environment. That’s why I created PluginGuiMagic (dual license) in the meantime. It is a 3rd party module that adds the missing features:

  • more signal visualisations (level meter, analyser, frequency response plot for IIR, can be extended)
  • more LookAndFeels (to be continued)
  • FlexBox layout
  • CSS-like property inheritance
  • editable without coding while the GUI is running
  • extendable with your own components
  • usable in JUCE plugins as well as applications
  • for fast prototyping as well as GUI in production

The module you need to add to your project is here:

If you need help there is also a dedicated forum since I didn’t want to spam here too often :wink:
https://forum.foleysfinest.com/

Hope that makes your life easier

2 Likes