The purpose of this lab is to introduce java applets and launch them via an
Internet webpage. ... Let's begin by examining the BullsEye.java program. Below
are.
COSC 117 Lab: Web Pages and Java Applets Introduction to the lab. The purpose of this lab is to introduce java applets and launch them via an Internet webpage.
Part 1: Your first applet Below is an example of a java applet that, when completed, will display a bull’s eye design on the screen. // This applet will produce a bull's eye in red and black // John Smith, Programmer import javax.swing.JApplet; // Allows me to write an applet import java.awt.*; // Allows me to use everything in the Color and // Graphics class in the awt library public class BullsEye extends JApplet { public void paint( Graphics g ) { super.paint( g ); // Here are the instructions that will draw a bull's eye // The object that has all of the drawing methods that I will // use is called g g.setColor (Color.black); g.fillOval(60, 40, 220, 220); g.setColor (Color.red); g.fillOval(80, 60, 180, 180); } }
For simplicity, we will use a simple grid diagram to design our applet designs. This consists of pixel locations for screen output that is 400 pixels wide and 300 pixels high. (0, 0)
X - Axis
(400, 0)
Y - Axis
(0, 300)
(400,300)
Although this may look a little different from what you may be used to, this is the grid layout we will be using for our applets.
COSC 117 Lab: Web Pages and Java Applets Now that you see how the output screen is designed, we need to become familiar with some built-in methods and libraries. Let’s begin by examining the BullsEye.java program. Below are two new import statements. In this applet, we are not using the keyboard for input/output so we do not need the Scanner class. The two new libraries are imported and described in the comments. import javax.swing.JApplet; import java.awt.*;
// Allows me to write an applet // Allows me to use everything in the Color and // Graphics class in the awt library
Now let’s examine the body of the java program: Note that we now have added “extends JApplet” to our first line. This allows us to use methods in the JApplet class as though they are part of the BullsEye class. Also notice that the main method is not used in applets. Instead, applets uses several other important methods, including init and paint. We will begin with just looking and working with the paint method. The init method is used to initialize any class instance variables. This is not needed in our example. The paint method is called automatically any time the applet window needs to draw or redraw itself. It is inside this method that you place code to display words and graphics that should appear in the applet window. The paint method’s only parameter is a Graphics object which we have named g. This object is automatically generated by the browser and sent to the paint method. public class BullsEye extends JApplet { public void paint( Graphics g ) { super.paint( g ); // Here are the instructions that will draw a bull's eye // The object that has all of the drawing methods that I will // use is called g g.setColor (Color.black); g.fillOval(60, 40, 220, 220); g.setColor (Color.red); g.fillOval(80, 60, 180, 180); } }
COSC 117 Lab: Web Pages and Java Applets As you can see from above, the Graphics object has several methods. This particular applet uses: setColor(Color c) Set the color. Some available colors, black, blue cyan, darkGray, gray, green, lightGray,magenta, orange, pink, red, white and yellow. (Capitalization of color matters!) fillOval(int x, int y, int width, int height) draws a solid oval inside an invisible, bounding rectangle with the specified width and height in pixels. The top left corner of the rectangle is (x,y)
The Graphic object also has several other useful methods that you will likely want to use. Some of them are listed below: drawLine(int xStart, int yStart, int xEnd, int yEnd) draws a line starting at (xStart, yStart) and ending at (xEnd, yEnd) drawRect(int x, int y, int width, int height) draws the outline of a rectangle with its top-left corner at (x,y) with the specified width and height in pixels fillRect(int x, int y, int width, int height) draws a solid rectangle with its top-left corner at (x,y) with the specified width and height in pixels clearRect(int x, int y, int width, int height) draws a solid rectangle in the current background color with its top-left corner at (x,y) with the specified width and height in pixels drawOval(int x, int y, int width, int height) draws an outline of an oval inside an invisible, bounding rectangle with the specified width and height in pixels. The top-left corner of the rectangle is (x,y) drawstring(String s, int, x, int y) displays the String s. If you were to draw an invisible, vounding rectangle around the first letter of the the String, (x,y) would be the lower-left corner of that rectangle.
COSC 117 Lab: Web Pages and Java Applets Using these methods in a program is relatively straight-forward. For example: 1. Start with the name used in the object name used for the Graphics library in the paint method (which is this example is g). 2. To set the color to draw with: g.setColor(Color.orange) will set the color to orange 3. To draw a rectangle with the top-left corner x,y position of 50, 50 and a width of 100 and a height of 200: g.drawRect(50, 50, 200, 200) And so on…. Using graph paper, create a graph for the output shown at the beginning of this lab. Modify the code to complete the entire bullsEye. Name the applet BullsEye.java and save to your workspace on your P:/ drive.
COSC 117 Lab: Web Pages and Java Applets Part 2: Creating a Web Page & Publishing Applet Links First, create a web page that can be used for all of your applets. For simplicity, we will use SU’s htdocs folder on your P: drive to store our main course web page and applet web pages and applets. Create a web page and call it my_applets.htm and save it in the htdocs folder of your P: drive. If you haven’t already created an htdocs folder on your P: drive you will have to do that first. The URL for the page will then be http://students.salisbury.edu/~ username/my_applets.htm.
Second, place items on this page (my_applets.htm) that will link to your applets. For example, if you want the user to click on the words Bull’s Eye Applet to see your bull’s eye applet, type Bull’s Eye someplace on your web page. You will link the applet web page to those words on your my_applets.htm page. If you already know the web page name you are going to create to launch the applet (let’s say it will be BullsEye.htm). The link would then be http://students.salisbury.edu/~username/BullsEye.htm.
COSC 117 Lab: Web Pages and Java Applets To do this, select the term “Bull’s Eye Applet”, select Insert, Hyperlink and then type in the URL above in the address box.
Third, make sure you save a copy of the .class file for your applet to the htdocs folder of your P: drive. In this case, you should copy and paste the BullsEye.class to htdocs. Remember, Java always make a .class version of your java program. We just haven’t had to keep track of it before now!
COSC 117 Lab: Web Pages and Java Applets Finally, create another separate web page that will launch your applet. This is the page you have already linked to your applet, but you haven’t actually created it yet! Use the code option on FrontPage! See the example below: Bull's Eye Applet Save this example as BullsEye.htm as this is the name you used on your my_applet web page. Here is a step-by-step explanation for how to do this in detail: Creating a Web Page Step 1: Create a folder named htdocs on your P: drive. This folder will contain ALL of the files you wish to display on the Internet. Step 2: Start Front Page Step 3: Select File, New. Step 4: Create your web page in design view. Step 5: Create a link to your first applet (the bull’s eye applet). a. Select the text or image that will be the link to the applet. b. Select Insert, Hyperlink or click on the Hyperlink icon. c. Type the URL of the applet in the address box. The format will always be: http://students.salisbury.edu/~username/name of web page containing the applet html code d. For example, if I want to call the web page with the bull’s eye applet bullseye.htm, then the link would be (for me…I’m using MY username) http://students.salisbury.edu/~mbflagg/bullseye.htm Step 6: Save the web page with the name my_applets.htm in your htdocs folder of your P: drive.
COSC 117 Lab: Web Pages and Java Applets Creating the Applet Web Page in Launch the Applet Step 1: This section of the lab will create a web page called bullseye.htm that will launch your bullseye.java applet that you wrote previously in a lecture assignment. Step 2: Open Front Page if it is not already open. Step 3: Select File, New. Step 4: This time select the code option at the bottom of the screen. This allows you to enter text in HTML format. Step 5: Here you will need to input the following HTML code: Bull's Eye Applet Step 6: In this example, the name of the java applet is BullsEye. Note that the code needs the .class version (the compiled version) of your java applet. Step 7: Copy the .class version of your applet (in this case, BullsEye.class) into the htdocs folder of your P: drive. If you do not copy the file, the applet will not be found and will not start when this web page is opened. Step 8: Save this web page and call it bullseye.htm (to match the name you used in the link on your web page called my_applets). Save this also in the htdocs folder in your P: drive. Quick Check of P:\htdocs Contents Step 1: Open the My Computer icon on your desktop and go to the htdocs folder on your P: drive. Step 2: Make sure you see the following files there: my_applets.htm bullseye.htm BullsEye.class
COSC 117 Lab: Web Pages and Java Applets Step 3: If the files are all there, test the web page on the Internet. Open Internet Explorer and type the address of your web page that has the links to your applets: http://students.salisbury.edu/~username/my_applets.htm
Part 3 - Creating and Linking another Java Applet Using the graph paper, draw an image of house with windows and a door. Give it a background scene of some sort (trees, sun…etc). Step 1: Create a new applet called House.java that displays a colorful image of a house. Step 2: Call this applet house.java and save it in the htdocs folder on your P: drive. Step 3: Add a link to the web page (the my_applets.htm web page) that will bring up this applet. a. Open Front Page and open the my_applets.htm page. Add text to launch this applet. b. Select the text, select Insert, Hyperlink or click on the Hyperlink icon. c. Type the address in the address box. Assuming you’ll call the web page to launch this applet, house.htm, the URL would be: http://students.salisbury.edu/~username/house.htm. d. Save again to the htdocs folder. Step 4: Create the house.htm web site with the correct HTML code and save house.htm to the htdocs folder. Step 5: Copy the House.class file into the htdocs folder of your P: drive.
Upon completion of this lab, email the instructor the URL of you’re my_applets.htm webpage for grading of the three applets on-line. Place the URL of your page in the body of the email and place COSC117 Java Applet in the subject line.
