1. CISC124 Quiz 3 grading underway, still... Assn 5 due tomorrow.
Fall 2017 CISC124
9/16/2018
CISC124
Quiz 3 grading underway, still...
Assn 5 due tomorrow.
COMPSA will be holding an exam prep tutorial. Time and location TBA.
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

2. Today Three other useful dialogs. Sliders, Spinners and progress bars.
The Canvas node.
The Fireworks Case Study.
Animation? Oracle Demos?
What’s left in JavaFX and Java to discover?
Fall 2017
CISC124 - Prof. McLeod

3. Other Built-In Windows
FileChooser:
ColorPicker:
DatePicker:
So easy to use!
See FXFileAndColor project.
Fall 2017
CISC124 - Prof. McLeod

4. 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”.
Fall 2017
CISC124 - Prof. McLeod

5. Spinners and Sliders, Cont.
Use change listeners with .valueProperty() to detect changes in slider or listener positions.
Note how spinner works with arrow keys or mouse click.
Fall 2017
CISC124 - Prof. McLeod

6. Canvas Control
See:
Canvas is a Node and 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!
Fall 2017
CISC124 - Prof. McLeod

7. 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
Fall 2017
CISC124 - Prof. McLeod

8. 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.
Fall 2017
CISC124 - Prof. McLeod

9. 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.
Fall 2017
CISC124 - Prof. McLeod

10. 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…)
Fall 2017
CISC124 - Prof. McLeod

11. 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.
Fall 2017
CISC124 - Prof. McLeod

12. 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.
Fall 2017
CISC124 - Prof. McLeod

13. 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.
Fall 2017
CISC124 - Prof. McLeod

14. 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); }
});
Fall 2017
CISC124 - Prof. McLeod

15. Fireworks Case Study Use of a canvas, spinners, drawing and animation.
Linked to the course web site as the “Fireworks Case Study”.
Fall 2017
CISC124 - Prof. McLeod

16. JavaFX Animation
Lots of videos and tutorials “out there”. A couple of links to use as a starting point:
and:
Fall 2017
CISC124 - Prof. McLeod

17. JavaFX Transition Animation
Transitions can be used to animate single nodes or many nodes in parallel.
A property (color, rotation, position, etc.) is changing from a start value to an end value over a specified length of time.
Fairly easy to set up and useful for simpler node animations.
See a code “snippet” on the next slide that moves a red rectangle 300 pixels in the x direction over 3 seconds, and back and forth, forever…
Fall 2017
CISC124 - Prof. McLeod

18. JavaFX Transition Animation, Cont.
Rectangle rect = new Rectangle(10, 10, 100, 100);
rect.setFill(Color.RED);
TranslateTransition translate = new TranslateTransition(Duration.millis(3000), rect);
translate.setFromX(10);
translate.setToX(310);
translate.setAutoReverse(true);
translate.setCycleCount(Timeline.INDEFINITE);
translate.play();
Fall 2017
CISC124 - Prof. McLeod

19. JavaFX Transition Animation, Cont.
See FXSimpleAnimation.
Many other transitions are possible – fades, scaling, rotations, movement along a specific path, etc:
FadeTransition
ScaleTransition
RotateTransition
PathTransition
FillTransition
StrokeTransition
TranslateTransition
ParallelTransition (plays transitions at the same time)
SequentialTransition (plays transitions one after the other)
Fall 2017
CISC124 - Prof. McLeod

20. JavaFX Timeline Animation
Used in the Fireworks Case Study.
Timeline animations are better suited for more complex animation.
A Timeline object is constructed with a series of KeyFrame objects that are individual frame specifications along the animation.
A KeyFrame is constructed using at a minimum a Duration object and at least two KeyValue objects. Optionally, an EventHandler object can be used to execute some code when the KeyFrame is finished.
Fall 2017
CISC124 - Prof. McLeod

21. JavaFX Timeline Animation, Cont.
A KeyValue object consists of a single state for a mutable node property value.
You can also add an Interpolator object, which specifies how you interpolate between KeyValues.
The default Interpolator is Interpolator.LINEAR.
You can specify others or define your own, which is handy for specifying a specific path if your property is a position.
Fall 2017
CISC124 - Prof. McLeod

22. JavaFX AnimationTimer
An AnimationTimer object can be created if you wish to trigger an event every time a frame is drawn to the screen.
Not directly associated with the Timeline.
This is an abstract class, so you need to implement the void handle(long now) method, where now is the timestamp in nanoseconds.
This method will be called at the beginning of every frame refresh.
Not to be confused with the javax.swing.Timer class!
Fall 2017
CISC124 - Prof. McLeod

23. JavaFX Timeline Animation, Cont.
Start a Timeline by invoking .play() or even better .playFromStart(), which stops the current animation, if running, and re-starts it from the beginning.
Stop a Timeline by invoking .stop().
(Platform.exit() will stop all running threads including the Timeline thread.)
Start an AnimationTimer using .start() and stop it using .stop().
Fall 2017
CISC124 - Prof. McLeod

24. Aside – Maximum Frame Rate
Common monitor refresh rates are 60 Hz, for example.
There is no point in trying to update frames at any rate higher than this!
So, the lowest time between frames would be:
1000 / 60 or about 17 milliseconds.
A gamer would be very happy if his game updated at 60 fps. What is a more realistic expectation? How slow can an animation get before it gets “choppy”?
Fall 2017
CISC124 - Prof. McLeod

25. Two Oracle Demos See: Xylophone Demo – 3D drawing, and sound effects.
A larger demo: Tree Animation – All drawn shapes, animated, transparent, non-rectangular window, music…
Fall 2017
CISC124 - Prof. McLeod

26. Other JavaFX Topics
Packaging, Deployment & Distribution. Web page embedded, stand-alone, etc.
3D graphics.
Images and image manipulation.
2D and 3D Animation.
Lots of other controls!
Charts.
Visual effects and transformation.
Media (sound and video) playback.
Multi-threading.
Coding for Mobile Devices and Touchscreens.
Fall 2017
CISC124 - Prof. McLeod

27. Other Java Topics Other Collection Types. Iterators.
Streams. Sockets. Internet streams and web pages.
Regular expressions.
Working with databases.
Security.
Multi-threading (different than when using JavaFX!)
JDBC, JSP, JMX, JNDI, JAXP, JAXB, RMI, …
Fall 2017
CISC124 - Prof. McLeod

28. More Acronyms! Java Database Connectivity Java Server Pages
Java Management Extensions
Java Naming and Directory Interface
Java API for XML Processing
Java Architecture for XML Binding
Remote Method Invocation
Look for ‘Specialized Trails and Lessons’ in the Java Tutorial.
Fall 2017
CISC124 - Prof. McLeod