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

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

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

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

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

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: http://code.makery.ch/blog/javafx-dialogs-official/ Winter 2019 CMPE212 - Prof. McLeod

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

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

Other Built-In Windows FileChooser: http://docs.oracle.com/javafx/2/ui_controls/file-chooser.htm ColorPicker: http://docs.oracle.com/javafx/2/ui_controls/color-picker.htm DatePicker: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/date-picker.htm So easy to use! See FXFileAndColor project. Winter 2019 CMPE212 - Prof. McLeod

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

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

Canvas Control See: http://docs.oracle.com/javafx/2/canvas/jfxpub-canvas.htm 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

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

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

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

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

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

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

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

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

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