CIS 121 Thursday March 2, 2000


Recall the applet we looked at in class yesterday.



We also looked at the source code of the applet.

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

// The purpose of this applet is to draw the graph of the function
// f(x)=ax^2+bx+c.

// This applet will divide a 500x500 panel into two seperate panels. One
// panel will be a control panel where the user inputs the coefficients
// and clicks a button to have the graph drawn. The other panel will be
// a drawing area.

public class QuadraticGrapher extends Applet implements ActionListener {

// Since I want to be able to use the components in the method actionPerformed,
// I make the three components instance variables.

   TextField acoefficient;
   TextField bcoefficient;
   TextField ccoefficient;
   Button graph;

// I need to control the drawing region from the paint method so I also
// make it an instance variable.

   Panel graphRegion = new Panel(null);

   public QuadraticGrapher() {
// I want to be able to lay the two panels where I want them so I set the
// layout manager of this container to null.

      setLayout(null);

// For the control panel I use the flow layout.

      Panel controlPanel = new Panel(new FlowLayout());

// Since I am not using a layout manager in this container I must specify
// the location and size of the panels I place into it.

      graphRegion.setSize(500,300);
      graphRegion.setLocation(0,0);

// I now create three labels.

      Label a = new Label("a ");
      Label b = new Label("b ");
      Label c = new Label("c ");

// I now create the three text fields into which the user will place
// the coefficients.

      acoefficient = new TextField(5);
      bcoefficient = new TextField(5);
      ccoefficient = new TextField(5);

// I supply a default value into the text fields.

      acoefficient.setText("1");
      bcoefficient.setText("1");
      ccoefficient.setText("1");

// I now create a button the user will click to draw the graph.

      graph = new Button("Draw Graph");

// I must add an action listener to the button.

      graph.addActionListener(this);

// Since I have created all the components I want to place into
// the control panel I now add them one by one in the order they
// should appear in the panel.

      controlPanel.add(a);
      controlPanel.add(acoefficient);
      controlPanel.add(b);
      controlPanel.add(bcoefficient);
      controlPanel.add(c);
      controlPanel.add(ccoefficient);
      controlPanel.add(graph);

// Since I'm not using a layout manager in the container I must
// specify a location and size for the control panel.

      controlPanel.setSize(500,100);
      controlPanel.setLocation(0,300);

// I now add the two panels to the container.

      add(controlPanel);
      add(graphRegion);

   }

   public void actionPerformed(ActionEvent e) {
// When a button click is detected, an action event object is created and this method
// is called. In this method, we use the getSource method to see whether or not
// the component that caused the event to occur is the button graph. If it is, then
// we create a new Graphics object using the getGraphics method and call the paint
// method.

      if (e.getSource() == graph) {
         Graphics g = graphRegion.getGraphics();
         paint(g);
      }

   }

   public void paint(Graphics g) {
// In the paint method we first get the coefficients from the text fields.
// Since they are strings we must convert them to floats. We do this by
// using the valueOf method in the Float class to turn the strings into
// Float objects, and then use the floatValue method to get the float values
// and store them in the variables a, b, and c.
 
      int i;

      float a = Float.valueOf(acoefficient.getText()).floatValue();
      float b = Float.valueOf(bcoefficient.getText()).floatValue();
      float c = Float.valueOf(ccoefficient.getText()).floatValue();

// We now use the clearRect method from the Graphics class to clear the drawing
// area.

      g.clearRect(0,0,500,300);

// We now draw the axes in blue.

      g.setColor(Color.blue);

// In this for loop we draw the horizontal axis.

      for (i=0;i<499;i++) {
         g.fillRect(i,150,2,2);
      }

// In this for loop we draw the vertical axis.

      for (i=0;i<299;i++) {
         g.fillRect(250,i,2,2);
      }

// We now change the color to red to plot the points.
         
      g.setColor(Color.red);

// In order to plot the points on the graph, we begin at -500,
// divide by 100, so that the first x coordinate will be -5. We
// evaluate the function. In order for the point to be seen on the
// screen we multiply it by 100 cast it as an integer. We then plot
// the plot remembering that the reference point in a container is its
// upper left hand corner. So we have to translate the point so it is
// visible in our drawing area.

      for (i=-500;i<=500;i+=1) {
         float x=i/(100f);
         int y = (int)((a*x*x+b*x+c)*100);
         g.fillRect(i+250,150-y,2,2);

// When debugging an applet when using appletviewer it is helpful to use
// a print statement because it will display information at the prompt where we
// ran appletviewer.

         System.out.println(i + " " + y);
      }
   }

}
Now consider the following applet.

This applet will allow a user to input red, green, and blue components for a color, display that color and then output the RGB code of that color to a text field. Study the example above and try to write an applet to duplicate the action of this applet.