Introduction to Java using NetBeans

Section 2 - GUI

Learning Goals

What we are Learning how to.......

-create a GUI
- create labels and text fields
- add functionality to buttons
- use java string functions


Success Criteria

What I'm Looking For......

- bug free java applications that efficiently solve the problems presented
- problem solving skills (try before you ask)
- efficient algorithm implementation
-modular programs
- formated and documented code
- organized website with code and executables
- neat, organized, GUI that is user friendly

Curriculum Expectations

Programming Concepts and Skills
- demonstrate the ability to use different data types and expressions
- use proper code maintenance techniques when creating computer programs.

Software Development
- manage the software development process effectively

Designing Modular Programs
- apply modular design concepts


Creating a Project with a GUI

  1. Click on the New Project icon in the toolbar or from the menu bar select File, New Project.
  2. Create a new Java Application
  1. Enter NameGUI in the Project Name field and specify your project location.

4. Right Click on NameGUI in the Projects List. Choose New > JFrame Form and Name your Form NameFrame





Modify the NameGui code as follows:





Building your GUI

  1. Drag a Label from the Palette to your application window.
    Double click on it and change the text to read, “My First GUI Program”.
    In Properties window, modify font and foreground
    Right click on the Label and change the variable name to titleLabel
  2. Create a second label called nameLabel and change the text to "Enter your name"
  3. Drag a Text Field from the Palette and name it nameTextField
    In the Properties window find the text property and remove any text you find there so that your field is blank to start with.

  4. Drag a Button from the Palette to your application window and place it as shown in the image above and name it enterButton
    In the Properties window find the text property and change it to “Enter”.
  5. Drag another Label from the Palette to your application and place it under the button. Call it outputLabel
    Change the text property to “My first GUI program”.


Adding Functionality


  1. Right click on the Enter button. From the menu that appears select Event, Action, ActionPerformed. This will create what is called an ActionListener for the Enter button. This means that the program will be listening for the ActionPerformed event to occur, and if it does, it will run the set of instructions that you give it within that event. The ActionPerformed event listens for the button to be pressed by either the mouse or the keyboard.
  2. At this point the IDE will display the code that goes along with your application. Netbeans has added lots of code, locate this line

This is the auto created function for the Enter button.

  1. We are now going to add code that controls what the Enter button does.

Also make the

Congratulations. You have now just completed your first program with a GUI. It is now time to make it run

1. Add a second label, text box and button and ask the user their age

2. Disable the second button at the start

3. When the first button is clicked enable the second button and make the first button invisible

4. Display the age in a second output box

5. Add a label with a picture in it

6. Add a reset button that clears everything and resets the buttons back to the original state.




Modifying the Code

Now that you have a running program with a working GUI, it is time to experiment. Try changing the properties of some of the components. Try adding new components. Play around with the code and see what you can do.

A good place to start is by adding a new button and labeling it Exit. Now add an event to this button that causes the program to close when the button is pressed. Use the following code inside your ActionPerformed method to end the program:



Opening another Frame

If you want to refer to variables from Birthday in anotherFrame do the same thing


Use the website below to find Java String Methods to complete the programs below.



For all assignments marks will be given for form design and layout


Bonus/ Above and Beyond Marks are in effect for these assignments.

Bonus items must include coding, not just pictures/colours/fancy buttons (these are part of layout and design) but additional functions and features.



Assignment 2.8 - Family Birthday Program

Create a Family Birthday Program that makes use of the following:

  • Three labels displaying the title and information requests.
  • Two input text fields for name and date.
  • A label to display the resulting message.
  • A button.


A sample layout for the input/output screen is shown below.

Step 1 - Create your own version of this screen using a different background, colour, and/or a different text font style/size. Add an Image. Make it look amazing.

This shows a possible output screen for the Happy Birthday program.

Note: Use a Panel the size of your form to set the Background!



Step 2 - Modify the Program so that when the user enters First Name and Last Name in the "Enter Name" field the program the following output will be displayed



Jane Doe
Feb. 29, 2015


DOE Family Birthdays

Jane's Birthday is on Feb. 29, 2015


Step 3 - (ICS4U only) Modify the program to include 3 additional names. You can assume there are only 2 last names.
(Bonus if the program handles more efficiently.)

Use the same input boxes with different buttons.
The easiest way to do this is to print the output into 2 labels, one for each last name. You could also use one output label, but this is a little more challenging.

Using the Lastname print Birthdays as shown below:


DOE Family Birthdays

Jane's Birthday is on Feb. 29, 2015
Jack's Birthday is on Mar. 15, 2010

SMITH Family Birthdays

John's Birthday is on Jan. 1, 2011
Jane's Birthday is on June 3, 2007

Use if ..... else if statements to determine if the last names are the same and then print the matching names .




To print multiple lines of text into a label or text box you must use an html tag and then <br> for a new line



You could also do this in one long setText statement if you just wanted to print everything ..... but it gets confusing.

PrintLabel.setText("<html>" + strFirst + " birthday is on " + strBirthdate + "<br> <html>" + strFirst2 + "birthday is on" + strBirthdate2 + "<br> <html>" +"birthday is on" + strBirthdate3 + "<br> <html>"+ "birthday is on" + strBirthdate4 +"</html>");


Step 4 - Add a Reset Button

Above and Beyond is Required- Error Check your program for invalid entries(i.e. no first last name, blank entries, etc.)
Try something else worth 20%!


Remember: Assignments are marked on code efficiency. The most efficient way to do this assignment is with 1 input box and 1 output label and if ...... else statements to determine what is printed.

Assignment 2.9 - Monogram

Create a monogram application that prompts the user to enter his or her first, middle, and last names and then displays a monogram with the first and middle initial in lowercase and the last initial in uppercase. (You already have most of this code done)

Error Checking - If the user enters less/more than 3 names an error message should appear

ICS4U - Give the user the option of adding/changing the following items. Use check boxes for font style, radio button groups for colour options.

Note: When using radio buttons, place the buttons into a group. Only 1 item at a time can be choosen from those in the group.

You could also use a drop box for the colours

- Add/Remove a picture beside the monogram
- Change the font to Bold /Italic/etc.
- Font Colour, a few options
- Font Type, a few options


Useful Code

Font myFont = new Font("Verdana", Font.BOLD + Font.ITALIC, 12) // Bold and Italic

Above and Beyond is required



Assignment 2.10 - Replace String

Create a Replace String application that displays the new string in a lable. The new string should take a sentence entered by the user and replace every occurence of a substring with the new string supplied.

Add a case insensitive option to your program using a check box. See String Methods

i.e. Tomato should also be found when they search for tomato


ICS4U modify the program so that the user can modify all instances or only the first instance. Use radio buttons for the choices

Above and Beyond - Not required

Assignment 2.11 - Remove String (This can be added to 2:10)

Create a Remove Sting application that displays a new string in a label. The new string should take a sentence entered by the user and remove every occurrence of a substring supplied by the user.

Add a case insensitive option to your program using a check box. See String Methods

Modify the program so that the user can remove all instances or only the first instance. Use radio buttons for the choices.

ICS4U add an insert string option .

Above and Beyond - Not required


To see if a button is selected or not



Posting your Work

Complete the S2 Rubric and place it in a Rubrics folder on your Google Drive. Make sure I have access to edit this file.

Put a link to your Rubric on your website.

Embed you drive folder with netbeans projects

Create a link to your jar file

Creating a Jar File
Right-click on the Project name
Select Properties
Click Packaging
Check Build JAR after Compiling
Check Compress JAR File
Click OK to accept changes
Right-click on a Project name
Select Build or Clean and Build

Post your code for the JFrame Form. Only your code, remove default code please

Post your output



Step by Step Instructions for Creating Your First Applet in NetBeans 8.2

Choose File / New Project. Under Categories, select Java.

Under Projects, select Java Class Library.

Under Project Name, enter the name of your application. Change the Project Location to any folder on your computer.

Right-click the project node in the Projects window or Files window and select New > Other.

Under Categories, select Swing GUI Forms. Under File Types, select JApplet Form.

Under Class Name, enter the name of your applet. Leave Package blank for now (default package).

Click Finish. The IDE creates the applet in the specified package. The applet opens in the Source editor.

IMPORTANT: Right click your applet's background panel (not on any component or embedded panel) and choose "Set Layout..." on the pop-up menu, then select "Absolute Layout".

Step by Step Instructions for Posting Your First Applet to the Web
1. Create JAR File:

Right click the project node in the Projects window and choose Clean and Build from the contextual menu.
Create HTML File (Only needs to be uploaded once since the JAR file contains the actual project)

Right click on Projects.../<appletname>.java select Run File (or SHIFT-F6)
Edit automatically generated HTML test file (should be in <projdir>\build\<projname>.html) as followed:
1. remove 'codebase="..."' property in APPLET tag

2. add 'archive="<projname>.jar"' property to APPLET tag

(NOTE: Every time do a Clean and Build this file will be deleted, and every time you run the project it will be recreated!)
Copy JAR file (should be in <projdir>\dist\<projname>.jar) �and edited html to web server