1. CISC124 Last Quiz this week. Topics listed in last Tuesday’s lecture.
Fall 2018 CISC124
11/26/2018
CISC124
Last Quiz this week. Topics listed in last Tuesday’s lecture.
Assn 4 sample solution posted.
Fall 2018
CISC124 - Prof. McLeod
Prof. Alan McLeod

2. Assignment 5, Getting Started
Have you installed e(fx)clipse and Scenebuilder?
You can design your window and think about how it will work without doing any coding.
What nodes will you need (labels, buttons, text boxes, radio buttons, list boxes?) and where will they go?
And what will they do?
How will you prevent illegal choices just through the design and operation of your window?
To get ahead – look at the code supplied for Exercise 11.
Fall 2018
CISC124 - Prof. McLeod

3. Today Continue: JavaFX Layout Panes. Using the style sheet. Fall 2018
CISC124 - Prof. McLeod

4. 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

5. 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

6. 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

7. 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

8. 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);

9. 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

10. 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

11. 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

12. GridPane
Possibly the hardest Pane to use but it offers the most control.
Grid based – you need to choose which position in the grid you will use for your component.
A column is sized to the widest component in that column.
Similarly the height of a row is determined by the tallest component in the row.
Fall 2018
CISC124 - Prof. McLeod

13. GridPane, Cont.
You can add internal gaps between rows and columns using .setHgap() and .setVgap().
Set gaps on the outside of the pane using .setPadding() and supply an Insets object.
The pane has two .add() methods you can use, one at a time, to add components:
.add(node, column#, row#)
.add(node, column#, row#, columnspan, rowspan)
Fall 2018
CISC124 - Prof. McLeod

14. GridPane, Cont.
During development invoke .setGridLinesVisible(true) to see the lines in the grid.
See FXProjectGridPane
Play with grid positioning, gaps in the grid, column spanning and alignment.
Fall 2018
CISC124 - Prof. McLeod

15. Using CSS
I’m getting rather tired of setting the font and font size for every control individually!
You can use the CSS – application.css – file to change the look of every component, the pane as well as making custom changes to individual components.
All this style code can now be removed from the *.java file!
Fall 2018
CISC124 - Prof. McLeod

16. Using CSS, Cont. See FXProjectGridPaneCSS
You can change colours, background images, foreground colours and apply shading effects and many other fun things!
And the *.css code is easy to port to other projects. You can define your own “skin” and apply it to all of your projects.
See
for a reference on css in javaFX.
Fall 2018
CISC124 - Prof. McLeod

17. Using CSS, Cont.
The “Unknown Property” warning and the lack of auto-complete features in the CSS editor seems to be a bug in the current version of e(fx)clipse.
The CSS seems to have been properly applied anyways.
Fall 2018
CISC124 - Prof. McLeod

18. Using CSS, Cont.
See FXProjectGridPaneCSSAllOut for some other changes using the style sheet.
It would also be nice to get rid of all the layout details as well. Later, we will use a *.fxml file and SceneBuilder for this. This will also allow us to lay out controls using a drag and drop visual editor.
The css editor itself does help quite a bit! Use <Cntrl>Spacebar to get hints.
Fall 2018
CISC124 - Prof. McLeod

19. HBox and VBox Panes
Pretty straight-forward. Less annoying than FlowPane – no wrapping.
See FXProjectHBox and FXProjectVBox.
These would either be used for very simple designs or within a region of another layout.
Fall 2018
CISC124 - Prof. McLeod

20. StackPane Pile controls on top of each other like a deck of cards.
Useful if control has a transparency, or you are building a tabbed dialog.
(No demo for this one!)
Fall 2018
CISC124 - Prof. McLeod

21. TilePane
Another grid based layout, but simpler than GridPane. More like FlowPane.
Controls are laid down in the order in which they are added.
You can specify a desired number of rows and/or columns, but the actual layout may change if needed.
Column widths and row heights are fixed to the largest control in that column or row (like GridPane).
No demo for this one either.
Fall 2018
CISC124 - Prof. McLeod

22. TextFlow
Supplies a means of combining Text objects into a single Pane along with “Rich Text” formatting options.
The advantage (over something like FlowPane, for example) is that the TextFlow pane will still line up all the text regardless of fonts and font sizes, as well as carrying out some sensible wrapping, if needed.
See FXProjectTextFlow.
Fall 2018
CISC124 - Prof. McLeod

23. TextFlow, Cont.
Note how the root is a Group object rather than the TextFlow object itself. TextFlow cannot be a root object for the Scene.
You can also add other node objects to a TextFlow such as drawn shapes, buttons and images.
Fall 2018
CISC124 - Prof. McLeod

24. Pane The root class for all the other pane classes.
You can use this class, but it does not have a layout manager.
All positioning is manual. You need to manually size (height, width) the component and specify the (x, y) positions.
Ouch!
Fall 2018
CISC124 - Prof. McLeod

25. Getting a Button to do Something
Use the .setOnAction() mutators to add an event handler to the button.
The handler for a mouse click event must implement EventHandler<ActionEvent>.
Four ways of doing this:
Another separate class. (we’ll skip this one…)
A private inner class.
An anonymous class.
A Lambda function.
Fall 2018
CISC124 - Prof. McLeod

26. Project11InnerClass
The handler object can be private and is contained within the same class that defines the rest of the window.
Fall 2018
CISC124 - Prof. McLeod

27. Project11AnonymousClass
Gets rid of private inner class and the need for the Label object to be an attribute.
But it has added some “bloat” to the start() method.
(An anonymous class has to be short!)
Fall 2018
CISC124 - Prof. McLeod

28. Project11Lambda Wow! That was easy!
Button changeButton = new Button("Change Label");
changeButton.setOnAction(event -> {
if (changeLabel.getText().equals("Hello!"))
changeLabel.setText("Goodbye!");
else
changeLabel.setText("Hello!");
});
Wow! That was easy!
Fall 2018
CISC124 - Prof. McLeod

29. Project11Lambda, Cont.
This works because the EventHandler<T extends Event> interface is a Functional Interface – an interface consisting of just a single abstract function:
void handle (T event);
Event is the parent class for many events, so this same handler can be used for a wide variety of event types.
Fall 2018
CISC124 - Prof. McLeod