Professional Documents
Culture Documents
Learn Javafx
Learn Javafx
Second Edition
Kishori Sharan
Peter Späth
Learn JavaFX 17: Building User Experience and Interfaces with Java
Kishori Sharan Peter Späth
Montgomery, AL, USA Leipzig, Sachsen, Germany
To my niece Alina
—Peter Späth
Table of Contents
■
■Chapter 1: Getting Started������������������������������������������������������������������������������������� 1
What Is JavaFX?��������������������������������������������������������������������������������������������������������������� 1
History of JavaFX������������������������������������������������������������������������������������������������������������� 3
System Requirements������������������������������������������������������������������������������������������������������ 4
JavaFX Runtime Library��������������������������������������������������������������������������������������������������� 4
JavaFX Source Code��������������������������������������������������������������������������������������������������������� 5
Your First JavaFX Application������������������������������������������������������������������������������������������� 5
Starting an Eclipse Project��������������������������������������������������������������������������������������������������������������������� 5
Setting Up a Module Info������������������������������������������������������������������������������������������������������������������������ 7
Creating the HelloJavaFX Class�������������������������������������������������������������������������������������������������������������� 8
Overriding the start() Method����������������������������������������������������������������������������������������������������������������� 8
Showing the Stage��������������������������������������������������������������������������������������������������������������������������������� 9
Launching the Application�������������������������������������������������������������������������������������������������������������������� 10
Adding a Scene to the Stage���������������������������������������������������������������������������������������������������������������� 10
v
■ Table of Contents
Understanding ObservableSet���������������������������������������������������������������������������������������� 84
Creating an ObservableSet������������������������������������������������������������������������������������������������������������������� 85
vi
■ Table of Contents
Understanding ObservableMap�������������������������������������������������������������������������������������� 85
Creating an ObservableMap����������������������������������������������������������������������������������������������������������������� 86
vii
■ Table of Contents
■
■Chapter 6: Understanding Nodes����������������������������������������������������������������������� 133
What Is a Node?����������������������������������������������������������������������������������������������������������� 133
The Cartesian Coordinate System�������������������������������������������������������������������������������� 134
Cartesian Coordinate System of a Node����������������������������������������������������������������������� 135
The Concept of Bounds and Bounding Box������������������������������������������������������������������ 136
Knowing the Bounds of a Node������������������������������������������������������������������������������������ 138
The layoutBounds Property���������������������������������������������������������������������������������������������������������������� 140
The boundsInLocal Property��������������������������������������������������������������������������������������������������������������� 143
The boundsInParent Property������������������������������������������������������������������������������������������������������������� 144
Bounds of a Group�������������������������������������������������������������������������������������������������������� 144
A Detailed Example on Bounds������������������������������������������������������������������������������������ 144
Positioning a Node Using layoutX and layoutY������������������������������������������������������������� 150
Setting the Size of a Node�������������������������������������������������������������������������������������������� 151
Resizable Nodes��������������������������������������������������������������������������������������������������������������������������������� 153
Nonresizable Nodes���������������������������������������������������������������������������������������������������������������������������� 161
Summary���������������������������������������������������������������������������������������������������������������������� 193
viii
■ Table of Contents
■
■Chapter 8: Styling Nodes����������������������������������������������������������������������������������� 195
What Is a Cascading Style Sheet?�������������������������������������������������������������������������������� 195
What Are Styles, Skins, and Themes?�������������������������������������������������������������������������� 196
A Quick Example���������������������������������������������������������������������������������������������������������� 196
Naming Conventions in JavaFX CSS���������������������������������������������������������������������������� 198
Adding Style Sheets����������������������������������������������������������������������������������������������������� 198
Default Style Sheet������������������������������������������������������������������������������������������������������� 199
Adding Inline Styles������������������������������������������������������������������������������������������������������ 199
Priorities of Styles for a Node��������������������������������������������������������������������������������������� 201
Inheriting CSS Properties��������������������������������������������������������������������������������������������� 204
Types of CSS Properties����������������������������������������������������������������������������������������������� 206
The inherit Type���������������������������������������������������������������������������������������������������������������������������������� 207
The boolean Type�������������������������������������������������������������������������������������������������������������������������������� 207
The string Type����������������������������������������������������������������������������������������������������������������������������������� 207
The number and integer Types����������������������������������������������������������������������������������������������������������� 208
The size Type�������������������������������������������������������������������������������������������������������������������������������������� 208
The length and percentage Types������������������������������������������������������������������������������������������������������� 208
The angle Type������������������������������������������������������������������������������������������������������������������������������������ 208
The duration Type������������������������������������������������������������������������������������������������������������������������������� 209
The point Type������������������������������������������������������������������������������������������������������������������������������������ 209
The color-stop Type���������������������������������������������������������������������������������������������������������������������������� 209
The URI Type��������������������������������������������������������������������������������������������������������������������������������������� 209
The effect Type����������������������������������������������������������������������������������������������������������������������������������� 209
The font Type�������������������������������������������������������������������������������������������������������������������������������������� 210
The paint and color Types������������������������������������������������������������������������������������������������������������������� 211
ix
■ Table of Contents
x
■ Table of Contents
xi
■ Table of Contents
xii
■ Table of Contents
Summary���������������������������������������������������������������������������������������������������������������������� 363
xiii
■ Table of Contents
■
■Chapter 12: Understanding Controls����������������������������������������������������������������� 365
What Is a Control?�������������������������������������������������������������������������������������������������������� 365
Understanding the Control Class Hierarchy������������������������������������������������������������������ 366
Labeled Controls���������������������������������������������������������������������������������������������������������� 368
Positioning Graphic and Text�������������������������������������������������������������������������������������������������������������� 370
Understanding Mnemonics and Accelerators������������������������������������������������������������������������������������� 370
xiv
■ Table of Contents
xv
■ Table of Contents
xvi
■ Table of Contents
Summary���������������������������������������������������������������������������������������������������������������������� 494
■
■Chapter 13: Understanding TableView��������������������������������������������������������������� 497
What Is a TableView?��������������������������������������������������������������������������������������������������� 497
Creating a TableView���������������������������������������������������������������������������������������������������� 500
Adding Columns to a TableView��������������������������������������������������������������������������������������������������������� 501
Customizing TableView Placeholder��������������������������������������������������������������������������������������������������� 504
Populating a TableColumn with Data�������������������������������������������������������������������������������������������������� 505
Using a Map As Items in a TableView��������������������������������������������������������������������������� 508
Showing and Hiding Columns������������������������������������������������������������������������������������������������������������� 508
Reordering Columns in a TableView��������������������������������������������������������������������������������������������������� 509
xvii
■ Table of Contents
xviii
■ Table of Contents
xix
■ Table of Contents
■
■Chapter 16: Understanding 3D Shapes�������������������������������������������������������������� 597
What Are 3D Shapes?��������������������������������������������������������������������������������������������������� 597
Checking Support for 3D���������������������������������������������������������������������������������������������� 598
The 3D Coordinate System������������������������������������������������������������������������������������������� 599
Rendering Order of Nodes�������������������������������������������������������������������������������������������� 599
Using Predefined 3D Shapes���������������������������������������������������������������������������������������� 603
Specifying the Shape Material������������������������������������������������������������������������������������������������������������ 606
Specifying the Draw Mode of Shapes������������������������������������������������������������������������������������������������� 609
Specifying the Face Culling for Shapes���������������������������������������������������������������������������������������������� 611
Using Cameras������������������������������������������������������������������������������������������������������������� 612
Using Light Sources����������������������������������������������������������������������������������������������������� 616
Creating Subscenes����������������������������������������������������������������������������������������������������� 617
Creating User-Defined Shapes������������������������������������������������������������������������������������� 619
Creating a 3D Triangle������������������������������������������������������������������������������������������������������������������������ 624
Creating a 3D Rectangle��������������������������������������������������������������������������������������������������������������������� 628
Creating a Tetrahedron����������������������������������������������������������������������������������������������������������������������� 629
Summary���������������������������������������������������������������������������������������������������������������������� 632
■
■Chapter 17: Applying Effects����������������������������������������������������������������������������� 635
What Is an Effect?�������������������������������������������������������������������������������������������������������� 635
Chaining Effects����������������������������������������������������������������������������������������������������������� 637
Shadowing Effects������������������������������������������������������������������������������������������������������� 638
The DropShadow Effect���������������������������������������������������������������������������������������������������������������������� 638
The InnerShadow Effect��������������������������������������������������������������������������������������������������������������������� 642
The Shadow Effect������������������������������������������������������������������������������������������������������������������������������ 644
xxi
■ Table of Contents
■
■Chapter 20: Understanding Charts�������������������������������������������������������������������� 719
What Is a Chart?����������������������������������������������������������������������������������������������������������� 719
Understanding the Chart API���������������������������������������������������������������������������������������� 719
Styling Charts with CSS����������������������������������������������������������������������������������������������� 721
Data Used in Chart Examples��������������������������������������������������������������������������������������� 722
Understanding the PieChart����������������������������������������������������������������������������������������� 722
Customizing Pie Slices����������������������������������������������������������������������������������������������������������������������� 726
Styling the PieChart with CSS������������������������������������������������������������������������������������������������������������� 726
Understanding the XYChart������������������������������������������������������������������������������������������ 730
Representing Axes in an XYChart������������������������������������������������������������������������������������������������������� 730
Adding Data to an XYChart����������������������������������������������������������������������������������������������������������������� 731
Understanding the BarChart����������������������������������������������������������������������������������������� 733
Styling the BarChart with CSS������������������������������������������������������������������������������������������������������������ 736
Understanding the StackedBarChart���������������������������������������������������������������������������� 737
Styling the StackedBarChart with CSS����������������������������������������������������������������������������������������������� 738
Understanding the ScatterChart����������������������������������������������������������������������������������� 739
Styling the ScatterChart with CSS������������������������������������������������������������������������������������������������������ 741
Understanding the LineChart���������������������������������������������������������������������������������������� 742
Styling the LineChart with CSS����������������������������������������������������������������������������������������������������������� 743
Understanding the BubbleChart����������������������������������������������������������������������������������� 744
Styling the BubbleChart with CSS������������������������������������������������������������������������������������������������������ 745
Understanding the AreaChart��������������������������������������������������������������������������������������� 746
Styling the AreaChart with CSS���������������������������������������������������������������������������������������������������������� 747
Understanding the StackedAreaChart�������������������������������������������������������������������������� 748
Styling the StackedAreaChart with CSS��������������������������������������������������������������������������������������������� 749
Customizing XYChart Appearance�������������������������������������������������������������������������������� 750
Setting Alternate Row/Column Fill������������������������������������������������������������������������������������������������������ 750
Showing Zero Line Axes��������������������������������������������������������������������������������������������������������������������� 751
Showing Grid Lines����������������������������������������������������������������������������������������������������������������������������� 751
Formatting Numeric Tick Labels��������������������������������������������������������������������������������������������������������� 751
Summary���������������������������������������������������������������������������������������������������������������������� 753
xxiii
■ Table of Contents
■
■Chapter 21: Understanding the Image API�������������������������������������������������������� 755
What Is the Image API?������������������������������������������������������������������������������������������������ 755
Loading an Image��������������������������������������������������������������������������������������������������������� 756
Specifying the Image-Loading Properties������������������������������������������������������������������������������������������ 757
Reading the Loaded Image Properties����������������������������������������������������������������������������������������������� 758
Viewing an Image��������������������������������������������������������������������������������������������������������� 759
Multiple Views of an Image���������������������������������������������������������������������������������������������������������������� 761
Viewing an Image in a Viewport��������������������������������������������������������������������������������������������������������� 762
Understanding Image Operations��������������������������������������������������������������������������������� 764
Pixel Formats�������������������������������������������������������������������������������������������������������������������������������������� 764
Reading Pixels from an Image������������������������������������������������������������������������������������������������������������ 766
Writing Pixels to an Image������������������������������������������������������������������������������������������������������������������ 768
Creating an Image from Scratch��������������������������������������������������������������������������������������������������������� 771
Saving a New Image to a File System������������������������������������������������������������������������������������������������ 773
Taking the Snapshot of a Node and a Scene���������������������������������������������������������������� 774
Taking the Snapshot of a Node����������������������������������������������������������������������������������������������������������� 774
Taking the Snapshot of a Scene��������������������������������������������������������������������������������������������������������� 776
Summary���������������������������������������������������������������������������������������������������������������������� 776
■
■Chapter 22: Drawing on a Canvas��������������������������������������������������������������������� 779
What Is the Canvas API?����������������������������������������������������������������������������������������������� 779
Creating a Canvas�������������������������������������������������������������������������������������������������������� 780
Drawing on the Canvas������������������������������������������������������������������������������������������������ 780
Drawing Basic Shapes������������������������������������������������������������������������������������������������������������������������ 780
Drawing Text��������������������������������������������������������������������������������������������������������������������������������������� 781
Drawing Paths������������������������������������������������������������������������������������������������������������������������������������ 782
Drawing Images���������������������������������������������������������������������������������������������������������������������������������� 782
Writing Pixels�������������������������������������������������������������������������������������������������������������������������������������� 783
Clearing the Canvas Area��������������������������������������������������������������������������������������������� 783
Saving and Restoring the Drawing States�������������������������������������������������������������������� 784
A Canvas Drawing Example������������������������������������������������������������������������������������������ 785
Summary���������������������������������������������������������������������������������������������������������������������� 788
xxiv
■ Table of Contents
■
■Chapter 23: Understanding Drag and Drop�������������������������������������������������������� 789
What Is a Press-Drag-Release Gesture?���������������������������������������������������������������������� 789
A Simple Press-Drag-Release Gesture����������������������������������������������������������������������������������������������� 790
A Full Press-Drag-Release Gesture���������������������������������������������������������������������������������������������������� 792
A Drag-and-Drop Gesture������������������������������������������������������������������������������������������������������������������� 793
xxv
■ Table of Contents
Summary���������������������������������������������������������������������������������������������������������������������� 831
■
■Chapter 25: Playing Audios and Videos������������������������������������������������������������� 833
Understanding the Media API��������������������������������������������������������������������������������������� 833
Playing Short Audio Clips��������������������������������������������������������������������������������������������� 834
Playing Media��������������������������������������������������������������������������������������������������������������� 837
Creating a Media Object��������������������������������������������������������������������������������������������������������������������� 837
Creating a MediaPlayer Object����������������������������������������������������������������������������������������������������������� 838
Creating a MediaView Node��������������������������������������������������������������������������������������������������������������� 838
Combining Media, MediaPlayer, and MediaView�������������������������������������������������������������������������������� 839
xxvi
■ Table of Contents
xxviii
About the Authors
Peter Späth graduated in 2002 as a physicist and soon afterward became an IT consultant, mainly for
Java-related projects. In 2016, he decided to concentrate on writing books on various aspects, but with a
main focus on software development. With two books about graphics and sound processing, three books on
Android app development, and several books on Java development, the author continues his effort in writing
software development–related literature.
xxix
About the Technical Reviewer
xxxi
Acknowledgments
My heartfelt thanks are due to my father-in-law, Jim Baker, for displaying extraordinary patience in reading
the initial draft of the first few chapters of the book and his valuable suggestions for improving the material.
I thank my friend Richard Castillo for his hard work in reading the initial draft of the first 12 chapters
of the book and weeding out several mistakes. Richard was instrumental in running all examples and
pointing out errors. I also thank him for allowing me to use a few pictures in this book from his website
www.digitizedchaos.com.
My wife, Ellen, was always patient when I spent long hours at my computer desk working on this book.
I thank her for all her support to me in writing this book. She also deserves my sincere thanks for letting me
sometimes seclude myself on weekends so I could focus on this book.
I also thank my family members and friends for their encouragement and support to me in writing this
book: my elder brothers, Janki Sharan and Dr. Sita Sharan; my sister and brother-in-law, Ratna and Abhay;
my nephews Babalu, Dabalu, Gaurav, Saurav, and Chitranjan; my friends Shivashankar Ravindranath,
Kannan Somasekar, Mahbub Choudhury, Biju Nair, Srinivas Kakkera, Anil Kumar Singh, Chris Coley, Willie
Baptiste, Rahul Jain, Larry Brewster, Greg Langham, LaTondra Okeke, Dinesh Sankala, Rahul Nagpal, Ravi
Datla, and many more friends not mentioned here.
I thank the president of my company Up and Running Inc., Josh Bush, for his support and my
wonderful, supportive coworkers—Preethi Vasudeva, Tanina Jones, Ann Wedgeworth, William Barnett, and
Shannah Glenn—for their encouragement.
My sincere thanks are due to the wonderful team at Apress for their support during the publication of
this book. Thanks to Mark Powers, the senior coordinating editor, and Matthew Moodie, the development
editor, for providing excellent support. Thanks also to the technical reviewers Jeff Friesen, David Coffin,
Wallace Jackson, Massimo Nardone, and Tri Phan for their insights and feedback during the editing process;
they were instrumental in weeding out many technical errors and improving the material. I also thank the
copy editors, Mary Bearden, Lori Cavanaugh, Lori Jacobs, and Karen Jameson, for their extraordinary efforts
in editing the book and applying many corrections during a very short span of time. Last but not least,
my sincere thanks to Steve Anglin, the lead editor at Apress, for taking the initiative for the publication of
this book.
—Kishori Sharan
Many thanks to the Apress staff for offering me to write the JavaFX version 17 edition of this book. Thanks
also to my friends for their patience concerning updates to my latest composition work, a classic style Tango
for violin and cello. This work had to stand behind a little bit, so the JavaFX book’s schedule could be held.
—Peter Späth
xxxiii
Introduction
Java had the support for developing GUI applications since its version 1.0 using the AWT (Abstract Window
Toolkit). Later, AWT was replaced by Swing, which gave a little better user experience, but still lacked the
modern-looking widgets and the support for a developer’s productivity. Both AWT and Swing lacked the
first-class support for data binding, efficient GUI rendering engines, easy-to-use 2D and 3D libraries for
developers, and style sheet support. JavaFX was first released in 2008 as the tool to use for developing rich
Internet applications (RIAs); it used a statically typed declarative language called JavaFX Script, which did
not attract a lot of attention from Java developers. JavaFX 2.0, released in 2011, caught the Java community’s
attention when it dropped the support for JavaFX Script and supported writing JavaFX programs using the
Java programming language. In its current version, JavaFX 17 is supported as an open source add-on that
can be downloaded from the Gluon company’s website. Now JavaFX 17 is considered a real successor for
Swing for building the GUI application using the Java platform.
Learn JavaFX 17 shows you how to start developing rich client desktop applications in JavaFX 17 using
your Java skills. It provides comprehensive coverage of the JavaFX 17 features. Each chapter starts with an
introduction to the topic at hand. A step-by-step discussion of the topic with small snippets of code follows.
At the end of the topic’s discussion, a complete program is presented. Special care has been taken to present
the topics in such a way that chapters can be read serially. The book contains numerous pictures to aid you
in visualizing the GUI that is built at every step in the discussion.
The book starts with an introduction to JavaFX and its history. It lists the system requirements and the
steps to start developing JavaFX applications. It shows you how to create a Hello World application in JavaFX,
explaining every line of code in the process. Later in the book, advanced topics such as 2D and 3D graphics,
charts, FXML, advanced controls, and printing are discussed.
I faced a few hurdles while writing the first edition of this book. As JavaFX 8 was being developed,
JavaFX 2, the version before JavaFX 8, was the first release of JavaFX that used the Java programming
language to write JavaFX code. There were a few bugs in JavaFX 2. Sometimes, it took me a couple of days
of hard work to create an example to work with, only to realize that there was a bug in it. Later, if something
did not work, I would look at the JIRA bug reports for JavaFX before spending too much time researching
it myself. I had to fix bugs as I found them. It took me 18 months to finish this book, and, in the end, it was
satisfying to see that what I had produced was a lot of useful material covering almost every topic in JavaFX
so fully that readers could use it to learn and build a rich client application quickly using JavaFX. I hope you
will enjoy the book and benefit greatly from it.
I believe that programming is simple if you learn it that way. Keeping this in mind, I kept the examples
in the book as simple as possible, presenting them in as few lines as I could. The examples focus on the topic
being discussed. I do not present complex GUI in my examples, keeping in mind that this could obscure the
learning process of the topic at hand. I have seen books that contain examples that run four or five pages
long, sometimes even longer; readers of such books (myself included) often get lost in trying to understand
the logic of the program, thus forgetting what they were trying to learn in that section. Therefore, simple
programs in this book are intended to help you learn JavaFX faster. The book includes many ready-to-run
programs and even more pictures. Having more pictures than programs is evident from my approach in
keeping the readers’ interest the first priority. Almost every time I discuss a snippet of code producing a UI,
I include the picture of the results of the UI, so readers are not left to their imaginations as to what the code
snippet will produce. Having to run every snippet of code to see the output can hinder the learning rhythm.
xxxv
■ Introduction
Structure of the Book
The book contains 27 chapters covering all topics—from basic to advanced—in JavaFX. Chapters are
arranged in an order that aids you to quickly learn JavaFX. I have used an incremental approach to teach
JavaFX, assuming no prior GUI development knowledge. Each chapter starts with a section introducing
the topic to be discussed in the chapter. Each section contains a bit of background of the features being
discussed, followed with code snippets and a complete program.
Source Code
Source code for this book can be accessed at github.com/apress/learn-javafx17.
xxxvi