Introduction to Buttons, Layout Managers, and Action Events

This document was written by CS 290W TA Joshua Kay and was last modified

First of all, let's create a button. Any button is an object, so we need to allocate memory for that button. The name of our first button shall be "one".

Button one = new Button("one");

The keyword here is Button, and yes, it has to be capitalized. Inside the parentheses is the label we put onto the button. if we just have (), with nothing inside - in this case, we have ("one") - then we create a plain, boring, java button.

Source Code

This button doesn't do anything, and it goes to the default flow layout of the Applet. In other words, we can't control yet where this button will be placed. So let's try something. Let's add a few more buttons. Remember the code from above? Now we are going to create three more button objects, for a total of four, and we will add them to the applet.

Button two= new Button("two");
Button three = new Button("three");
Button four = new Button("four");

Source Code

See? The applet just adds the buttons where they fit (in the order they were added). What happens if we shrink the width of the applet?

We want to add a different kind of object now, just to try something new. Let's add a Label object. Again, we need to allocate space for it.

Label label1 = new Label("This is a label!");

The keyword is Label. Inside the parentheses is the text we are placing into the label. Let's take a look!

So... now, we have a Label() object, with text. This is a label embedded inside. One quick point, unless you know a lot more that you will learn in this class, the text inside ANY button, label, textfield, text area, checkbox, etc... (DON'T worry, we'll get to all of them...) DOES NOT AFFECT THE BEHAVIOR OF THAT OBJECT!!!

What now? We have four Buttons, one label, but how do we place them where we want them? We have to set the Layout of the Applet. This is called setLayout(), and there are a few different ways to use it...

setLayout(new BorderLayout());

This allows the applet to know that we are going to ignore the default flow layout, and that we will set up something new. How so?

When we add our buttons, in our public void init() method, we need to tell them where to go. So, that's easy enough. It's just like telling someone where to put silverware when they set the table. All you have to know is the Java syntax.

add("North",one);
add("South", two);
add("West", three);
add("East", four);
add("Center",label1);

It's easy to think of BorderLayout() as the overhead view to a room. North is the North Wall, East is the East Wall, and so on. Center, then, is what you actually put on the floorspace of the room.

Let's try something new, again. What if you just want to set the buttons side by side, or you want three in the first row, with one underneath?

setLayout(new GridLayout(5,1));

The GridLayout Method takes two integers. The first is the number of rows, and the second is the number of columns. This creates a new default layout, and the applet then adds the objects, correspondingly.

But, you say, the buttons still don't do anything! Okay, let's change that pesky fact. This next item will lose some of you, so if you are one of the people that say "I am lost" - don't worry - you're not alone.

As we have discussed, Buttons, Labels, etc... are objects. What happens to an object (if something happens) is called an Event e. And the thing that happens to cause the event is called an Action. Got all of that?

We have to create another method, now. This is called

public boolean action(Event e, Object o)

public - because it is a public method, accessible by all of the applet. Boolean is a true/false variable, named for the famous mathematician George Boole, who lived a long time ago. Basically, Boolean holds a value of either true or false. This method takes two parameters - Event and Object. Whenever an action occurs (for example, someone clicks on the mouse), the class checks its action method. The Event is what happened - Click, mouseOver, mouseOut, etc... The Object is where that Event just happened. So, if we click on a button object, the applet knows to check this method to see what to do next. Let's look at the applet, and then take a look at the code.

Source Code

It's really important that you understand how this works. Let's think of an object. How about a soccerball? Let's say that a nine-year old girl kicks a soccerball.
Object - Soccerball
Action - Kick
Event - Kicking the ball

So what now? Well, the laws of physics check its methods, such as Gravity, Velocity, etc., to determine how far and fast and what direction the ball will travel.

Another example would be to think of an object in outer space. If you were to throw a baseball, it will continue to travel at its initial velocity forever - theoretically. This does not happen, however, because eventually, the gravity method of a planet, or star, or moon, etc., will act upon the baseball object.

This may still be a little confusing, but we'll talk about it in class.

Okay, let's add everything we've done so far.

Source Code

Not too bad. But, what if you want all four buttons together, but you want the label in a different place? And you still want to use Layout control? Well, we need to learn about the Panel() object.

Panel panel1=new Panel();

Now we have to set the Layout of the Panel() itself!

panel1.setLayout(new FlowLayout());

We could have used any kind of Layout method - I chose FlowLayout. Finally, we have to add the objects to the panel(). This is pretty easy - you'll notice a pattern forming here...

panel1.add(one);
panel1.add(two);
panel1.add(three);
panel1.add(four);

Now, finally (for real this time), we have to add the panel to the applet.

add(panel1);

Let's check it out, okay?

Source Code