Learning Outcomes
Task 1 – Import a GUI Project
1
AST111103 Problem Solving with Programming Skills
Lab 7: More GUI Components and If Statements
Get familiar with import and export functions for Java applications
Design GUI application with more components: combo boxes, radio buttons and checkboxes
Relate if-else statements with user inputs
Recall our café system in previous labs:
In a restaurant, meals are priced as follow:
SetAis$30 SetBis$22 SetCis$25
You can order a drink with meal for extra $5. If you order cold drink, additional charge of $2 will be added. You may also order snacks (salad, wings, and soup) for another $8, $10, and $12, respectively.
Last week, we have learnt to build a GUI application from the beginning. Today, we will continue to work on a partially built GUI project by using the “Import” function of NetBeans. (Essential for your coming practical test).
Download Lab7_CafeStart.zip from the Canvas, DO NOT extract it yet.
In the NetBeans IDE, click File and choose Import Project > From ZIP….
Then, in the Import Project(s) from ZIP window, browse to the zip file you downloaded from Canvas and set the destination project folder to somewhere you can find easily.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Task 2 Add a Combo Box for Multiple Choice
2
AST111103 Problem Solving with Programming Skills
You shall see a partially completed GUI application. We will start building our lab with this application.
Choose Combo Box from Swing Controls window and add it to your project.
Go to the Properties window to edit the Model property and press the “…” button to edit choices of a Combo Box.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Think like your user
Caution! When we design GUI application, always shift your perspective as the user and think about which GUI component he/she will click to invoke the function of your application.
In this lab, which GUI component you wish the user to click for action? Discuss with your tutor.
3
AST111103 Problem Solving with Programming Skills
You will see a window being popped up, then delete all the item 1 – item 4 and replace them with Set A, Set B and Set C, use your creativity to name your meal sets.
Now, it’s time to write code! Check the name of your ComboBox at the Navigator window. For example jComboBox1, the number may not be the same for every classmates.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Find out the hidden code
Oh, a part of the code is hidden in red, can you checkout the name of the GUI component?
Test your answer by running the program and clicking the “bill” button.
Task 3 Add Radio Buttons and Check Boxes
4
AST111103 Problem Solving with Programming Skills
Then, double click on the “Bill” button at the bottom of your GUI design. Make sure you are adding code at “jButton1ActionPerformed”.
Add the following code:
Add 3 Radio Buttons and 3 Check Boxes as shown in the figure below:
Also add a Button Group component to your application. Button Group is invisible in Design view, but
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Radio Button vs Check Box
What is the difference between Radio button and Check box?
We use radio buttons when the question has only one answer.
We check boxes when we want to allow user to select more than one option.
Button Group allows us to conceptually tell Java that which components are in the same group.
Assigning all radio buttons to the same button group ensure that only one radio button can be
selected at a time.
5
AST111103 Problem Solving with Programming Skills
we can see it in the navigator.
For all radio buttons (not check boxes), assign the Button Group you just created (buttonGroup1) to the buttonGroup property.
Continue to add code at “jButton1ActionPerformed”.
Add the following code after the if-else statements of ComboBox but before the line of .setText()
statement.
Your code should looks like:
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Task 4 Exercise – Export your café program
6
AST111103 Problem Solving with Programming Skills
Done! Run your application and test it with different choices.
Complete the café application.
Make sure the Lab7_Cafe is selected in the project window.
Select File > Export Project > to ZIP…
Confirm the Root Project is the project we work in this lab.
Click the “Browse” button and select the destination for your zip file, we recommend you put it on
“Desktop”.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved
Task 5 Challenge (Optional) – add a “Reset” button
7
AST111103 Problem Solving with Programming Skills
Name your export file as Lab7_CafeEnd.zip (remember to type .zip at the end) and press Export.
Upload your exported zip file to the Canvas, you can find your file at the destination location you choose.
Import and Export will be very important for your coming practical test, make sure you know how to do that!
Add a new Button and set its text property as “Reset”.
Write code for this button such that when the user clicks the “reset”, the following happens:
The combo box is set to Set A (default);
Radio Button for No drink is selected and Hot and Cold drink should not be selected; and None of the Check Boxes is checked.
© Copyright 2018, Prepared by Dr. Lau Ho Lam. All Rights Reserved