Juced

Welcome to JUCE Interface Designer Page.

This rapid application development tool is designed to draw a graphical user interface using JUCE library within a few mouse clicks.

Features

• Easy to use (Click and draw style)
• Undo/redo support
• Extensive editable component properties
• Export/Import project design
• C++ automatic code generation on save
• Custom LookAndFeel (As a component property)
• Multi-platform support! (Tested on Ubuntu 13.04 and Windows 7)

Use save function often since crashes may occur.

How to add a new component to the editor.

To add a new component you need to create a juced_COMPONENT.h/cpp into Modules folder using Introjucer (open juced.jucer) and copy there the content of juced_Label.h/cpp to get started. Edit code to fit your new component needs.

It must inherit from the component you want to add into the editor and the DynamicObject component to be able to use it within the editor.

While editing your new .cpp file, your IDE will probably tell you that Modules::YourComponent does not exists, let's create it.

Open Designer/globals.h and add your component name into Modules namespace.

Now open Designer/PlaceableComponent.h and Designer/BigTree.h and include your .h file there just like we did with Label.

#include "../Modules/juced_Label.h"

Open Designer/PlaceableComponent.cpp and allow it to instance objects of your class.

DynamicObject* PlaceableComponent::createObjectFromToolName (String *selectedToolName)
{
    if (selectedToolName->equalsIgnoreCase("juced_Label")) {
        juced_Label *object = new juced_Label();
        return (DynamicObject *)object;
    } else if ...
        
    ... return nullptr;
}

It's easy, just copy this lines at the end of the if block and replace COMPONENT for your component's name.

... else if (selectedToolName->equalsIgnoreCase("juced_COMPONENT")) {
        juced_COMPONENT *object = new juced_COMPONENT();
        return (DynamicObject *)object;
    }

Well, you have added a component to the editor, but it does not even appear into the toolbox. If you are not using the editor as an standalone component you have to edit the MainComponent.cpp file as follows, otherwise, you should already know how to do it as you did it when you added the toolbox into your editor.

Just add a line like we did with Label somewhere into the MainComponent constructor.

juced->addToolboxItem(toolbox, "juced_Label", "Text label", BinaryData::label_png, BinaryData::label_pngSize);

The BinaryData tool image should be added opening the juced.jucer with Introjucer and add an image into the BinaryData projects folder as with any other JUCE project.

Thats all about adding a component although it won't look very well if you can't even use it. You need to add properties and its behaviour when edited.

How to add a property to an existing component.

We'll be adding the property "name" into your component in this how-to. First of all, let's have a look at attributes.xml

<Attribute name="name" group="General" visible="1" type="text" display="Name" valueType="text" syntax='setName("%name%")'/>
... a lot of them.

So, you can see here that the property name (which your component will probably have) is already defined in the xml file. If you need some property that is not there, just add it. By the way, if you want to specify a non-existent group you will have to deal with it at Designer/PropertyGroup.cpp which is not covered in this how-to.

You have to add the corresponding addProperty() line into the juced_COMPONENT.cpp to tell the editor that this component has "name" property.

setName("label");  //This sets the component's name
setProperty(Attributes::name, getName());  //This tells the editor that this component has a property named "name".

Now look for the following line into Designer/BigTree.cpp

//[CUSTOM MODULES HERE]

And add below, the code to handle the property changes of your component

else if (this->getProperty(Attributes::objectType) == Modules::COMPONENT) {
  juced_COMPONENT *cObject = (juced_COMPONENT *)this->getProperty(Attributes::object).getDynamicObject();
  if (property == Attributes::name) {
    cObject->setName(getProperty(property).toString());
  } else {
    //This is set for the common component properties, just like name and its bounds.
    //You can remove the handling of name property we just added just because
    //it will be handled anyway some lines below.
    propertyChanged = false;
  }
}

Also, you have to make sure your property is listed in Designer/Globals.h within the namespace "Attributes". That's all!