1 / 31

Chapter 14 JavaFX Basics

Chapter 14 JavaFX Basics. 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.

hilaryd
Download Presentation

Chapter 14 JavaFX Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 14 JavaFX Basics

  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

  3. Recall: Positioning a Shape Java’s Approach Conventional Approach

  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 PropertyBinding 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.

  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 • centerXneeds to bind with the pane’s width/2 • centerYneeds 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); bindingcenterXwith the pane’s width/2 bindingcenterYwith the pane’s height/2

  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

  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 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)

  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)

  10. Image Class and ImageView Class The Image class represents a graphical image and the ImageViewclass 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: ImageViewimageView = new ImageView (“http://image/us.gif”) ;

  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 Adding image to pane NOTE: you must place the image file in the same directory as the class file

  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

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

  14. FlowPane Places nodes row by row horizontally or column by column vertically

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

  16. GridPane Places nodes in cells in a 2D grid

  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

  18. BorderPane Places the nodes in the top, right, bottom, left, and center regions

  19. HBox Places the nodes in a single row VBox Places the nodes in a single column

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

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

  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:

  23. Line A line connects two points with two sets of vertices. Setters Various Constructors

  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:

  25. Rectangle

  26. Circle Already covered and implemented in Lab 9

  27. Ellipse

  28. Arc

  29. Polygon and Polyline

  30. Polygon and Polyline Various Constructors

  31. Cover Lab 10

More Related