Setting Up the Interface for the Planet Applet

Below is the Java code which creates the simple interface discussed above. A line by line explanation is given afterwards. (The numbers that appear in purple to the far left are line references to make the explanation easier, they are not part of the code.

 

1.  import java.awt.*;
2.	import java.applet.Applet;

3.	public class Planet extends Applet {	
4.		Panel dataPanel;	
5.		TextField inputxcoord, inputycoord, inputxvel, inputyvel;
		
6.		public void init() {
7.			dataPanel = new Panel(); 
8.			dataPanel.setLayout(new GridLayout (5,2,5,5));
9.			dataPanel.add(new Label("x-coordinate"));
10.			inputxcoord = new TextField("50");
11.			dataPanel.add(inputxcoord);
12.			dataPanel.add(new Label("y-coordinate"));
13.			inputycoord = new TextField("50");
14.			dataPanel.add(new Label("x-velocity"));
15.			inputxvel = new TextField("50");
16.			dataPanel.add(inputxvel);
17.			dataPanel.add(new Label("y-velocity"));
18.			inputyvel = new TextField("50");
19.			dataPanel.add(inputyvel);
20.			dataPanel.add(new Button("Start"));
21.			dataPanel.add(new Button("Pause"));

22.			setLayout(new BorderLayout(10,10));
23.			add("East",dataPanel);
24.		}

25.		public void paint (Graphics g) {
26.			g.setColor(Color.yellow);		//sun is yellow
27.			g.fillOval(50,50,8,8);			//paint sun
28.			g.setColor(Color.blue);		//planet is blue
29.			g.fillOval(50,100,4,4);			//paint planet
30.		}
31.	}

Now for the line by line explanation.

• Lines 1 and 2 import the necessary Java packages with which the applet interacts. In line 1, awt stands for Java's "Abstract Windowing Toolkit", a portable windowing library which gives applets (and applications) much of their interactive functionality. The "*" in "java.awt.*" means to import the entire AWT toolkit, so that we don't have to worry about importing each specific class we need under AWT. In line 2, we import the Applet class, which provides behavior which enables the applet to not only work within the browser itself, but to also take advantage of AWT, event handling, and graphics.

• Line 3 creates a subclass of the Applet class.

• Line 4 declares a variable called "dataPanel" which is an instance of the Panel class. Two of the major components you can work with in AWT are containers and UI (User Interface) components. A Panel is the most common form of a container, which is simply a component that can be displayed on the screen and which can contain other components. I decided to call the panel "dataPanel" because it will contain textfields that show the output collected as the planet orbits the star.

• Line 5 declares some variables that will be used later on.

• Line 6 begins the init() method. In an applet, there are 4 stages lifecycle methods: init(), start(), stop(), and destroy(). int() is the first method called by the applet once it has been loaded by the browser. Because init() is called before the applet begins execution, it can be overidden (as is the case in this example) to perform initialization tasks such as loading images, establishing layout, and parsing parameter information.

• Line 7 creates an instance of the Panel class and calls it "dataPanel".

• Line 8 establishes the layout of the panel with the setLayout() method. Remembering that a Panel is a container, a layout can be thought of as a template that is placed over a container to define how components will be added.

  In this applet we use the GridLayout. The numbers in parentheses determine the setup of the components and refer to the number of rows (5), number of columns (2), vertical pixel spacing between components (5), and horizontal pixel spacing between components (5), respectively.

• Line 9 adds a label called "x-coordinate" to dataPanel.

• Line 10 creates a TextField in dataPanel and assigns it to the variable inputxcoord which I made up to represent "input for the x-coordinate.", This textfield contains a specified value of 50. The label created in Line 9 refers to this textfield.

• Line 11 adds the textfield inputxcoord to the dataPanel

• Lines 12-19 continue to add labels, create textfields, and assign the value within the TextField to variable name.

• Lines 20 and 21 add a "Start" button and a "Pause" button to dataPanel. The Pause button will enable the user to stop the applet, change the values of the parameters, and then start the applet again.

• Line 22 defines a new layout called BorderLayout. The reason for doing this is explained below.

• Line 23 adds the dataPanel to the "eastern" portion of the Borderlayout. Thus far, we have created a dataPanel with several TextFields which will be used for user input, and a button to start and pause the applet. Now we must add the dataPanel which we created using the GridLayout to a larger layout which will display both the dataPanel and graphically display the animation of planet orbiting the sun. This is why we use the BorderLayout, and add the dataPanel to it.

• Line 25 begins the paint() method. This is the method which will paint the animation on the screen. Note that the paint() method takes an instance of the Graphics class as a single argument.

• Line 26 calls the method setColor() from the graphics class and takes "Color.yellow" as an argument.

• Now that we have the color set at yellow, Line 27 calls the method fillOval() from the Graphics class. This paints a yellow sun with the top left corner at (50,50), a width of 8 pixels, and a height of 8 pixels. Note that Java's coordinate system has origin (0,0) at the upper left corner. Positive x values are to the right, and positive y values are down.

• Lines 28 resets the color to green and Line 29 paints the planet which will orbit the sun.

let's see what the interface looks like so far: