© copyright 1992-2004 by deitel & associates, inc. and pearson education inc. all rights...

© Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved.

1

Tutorial 2 – Welcome ApplicationIntroduction to Graphical User Interface

Programming

Outline2.1 Test-Driving the Welcome Application2.2 Compiling and Running the Template Welcome Application2.3 Constructing the Welcome Application2.4 Syntax Errors2.5 Wrap-Up


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

2.1 Test-Driving the Welcome Application (Cont.)

Application Requirements A software company (Deitel & Associates) has asked you to develop a simple Welcome application that includes the greeting “Welcome to Java Program-ming!” and a picture of the company’s bug mascot.


4


Figure 2.1 Locating the completed Welcome application.

• Locate the application– Locate the directory


5


Figure 2.2 Running the completed Welcome application.

• Execute the application– Type java Welcome


6


Figure 2.3 Welcome application executing.

close button


7

2.2 Compiling and Running the Template Welcome Application

Figure 2.4 Locating the template Welcome application.

Change directories

Display a directory listing

No .class file


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


Figure 2.5 Compiling the template Welcome application.

Compile Welcome.java

Display a directory listing

.class file was created


10


Figure 2.6 Running the template Welcome application.

• Running the application– Run the application by typing java Welcome


11

2.3 Constructing the Welcome Application

Figure 2.7 Welcome application’s Java source code in an editor window.


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


Figure 2.9 Compiling the updated Welcome application.


14


Title bar

Figure 2.10 JFrame after setting the title.


15


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





Figure 2.13 JFrame after setting its title and size properties.

Height (includes the title bar)

Width


18


Constant RGB value Constant RGB value Color.BLACK

0, 0, 0 Color.MAGENTA 255, 0, 255 Color.BLUE 0, 0, 255 Color.ORANGE 255, 200, 0 Color.CYAN 0, 255, 255 Color.PINK 255, 175, 175 Color.DARK_GRAY 64, 64, 64 Color.RED 255, 0, 0 Color.GRAY 128, 128, 128 Color.WHITE 255, 255, 255 Color.GREEN 0, 255, 0 Color.YELLOW 255, 255, 0 Color.LIGHT_GRAY 192, 192, 192

Figure 2.14 Predefined colors and their RGB values.

• Colors– Java’s pre-defined color constants– RGB values


19


• Content Pane– Visual area in which to place GUI components– background property


20


Figure 2.15 JFrame with highlighted content pane.

The dashed box represents the area of the content pane


21


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




23


Figure 2.18 JFrame after setting the title, size and background color


24


Figure 2.19 Setting the text property of the JLabel.

Setting the text property

• text property – Set the text displayed in the JLabel


25


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


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


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


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




30


Figure 2.25 Welcome application after modifying the text JLabel.

JLabel component with text

(0, 0) coordinate of content pane


31


• 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


Figure 2.26 Setting the icon property to display an image on a JLabel.

Displaying an image


33


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


Figure 2.28 Setting the horizontalAlignment property of the JLabel.

Centering the image


35




36


Figure 2.30 Running the completed Welcome application.

JLabel component with a centered image

2004 Prentice Hall, Inc.All rights reserved.

Outline37

Welcome.java(1 of 3)

1 // Tutorial 2: Welcome.java2 // This application welcomes the user to Java programming.3 import java.awt.*;4 import javax.swing.*;5 6 public class Welcome extends JFrame7 {8 private JLabel textJLabel; // label that displays text9 private JLabel pictureJLabel; // label that displays an image10 11 // default constructor12 public Welcome()13 {14 createUserInterface();15 }16 17 // create and position GUI components; register event handlers18 private void createUserInterface()19 {20 // get content pane and set layout to null21 Container contentPane = getContentPane();22 contentPane.setBackground( Color.YELLOW ); 23 contentPane.setLayout( null );24

Set the background color of the content pane to yellow


Outline38


25 // set up textLabel26 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 pictureLabel35 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 window42 setTitle( "Welcome" ); // set JFrame's title bar string 43 setSize( 608, 413 ); // set width and height of JFrame44 setVisible( true ); // display JFrame on screen45 46 } // end method createUserInterface

Set the JFrame’s title and size

Customize pictureJLabel’s properties

Customize textJLabel’s properties


Outline39


47 48 // main method49 public static void main( String args[] )50 {51 Welcome application = new Welcome();52 application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );53 54 } // end method main55 56 } // end class Welcome


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

2.4 Syntax Errors

Figure 2.32 Command Prompt window listing syntax errors.

Missing semicolon at the end of this line


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

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

2.4 Syntax Errors

• Fixing the errors– Go back to your code and fix the syntax errors indicated in

the command prompt.

© copyright 1992-2004 by deitel & associates, inc. and pearson education inc. all rights...

Documents