1. Java Programming
Java FX

2. Java APIs for Building GUIs
AWT
Swing
SWT
Eclipse JFace
JavaFX
Other

3. Building a GUI Components Components Containers Graphics Layouts
Events and Listeners
Look and Feel
Threads
Architectural Models: MV, MVC

4. Java FX http://docs.oracle.com/javafx/
Included in java. Have to use a specific jar not automatically loaded jfxrt.jar
Possible future replacement for Swing

5. Java FX Application Javafx.application.Application init()
start(Stage stage) - abstract
stop()
Application FX thread : init does not run on thread, start runs on the thread => Stage should be constructed inside the start method

6. Sample Application public class MyApp extends Application {
public void start(Stage stage) {
Circle circ = new Circle(40, 40, 30);
Group root = new Group(circ);
Scene scene = new Scene(root, 400, 300);
stage.setTitle("My JavaFX Application");
stage.setScene(scene); stage.show(); }

7. GUI Components javax.scene.control
Node: base class for everything composing the GUI hierarchy
ImageView: contains Image
MediaView: plays media
WebWiew: display the web content managed by a WebEngine
Canvas: an image that can be drawn through a drawing context
Chart, Axis
Control: base class for all controls
Button, CheckBox, RadioButton, ToggleButton
ComboBox, ColorPicker, ChoiceBox
Label
TextField, TextArea, PasswordField
ScrollBar, Slider
ListView, TableView, TreeView, Cell
Menu, Menu Item, MenuBar, Separator

8. Components Containers
Window
Stage
Scene
Region: can be styled with CSS->Chart, Pane
TabPane, Tab

9. Graphics Shape: a type of Node Arc Circle
CubicCurve, QuadCurve (Bezier)
Ellipse
Line
Path
Polygon
Polyline
Rectangle
Text

10. GraphicsContext Node ->Canvas Canvas.getGraphicsContext2D
Drawing on a Canvas in a buffer
Draw arcs, images, curves, rectangles, polygons, etc
Also allows for transformations

11. Layouts javafx.layout.Pane: absolute positioning
AnchorPane: anchor children inside the pane (setTop/Bottom/Left/RightAnchor(Node child, Double value)
BorderPane: provides 5 positioning areas: setTop/Bottom/Left/Right/Center(Node child)
FlowPane: place children in the order they come wrapping at the edge of the pane
GridPane: place children in a matrix: setRow/ColumnIndex(Node child, int index)
HBox: place children in a single horizontal row
StackPane: place children on top of each other
TilePane: place children in a grid with equally sized tiles
VBox: place children in a single vertical row

12. Sample GridPane //create the root of the scene
GridPane root = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(25);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(75);
col2.setHgrow(Priority.ALWAYS);
root.getColumnConstraints().addAll(col1, col2);
MenuBar menuBar = new MenuBar();
GridPane.setRowIndex(menuBar, 0);
GridPane.setColumnIndex(menuBar, 0);
GridPane.setColumnSpan(menuBar, 2); …
root.getChildren().addAll(menuBar, commandsListView, toolBar, blocksPane);

13. Events and Listeners javax.event.Event
ActionEvent
javax.scene.input.InputEvent (DragEvent, KeyEvent, MouseEvent, TouchEvent)
javax.scene.control.ListView.EditEvent
javax.scene.control.TableColumn.CellEditEvent
javax.stage.WindowEvent
javax.event.EventType: Nodes define their relevant EventType (s) ListView.EDIT_START_EVENT or Events define relevant event types: KeyEvent.KEY_PRESSED
javax.event.EventHandler
Node.addEventHandler(EventType, EventHandler)

14. Listening on a Button Button moveActionButton = new Button("Move");
moveActionButton.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
if (guiController != null){
guiController.moveActionHandler(); }
});
//setOnXXX(EventHandler<? extends Event>)

15. Look and Feel CSS (W3C CSS version 2.1)
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");
Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1"); //setStyle
Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");
Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");
Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");
.root{
-fx-font-size: 16pt;
-fx-font-family: "Courier New";
-fx-base: rgb(132, 145, 47);
-fx-background: rgb(225, 228, 203); }
.root{
-fx-font-size: 16pt;
-fx-font-family: "Courier New";
-fx-base: rgb(132, 145, 47);
-fx-background: rgb(225, 228, 203); }
.root{
-fx-font-size: 16pt;
-fx-font-family: "Courier New";
-fx-base: rgb(132, 145, 47);
-fx-background: rgb(225, 228, 203); }
.root{
-fx-font-size: 16pt;
-fx-font-family: "Courier New";
-fx-base: rgb(132, 145, 47);
-fx-background: rgb(225, 228, 203); }
.button
.check-box
.scroll-bar
.button
.check-box
.scroll-bar
.button
.check-box
.scroll-bar
#my-button
#shaded-hbox
#my-button
#shaded-hbox

16. Threads Main application thread
public class ApplicationController extends Application
public static void main(String[] args) {
launch(args); }
JavaFX application thread: the same with the main application thread
Most of the GUI related operations should happen on this thread
Background threads: execute larger tasks and communicates progress

17. Worker(s)
Task
final MoveCommand mc = new MoveCommand(null, blockToMove, onTopOf);
//create a task to perform this command in order not to block the GUI
final Task<ObservableList<ICommand>> executingTask =
new Task<ObservableList<ICommand>>() {
@Override
protected ObservableList<ICommand> call() throws Exception {
try{
//need to catch any exception here
commandsManager.performCommand(mc);
}catch(Exception e){
logger.severe(e.toString()); }
return commandsHistoryList; };

18. Task progress Task<Integer> task = new Task<Integer>() {
@Override
protected Integer call() throws Exception {
int iterations;
for (iterations = 0; iterations < ; iterations++) {
if (isCancelled()) {
updateMessage("Cancelled");
break; }
updateMessage("Iteration " + iterations);
updateProgress(iterations, );
return iterations; };
ProgressBar bar = new ProgressBar();
bar.progressProperty().bind(task.progressProperty());
new Thread(task).start();

19. Properties ObservableValue<T>: addListener(ChangeListener),
T getValue()
WritableValue
setValue(T)
bind (ObservableValue<? Extends T>)
bindBidirectional(Property<T>)

20. Bindings Calculate values depending on one or more sources
Binding extends ObservableValue thus having the getValue() operation and listeners on changes
ObservableList<?> getDependencies()
void invalidate() : mark the binding as invalid
Various methods return bindings in order to allow reactions on some value modification events (see next slide)

21. Sample Binding public class Main {
public static void main(String[] args) {
IntegerProperty num1 = new SimpleIntegerProperty(1);
IntegerProperty num2 = new SimpleIntegerProperty(2);
NumberBinding sum = num1.add(num2);
System.out.println(sum.getValue());
num1.set(2); }

22. Invalidations Observable: addListener(InvalidationListener)
Lazy behavior: implementations of Observable may be lazy- content not recomputed until requested

23. MVC

24. MVC Collaborations

25. BlocksWorld MVC

26. Application setup @Override public void init() throws Exception {
super.init();
//The logger
logger = Logger.getAnonymousLogger();
//The model
commandsManager = new CommandsManager();
//The GUI view
guiApp = new MainGUI();
//The GUI controller
guiController = new GUIController(guiApp, commandsManager, logger);
//Link the GUI view with its controller
guiApp.setGuiController(guiController);
//The Console view
cmdApp = new MainCmd();
//The Console controller
cmdController = new CmdController(cmdApp, commandsManager, logger);
//Link the Cmd view with its controller
cmdApp.setCmdController(cmdController); }

27. Startup and cleanup @Override public void start(Stage primaryStage) {
//start the gui part
guiApp.initialize(primaryStage);
//give a chance to the gui controller to prepare things
guiController.initialize();
primaryStage.show();
//start the console part
cmdController.initialize();
cmdApp.start(); }
public void stop() throws Exception {
super.stop();
guiController.cleanup();
cmdController.cleanup();

28. GUI Controller Initialization
public void initialize(){
//relate the commands list in the gui with the commands history
commandsHistoryList = FXCollections.observableList(
commandsManager.getCommands());
guiView.getCommandsListView().setItems(commandsHistoryList);
//register the commands executions listener
commandsManager.registerListener(commandsExecutionsListener);
// creates the binding for the commands history list in the view
//in order to invalidate it on execution updates
listBinding = new ListBinding<ICommand>()
@Override
protected ObservableList<ICommand> computeValue() {
//the result is not quite important here
return commandsHistoryList; } };
guiView.getCommandsListView().itemsProperty().bind(listBinding);

29. GUI Updates private class CommandsExecutionsListener implements
ICommandsManagerListener{
@Override
public void executedCommand(ICommand command) {
//run on the FX GUI thread
Platform.runLater(new Runnable() {
public void run() {
//invalidate the list binding in order to enforce
//the historical commands list in the GUI to update
listBinding.invalidate(); }
});