Java Student Project         
Skyline
Skyline B
Skyline C1
Skyline C2
Skyline D

Skyline
Ability Level: Intermediate
Estimated Time: 45 minutes
Objectives: · Learn about the paint() and repaint() methods

· Learn how to use the drawStrin() method to draw Strings

· Learn how to use the setFont() and setColor() methods

· Learn how to set an applet's background color

· Learn how to create Graphics objects

· Learn how to draw lines and rectangles

· Learn how to draw ovals

Materials & Resources:
  • Java Software
  • Textbook
Overview: The paint() method is automatically created and used within every applet to draw the applet. The programmer can write their own paint() method which will override the supplied method.

Review the concepts of pixels (picture elements). The resolution of computer monitors range from 640x480 to 800x600, and beyond. It is  important of to take screen size into account when designing applets for the World Wide Web. 

Review the coordinate system of applets. The upper left-hand corner is 0, 0. As you move to the right (moving horizontally), the x-coordinate increases. As you move down (moving vertically), the y-coordinate increases.

Planning applets with complex graphics is extremely important, and sufficient planning will decrease the amount of time adjusting x and y coordinates. Use graph paper to plan out your graphical applets. Sketch out on the graph paper a complex image of filled rectangles and ovals, and include some strings. Think about how they would determine the coordinate points of the images needed to create the complex image.

It is  important to change the name of the applet in  the html file used to display the applet. The width and height tags of the html file determine the size of the original applet window.

In this section, the shapes presented include simple lines, simple, filled and clear rectangles, simple and clear rectangles with rounded corners, and simple and filled ovals. Rectangles with equal width and height are squares, and ovals with equal width and height are circles.

Instructions: Write an applet that displays a city skyline. Add a Button to the Skyline applet. When the user clicks the Button, change the sky color from day to night. Modify the applet created so the sky changes from day to night  or night to day with each successive Button click. Add a moon to the sky for the night view, and a sun for the day view.
Hints: Some important points to keep in mind in doing this project:

I. The paint() and repaint() methods:

     A. paint() automatically runs from an applet. The header is: 
             public void paint(Graphics gr)

     B. The repaint() method is used to update a window. The repaint() method calls the update() method which calls the paint() method.

II. The drawString() method:

     A. The arguments include:

          · The String to be drawn

          · The x coordinate

          · The y-coordinate

     B. The bottom left of the string is placed at the x, y coordinate. Remember that the coordinate system for the window starts at the upper left-hand corner with 0,0

     C. The drawString() is a member of the Graphics class, and therefore must be called with a Graphics object. For example, gr.drawString("Hello", 50,10);

III. The setFont() method

     A. Review the setFont() from Chapter 6.

          Font someFont = new Font("typeface", Font.style, point size);

     B. You may use the setFont() method with a Graphics object:

           gr.setFont(someFont);

IV. The setColor() and setBackground() methods

     A. The setColor() method allows you to determine the color of Graphic objects, including Strings. The color set will be used until the color is changed.

     B. To use any of the predefined colors (such as white, black, red and so on), use the setColor() method to assign one of the colors to the Graphics object.

          gr.setColor(Color.green);

     C. You can set your own color (of 16 million possible colors) with:

          Color myColor = new Color(r, g, b);

where r =red component, g = green component and b = blue component. These components can range from 0 (darkest) to 255 (lightest).

     D. The value of the one of the components of a color may be obtained by using the getRed, getBlue and getGreen methods, all of which return an integer. For example, Color.magenta.getRed() will return the red component of the magenta color constant.

     E. The setBackground(someColor) will set the background color for the window. It can be changed and the window repainted.

V. Creating a Graphics object

     A. You can create your own Graphics object in addition to creating one within the paint() method. This Graphics object can be used in other methods within the applet.

     B. The syntax of creating a Graphics object is: 

          Graphics gr = getGraphics();

VI. The drawLine() method:

     A. Individual straight lines one pixel in width may be drawn using any Graphics object. The line will be drawn in the current Graphics color. You can change the color of the lines using the gr.setColor() method.

     B. The syntax of the drawLine() method is:
            gr.drawLine(x1, y1, x2, y2);

         where :

· x1, y1 represent the pixel coordinates of one end of the line

· x2, y2 represent the pixel coordinates of the other end of the line

VII. The drawRect() and other rectangle method:

A. A Graphics object has methods that allow you to draw a simple rectangle, a filled rectangle, and a clear rectangle. You can also draw a rectangle with 90-degree angles at each corner, a rounded rectangle with arcs at each corner. A rectangle with equal width and height is a SQUARE.

B. For the following rectangle methods, x and y are the pixel coordinates of the upper left-hand corner of the rectangle, and the w and h are the width and height of the rectangle in pixels.

gr.drawRect(x, y, w, h); 

This draws 4 connecting lines to create a rectangle shape. The lines are in the current color, and the interior is the.Background color.

gr.fillRect(x, y, w, h); This draws a solid figure in the current color.

gr.clearRect(x, y, w, h); This draws a solid figure in the Background color.

C. Rounded rectangles add two arguments to the rectangle methods. The aw is the arc width of the rounded corners. The ah is the arc height of the rounded corners.

gr.drawRoundRect(x, y, w, h, aw, ah); draws an empty rounded rectangle with lines in the current color.

gr.fillRoundRect(x, y, w, h, aw, ah); draws a filled rounded rectangle in the current color.

VIII. The drawOval() method:

A. The oval methods draw ellipses inscribed within the boundaries of an imaginary rectangle. The x and y coordinates set the location of the upper left hand corner of the rectangle, and the width and the height give the dimensions of that rectangle. If the width is equal to the height, the oval is a CIRCLE.

B. The syntax of the oval methods are:

gr.drawOval(x, y, w, h); This draws an empty oval in the current color.

gr.fillOval(x, y, w, h); This draws a solid oval in the current color

Extra: