View the step-by-step solution to:

Question

20190805_201315.jpgChapter 15

data

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083881_1/courses/BKL01_CISC._3115_1BC_1196_5W1/Ceres.png

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083882_1/courses/BKL01_CISC._3115_1BC_1196_5W1/DwarfPlanets.java

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083883_1/courses/BKL01_CISC._3115_1BC_1196_5W1/DwarfPlanetsController.java

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083884_1/courses/BKL01_CISC._3115_1BC_1196_5W1/Eris.png

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083885_1/courses/BKL01_CISC._3115_1BC_1196_5W1/Haumea.png

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083886_1/courses/BKL01_CISC._3115_1BC_1196_5W1/Makemake.png

https://bbhosted.cuny.edu/bbcswebdav/pid-40949637-dt-content-rid-346083887_1/courses/BKL01_CISC._ 3115_1BC_1196_5W1/Pluto.PNG20190805_201347.jpg20190805_201340.jpg20190805_201331.jpg20190805_201304.jpg20190805_201642.jpg20190805_201229.jpg20190805_201216.jpg

20190805_201216.jpg

Chapter 15 Lab
Creating GUI Applications with JavaFX and Scene Builder
Lab Objectives
.
Be able to create a GUI with Scene Builder and save it to an FXML file
Be able to edit the JavaFX application's main application class
.
Be able to edit the logic in the JavaFX application's controller class
Be able to run and test a standalone JavaFX application
Introduction
JavaFX is a standard Java library for developing rich applications that employ graphics.
You can use it to create GUI applications, as well as applications that display 2D and 3D
graphics. You can use JavaFX to create standalone graphics applications that run on your
local computer, applications that run from a remote server, or applications that are
embedded in a Web page.
You use Scene Builder to construct a GUI by dragging and dropping the components that
you need onto a blank window. You visually arrange the components on the window, and
set various component properties to create the appearance that you want for the GUI. Then,
you save the GUI to an FXML file.
Once you save a GUI's scene graph to an FXML file, the next step is to write Java code
that reads the FXML file and displays the GUI on the screen, and handles any events that
occur while the application is running. This code is divided into two classes:
1. The main application class is responsible for building the scene graph and
displaying the GUI. The main application class performs the following:
Loads the FXML file
.
Builds the scene graph in memory
. Displays the GUI
2. The controller class is responsible for handling events that occur while the
application is running. The controller class contains the following items:
The necessary import statements
.
Private variables to reference the components that have an fx : id in the
scene graph
. An optional initialize method that is automatically called after the
FXML file is loaded
Event listener methods

20190805_201229.jpg

In this lab we will create a standalone GUI application using JavaFX and Scene Builder.
The application will display information about the first five dwarf planets that were
discovered in our solar system. The application will display an image of a dwarf planet
along with several facts. The image and text will change depending on which radio button
is selected.
Our Final GUI should look like the following:
Dwarf Planets
Ceres
Discovered by. Giuseppe Piazzi
Eris
Date of Discovery: January 1, 1801
Haumea
Orbit Period: 4.60 Earth years
Makemake
Length of Day: 9.07 hours
Pluto
Named After; The Roman goddess
of corn and harvests
Task #1 Creating the GUI's Scene Graph with Scene Builder
1. Copy the following files from the Student CD or as directed by your instructor.
DwarfPlanets.java (see Code Listing 15.1)
.
DwarfPlanetsController.java (see Code Listing 15.2)
Ceres.png
.
Eris.png
Haumea. png
.
Makemake.png
. Pluto.png
2. Open Scene Builder.
3. Add an AnchorPane component to the scene. This will become the root node.
a Save the GUI as DwarfPlanets.fxml. Make sure this file is saved in the same
instructor.
location as the files you copied from the Student CD or as directed by your
b. With the AnchorPane selected, set the Controller Class to the following:
i. DwarfPlanetsController.

20190805_201304.jpg

. You will notice that the last Label component is not large enough for all
the text to fit. To allow the text to fit properly, set its properties to the
following:
i. Resize to 160 pixels wide by 40 pixels high
ii. Set the Alignment property to TOP_LEFT
iii. Enable the Wrap Text property.
c. Set the fx : id field of each Label to the following:
i. discoveredByLabel
ii. dateOfDiscoveryLabel
iii. orbitPeriodLabel
iv. lengthOfDayLabel
V. namedAfterLabel
8. Make sure the GUI components are arranged to resemble the diagram below.
9. Save the changes and close Scene Builder.
Radio Buttons
Labels
Labels
Image View
AnchorPane
Task #2 Editing the Main Application Class
UIDWN
Open the DwarfPlanets . java file.
Edit the class so that it will load the DwarfPlanets . fxml file.
Edit the class so that it will display the text Dwarf Planets in the window title.
Save and compile the main application class, correcting any errors.
Run the main application class. Test the radio buttons. Notice that the radio
buttons don't do anything. We will edit the logic in the next task.
Task #3 Editing the Controller Class
1 Open the DwarfPlanetsController . java file.
2
Edit the class so that it will load the images when the application starts.

20190805_201315.jpg

LAB 9 DUE ON WEEK 9
a
Import the JavaFX Image class.
b Declare private fields for each of the five images.
c Create the initialize method to load the images.
3 Edit the event listener method for each radio button so it will display the
appropriate data when selected.
Use the information provided in the table below.
4 Save and compile the controller class, correcting any errors.
Image
Discovered By
Discovery
Orbit
Length
Named After
Date
Period
of Day
Ceres.png
Giuseppe
January 1,
4.60
9.07
The Roman
Piazzi
1801
Earth
Hours
Goddess of corn
Years
and harvests
Eris.png
Brown,
October
561.37
25.90
The ancient
Trujillo, and
21, 2003
Earth
Hours
Greek goddess of
Rabinowitz
Years
discord and strife
Haumea. png
Sierra Nevada
March 7.
281.93
3.91
The Hawaiian
Observatory
2003
Earth
hours
goddess of
Years
childbirth and
fertility
Makemake.png
Brown,
March 31,
305.34
22.48
The Rapanui god
Trujillo, and
2005
Earth
hours
of fertility
Rabinowitz
years
Pluto.png
Clyde
February,
247.92
153.29
The ancient
Tombaugh
18 1930
Earth
hours
Greek god of the
years
underworld
Task #4 Run and Test the JavaFX Application
1 Run the DwarfPlanets JavaFX application.
2 Test the application's radio buttons, and determine that the output is correct.
a. Refer to the data in the table for testing.
Code Listing 15.1 (DwarfPlanets . java)
import javafx . application . Application;
import javafx. fxml . FXMLLoader;
import javafx. scene . Parent;
import javafx . scene. Scene;
import javafx. stage. Stage;
/ * *
This is the main application class for the
Dwarf Planets JavaFX application.
* /

20190805_201331.jpg

public class DwarfPlanets extends Application
public void start (Stage stage) throws Exception
/ / EDIT THE LINES FOR TASK #2 HERE
/ / Load the DwarfPlanets. fxml file.
Parent parent = FXMLLoader . load (
getClass ( ) . getResource ( "FILENAME . fxml") ) ;
// Build the scene graph.
Scene scene = new Scene (parent) ;
/ / EDIT THE LINES FOR TASK #2 HERE
/ / Set the title to display "Dwarf Planets"
// Display our window, using the scene graph.
stage . setTitle ( "TITLE") ;
stage . setScene (scene) ;
stage. show ( ) ;
w
public static void main (String args)
/ Launch the application.
launch (args) ;
Code Listing 15.2 (DwarfPlanetsController . java
import javafx . fxml . FXML;
import javafx . scene . control . Label;
import javafx . scene . control . RadioButton;
import javafx . scene . control . ToggleGroup;
/ / ADD LINES FOR TASK #3 HERE
/ / Import the JavaFX Image class.
import javafx . scene . image . ImageView;
/ * *
This is the controller class for the
* 1
Dwarf Planets JavaFX application.
public class DwarfPlanetsController
@FXML
private ImageView dwarfPlanetsImageView;
6

20190805_201340.jpg

LAB 9 DUE ON WEEK 9
@ FXML
private Label discoveredByLabel;
@ FXML
private Label dateOfDiscoveryLabel;
@ FXML
private Label orbitPeriodLabel;
@ FXML
private Label lengthOfDayLabel;
@FXML
private Label namedAfterLabel;
@FXML
private ToggleGroup dwarfPlanetsToggleGroup;
@FXML
private RadioButton ceresRadioButton;
@ FXML
private RadioButton erisRadioButton;
@ FXML
private RadioButton haumeaRadioButton;
@ FXML
private RadioButton makemakeRadioButton;
@ FXML
private RadioButton plutoRadioButton;
/ / ADD LINES FOR TASK #3 HERE
/ / Declare private fields for the images
/ / Load the image files in the intialize method
/ / Event listener for the ceresRadioButton
public void ceresRadioButtonListener ()
/ / ADD THE LINES FOR TASK #3 HERE
/ / If this radio button is selected,
/ / display image and data for Ceres.
// Event listener for the erisRadioButton

20190805_201347.jpg

public void erisRadioButtonListener ()
/ / ADD THE LINES FOR TASK #3 HERE
/ / If this radio button is selected,
/ / display image and data for Eris.
/ / Event listener for the haumeaRadioButton
public void haumeaRadioButtonListener ()
/ / ADD THE LINES FOR TASK #3 HERE
/ / If this radio button is selected,
/ / display image and data for Haumea.
/ / Event listener for the makemakeRadioButton
public void makemakeRadioButtonListener ()
/ / ADD THE LINES FOR TASK #3 HERE
/ / If this radio button is selected,
/ / display image and data for Makemake.
// Event listener for the plutoRadioButton
public void plutoRadioButtonListener ()
/ / ADD THE LINES FOR TASK #3 HERE
/ / If this radio button is selected,
/ / display image and data for Pluto.

20190805_201642.jpg

LAB 9 DUE ON WEEK 9
4. Add five RadioButton components, arranged in a single column, to the left side of
the AnchorPane.
a. Set the Text property of each RadioButton to the following:
i. Ceres
ii. Eris
iii. Haumea
iv. Makemake
v. Pluto
b. Set the fx : id field of each RadioButton to the following:
i. ceresRadioButton
ii. erisRadioButton
iii. haumeaRadioButton
iv. makemakeRadioButton
v. plutoRadioButton
c. To register the event listeners, set the On Action property of each
RadioButton to the following:
i. ceresRadioButtonListener
ii. erisRadioButtonListener
iii. haumeaRadioButtonListener
iv. makemakeRadioButtonListener
v. plutoRadioButtonListener
d. Set the Toggle Group property of each RadioButton to the following:
i. dwarfPlanetsToggleGroup
e. Enable the Selected property of the ceresRadioButton RadioButton
component.
5. Add an Image View component to the right of the five RadioButton components.
a. Resize the component to 200 pixels wide by 200 pixels high.
b. Set the fx : id field to dwarfPlanets ImageView.
c. Set the Image property to Ceres.png.
6. Add five Label components, arranged in a single column, to the right of the
Image View component.
a. Set the Text property of each Label to the following:
i. Discovered By:
ii. Date of Discovery:
iii. Orbit Period:
iv. Length of Day:
v. Named After:
7. Add five more Label components, arranged in a single column, to the right of the
five Label components you added earlier.
a. Set the Text property of each Label to the following:
i. Giuseppe Piazzi
ii. January 1, 1801
iii. 4.60 Earth years
iv. 9.07 hours
V .
The Roman goddess of corn and harvests

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question