APSU Notes

Graphics Supplement (Part 2)

Sections 5.4, 6.8, 7.6, 8.5

Graphics Supplement 5-8: Outline

The GraphicsContext Class

  • An object of the GraphicsContext class represents an area of the screen
  • JavaFX applications use the metaphor of a Stage and Scene
  • The Scene object contains a set of Nodes called a scene graph that describes a scene of the applications, just like the script, actors, and props describe a scene in a play or movie
  • In out simple JavaFX applications we create a special type of Node called a Group that contains other Nodes and can auto-size based on the nodes within the group
  • At this point, sufficient to know that GraphicsContext is a class that allows us to draw figures and write text in an area of the application.
    • Figure 5.8 Some Methods in the Class GraphicsContext


Drawing Images and Applying Effects

  • We can use the drawImage method to draw an image on the screen and apply a variety of image effects.
  • View sample program, listing 5.23, for reading an image file and drawing it with scale and reflection.


Programming Example

  • Multiple faces - using a Helping method
  • View sample code, listing 5.24 class MultipleFaces


Adding Labels to a JavaFX Application

  • Provides a way to add text to an application
  • More flexible than using fillText
  • Add a Label in conjunction with a Layout which specifies how components will be arranged visually in the window
    • Here we use a simple vertical box layout, VBox
  • View sample application, listing 5.25 class LabelDemo


Graphics Supplement: Outline: 6.8

  • Adding buttons
  • Adding button images

Adding Buttons

  • Create object of type Button
    • Then add to the scene
  • Buttons don’t do anything yet when clicked, this is covered in chapter 8
  • Application Output:


Adding Images

  • An image is a picture
  • Can load an image stored in standard formats by creating an Image object and sending in the pathname to the file
    • Image img = new Image("pathname-to-image-file");
  • Image can be added to other components, such as a button
    • btn.setGraphic(new ImageView(img));

Button Image Demo

  • View button image demo, listing 6.22 class IconDemo
  • Note
    • Creation of image
    • Attaching to button


Graphic Supplement: Outline

  • Layout Panes
    • VBox
    • HBox
    • StackPane
    • FlowPane
    • GridPane
    • BorderPane
  • Combining Layouts
  • The Classes TextArea and TextField
  • Drawing Polygons

HBox Layout

  • Layout panes control how components are laid out and displayed in a JavaFX application.
  • We’ve already seen VBox, which arranges components vertically
  • The HBox layout arranges components horizontally
  • View sample code, listing 7.15, class HBoxDemo


StackPane Layout

  • The StackPane layout stacks components on top of one another
  • This provides a way to overlay text onto a shape or image to create a more complex object
  • View sample code, listing 7.16, class StackPaneDemo


FlowPane Layout

  • The FlowPane layout adds components left to right and wraps around to the left when the right side of screen is reached
  • You can control the amount of vertical and horizontal space between elements by using the methods setVgap and setHgap
  • View sample code, listing 7.17, class FlowPaneDemo


GridPane Layout

  • The GridPane layout arranges components into a grid of rows and columns that are accessible like a 2D array
  • The upper left cell is at 0,0:
    • “Out there” is at 2, 2
    • This a Button 1 is at 1, 0
  • View sample code, listing 7.18, class GridPaneDemo


BorderPane Layout

  • The BorderPane layout places items into the five regions shown below. Unused regions take up no space.


  • View sample code, listing 7.19, class BorderPaneDemo
  • BorderPaneDemo Output


Text Areas, Text Fields

  • Text area is object of class TextArea
    • Displayed as place for user to enter multiple lines of text
  • Text area is object of class TextField
    • Displayed as a place for user to enter a single line of text
  • Can place into layouts
  • View sample code, listing 7.20, class TextControlDemo


Combining Layout

  • Layouts can be added as a component inside another layout, giving you the flexibility to create sophisticated interfaces
  • View sample code, listing 7.21, class CombinedLayoutDemo, which embeds a HBox and FlowPane into a BorderPane


Drawing Polygons

  • Class GraphicsContext has method strokeRect
    • But only 4 sides and only 90 degrees corners
  • Method stokePolygons can draw polygons of any number of sides
    • Three arguments
      • Array of double for x values of coordinates
      • Array of double for y values of coordinates
      • Number of points (vertices)
  • A polyline like a polygon, not closed
  • Figure 7.10 A polygon and a polyline


  • View sample application, listing 7.22 class PolygonDemo


Graphics Supplement: Outline: 8.5

  • Event-Driven Programming
    • Separate class to handle events
    • Anonymous inner class
    • Same class as the window

Event Firing and Event Listeners

  • An event object is generated when something happens, like a button is clicked, the mouse is moved, the mouse is over a component, the mouse leaves a component, etc.
  • You specify what happens when the event occurs by creating an event handler or listener



Event Handling with a Separate Class

  • We can write a class whose purpose is specifically to handle a particular event, in this case, to react to a button click
  • View event handler demo 1, listing 8.20, ButtonDemo1 and event handler, listing 8.21, HandleButtonClick


Event Handling in the Main GUI Class

  • We can put the event handler in the same class as the GUI; this allows the event handler to have easy access to any GUI class variables
    • Add the handler and implement the ActionListener
  • View event handling demo 2, listing 8.22, ButtonDemo2


Event Handling in an Anonymous Inner Class

  • We can create a new event handler by creating an anonymous inner class for each event we want to handle
    • This is a class with no name that we declared an instantiate at the same time
  • View event handling demo 3, listing 8.23, ButtonDemo3


Event Handling Example - Adding Numbers

  • An example that ties together layouts (GridPane with BorderPane) and event handling to add two numbers together is shown in AddingNumbersApp
  • View event handling demo 4, listing 8.24, AddingNumbersApp