Lab 12 Creating your own applet + More Java graphics

Objectives:

• create your own CodeWarrior project,
• figure out classes and methods that you need for a program,
• read the contracts (API's) of methods that you are not familiar with and figure out how these methods work. This is one of the most important skills that you need as a programmer!

The assignment for this lab is to create a project that produces an applet that looks something like this:

How to create an applet in CodeWarrior

1. Start CodeWarrior by selecting it from the Apple menu.
2. Choose New... from the File menu. A window will pop up, as shown below. Select "Java Stationary" as the kind of your project, and type in a name with the extension .mcp. Then click OK.
   Note that the extension .mcp is required for a project name. Otherwise the file will not be recognized as a project by Fetch.

   

3. A new window will pop up giving you choice between 3 versions of Java. Click on JDK1.1 and select Java Applet. Then click OK.

   

4. As the result, a new folder will be created on your Desktop which has the same name as the project, only without the .mcp extension. We call this folder a project folder. The project is created with three standard files: TrivialApplet.html, TrivialAppletDebug.html, and TrivialApplet.java. Remove these files from your project by dragging them from the project window to the trash. Note that deleting these files from the project does not automatically delete them from the project folder. If you want to delete them from the folder, double-click on the folder to open it, and then drag the files into the trash.
5. In the CodeWarrior choose New Text File from the File menu. A new untitled file will open. You need to create two files: the HTML file that specifies which class to run and the JAVA file. Your HTML file can have any name and (for this project) it will look like this:

   
   <TITLE> Rainy Day Applet </TITLE>
   
   <applet codebase = "Java Classes" code = "RainyDay.class" width = 400, height = 400>
   </applet>
   

   Type this code into the new file and save it in the project folder. You can give it any name with the extension .html.
6. Create another new file called RainyDay.java and save it in the project folder. The name of this file must be the same as the name of the class that it defines (only with the .java extension), and in our case the class is RainyDay.class, as specified in the HTML file above.
7. Now it remains to add the two new files to the project. To do this, open the project folder and drag the file RainyDay.java into the project window in the folder Sources. A window will pop up asking you to confirm that you are adding the files to the project's targets.
8. The same way add the HTML file that you have created, also to Sources. In the end the project window should look like this:

   

   Now your project is created.

• Don't forget to import the two packages that you need for this program: java.awt.* and java.applet.Applet.
• The class that you are defining must be called RainyDay.class, since this is the class invoked in the HTML file. Since you are writing a program that runs as an applet, the class should extend the class Applet.
• Since we are going to display text and pictures on the applet, we need to override the method paint of the class Applet.
• Let's start with displaying some text. The method that allows you to display text on an applet is the method drawString of the Graphics package. Click here for the description of the method.
  Try to display some text on your applet using this method. It does not look very interesting, does it? This is because it is written with the default font. You need to set the font for the graphics object just as you set color for drawing, only instead of setColor() you use setFont (see the Graphics contract).

  Yes, but what do you set the font to? You need to create a new Font object. You can read about the Font constructor in the Font contract. The Font contract is given in your textbok, or read the font contract in Java online documentation. To give you a hint, the font used in the example has the name "Serif", its style is Font.BOLD, and the size is 20. Please feel free to experiment with different font names, styles, and sizes! You can also change the color of the text by setting the color of the Graphics object.

• After you get the text to appear in your applet, let's draw umbrellas. One way of doing it is to define a separate class, similarly to what you did in the previous lab, create three Umbrella objects, and position them in three different places on the applet. Alternatively you can write a method of the class RainyDay to draw an umbrella with the specified size, colors, and location, and invoke this method 3 times with the appropriate parameters. You can do it either way, or in any other way, as long as the resulting picture looks like the one above.
• You will use methods drawArc() and fillArc() of the class Graphics. You can read about these methods in the Graphics contract. You need to read the description carefully, but to figure out how the methods work you might need to experiment with different parameters. It's OK if your first picture does not look like the shape of an umbrella. Keep on trying! When you get the correct shape, try adding color: first fill the entire shape with one color, then fill one half with one color, and the other half with the other color. Then add the middle part of the umbrella, and so on. And the usual, but still important, advice:
  Compile and test your program after every change, even the smallest one!

  Only this way you know what works and what doesn't.

Happy programming!