Java FX GUI. Pieter van den Hombergh. May 31, Fontys Hogeschool voor Techniek en Logistiek. Java FX GUI. Pieter van den Homb

Transcription

1 ergh Fontys Hogeschool voor Techniek en Logistiek May 31, 2016 ergh/fhtenl May 31, /10

2 JAVA FX Application A java fx gui application uses a different way to start. A javafx application extends javafx.application.application It does not use main(...); main is in as fall back. Instead application.launch(string[] args) is used internally, which initializes javafx and then calls the real entry point start(stage primarystage), which is prescribed as abstract in super Application. A scene graph is the starting point of the GUI application. Not a graphical element but a set of connected nodes. Graph as in tree or list, e.g. object diagram. ergh/fhtenl May 31, /10

3 The Scene Graph The scene graph has a root (think tree) and consists of Nodes, which can be parent nodes with some specializations and lead nodes. All nodes except root have a parent. A node can have only one parent. If set to another parent it will automatically be removed from the first parent. Visible nodes should only be attached or modified on the Java FX Application thread. Non-attached or Visible nodes can be computed if (parallel) background threads. coordinates and dimensions as in swing with the exceptions that javafx used doubles throughout for the coordinates like x an y. ergh/fhtenl May 31, /10

4 Cascading Style Sheets All nodes can have a style applied, in css style. Much like in HTML, syntax is similar, properties not always. Use of -fx- prefix. Allows separation (as in separation of work and expertise/talent) between functionality and graphical design. ergh/fhtenl May 31, /10

5 Time base: Pulse Dynamics in the graphics are triggered by a pulse event. The Pulse is topped and 60 frames per second. Size and layout changes are tied to the pulse. Css evaluation is also tied to the pulse. By doing a evaluation only once per pulse, to avoid to big performance degradation. ergh/fhtenl May 31, /10

6 Animation, Timeline, KeyFrames Java FX has extensive support for animations. Concepts: Timeline, KeyFrames and KeyValues, AnimationTimer. Pulse (Frame) is the time base and the timer listener are called every frame. A Timeline is a set of KeyFrames with transitions between them. KeyFrames are a bunch of KeyValues, which are some FX property and an end value, to which the value will be interpolated. All KeyFrames in a TimeLine have a similar set of KeyValues, which describe the animation. Interpolation can be discrete, linear or curved (spline, tangent). KeyFrames can also trigger events. ergh/fhtenl May 31, /10

7 Example Interpolator: Tangent Figure: Source: javadoc javafx.animation.interpolator ergh/fhtenl May 31, /10

8 Extensive use of FX Binding A KeyValue is composed of an FX WritableValue plus an end value. In short: Binding: Attaching values to other values and let them change in concert. All kinds of values: Positions (DoubleProperty) and coordinates, opacity, but also Actual Reference types, like next image. ergh/fhtenl May 31, /10

9 Some tutorials on You Tube The following three part tutorial starts very simple ands show the use of a timeline, animation, opacity and event handling part 1 part 2 part 3 Baroque animation and graphics can come at a cost. It you want some considerations on speeding up your FX GUI app, look at Performance tuning The concepts in this performance tuning also apply to other graphics technologies: Avoid work that no one will see? So work hard on being lazy... ergh/fhtenl May 31, /10

10 More info, questions and tasks Any questions? Ask them now. More can be found at the Oracle javafx tutorial website and various other places. http: //docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm Final task this semester (Spring 2015): Java FX workshop by Kristjan Skutta and Marc Kempin. See the java2 website. ergh/fhtenl May 31, /10