1. CISC124 Quiz 2 grading underway.
Fall 2017 CISC124
9/15/2018
CISC124
Quiz 2 grading underway.
Quiz 3 next week in lab. Specifics on next slide.
Last assignment is due on last day of class.
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

2. Quiz 3 Topics Everything up to and including tomorrow’s lecture:
Enumerated Types.
Inheritance.
Polymorphism.
Interfaces, Anonymous Classes, Inner Classes, Abstract Classes.
ArrayList<T> Collection Type.
Generics: Generic Classes & Methods, Use of Wildcards. The Class<T> Object.
Lambda Functions.
Method References.
Fall 2017
CISC124 - Prof. McLeod

3. Quiz 3 Topics, Cont.
GUI Design. How JavaFX works.
And older topics such as writing methods, loops, conditionals, arrays and encapsulation are still fair game.
Fall 2017
CISC124 - Prof. McLeod

4. Today Event-driven programming. Overview and Features of JavaFX.
JavaFX in Eclipse.
Fall 2017
CISC124 - Prof. McLeod

5. Event-Driven Programming
Fall 2013 CISC124
Event-Driven Programming
So far, for assignments, you have written single threaded “batch” programs – the coder (you!) controls the flow of execution.
For event-driven programs, the user controls the flow by initiating events.
A GUI interface consists of components contained within a frame (or “window”). Components and even the frame itself can respond to events.
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

6. Possible Events Some things that can trigger code execution:
Left mouse click down on a command button.
Left mouse click down on any component.
Similarly for any mouse button.
Similarly for holding a mouse button down.
Similarly for mouse button up.
Double click on a component…
Cursor over a component.
Cursor leaving a component.
Cursor hovering over a component.
Component has focus or has lost focus.
Component contents have changed.
Alt-key or Cntrl-key or Shift-key, etc…
Fall 2017
CISC124 - Prof. McLeod

7. Events, Cont.
Most events you ignore – your interface does not have to respond to every possible keyboard and mouse initiated event – that would be crazy!!
To respond to an event in code, you attach an Event Handler object to a component. When an event occurs the handler receives an object which contains information about the source of the event (which mouse button, etc.)
You decide which events are of interest and what you want your program to do when these events occur.
Fall 2017
CISC124 - Prof. McLeod

8. GUI Construction Construction of a Graphical User Interface involves:
Fall 2013 CISC124
GUI Construction
Construction of a Graphical User Interface involves:
Creating the design of the window – choosing components (buttons, labels, text boxes, etc.) and where they are positioned in the window.
Changing properties, including appearance properties, of the components.
Adding and linking functionality to events, where needed.
Repeating these steps for each window!
Connecting the program flow between windows.
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

9. History of GUI Components in Java
Fall 2013 CISC124
History of GUI Components in Java
Next slide has a hierarchy of Historical Interest:
These classes are part of the Component hierarchy in javax.swing
Swing was a modern improvement of the older AWT (“Abstract Windows Toolkit”) classes.
The following diagram is a simplified summary of the structure:
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

10. java.awt javax.swing Abstract Class Concrete Class Object Component
BorderLayout
FlowLayout
GridLayout
Container
Window
java.awt
Frame
javax.swing
JFrame
JComponent
Fall 2017
CISC124 - Prof. McLeod

11. javax.swing JFrame JComponent JPanel AbstractButton JLabel JMenuBar
JTextComponent
JMenuItem
JButton
JMenu
JTextArea
JTextField
Fall 2017
CISC124 - Prof. McLeod

12. JavaFX JavaFX classes are no longer part of this hierarchy.
JavaFX is a bold, new world of GUI coding!
Swing API code will no longer be updated. Any improvements will be in JavaFX packages only.
Library code used to be in a separate API, but now javafx.* packages are included in the distributed JRE (in jfxrt.jar).
You still need to configure eclipse to program in JavaFX (later).
Fall 2017
CISC124 - Prof. McLeod

13. JavaFX, Cont.
Swing was developed mostly for enterprise/business use, not for personal use and certainly not for mobile devices.
JavaFX is available in the API since Java 7.
The latest is called JavaFX 8.
There are 30 javafx.* packages in the API.
Jazzier controls and more support for portable devices.
Fall 2017
CISC124 - Prof. McLeod

14. “Client Technologies”
For lots of links on JavaFX and Swing see:
Fall 2017
CISC124 - Prof. McLeod

15. Getting Started Using JavaFX - Topics
Overview / Installation.
Start by looking at the Scene/Stage model.
What is a Scene Graph?
How components are laid out using Pane-based layout managers.
Look at the use of CSS style sheets.
Attach events to components.
Look at the use of FXML files and SceneBuilder.
Fall 2017
CISC124 - Prof. McLeod

16. JavaFX Overview
You can separate style and layout from functional code using *.css and *.fxml files. Very modern!
Contains a rich set of tools for:
Web browsing.
Media playing.
2D and 3D drawing and animation. Including many visual effects.
Taking advantage of hardware accelerated rendering.
Fall 2017
CISC124 - Prof. McLeod

17. JavaFX Overview, Cont. Already contains separate threads for:
The main application.
Rendering.
Media playback.
Over 50 controls, built-in.
A dozen built-in chart types.
2D and 3D transformations as well as many other visual effects can be applied to most controls.
Fall 2017
CISC124 - Prof. McLeod

18. Fall 2013 CISC124
JavaFX - Installation
You need to add e(fx)clipse to eclipse in order to have the libraries and tools you need to write JavaFX code.
You don’t need SceneBuilder but might like to play with it later.
See the Resources page on the course web site.
The homepage for e(fx)clipse is:
Fall 2017
CISC124 - Prof. McLeod
Prof. Alan McLeod

19. e(fx)clipse Version June, 2017: released version 3.0.0...
Follow the instructions on the course “Resources” page.
Fall 2017
CISC124 - Prof. McLeod

20. SceneBuilder Version
Latest installer build linked to the Gluon site is (Oct., 2017) for Java 9. Java 8, use version 8.4.1
A drag and drop visual editor that edits an *.fxml file in the background.
SceneBuilder can be invoked from within eclipse, but essentially runs outside of eclipse.
More later…
Fall 2017
CISC124 - Prof. McLeod

21. New JavaFX Project Wizard
Sets up quite an elaborate structure for you!
Don’t have more than one JavaFX project per eclipse project.
Let’s have a look!
Fall 2017
CISC124 - Prof. McLeod

22. New JavaFX Project Wizard, Cont.
Your GUI class needs to extend the javafx.application.Application class.
Your main() method must invoke the inherited launch() method to start the application. Supply the args from the main parameter list to launch().
The wizard overrides the start() method from Application and the parameter for start() is the Stage object for the window, called “primaryStage”.
Fall 2017
CISC124 - Prof. McLeod

23. New JavaFX Project Wizard, Cont.
An item (layouts, controls, images, etc.) is called a “node”.
Nodes are added to the Nodes hierarchy (next, next slide), and the root node of this hierarchy is added to the Scene object when it is instantiated (and it is given a size in pixels).
The Scene object is then put on the stage using the .setScene() mutator.
When the scene is all constructed the “curtains are raised” by invoking .show() on the stage object.
Fall 2017
CISC124 - Prof. McLeod

24. New JavaFX Project Wizard, Cont.
The wizard also adds a link to a CSS (“Cascading Style Sheet”) file for the scene, called “application.css”.
Initially the file is empty, but you can “skin” the scene using css style specifications for the window and any controls you are using.
You can do all this in your GUI class too, but using the css file allows you to separate style code from application code.
We’ll look into doing this a bit later. For now we’ll just use the default style (“Modena”).
Fall 2017
CISC124 - Prof. McLeod

25. JavaFX Scene Graph Here is part of the existing Node hierarchy: Node
Parent
Region
Control
Pane
Labeled
Fall 2017
CISC124 - Prof. McLeod

26. JavaFX Scene Graph, Cont.
Left-hand branch are containers – used to contain and organize other controls.
Right-hand branch are the controls.
Usually a container type object will be the “root”.
Fall 2017
CISC124 - Prof. McLeod

27. JavaFX Scene Graph, Cont.
There are many more classes extending nodes in this hierarchy. For example, some classes extending from Labeled:
Labeled
ButtonBase
Label
Button
CheckBox
ToggleButton
See the JavaFX API Tree diagrams for all the classes.
RadioButton
Fall 2017
CISC124 - Prof. McLeod

28. Aside - JavaFX API Docs
These are separate from the regular Java API docs.
You can download your own copy from:
Let’s have a look!
Fall 2017
CISC124 - Prof. McLeod

29. JavaFX Scene Graph, Cont.
Typically you build your GUI by first instantiating existing node objects. For example,
Label myLabel = new Label(“Hello!”);
In order to display the node in the window, you need to add the object you instantiated to the existing Scene Graph structure.
Fall 2017
CISC124 - Prof. McLeod

30. JavaFX Scene Graph, Cont.
In order to be able to place your nodes (or “controls”) where you want them, you add them to a Pane object.
A Pane child object includes a layout manager that decides where nodes can be placed.
A Pane object can be added to different type Pane objects as if it was a node itself to give you a great deal of flexibility in your layout.
Finally, the root pane object becomes the root of the scene object and the entire Scene Graph that you have constructed can be displayed.
Fall 2017
CISC124 - Prof. McLeod

31. Aside – Generating Import Statements
Eclipse is great at helping you generate a missing import statement if you try to use a class that you have not yet imported.
But: if you have a choice, make sure to choose the javafx one, rather than the class from javax.swing or java.awt.
Fall 2017
CISC124 - Prof. McLeod