1. CISC124 Last Quiz this week. Topics listed in last Tuesday’s lecture.
Fall 2018 CISC124
11/27/2018
CISC124
Last Quiz this week. Topics listed in last Tuesday’s lecture.
Assn 4 sample solution posted.
Final Exam preparation page posted. (Let’s have a look.)
Fall 2018
CISC124 - Prof. McLeod
Prof. Alan McLeod

2. Today
Look at the “more OOP” version of the assignment 4 sample solution.
How JavaFX works.
Layout Panes.
Fall 2018
CISC124 - Prof. McLeod

3. Alternate Assn 4 Sample Solution
One common approach is to accept any value for an argument and then to check it against a limited collection of legal values.
But how about limiting the values that can be supplied for an argument to just legal values in the first place?
Implemented through the use of enums and classes with a collection of legal values as constant attributes.
Fall 2018
CISC124 - Prof. McLeod

4. Alternate Assn 4 Sample Solution, Cont.
With this approach, you can eliminate most of the argument checking code.
Easier to add/edit legal values since they will all be in the same place and not buried in the hierarchy code.
When building code, you can access enum and class members to choose from a supplied list of legal values.
Use the classes of constant attributes where enum variable names cannot be easily constructed.
Fall 2018
CISC124 - Prof. McLeod

5. Alternate Assn 4 Sample Solution, Cont.
Have a quick look at the alternate solution. Look for:
Enum<?> as a base type for any enum value.
Collections of enums in Finishes and Materials classes.
Use of public final static attributes in final classes, or public inner classes for values that cannot be legal enum values.
Prevention of public instantiation or extension of these classes.
How to name arguments and parameter types so that possible values are restricted.
The resulting code simplicity and the easy way legal argument collections can be changed or added.
Fall 2018
CISC124 - Prof. McLeod

6. Getting Started Using JavaFX - Topics
Translate the code the wizard gave us.
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 2018
CISC124 - Prof. McLeod

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

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

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

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

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

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

13. Aside - JavaFX API Docs
Are now included in the normal set of API docs that you can download.
Let’s have a look!
Fall 2018
CISC124 - Prof. McLeod

14. 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 2018
CISC124 - Prof. McLeod

15. 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 2018
CISC124 - Prof. McLeod

16. 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 2018
CISC124 - Prof. McLeod

17. Pane Objects
In order to design your window you need to understand how the different Pane objects work.
From the JavaFX API Tree:
Fall 2018
CISC124 - Prof. McLeod

18. Pane Objects, Cont. Won’t discuss:
DialogPane – Used as the base container for customized dialog windows. We can just use the built-in dialogs. We don’t need to design our own.
PopupControl.CSSBridge – Seems to be mostly for internal use.
Fall 2018
CISC124 - Prof. McLeod

19. Aside – Layout Managers
Each pane is associated with a different layout manager – an algorithm that determines where controls are placed within the pane and often their size.
Provides flexibility during design and during runtime when the size of the window is changed or the window is viewed on a different OS (or even just a different monitor resolution!) than the one on which it was designed.
Fall 2018
CISC124 - Prof. McLeod

20. Layout Managers – A Reference
A Nice Reference – “Working with Layouts in JavaFX”:
Fall 2018
CISC124 - Prof. McLeod

21. Aside – Absolute Positioning
Used by Microsoft’s Visual Studio .NET, for example.
Control positions and sizes (in pixels) are all absolute. The visual editor helps you assign default values and to line up controls.
But .NET is designed to run on one OS only…
You can still use absolute positioning in JavaFX, but you are giving away some convenience.
Fall 2018
CISC124 - Prof. McLeod

22. BorderPane
BorderPane lays out components in top, left, right, bottom, and center positions:
Fall 2018
CISC124 - Prof. McLeod

23. BorderPane, Cont. For example, to add a Button to the Top position:
BorderPane bPane = new BorderPane();
Button myButton = new Button(“Click Me!”);
bPane.setTop(myButton);
A component adopts its preferred size if it is smaller than the available region.
Center swells to occupy neighbouring positions if they are empty.
Fall 2018
CISC124 - Prof. McLeod

24. BorderPane, Cont.
You can add margins around a component by using an Insets object with the static .setMargin() method.
You can also specify alignment within a position using a value from the Pos enum and the static .setAlignment() method.
This layout is good for blocking out an entire window into sub-regions and then you use another layout in the regions of interest.
Fall 2018
CISC124 - Prof. McLeod

25. BorderPane, Cont. See FXProjectBorderPane
Test control positioning, alignment and sizing.
Setting individual control properties one at a time will be painful, especially when the properties are all being set to the same value…
Fall 2018
CISC124 - Prof. McLeod

26. Aside – Running JavaFX Lecture Notes Code
Create a blank JavaFX project.
Remove any files in the application folder.
In a file browser, unzip the archive (*.zip) file to the application folder of the project.
At the moment this is just Main.java and some also have application.css.
Back in eclipse, use <F5> to refresh the project listing.
Fall 2018
CISC124 - Prof. McLeod

27. Aside - Component Sizing
Padding
Border
Margin
Unless you define a preferred size the calculated size is based on the size of the rendered label plus a default padding size between the label and the border.
You can also change the size of the margin in code.
Fall 2018
CISC124 - Prof. McLeod

28. AnchorPane
Components are anchored at a specified distance from the edge of the Pane using the static methods:
“value” is in pixels as a distance from the border of the pane. Why a double?
Fall 2018
CISC124 - Prof. McLeod

29. AnchorPane, Cont.
See FXProjectAnchorPane. Here is the interesting part:
AnchorPane root = new AnchorPane();
Button leftTopButton = new Button("Left Top");
leftTopButton.setFont(new Font("Consolas", 20));
Button rightBottomButton = new Button("Right Bottom");
rightBottomButton.setFont(new Font("System", 18));
Label leftBottomLabel = new Label("Left Bottom");
leftBottomLabel.setFont(new Font("Times New Roman", 22));
AnchorPane.setLeftAnchor(leftTopButton, 10.0);
AnchorPane.setTopAnchor(leftTopButton, 10.0);
AnchorPane.setRightAnchor(rightBottomButton, 10.0);
AnchorPane.setTopAnchor(rightBottomButton, 10.0);
AnchorPane.setBottomAnchor(rightBottomButton, 10.0);
AnchorPane.setLeftAnchor(leftBottomLabel, 80.0);
AnchorPane.setBottomAnchor(leftBottomLabel, 80.0);
root.getChildren().addAll(leftTopButton, leftBottomLabel, rightBottomButton);

30. AnchorPane, Cont. Note the effect of window re-sizing.
Note how two or more anchors can combine to change the size of the control away from its calculated/preferred size.
This is another relatively crude layout manager that might be best used to lay panes out in a window.
Fall 2018
CISC124 - Prof. McLeod

31. Aside – Pane “Children”
Nodes added to a pane are also called “Children”.
Add nodes to a pane by invoking the .add() or .addAll() methods on the children collection owned by the pane. The .addAll() method can also accept a Collection<? extends Node> object.
The .getChildren() method of the pane object “exposes” its children collection.
Fall 2018
CISC124 - Prof. McLeod

32. FlowPane
Piles children into the pane in the order in which they are added from left to right (by default).
The children wrap around if the available space is full.
See FXProjectFlowPane. See what happens when you re-size the window. Play with gaps, padding, default sizes and alignment.
Note the use of an ArrayList<Button> to hold buttons.
Why are some buttons larger than others?
Fall 2018
CISC124 - Prof. McLeod