Mastering JavaFX 10

Build advanced and visually stunning Java applications

Sergey Grinev

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788299022
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en Java

Design modern, rich interfaces for Java apps using JavaFX 10About This Book• Become a pro with the latest JavaFX 10 framework• Create dynamic content using the animation API• Create and customize plugins and use them efficiently in different applicationsWho This Book Is ForIf you're a Java developer who wants to upgrade to the latest version of JavaFX to create stunning, feature-rich graphical applications, this book is for you.What You Will Learn• Construct and customize JavaFX windows• Manage UI elements and arrange them on the Scene• Explore the Bindings API and use it to coordinate various UI elements• Use FXML to design amazing FX applications• Write and manage CSS to style your applications• Add audio and video to your projects• Prepare your application to be launched on the target platformIn DetailJavaFX 10 is used to create media-rich client applications. This book takes you on a journey to use JavaFX 10 to build applications that display information in a high-performance, modern user interface featuring audio, video, graphics, and animation.Mastering JavaFX 10 begins by introducing you to the JavaFX API. You will understand the steps involved in setting up your development environment and build the necessary dependencies. This is followed by exploring how to work with the assets, modules, and APIs of JavaFX. This book is filled with practical examples to guide you through the major features of JavaFX 10. In addition to this, you will acquire a practical understanding of JavaFX custom animations, merging different application layers smoothly, and creating a user-friendly GUI with ease.By the end of the book, you will be able to create a complete, feature-rich Java graphical application using JavaFX.Style and approachThe book adopts a practical, step-by-step approach.

Building Blocks – Shapes, Text, and Controls

To construct a rich user interface, you need the building blocks. JavaFX provides a large range of very customizable graphical instruments. We'll start from the smallest building blocks—shapes, text, and simple controls—and will use them to understand how JavaFX works with graphical elements.

In this chapter, we will cover the following topics

• Creating and customizing the shapes
• Working with text
• Coordinates and bounds
• Basic controls

By combining and customizing these Nodes and arranging them using the layout managers we reviewed in the previous chapter, you can already build a sophisticated UI. At the end of the chapter, we'll revisit the Clock application from the previous chapter to demonstrate the topics we learned in a more complex application.

Shapes and their properties

Everything you see on the screen of your computer can be split into three large categories:

• Shapes
• Text
• Images

Thus, by being able to create each of these, you can build any UI in reasonable time. Let's start with JavaFX shapes.

JavaFX shapes overview

The simplest object you can put on a scene is a shape. Under the javafx.scene.shape package, the JavaFX API supports a great range of shapes, from circles and rectangles to polygons and SVG paths. Most shapes can be divided then into two categories—lines and closed shapes. The properties that are shared among all shapes will be covered in the next section. After, we will review each shape's specific APIs.

Closed shapes

There are just four options here—Rectangle, Circle, Ellipse, and Polygon. They mostly don't have any special API, just a minimum required by basic math to describe their form.

The only small difference is Rectangle, which can have rounded corners, controlled by the setArcHeight() and setArcWidth() methods.

For the polygon, you need to provide the coordinates of each vertex through the getPoints() method.

For example, take a look at the following code:

 // chapter2/shapes/ClosedShapes.java
 Rectangle rect = new Rectangle(50,50);
 rect.setArcHeight(10);
 rect.setArcWidth(10);
 rect.setFill(Color.DARKGREY);
 
 Circle circle = new Circle(50);
 circle.setFill(Color.DARKGREY);
 
 Ellipse ellipse = new Ellipse();
 ellipse.setRadiusX(60);
 ellipse.setRadiusY(40);
 ellipse.setFill(Color.DARKGREY);

 Polygon polygon = new Polygon();
 polygon.setFill(Color.DARKGREY);
 polygon.getPoints().addAll(
 0.0, 0.0,
 50.0, 30.0,
 10.0, 60.0);

// adding 4 shapes to the scene
HBox hbox = new HBox(20);
hbox.setPadding(new Insets(20));
hbox.setAlignment(Pos.CENTER);
hbox.getChildren().addAll(rect, circle, ellipse, polygon);
primaryStage.setScene(new Scene(hbox, 500, 150));

You can match all four shapes on this screenshot:

Note that you can have crossing edges for the polygon. JavaFX will do its best to determine which parts of such polygons are internal, judging by the starting point:

polygon.getPoints().addAll(
 0., 0.,
 50., 0.,
 0., 50.,
 50., 50.,
 30., -10.,
 20.,70.);

The preceding code draws the following shape:

Lines

Line is as simple as it sounds. You write start and end coordinates, and they get connected:

Line line = new Line(10, 10, 100, 50);

Polyline is a set of consecutive lines. You need to provide several pairs of coordinates where the end of each line is the start of the next one. Make sure you are providing an even number of parameters:

// chapter2/shapes/Polylines.java
Polyline polyline = new Polyline();
polyline.getPoints().addAll(
 0.0, 0.0,
 50.0, 30.0,
 10.0, 60.0);

Note that despite not always having a full border, line-type shapes can have a background. If you assign it using the setFill() method, these shapes will use invisible edge, connecting the first and last points of the line. Here is an example of the same polylines with and without a background:

The third shape is a Polygon with the same points set. The only difference between Polygon and Polyline is that the former automatically adds a line between the first and the last points to create a closed figure.

Curves

Arc is a piece of the ellipse. It has the extra startAngle and length properties compared to Ellipse. Both these parameters are measured in degrees, ranging from 0 to 360.

The following is an example of an ellipse and a similar arc with a length of 180 degrees:

// chapter2/shapes/ArcAndEllipse.java
Ellipse ellipse = new Ellipse();
ellipse.setRadiusX(60);
ellipse.setRadiusY(40);
ellipse.setFill(Color.DARKGREY);

Arc arc = new Arc();
arc.setRadiusX(60);
arc.setRadiusY(40);
arc.setFill(Color.DARKGREY);
arc.setStartAngle(45);
arc.setLength(180);

QuadCurve and CubicCurve represent quadratic and cubic Bezier parametric curves. This is a popular method for modeling a smooth curve.

To draw a QuadCurve, you need to set a start point, an end point, and a control point for the curve. After that, JavaFX will draw a curve by shifting tangent with vertexes on the...