This is the first part of the Button Class Exercise (see part two)

If we wanted to create a class for a button, that we will call Button. This class will  have fields that will contain certain information about the object instantiated from the class such as the color of the button, it’s size and position. The class will also have a constructor that will use the class’s fields to create an initial state for the object. Finally the class will have two methods, one that renders (or displays) the button and another that tests whether the user’s mouse is over the button.

The completed buttonClassExample file

Class Name

In order to give the class a name and let Processing know that we are about to create a class we must use the class keyword. The name of a class generally starts with an upper-case character. For example. We’ll start by adding a new tab and calling it Button. In this tab add the following code:

class Button{
}

This is how we create a class and name it in Processing. As you can see the class’s name is Button which starts with an upper-case character, with regards to popular standardized coding practices.

Fields

When we instantiate an object from this class there are several properties we’d like this object to inherit from the class, which we will have access to modifying from the main program but not be able to modify the definitions of these properties as this will be encapsulated within the Button class. A list of the these properties follow:

1. the color of the rectangle that will visually represent the button object,
2. the object’s X coordinate
3. the object’s Y coordinate
4. the object’s width
5. the object’s height
6. and a name for the object.

As a result we will need at least all six of these properties represented in the class’s fields as variables.
Let’s add those fields to the class, inside the braces of the Button class add the following declarations:

color cB;
float xLocB;
float yLocB;
float xSizeB;
float ySizeB;
String nameB;

As you can see each of these variables will hold the information related to the previous list of six items.

Constructor

To give you an idea of how these fields (or variables) will be used we need to fast forward a few steps into the future and take a quick look at what happens when we instantiate the class. The process of creating an object is actually nothing new to you, as you have already instantiated objects from the PImage class. One of the main differences with our Button class is that we will be using it’s constructor to initialize objects instantiated from it, so when we get to doing this we will use an initialization statement that will in part look like this:

//this is simply for illustrative purposes
Button(cB, xLocB, yLocB, xSizeB, ySizeB, nameB);

From this partially complete code fragment, Button accepts the parameters the user has input, which will be assigned to the object’s fields (which were inherited from the class’s fields). These parameters will be used to initialize the object instantiated from the Button class. However at the moment, these variables don’t really do much, or store any information that will help in constructing the button object. This is why we need a constructor. The constructor is like a method that is automatically called every time a new object is instantiated from a class.
The main purpose of a constructor is to determine a default state that an object will exist in as soon as it is instantiated. The constructor is defined below the fields declaration of a class and our constructor will look like this:

Button(color tempcB, float tempxLocB, float tempyLocB, float tempxSizeB, float tempySizeB,String tempNameB){
cB = tempcB;
xLocB = tempxLocB;
yLocB = tempyLocB;
xSizeB = tempxSizeB;
ySizeB = tempySizeB;
nameB = tempNameB;
}

Note that the constructor has the same name as the class, this is a requirement for using a constructor. When we refer to Button() we are actually referring to the constructor of the class and not the class itself, which we simply refer to as Button.
The first line of the constructor tells Processing how the Button class will accept parameters when a new object is instantiated from it. You might have also noticed that we have declared six new variables that will temporarily store the values that the user inputs as parameters when an object is instantiated. These values will then be assigned to the original member variables which will store the values that the user has input as parameters when instantiating the button. Using this approach to designing a constructor ensures that multiple objects can be instantiated using different parameters with the same constructor.
At this stage in the design of the Button class we have fields declaring the member variables that will be used to store information about the button, and how we would like to use those fields to construct the button, but we have not told processing to actually draw the button to the Display Window so that the user can see a visual representation of the object and interact with it. This is amongst one of the many reasons why class’s have methods.

Methods

In order to render this visual representation we’re going to create a method called disp() which will create a rectangle from the parameters the programmer inputs into the Button() constructor when instantiating a new object. Just like user defined functions methods must use the void keyword if they do not return a datatype. Here’s what our disp() method (short for display method) will look like:

void disp(){
fill(cB);
rect(xLocB, yLocB,xSizeB, ySizeB);
fill(0);
text(nameB, (xSizeB/2)+xLocB-((xSizeB/2)/2), (ySizeB/2)+yLocB+((ySizeB/2)/2));
}

Creating a method follows the same routine as creating a user defined function. Our disp() method is really quite simple all it does is accept the cB variable as a fill() color, draw a rectangle with the positional data from xLocB and yLocB and finish the rectangle by determining it’s size from the  xSizeB and ySizeB variables. The method then goes on to set the fill() to black and render the name of the button (nameB) in the center of the button.
A class can be as simple or a complex as you want, and since we have all the main ingredients of our class we’re going to return to our main program and have a look at how to instantiate an object from this class.

This is the first part of the Button Class Exercise (see part two)