Chapter 14 JavaFX Basics Dr. Clincy - Lecture

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

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

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

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

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

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

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

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

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(“http://image/us.gif”) ; - 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(“http://image/us.gif”) ; - 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 (“http://image/us.gif”) ; Dr. Clincy - Lecture

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Rectangle Dr. Clincy - Lecture

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

Ellipse Dr. Clincy - Lecture

Arc Dr. Clincy - Lecture

Polygon and Polyline Dr. Clincy - Lecture

Polygon and Polyline Various Constructors Dr. Clincy - Lecture

Cover Lab 10 Dr. Clincy - Lecture