Lab6e
Using Buttons to call up different methods

The first problem is that you cannot use JButton in an applet. Graphics comes from the awt class, an early version of Java. JButtons, JTextfields, etc come from the swing class which appeared in a later version of Java. There is a JApplet that can use these but for the time being, we will use the early version - Button.

The differences are minor

  • you can not use setIcon( ) - not a problem
  • you can not use setToolTipText( ) - not a problem
  • setText( ) is now setLabel( )
  • we can now remove actionListeners for Buttons and re-add them later - a plus

Create applet Lab6e1
1. set window size to 200 by 230, remove the green part and the drawString
2. Add this to the init method:      setBackground(Color.black);
3. Add the delay method

public void delay(int p) {
try
{Thread.sleep(p);}
catch (InterruptedException e){}
}

4. Compile now to save, fix any errors.
5. We need a method to call up with the Button.

You have a bunch of little program that are of size 200 by 200 that use the delay method. Lab6a4, Lab6a5, (best one) Lab6b1, Lab6b2, etc... Lab6c3.

Open another version of JCreator and find one that works. Try Lab6b1.

6. Add this method to Lab6e1. Do not put it inside init or paint methods

public void myPic1(Graphics g, int x, int y)
{
//
copy the for loops here

}

7. Add this line to the paint method        myPic1(g,0,0);//the zeros are dummy numbers for later use
8. Try the program now. Call me if it does not compile - you will see a small black window with some action.

Now, we are ready to continue.

Adding a Button

The JButton required a container. The Button does not, so some of this will look different then what we did in the GUI's

1. Add this before the init method:     Button b1, b2, b3;
2. Inside the init method, add this button code

setVisible(true); //Make Window Visible
b1 = new Button();
b1.setLabel("play" );
b1.setBackground(Color.green);
b1.setFont(new Font("Ariel", Font.BOLD,15));
//b1.addActionListener(this);
// keep blocked until later

3. We want the Button to appear below the graphics. The original size was 200 by 200. This applet has space under the applet for the Button. If you say nothing about a layout, you get the Button at the top.
Add this line after the above code and try it.         add(b1);
I don't like it - remove that line!

4. Add this after the Button stuff - try it. the Button should appear on the bottom of the window.

setLayout(new BorderLayout( ));
add(b1, BorderLayout.SOUTH);

Program works but button shows up kind of fun.

Make the Button work

1. Add this to the import section at the top      import java.awt.event.*;
2. Add this after the word Applet on the class line    implements ActionListener
3. unblock the addActionListener line
4. Add this method. Compile and run the program. The Button does nothing yet because there is no logic in the program yet.

public void actionPerformed(ActionEvent e)
{
if (e.getSource() == b1)
  {
      
// button logic goes here
   }
}

Analysis of the problem

1. The picture draws before we click the button. We need a conditional to make it wait for a button click

Add this declaration to the area where we declared the Buttons       int pick = 0; // 0 means off
Inside the paint method remove the method call line and replace it with this

if(pick == 1)
{
myPic1(g,0,0);
pick = 0;
//stop picture (don't really need it on this example)
}

2. Compile and run. Now, nothing draws because when we click the play Button, pick needs to change value.
We can change this inside the actionPerformed method, inside the conditional for Button b1

Add this

pick = 1;  // change the value of pick
repaint(); // new word - recalls the paint method


3. Run your program to see if it works - call if you need help.

more methods, moreButtons

1. Add another method. Call it myPic2. Add the loop code from another of the Lab6b's or Lab6c's.
2. When you add another method, you need another Button.

3. Create the second Button. Easy is to copy the b1 stuff, paste and change it to b2 stuff.

We know that you cannot place 2 Buttons in the SOUTH ( or any location ) so now you need a Panel
4. Add this declaration- Panel p1;
5. Create the Panel with this:    p1 = new Panel(new GridLayout(1,2)); //side by side
6. Add the Buttons to the Panel like this    p1.add(b1); p1.add(b2);
7. Add p1 in the south instead of b1

Compile, run, you should see 2 Buttons - only the first one works. - call me if you do not.

the tricky part.

1. Add another conditional to the actionPerformed method for b2. Let pick become 2 in the conditional
2. Add another conditional to paint for the second Button. It should work like this:     click here

If you cannot this to work proper - call me

Lab6e Assignment

Our new methods always draw in the same location because we never used the integers x and y.
Add the +x to all the x positions and the +y to all the y-position co-ordinates ( just like we did in Lab6d)

After you have done this, make changes in the window size as indicated and in the pain method.

up to 100 points

1. Create applet Lab6e2
2. Change window size to 400 x 230
3. Copy all the code from Lab6e1 paste over the default code
4. Draw one pic at 0,0 and the other pic at 200, 0

     click here

Up to points

1. Create applet Lab6e3
2. Change window size to 200 x 430
3.  Copy all the code from Lab6e1 paste over the default code
4. Draw one pic at 0,0 and the other pic at 0, 200

     click here

When these work, continue on to the Unit Assignment

Unit 6 Programs

85 points - Create applet U6P1
1. Copy all the code from either Lab6e1, Lab6e2 or Lab6e3 - paste over the default code
2. Change the name, set the window size to 600 by 230
3. Create another method myPic3. Get the code from one of the other unit 6 labs.
4. Make it work like this

     click here

<---------------------------------------------------------------------------------->

100 points - Create applet U6P2
1. Copy all the code from either Lab6e1, Lab6e2 or Lab6e3 - paste over the default code
2. Change the name, set the window size to 400 by 460
3. Create another method myPic4. Get the code from one of the other unit 6 labs.
4. Make it work like this

     click here