1. CMPE212 – Reminders Assignment 5, a JavaFX GUI, due this Friday.
Winter 2019 CMPE212
5/20/2019
CMPE212 – Reminders
Assignment 5, a JavaFX GUI, due this Friday.
Quiz 3 graded.
Get e(fx)clipse from “Eclipse Marketplace”.
Winter 2019
CMPE212 - Prof. McLeod
Prof. Alan McLeod

2. Today JavaFX Text Input Nodes. JavaFX Dialogs. Sliders and Spinners.
Winter 2019 CMPE212
5/20/2019
Today
JavaFX Text Input Nodes.
JavaFX Dialogs.
Sliders and Spinners.
Winter 2019
CMPE212 - Prof. McLeod
Prof. Alan McLeod

3. Text Input Use TextField, TextArea, PasswordField controls.
See FXTextInput. Note:
Default Button, Cancel Button.
Default text.
Prompt text (don’t need a label!).
Multi-line input – and scroll bar appearance.
Obtaining the text.
Clearing the fields.
Change events.
Restricting input.
Winter 2019
CMPE212 - Prof. McLeod

4. Other TextField Properties
Did you see the effect of pressing <enter> and <esc>?
Did you see the difference between “Prompt Text” and “Text”?
Test the effect of “Editable”, “Disable” and “Focus Traversable” properties.
Winter 2019
CMPE212 - Prof. McLeod

5. Aside – The Tab Order Also called the “Focus Traversal Policy”…
When using keyboard navigation, pressing <tab> moves you “forward” from node to node, providing the nodes accept the focus (they are “focus traversable”). <shift><tab> moves you “backwards”.
How do you change the Tab Order of your nodes?
Move the nodes around in the Scenebuilder hierarchy tab or move them around in the fxml file.
Winter 2019
CMPE212 - Prof. McLeod

6. JavaFX Dialogs Include:
Information, Warning and Error Alerts.
Confirmation Dialogs.
Text Input Dialogs.
Choice Dialogs.
By default these all act as Modal dialogs, which they should be.
What does “Modal” mean?
Also, see:
Winter 2019
CMPE212 - Prof. McLeod

7. JavaFX Dialogs, Cont. See FXDialogs
The first dialog is jazzed up a bit, but the others just use defaults.
Note use of dialogs.css to change style of a dialog and how this stylesheet is added.
Note how to change the default graphic used in dialog by creating an ImageView object.
Winter 2019
CMPE212 - Prof. McLeod

8. JavaFX Dialogs, Cont. Title Header Graphic Content Winter 2019
CMPE212 - Prof. McLeod

9. Other Built-In Windows
FileChooser:
ColorPicker:
DatePicker:
So easy to use!
See FXFileAndColor project.
Winter 2019
CMPE212 - Prof. McLeod

10. Spinners and Sliders (And Progress Bars!) See FXSliderSpinner
For Sliders, using SceneBuilder:
Set vertical or horizontal orientation.
Set min, max and initial value.
Choose major and minor tick units and which to label.
Can choose “Snap To Ticks”.
Winter 2019
CMPE212 - Prof. McLeod

11. Spinners and Sliders, Cont.
For Spinners, you must set min, max and initial values in fxml file yourself:
initialValue="0" max="20" min="-20“
Use change listeners with .valueProperty() to detect changes in slider or listener positions.
Note how spinner works with arrow keys or mouse click.
Winter 2019
CMPE212 - Prof. McLeod

12. Canvas Control
See:
Canvas is a Node, is not visible by itself, but is not a Pane type Node so it cannot contain other nodes.
Hint: Make sure the Canvas has a size and is where you think it is – otherwise you will not see anything!
Winter 2019
CMPE212 - Prof. McLeod

13. Canvas Control, Cont.
All drawing to the Canvas will take place through its GraphicsContext object:
Canvas canvas = new Canvas(300, 250); // width, height
GraphicsContext gc = canvas.getGraphicsContext2D();
(Also has an empty, default constructor.)
Draw by setting colours first using:
gc.setFill(Color.RED); // The fill colour
gc.setStroke(Color.BLUE); // The line colour
Winter 2019
CMPE212 - Prof. McLeod

14. Canvas Control, Cont. Set the line thickness using:
gc.setLineWidth(5); // 5 pixels
See the GraphicsContext API docs for all the drawing methods. A method starting with “stroke…” draws the outline of the shape. Starting with “fill…” draws a filled shape.
Winter 2019
CMPE212 - Prof. McLeod

15. Canvas Control, Cont. For example:
To draw a line from (x1, y1) to (x2, y2) in pixels as doubles:
gc.strokeLine(x1, y1, x2, y2);
Don’t forget that the (0, 0) pixel position of a Canvas is the top, left corner of the canvas.
Winter 2019
CMPE212 - Prof. McLeod

16. Canvas Control, Cont. A filled oval:
gc.fillOval(x, y, width, height);
(x, y) is the upper left corner of a rectangle enclosing the oval of size width by height.
(For a circle, width==height…)
Winter 2019
CMPE212 - Prof. McLeod

17. Canvas Control, Cont.
You can draw many other shapes and curves including Bezier curves. Can also draw text.
Effects such as linear and radial colour gradients can be applied by supplying LinearGradient and RadialGradient objects to the setStroke and setFill objects instead of just a single colour.
The Canvas object itself can be translated, rotated and otherwise transformed in any way you can imagine.
Winter 2019
CMPE212 - Prof. McLeod

18. Canvas Control, Cont.
Display images using .drawImage() – takes an Image object.
Images can be in .bmp, .jpg, .gif or .png formats.
You can load an image from a local file or from a URL.
Use .getPixelWriter to obtain an object that will allow you to edit individual pixels.
Winter 2019
CMPE212 - Prof. McLeod

19. Canvas Control, Cont. Drawings are often built and edited in layers.
Each layer can be a separate Canvas object. Layer them using StackPane or just Pane.
Draw to each layer using individual GraphicsContext objects.
Use a method like .toFront() on the Canvas layer to move it to the top.
Winter 2019
CMPE212 - Prof. McLeod

20. Canvas Control, Cont.
Mouse/cursor interaction by adding an event handler to the Canvas object and listening for a MouseEvent:
canvas.addEventHandler(MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
gc.fillOval(e.getX(),e.getY(),20,20); }
});
Winter 2019
CMPE212 - Prof. McLeod

21. Fireworks Case Study Use of a canvas, spinners, drawing and animation.
Linked to the course web site as the “Fireworks Case Study”.
Winter 2019
CMPE212 - Prof. McLeod