1. Chapter 14 JavaFX Basics
Dr. Clincy - Lecture

2. Recall: JavaFX Program w/Circle in Pane
For Circle and Color
Create a Circle
Set Circle properties
Set Circle’s center at (100,100)
Measurements are in pixels
The color of the circle
The color of the circle’s fill
Create Pane and add Circle
Add Pane to Scene
Output of program displays a circle in the center of the scene
Dr. Clincy - Lecture

3. Recall: Positioning a Shape
Java’s Approach
Conventional Approach
Dr. Clincy - Lecture

4. Property Binding
If the window is resized, the circle is no longer centered
For the circle to be centered after the resizing, the x- and y-coordinates of the center of the circle would be to adjust (reset) in real-time – this is called Property Binding
Property Binding enables a target object to be bound to a source object. If the value in the source object changes, the target property is also changed automatically. The target object is simply called a binding object or a binding property.
Dr. Clincy - Lecture

5. Property Binding To display the circle centered as the window resizes:
The x- and y-coordinates need to be reset to the center of the pane
centerX needs to bind with the pane’s width/2
centerY needs to bind with the pane’s height/2
The target listens to the changes in the source and automatically updates itself as changes occur with the source:
target.bind(source);
binding centerX with the pane’s width/2
binding centerY with the pane’s height/2
Dr. Clincy - Lecture

6. Recall: Node Class
Node Class provide visual components such as a shape, image, UI control, groups, and panes. Used to invoke some type of action
The Node class defines many properties and methods that are common to all nodes.
Style Property
Rotate Property
Others: all style properties can be found in a document at docs.oracle.com
Dr. Clincy - Lecture

7. Node Properties
The Node style property specify the styles of the nodes and is called CSS for cascading style sheets
Style property defined by prefix –fx-
Syntax for setting a style is: styleName:value
An example in setting multiple styles:
circle.setStyle(“-fx-stroke: black; -fx-fill: red;”)
The Node rotate property enables you to specify an angle in degrees for rotating a node
button.setRotate(80);
Creating the button
Setting the border of the button BLUE
Adding the button to the pane
Rotating the pane 45 degrees
Setting the pane’s border RED and the background Light Gray
Dr. Clincy - Lecture
Output: Pane rotated 45 degrees

8. The Color Class The Color class is used to create colors. Setters
Various Constructors
A color instance can be constructed using:
public Color (double r, double g, double b, double opacity)
Where r, g and b specify red, green and blue with values ranging 0 (darkest) to 1 (lightest)
Opacity defines transparency with values ranging 0 (total transparency) to 1 (complete opaque)
EXAMPLE: Color newcolor = new Color(.25, .14, .33, .51)
Dr. Clincy - Lecture

9. The Font Class The Font class describes font name, weight and size
EXAMPLE1: Font font1 = new Font(“SansSerif”, 16)
EXAMPLE2: Font font2 = Font.font(“Times New Roman”, FontWeight.BOLD, FontPosture.ITALIC, 12)
Dr. Clincy - Lecture

10. Image Class and ImageView Class
The Image class represents a graphical image and the ImageView class can be used to display an image.
EXAMPLE1: new Image(“image/us.gif”) - creates an Image object for the image file us.gif that is under the directory image in the Java class directory
EXAMPLE2: new Image(“ ; - creates an Image object for the file in the URL on the web
ImageView is a node for displaying an image
ImageView can create a node from an Image object
EXAMPLE3:
Image image1 = new Image(“ ; - creates an Image object for the file in the URL on the web
ImageView imageView1 = new ImageView(image1) ; creates an ImageView from the image file
COMBINED: ImageView imageView = new ImageView (“ ;
Dr. Clincy - Lecture

11. Show Image Example Import for Image and ImageView
Will cover later – creating a type of pane
Creating an image
Adding imageView to pane
Creating a second ImageView
Setting properties of imageView
Adding image to pane
Creating a third imageView
Rotating that imageView
NOTE: you must place the image file in the same directory as the class file
Dr. Clincy - Lecture

12. Recall: Panes ( 1 ) One Scene per Stage
( 2 ) A Scene can contain a Control, Group or Pane
( 3 ) A Pane or Group can contain any subtype of Node
( 4 ) Will cover the various types of Panes later
Dr. Clincy - Lecture

13. Layout Panes
JavaFX provides many types of panes for organizing nodes in a container.
Dr. Clincy - Lecture

14. FlowPane
Places nodes row by row horizontally or column by column vertically
Dr. Clincy - Lecture

15. Example: FlowPane Creating FlowPane
Placing nodes in pane with labels – will cover text later
OUTPUT: Nodes fill in the rows one after another
Dr. Clincy - Lecture

16. GridPane
Places nodes in cells in a 2D grid
Dr. Clincy - Lecture

17. GridPane Creating GridPane in center of grid (set properties)
Adding labels and adding text fields
Adding and aligning button
OUTPUT: Places the nodes in a grid with a specified column and row index
Dr. Clincy - Lecture

18. BorderPane
Places the nodes in the top, right, bottom, left, and center regions
Dr. Clincy - Lecture

19. HBox VBox Places the nodes in a single row
Places the nodes in a single column
Dr. Clincy - Lecture

20. Shapes
JavaFX provides many shape classes for drawing texts, lines, circles, rectangles, ellipses, arcs, polygons, and polylines.
Dr. Clincy - Lecture

21. Text
The Text class defines a node that displays a string at a starting point (x,y)
Dr. Clincy - Lecture

22. Text Example Imports for Text Creating first Text object Set text font
Add text to pane
Create 2nd Text object – 2-line Text object
Create 3rd Text object
Set color, underline, strike-thru
Add to pane
Output:
Dr. Clincy - Lecture

23. Line A line connects two points with two sets of vertices. Setters
Various Constructors
Dr. Clincy - Lecture

24. Example - Line Import for Line object
Creating a custom pane made from lines (the instance and the class)
Defining the custom pane made of lines
Creating and setting the start of the 1st line
Setting and binding the end of the 1st line
Setting width and stroke of line
Adding line to custom pane
Creating and setting up 2nd line
OUTPUT:
Dr. Clincy - Lecture

25. Rectangle
Dr. Clincy - Lecture

26. Circle
Already covered and implemented in Lab 9
Dr. Clincy - Lecture

27. Ellipse
Dr. Clincy - Lecture

28. Arc
Dr. Clincy - Lecture

29. Polygon and Polyline
Dr. Clincy - Lecture

30. Polygon and Polyline
Various Constructors
Dr. Clincy - Lecture

31. Cover Lab 10
Dr. Clincy - Lecture