ICOM 4015 Advanced Programming Laboratory. Chapter 3 Introduction to Graphical Applications in Java using Swing

Transcription

1 ICOM 4015 Advanced Programming Laboratory Chapter 3 Introduction to Graphical Applications in Java using Swing University of Puerto Rico Electrical and Computer Engineering Department by Juan E. Surís

2 1 Introduction In this chapter we will introduce the basics of creating graphical applications using Swing. We will discuss the basic elements of graphical applications: JFrame, JComponent and Graphics. We demonstrate the concepts through two case studies. Create a new project called Lab3. All your work should be part of this project. 2 Basic Components Building graphical applications in Java using Swing consists of three fundamental elements: a frame, a component and a graphics environment. The frame is the window in which we will be working on. The Swing class that implements the frame is called JFrame. The component is the element contained within the frame that actually displays something on the window. Most often we will be creating our own component class. However, this class has to extend the class JComponent. Do not worry about what this means, as we will be discussing this later on in the semester. The graphics environment is the way the component modifies what is displayed by the JFrame. 2.1 JFrame The class JFrame implements the window in which we will be displaying the elements of our graphical application. The following lists the methods that we will most often be using: void setsize(int height, int width) - sets the size of the window. void settitle(string title) - adds a title to the window. Component add(component comp) - adds a component to the window. void setvisible(boolean b) - if b is true, makes the window visible. Otherwise, makes it invisible. void setdefaultcloseoperation(int operation) - Specifies the operation to perform when the window is closed. For now, we will always be using the operation JFrame.EXIT ON CLOSE. Please refer to the javadoc documention for the JFrame class for more details. It can be accessed by performing the following search on ggogle.com: 2.2 JComponent JFrame site:java.sun.com We will be creating our own components to add to the JFrame. These components will extend the class JComponent. The JComponent class is very clomplex and provides many methods. However, for now we will just focus on only the following method: void paintcomponent(graphics g) In this method, we will interact with the Graphics object to modify the window s display. 1

3 2.3 Graphics The Graphics object is where we actually modify the display. The Graphics object is automatically creating for us by the frame. At the moment a component is added to a frame, the paintcomponent method of the component added is called, with the Graphics object for the frame that the component is being added to Graphics2D The class that we will actually be using for now is Graphics2D. Although the method paintcomponent receives an argument of type Graphics, we can convert (this conversion is called casting, which we will discuss later in the semester) this object to a Graphics2D object using the following code: Graphics2D g2 = (Graphics2D) g; where g is the object of type Graphics. The methods of the class Graphics2D that we will be using are: void draw(shape s) - draws s. void setcolor(color c) - sets the current color to c. void fill(shape s) - fill the shape s with the current color. 3 Case study: RectangleComponent In this section we will discuss in detail the process of creating a simple graphical application. The goal of our example application is to draw two rectangles on the screen. The steps we will be conducting to achieve this are: 1. Create a class called RectangleComponent that extends the class JComponent. 2. Implement the method paintcomponent. 3. Create a main class called RectangleViewer. This class does the following: (a) Creates a JFrame object (set size, title, etc...). (b) Creates a RectangleComponent object. (c) Adds component to frame. (d) Sets frame visible. 3.1 Component class The first step in creating a graphical application is creating the component class that will actually modify the display. Figure 1 shows how we create a component class in eclipse. Create a new Java class as always. However, in this case we will specify javax.swing.jcomponent 2

4 Figure 1: Create component class Figure 2: RectangleComponent class as the Superclass 1. If you do not know to which package the superclass belongs to, you can click on the Browse button and search by the class name. Figure 2 show the class as created by eclipse. Notice that the class is defined as extends JComponent. It also contains the necessary import. 3.2 Implement paintcomponent method The paintcomponent method is where most of the work is going to take place. The method takes a Graphics object, named g, as its only argument and is of type void. The first thing we need to do is cast g to a Graphics2D object. Add the following line to the method: Graphics2D g2 = (Graphics2D) g; 1 When class B extends class A, then A is said to be the Superclass of B. 3

5 You may notice that eclipse is indicating an error in this line (as well as the method declaration). This is because we need to import the classes Graphics and Graphics2D. You can do this by placing the cursor on the line and doing Edit Quick Fix. Eclipse launches a menu with possible fixes for the error. The first suggestion should be to add the appropriate import. Now that we have the Graphics2D object, we can start modifying the display. In this example we want to draw two rectangles. To do this we will use the method draw(shape s). The class Rectangle that we have used before is of type Shape. For this example we create a Rectangle object, draw it, translate it and draw it again. The complete code for the paintcomponent method is shown in Figure 3. Figure 3: RectangleComponent class 3.3 Main class Now that the component class i created, we need to create the main class. The main class needs to create the frame and add the component. Figure 4 shows the complete code for a main class, called RectangleViewer. Exercise 1: Create a main class called RectangleViewer, type the code in Figure 4 and execute. 4 Case Study: More shapes In the first case study, we learned how to create a component class to draw two rectangles. Now we will create a new component class using the additional Shape classes: java.awt.geom.ellipse2d.double java.awt.geom.line2d.double 4

6 Figure 4: RectangleViewer class We will also use the drawstring and setcolor methods of the Graphics2D class. Figure 5: TestComponent class 5

7 Exercise 2: Create a component class called TestComponent, type the code in Figure 5. Add the necessary imports. Exercise 3: Create a main class called TestViewer that creates a frame and adds atestcomponent. The frame should have a height of 300, width of 400 and a title of An Aline Face. Execute. 5 Independent Exercises Complete the following exercises: 1. Exercise P2.11 Write a graphics program that draws your name in red, cotained inside a blue rectangle. Provide a class NameViewer and a class NameComponent. 2. Exercise P2.12 Write a graphics program that draws 12 strings, one each for the 12 standard colors, besides Color.WHITE, each in its own color. Provide a class ColorNameViewer and a class ColorNameComponent. 3. exercise P2.13 Write a graphics program that draws two solid squares: one in pink and one in purple. Use a standard color for one of them and a custom color for the other. Provide a class TwoSquareViewer and a class TwoSquareComponent 4. exercise P2.14 Write a graphics program that fills the window with a large ellipse, with black outline and filled with your favorite color. The ellipse should touch the window boundaries. Provide a class EllipseViewer and a class EllipseComponent. 5. exercise P2.15 Write a program to plot the following face. Provide a class FaceViewer and a class FaceComponent. 6