1. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 2 – Welcome Application Introduction to Graphical User Interface Programming Outline 2.1 Test-Driving the Welcome Application 2.2 Compiling and Running the Template Welcome Application 2.3 Constructing the Welcome Application 2.4 Syntax Errors 2.5 Wrap-Up

2. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objectives In this tutorial, you will learn to: –Set the text in the JFrame ’s title bar. –Change the JFrame ’s background color. –Place a JLabel component on the JFrame. –Display text in a JLabel component. –Display an image in a JLabel component. –Execute an application.

3. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 3 2.1 Test-Driving the Welcome Application (Cont.)

4. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 4 2.1 Test-Driving the Welcome Application (Cont.) Figure 2.1 Locating the completed Welcome application. Locate the application –Locate the directory

5. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 5 2.1 Test-Driving the Welcome Application (Cont.) Figure 2.2 Running the completed Welcome application. Execute the application –Type java Welcome

6. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 6 2.1 Test-Driving the Welcome Application (Cont.) Figure 2.3 Welcome application executing. close button

7. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 7 2.2 Compiling and Running the Template Welcome Application Figure 2.4 Locating the template Welcome application. Change directoriesDisplay a directory listing No.class file

8. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 8 2.2 Compiling and Running the Template Welcome Application (Cont.) Compiling –Use the javac command to compile Type javac Welcome.java to compile the Welcome application and create a.class file.

9. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 9 2.2 Compiling and Running the Template Welcome Application (Cont.) Figure 2.5 Compiling the template Welcome application. Compile Welcome.java Display a directory listing.class file was created

10. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 10 2.2 Compiling and Running the Template Welcome Application (Cont.) Figure 2.6 Running the template Welcome application. Running the application –Run the application by typing java Welcome

11. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 11 2.3 Constructing the Welcome Application Figure 2.7 Welcome application’s Java source code in an editor window.

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 2.3 Constructing the Welcome Application (Cont.) Figure 2.8 Setting the text in the JFrame ’s title bar. Set title bar text Title bar in a JFrame –Use book-title capitalization Java statement –End with a semicolon ( ; ) –Arguments –Case sensitive String literal

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 2.3 Constructing the Welcome Application (Cont.) Figure 2.9 Compiling the updated Welcome application.

14. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 14 2.3 Constructing the Welcome Application (Cont.) Title bar Figure 2.10 JFrame after setting the title.

15. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 15 2.3 Constructing the Welcome Application (Cont.) Figure 2.11 The size property controls the width and height of the JFrame. Change the JFrame ’s width and height Setting the size of the JFrame –size property –Pixels (picture elements) –Set the width of the JFrame to 608 –Set the height of the JFrame to 413

16. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 16 2.3 Constructing the Welcome Application (Cont.) Figure 2.12 Compiling the updated Welcome application.

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 2.3 Constructing the Welcome Application (Cont.) Figure 2.13 JFrame after setting its title and size properties. Height (includes the title bar) Width

18. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 18 2.3 Constructing the Welcome Application (Cont.) Colors –Java’s pre-defined color constants –RGB values

19. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 19 2.3 Constructing the Welcome Application (Cont.) Content Pane –Visual area in which to place GUI components –background property

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 2.3 Constructing the Welcome Application (Cont.) Figure 2.15 JFrame with highlighted content pane. The dashed box represents the area of the content pane

21. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 21 2.3 Constructing the Welcome Application (Cont.) Figure 2.16 Setting the JFrame ’s background property to yellow. Change the background color background property –Set the background color of the content pane

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 2.3 Constructing the Welcome Application (Cont.) Figure 2.17 Compiling the updated Welcome application.

23. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 23 2.3 Constructing the Welcome Application (Cont.) Figure 2.18 JFrame after setting the title, size and background color

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 2.3 Constructing the Welcome Application (Cont.) Figure 2.19 Setting the text property of the JLabel. Setting the text property text property –Set the text displayed in the JLabel

25. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 25 2.3 Constructing the Welcome Application (Cont.) Figure 2.20 Setting the location property of the JLabel. Set the location of the JLabel location property –Set the location of the JLabel –Location is measured from the upper-left corner of the JPanel

26. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 26 2.3 Constructing the Welcome Application (Cont.) Figure 2.21 Setting the size property of the JLabel. Set the size of the JLabel size property –Set the width and height of the JLabel

27. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 27 2.3 Constructing the Welcome Application (Cont.) Figure 2.22 Changing the JLabel ’s font size to 36 points. Setting the font of the JLabel font property –Set the font of the text in the JLabel

28. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 28 2.3 Constructing the Welcome Application (Cont.) Figure 2.23 Centering the JLabel ’s text. horizontalAlignment property –Set the horizontal alignment of the text in the JLabel Centering the text in the JLabel

29. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 29 2.3 Constructing the Welcome Application (Cont.) Figure 2.24 Compiling the updated Welcome application.

30. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 30 2.3 Constructing the Welcome Application (Cont.) Figure 2.25 Welcome application after modifying the text JLabel. JLabel component with text ( 0, 0 ) coordinate of content pane

31. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 31 2.3 Constructing the Welcome Application (Cont.) icon property –Set the image displayed in the JLabel –Java assumes the image is in the same directory unless you specify a path –Java can display many image types including PNG (Portable Network Graphics) GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group) BMP (Windows Bitmap).

32. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 32 2.3 Constructing the Welcome Application (Cont.) Figure 2.26 Setting the icon property to display an image on a JLabel. Displaying an image

33. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 33 2.3 Constructing the Welcome Application (Cont.) Figure 2.27 Using the bounds property to set the size and location. Set the bounds (size and location) of the JLabel bounds property –Set the location, width and height of the JLabel

34. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 34 2.3 Constructing the Welcome Application (Cont.) Figure 2.28 Setting the horizontalAlignment property of the JLabel. Centering the image

35. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 35 2.3 Constructing the Welcome Application (Cont.) Figure 2.29 Compiling the updated Welcome application.

36. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 36 2.3 Constructing the Welcome Application (Cont.) Figure 2.30 Running the completed Welcome application. JLabel component with a centered image

37.  2004 Prentice Hall, Inc. All rights reserved. Outline 37 Welcome.java (1 of 3) 1 // Tutorial 2: Welcome.java 2 // This application welcomes the user to Java programming. 3 import java.awt.*; 4 import javax.swing.*; 5 6 public class Welcome extends JFrame 7 { 8 private JLabel textJLabel; // label that displays text 9 private JLabel pictureJLabel; // label that displays an image 10 11 // default constructor 12 public Welcome() 13 { 14 createUserInterface(); 15 } 16 17 // create and position GUI components; register event handlers 18 private void createUserInterface() 19 { 20 // get content pane and set layout to null 21 Container contentPane = getContentPane(); 22 contentPane.setBackground( Color.YELLOW ); 23 contentPane.setLayout( null ); 24 Set the background color of the content pane to yellow

38.  2004 Prentice Hall, Inc. All rights reserved. Outline 38 Welcome.java (2 of 3) 25 // set up textLabel 26 textJLabel = new JLabel(); 27 textJLabel.setText( "Welcome to Java Programming!" ); 28 textJLabel.setLocation( 35, 0 ); 29 textJLabel.setSize( 550, 88 ); 30 textJLabel.setFont( new Font( "SanSerif", Font.PLAIN, 36 ) ); 31 textJLabel.setHorizontalAlignment( JLabel.CENTER ); 32 contentPane.add( textJLabel ); 33 34 // set up pictureLabel 35 pictureJLabel = new JLabel(); 36 pictureJLabel.setIcon( new ImageIcon( "bug.png" ) ); 37 pictureJLabel.setBounds( 54, 120, 500, 250 ); 38 pictureJLabel.setHorizontalAlignment( JLabel.CENTER ); 39 contentPane.add( pictureJLabel ); 40 41 // set properties of window 42 setTitle( "Welcome" ); // set JFrame's title bar string 43 setSize( 608, 413 ); // set width and height of JFrame 44 setVisible( true ); // display JFrame on screen 45 46 } // end method createUserInterface Set the JFrame ’s title and size Customize pictureJLabel ’s properties Customize textJLabel ’s properties

39.  2004 Prentice Hall, Inc. All rights reserved. Outline 39 Welcome.java (3 of 3) 47 48 // main method 49 public static void main( String args[] ) 50 { 51 Welcome application = new Welcome(); 52 application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); 53 54 } // end method main 55 56 } // end class Welcome

40. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 40 2.4 Syntax Errors Debugging Errors –Syntax errors (compilation errors, compile-time errors) Application will not compile –Logic errors Application will compile, but may produce erroneous results Debugger –Use the debugger to fix syntax errors

41. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 41 2.4 Syntax Errors Figure 2.32 Command Prompt window listing syntax errors. Missing semicolon at the end of this line

42. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 42 2.4 Syntax Errors Figure 2.33 Introducing two syntax errors into your code. Two syntax errors Creating syntax errors –Add the letter “s” to the end of textJLabel in line 27 –Delete the right parenthesis at the end of the statement in line 28

43. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 43 2.4 Syntax Errors Figure 2.34 Two error messages about syntax errors generated by the compiler. Number of errors Line of code Explanation of the error File name and line number

44. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 44 2.4 Syntax Errors Fixing the errors –Go back to your code and fix the syntax errors indicated in the command prompt.