GUI Applications

JLabel, JTextField, JButton and JOptionPane

Contents

A. Problem: The Hello Application1. Problem Description

2. New Requirement: Using an Option Pane

3. New Requirement: Allowing the User to Press Enter

B. Converting Kilometers to Miles

C. The Number Guessing Game

1. Problem: The Hello Application

• Develop a GUI application that asks the user to input a name and then displays a welcome message to that name

Solution

1.1. Creating the Project1.2. Developing the View

1.2.1. Creating the GUI Container1.2.2. Putting GUI Components into the GUI

Container

1.3. Implementing an Event Handler for the Button

1.4. Running the project1.5. Summary: The Design

1.1. Creating the Project

• File > New Project…– New Project

• Categories: Java• Projects: Java Application• Next

– New Java Application• Project Name: HelloDesktop• Turn off Create Main Class• Finish

1.2.1. Creating the GUI Container

• Right-click the project name > New > JFrame Form…– New JFrame Form

• Class Name: HelloView• Package: hello• Finish

• Naming the Form– Properties > title: Hello

1.2.2. Putting GUI Components into the Container

• Label– text: Name:

• Text Field– text: Enter your name– Variable Name: nameTextField

• Button– text: Say Hello– Variable Name: sayHelloButton

• Label– text: empty– Variable Name: messageLabel

1.3.3. Implementing an Event Handler for the Button

• Double-click the Say Hello button (or right-click > Events > Action > actionPerformed)

1.4. Running Application

• Click the Run Main Project (F6) button

1.5. Summary: The Design

HelloView- nameLabel- nameTextField- sayHelloButton- messageLabel

+ sayHelloButtionActionPerformed()

<<View & Controller>>

2. New Requirement: Using an Option Pane

• Modify the application so that after the user enters a name, the welcome message will be shown in a different window

Solution

• Delete the messageLabel

• Modify the event handler:

3. New Requirement: Allowing the User to Press Enter

• Modify the application so that after the user enters a name and press the Enter key, the welcome message will also be shown in a different window

Solution

• Develop an Event Handler for the nameTextField– Double-click the text field

B. Converting Kilometers to Miles• A kilometer is equal to 0.6214 miles.

Develop a GUI in which the user will enter a distance in kilometers, and then click a button to see the distance converted to miles

Solution

• Project name: KmToMiles

1. The Design

2. Developing the View

3. Developing the Model

4. Developing the Event Handler

1. The Design

KmToMilesView- kmLabel- kmTextField- convertToMilesButton

+ convertToMilesButtionActionPerformed()

<<View & Controller>>

Calculator

<<static>> + double kmToMiles(double km)

<<Model>>

uses

2. Developing the View

• Frame tile: Kilometers to Miles Conversion

• GUI components– Label: Enter a distance in kilometers– Km text field– Convert To Miles button

3. Developing the Model

4. Developing the Event Handler

C. The Number Guessing Game

• Develop an application that asks the user to input a guess number (See the next slide for an example). After the user enters a number and clicks the Submit button, the application displays one among the following messages– Sorry, try something higher– Too bad, go lower– Sweet, you got it right!

Solution

• Project name: Number Guessing Game

1. The Design

2. Developing the View

3. Developing the Model

4. Developing the Event Handler

1. The Design

NumberGuessingGameView- promptLabel- guessTextField- submitButton- NumberGuessingGame

+ submitButtionActionPerformed()

<<View & Controller>>

NumberGuessingGame- int target

<<static>> + double compare(int guess)

<<Model>>

11

2. Developing the View

• Frame title: Number Guessing Game

• GUI components– Prompt label– Guess text field– Submit button

3. Developing the Model

4. Developing the Event Handler

4.1. Declaring the Model Inside the View

4.2. Validating the input

4.3. Matching the guess number to the target

4.1. Declaring the Model Inside the View

4.2. Validating the Input

4.3. Matching the Guess to the Target

References

1. GUI Building in NetBeans IDE 5.5. http://testwww.netbeans.org/kb/55/quickstart-gui.html

2. Developing a Web Application. http://testwww.netbeans.org/kb/55/vwp-helloweb.html

3. Adding Functionality to Buttons: A Beginner Guide. http://testwww.netbeans.org/kb/articles/gui-functionality.html

4. Starting Out With Java 5 from control structures to objects. Tony Gaddis

5. Introduction to Facelets. http://testwww.netbeans.org/kb/55/quick-start-facelets-in-netbeans.html

Revision History