© Copyright 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

© Copyright 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.

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

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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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).

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

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

 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 // default constructor 12 public Welcome() 13 { 14 createUserInterface(); 15 } // 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

 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 ); // 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 ); // 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 } // end method createUserInterface Set the JFrame ’s title and size Customize pictureJLabel ’s properties Customize textJLabel ’s properties

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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