Chapter: Your first Java program

For your first program I want you to draw a bunch of stuff in an applet. Rather like this:

            Your browser is ignoring the <APPLET> tag!      

I am going to lead you very very slowly through the steps you need to take to recreate my applet. Exercise 1 will then ask you to create your own. You will be far more artistic of course!

After doing Exercise 0 you probably saw an Eclipse window that looks something like:

One of those icons will, when you click on it, open up your workbench. See if you can figure out which. Once you've clicked, your workbench will look something like:

Now you need to create a new project. From the File menu you can select New Java project and set some options:

When you're done, you should see your new project listed in the Package Expl. Now it's time to create a new Java class. Again from the File menu select New class giving you a dialog like this:

We are going to extend a class called JApplet that is to be found in the package javax.swing. Eclipse knows a lot about the available Java packages and will help you. You can always help yourself and look at the Java API documentation to find out more about the JApplet class. Anyhow, work with the dialog you brought up to tell Eclipse that you want to extend JApplet. Just type JApplet in the Superclass field

and click the Browse button alongside. Eclipse will help you by providing the full name javax.swing.JApplet like this:

You also need to set a name for the Java Class

As you can see I named mine Ex1. At the top of the window you will see a warning that "The use of the default package is discouraged". OK, we'll live with that for now!

When you click "Finish" you will return to your workbench which will now look something like:

except that you won't have Ex2.java and SimpleGraphics.java in your default package and there may be other minor differences.

The main thing to notice is that Eclipse has written a program shell for you. You can even run the program! It won't be very impressive, but if you select "Run" you'll see a window open up:

Java has created an applet for you named Ex1 and opened an applet viewer so that you can see it.

Of course, you'd like a much more impressive applet.

JApplets need to be told how to paint themselves. The default paint method in the class JApplet just paints a rectangular window with a grey background. You can override the paint method by writing your own. As you can see in the Java API documentation, the signature of the paint method is public void paint (Graphics g).

Let's write a few lines of code in the edit window.

You may see a red box with a cross in it. This indicates an error that Eclipse has detected. Click on each such error flag, and Eclipse will help you fix it. (The error flag in the picture above is because I need to import java.awt.Color, and by double-clicking Eclipse's first suggestion the error gets fixed.) After fixing all the errors, I end up with

I can run this applet, and the result is much more interesting.

            Your browser is ignoring the <APPLET> tag!      

The entire code for the paint method of my Ex1 is:

    public void paint (Graphics g) {
        // Set the background to all white
        Rectangle me = getBounds();
        g.setColor(Color.white);
        g.fillRect(me.x, me.y, me.width, me.height);

        // Blue square top left corner
        g.setColor(Color.blue);
        g.fillRect(10,10,90,90);

        // Hollow circle to its right   
        g.setColor(Color.red);
        g.drawOval(110, 10, 50, 50);

        // Filled circle to its right
        g.fillOval(170, 10, 70, 70);
        
        // Part of a circle circumference to its right 
        g.drawArc(250, 10, 70, 70, -90, 60);

        // Part of a filled circle to its right
        g.fillArc(350, 10, 90, 90, 30, 270);
        
        g.setColor(Color.green);
        // Rectangle with rounded corners
        g.drawRoundRect(10, 110, 70, 50, 10, 10);

        // change the 10,10 to 30,30
        g.drawRoundRect(90, 110, 70, 50, 30, 30);

        // filled rounded rectangle
        g.fillRoundRect(170, 110, 70, 50, 30, 30);

        // create a new color!
        g.setColor(new Color(200, 130, 70));

        // More complicated shape: a polygon
        Polygon thePoly = new Polygon();
        thePoly.addPoint(210, 130);
        thePoly.addPoint(270, 150);
        thePoly.addPoint(320, 130);
        thePoly.addPoint(420, 180);
        thePoly.addPoint(270, 170);
        thePoly.addPoint(210, 180);
        thePoly.addPoint(210, 130);
        g.fillPolygon(thePoly);
    }

One thing to note is how I ensure the background is pink. (The getBounds method lets me obtain all the information I need to fill the entire rectangular area.)

Another thing to note is how I get that brownish color by making a new Color that has a red component of 200, a green component of 130 and a blue component of 70. These numbers are out of 255. You can experiment with other values as you see fit. new Color(r,g,b) where each of r, g and b is an integer in the range 0 to 255 is a color made up of those intensities of red, green and blue light. (0,0,0) is black. (255,255,255) is bright white. (255,0,0) is all red. Play and have fun.

Exercise 1