Tutorial: Add a button to an editor

This tutorial will teach you how to add a button to a processor's editor, the interface that appears in the EditorViewport. There are a number of steps involved, which must be followed carefully if you want the button to work. Ideally, buttons would be added automatically once you define the parameters for your processor, but coming up with an elegant implementation is a lot of work. Until then, you'll have to add buttons manually.
We recommend using UtilityButtons (defined in GenericEditor.h) to keep things consistent with the rest of GUI. But if you need something more specialized, you may want to create your own sub-class of Juce's Button.
This tutorial assumes you've already created a sub-class of GenericEditor to use with your processor, or you're making changes to an editor that already exists.

Part I: Add the button to the user interface

  • Add a ScopedPointer to a UtilityButton in the "private" members section of the header. Using a ScopedPointer will ensure the button is deleted automatically when the editor is destroyed.
    • ScopedPointer<UtilityButton> buttonName;
  • In the constructor, add code that creates the button and positions it within the editor:

    button creation
    	buttonName = new UtilityButton("BUTTON LABEL", Font("Small Text", 13, Font::plain));
    	buttonName->setRadius(3.0f); // sets the radius of the button's corners
    	buttonName->setBounds(10, 70, 90, 20); // sets the x position, y position, width, and height of the button 
    	buttonName->addListener(this); // allows the editor to respond to clicks
    	buttonName->setClickingTogglesState(true); // makes the button toggle its state when clicked
    	addAndMakeVisible(buttonName); // makes the button a child component of the editor and makes it visible

Part II: Make the button do something

  • By default, GenericEditors are also Button::Listeners. If you're working with something other than a GenericEditor, you'll need to make it a button listener (public Button::Listener).
  • If it's not already there add "void buttonEvent(Button* button);" to the header file
  • In the cpp file, create the corresponding method, if it doesn't already exist:
    • void MyEditor::buttonEvent(Button* button)
  • Within the buttonEvent method, check to see that your new button has been clicked (if (button == buttonName)). Then add your functionality. We recommend that you do this using the getProcessor()->setParameter(int, float) method, which is required if you're changing any parameters used inside your module's "process" method.

Part III: Allow the button to save and load its state

  • If they don't already exist, add "void loadEditorParameters(XmlElement*);" and "void saveEditorParameters(XmlElement*);" methods to your editor's header file.
  • Inside the saveEditorParameters method, you need to add a new XML element and set an attribute that corresponds to the button state:
  • parameter saving
    void MyEditor::saveEditorParameters(XmlElement* xmlParent)
    {
    	XmlElement* parameterChild = xmlParent->createNewChildElement("PARAMETERS");
    	parameterChild->setAttribute("ButtonState",buttonName->getToggleState());
    }
  • Inside the loadEditorParameters method, check the variable and use it to set the button state. If you set the "sendNotification" variable to "true," the software will behave as though the button were clicked by the user. So any actions that are associated with that button will be carried out.

    parameter loading
    void MyEditor::loadEditorParameters(XmlElement* xmlParent) 
    {
    	forEachXmlChildElement(*xmlParent, xmlNode)
    	{
    		if (xmlNode->hasTagName("PARAMETERS"))
    		{
           		buttonName->setToggleState(xmlNode->getBoolAttribute("ButtonState"), true);
    		}
    	}
    }
    • Make sure your tag name and attribute name are exactly the same as what you used in the "saveEditorParameters" method!