Developer Drain Brain

October 23, 2015

OOP 101 – Why separate Classes and Instances?

Filed under: Development — rcomian @ 7:15 pm

In the previous post we saw that we can define a class and then create an instance of that class to use it.

A serious question is why do we have to do this? Why instantiate a class?

The answer is that we can use multiple instances of a class at the same time. So we can write one class that represents one piece of functionality and re-use it multiple times.

Lets think of a concrete example: A button.

On any application on many pages you will often see multiple buttons. They all work roughly the same way, they draw a piece of text and a box around them, when you press on them they animate to look like they’ve been pressed and then something happens.

Software is all about working out what code can be re-used, and a button sounds like an ideal thing to reuse. We won’t go into a full button definition, but we could define a simple button to demonstrate our concepts.

Let’s first work out what we want our button to do for us, I’m going to make up some requirements:

  1. We need to be able to say what text should be on the button
  2. We need to be able to tell the button where on the screen it should be drawn using X & Y coordinates
  3. We need to tell the button to draw itself normally
  4. We need to tell the button when it has been clicked so that it can draw itself in the “pressed” state

class MyButton
{
  string ButtonText;

  int PositionX;
  int PositionY;

  void Draw() {
  }

  void Click() {
  }
}

We should be able to see how this class fits our requirements. First off, we have some data associated with the class. ButtonText is a member variable and will hold the text that gets displayed on the button. This lets us choose what text appears on the button, which is requirement 1.

Next we have 2 member variables: PositionX and PositionY. These will hold where on the screen we need to draw the button, which meets requirement 2.

Then we have the Draw method. This is empty in our example, but in real life it would use the ButtonText and the PositionX and PositionY data to draw the button with the correct label at the correct location on the screen. This would meet requirement 3.

Then finally we have the Click method. Again this is empty in our example, but it would draw the animation for when the button was clicked, making it look like it was pressed down and then pop out again. Again it would use the ButtonText and PositionX and PositionY data to do this, and meet requirement 4.

So as before, with just the code above, we haven’t actually done anything – we’ve just decalared a class. We don’t have any buttons, we need to make some, say what their text is and where they are then tell the code to draw them. So if we had a program that needed an “OK” and a “Cancel” button on there, we could use them like this:


MyButton okButton = new MyButton();
okButton.ButtonText = "OK";
okButton.PositionX = 500;
okButton.PositionY = 500;
okButton.Draw();

MyButton cancelButton = new MyButton();
cancelButton.ButtonText = "Cancel";
cancelButton.PositionX = 600;
cancelButton.PositionY = 500;
cancelButton.Draw()

So what we do is first create an instance of MyButton and store it in the okButton variable. Internally a piece of memory is reserved that is large enough to store the ButtonText and PositionX and PositionY member variables for this button and the location of this memory is given the name okButton in our code.

Very simply, we can say that things look like this:

okbutton

Next we use the okButton variable and say “Inside this variable’s memory location that was reserved, set the ButtonText data to the string "OK"“.
Then we do the same for PositionX and PositionY, storing where we want this button to be drawn.

Updating the previous diagram with more detail, we get something like this:
okbutton2

Finally we say, “call the Draw method of the MyButton class, but whenever that method uses ButtonText or PositionX or PositionY, use the data in the memory reserved for the variable okButton“.
This is all said by the very much shorter syntax: okButton.Draw();

So at this point, we would have a button drawn on the screen saying “OK”. And we’ve got our variable okButton so that we can talk to this button later.

Next in the code we instantiate a second button. When we do this, we reserve a new, completely different area of memory, which again is big enough to store the data for the MyButton class. This memory is in a different location to the memory for the previous instance and given the name cancelButton in our code.
Once we’ve allocated, we then set the contents of that memory location appropriately, we set the string for the ButtonText and the PositionX and PositionY member variables in that memory location.

At this point, our program and its memory would look something like this:
okbutton3

We then call Draw again, which runs the Draw method in the MyButton class again. But this time, it uses the data stored in the cancelButton memory location to do its work, not the data for okButton. This lets us have 2 buttons on the screen which are completely independent.

So what about that Click method? We’d call this when we determined that a user had pressed the button somehow (I’m being very woolly on the details, every UI framework already has a set of classes for doing all this, and they’re all different). Basically, we’d keep hold of our button variables somewhere, and later on in the code, we’d call the Click method at the appropriate time, just like this:


... // Somehow determine that the user had clicked OK
okButton.Click();
... // Do whatever we need to do on OK

The would run the code we wrote in the Click method on the MyButton class. But it would do so using the data for the okButton. In this way, the okButton – and only the okButton – would show the animation of being clicked.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: