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
- Create object of type
Button
- 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));
- 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

Powerpoint