APSU Notes

Home / CSCI2010 / Chapters / Chapter6 / Graphics Supplement (Part 2)

• Graphics Supplement (Part 2)
  • Graphics Supplement 5-8: Outline
    • The GraphicsContext Class
    • Drawing Images and Applying Effects
    • Programming Example
    • Adding Labels to a JavaFX Application
  • Graphics Supplement: Outline: 6.8
    • Adding Buttons
    • Adding Images
    • Button Image Demo
  • Graphic Supplement: Outline
    • HBox Layout
    • StackPane Layout
    • FlowPane Layout
    • GridPane Layout
    • BorderPane Layout
    • Text Areas, Text Fields
    • Combining Layout
    • Drawing Polygons
  • Graphics Supplement: Outline: 8.5
    • Event Firing and Event Listeners
    • Event Handling with a Separate Class
    • Event Handling in the Main GUI Class
    • Event Handling in an Anonymous Inner Class
    • Event Handling Example - Adding Numbers
  • Powerpoint

Graphics Supplement (Part 2)

Sections 5.4, 6.8, 7.6, 8.5

Graphics Supplement 5-8: Outline

• 5.4
  • The GraphicsContext Class
  • Adding Labels to a JavaFX Application
• 6.8
  • Adding buttons
  • Adding button images
• 7.6
  • Layout Panes
  • Combining Layouts
  • The Classes TextArea and TextField
  • Drawing Polygons
• 8.5
  • Event-Driven Programming
  • Separate class to handle events
  • Anonymous inner class
  • Same class as the window

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

Powerpoint

View presentation