VISUAL

PROGRAMMING
Advanced JavaFX

MUSBAH J. MOUSA
IYAS A. I. ESHAIKHKHALIL

1
OUTLINES
• JavaFX CSS
• Coordinate Transformations
• TableView
• MVC Model
• FXML

2
JAVAFX CSS
• A JavaFX style property is defined with a prefix –fx- to
distinquish it from a property in CSS.
• Example:
.my-rect {
-fx-fill: yellow;
-fx-stroke: green;
-fx-stroke-width: 5;
-fx-stroke-dash-array: 12 2 4 2;
}

• All the available JavaFX properties are defined in

http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssre
f.html
.

3
 STYLE CLASS AND STYLE ID
• A style sheet uses the style class or style id to define styles.
• Mutiple style classes can be applied to a single node.
• Single style id can be applied to a single node.
• The syntax .styleclass defines a style class. The syntax
#styleid defines a style id.

4
COORDINATE
TRANSFORMATIONS
• JavaFX supports coordinate transformations using translation,
rotation, and scaling.

5
TRANSLATIONS
• You can use the methods:
• setTranslateX(double x)
• setTranslateY(double y)
• setTranslateZ(double z)
in the Node class to translate the coordinates for a node.
• Note: Calls to the translate methods for a node do not alter its
x, y, and z properties.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14
0
1
2
3
4
previous position
5 translation of (-6, 4)
6 current position
7

6
SCALING
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14
0
1
2
• You can use the methods: 3 original size
4
• setScaleX(double sx) 5 new size after applying
scaling factor (x = 2, y =2)
• setScaleY(double sy) 6
7
• setScaleY(double sy)
in the Node class to specify a scaling factor.
• The node will appear larger or smaller depending on the
scaling factor.

7
TableView
You can display tables using the TableView class.

8
TableView
• The JavaFX TableView class uses a set of related classes to
do its job.
• These classes are:
• TableColumn
• TableRow
• TableCell
• TablePosition
• TableViewFocusModel
• TableViewSelectionModel

9
 The TableView Class
javafx.scene.control.Control The getter and setter methods for property values and
a getter for property itself are provided in the class, but
omitted in the UML diagram for brevity.
javafx.scene.control.TableView<S>

-editable: BooleanProperty Specifies whether this TableView is editable. For a cell to be

editable, TableView, TableColumn, and TableCell for the cell
should all be true.
-items: The data model for the TableViee.
ObjectProperty<ObservableList<S>>
-placeholder: ObjectProperty<Node> This Node is shown when table has no contents.
-selectionModel: ObjectProperty< Specifies single or multiple selections.
TableViewSelectionModel<S>>
+TableView() Creates a default TableView with no content.
+TableView(items: ObservableList<S>) Creates a default TableView with the specified content.

10
TableColumn
• To create a TableView you need to add one or more
TableColumn instances to the TableView instance.
• A TableColumn represents a vertical column of values.

11
The TableColumn Class
java.lang.Object The getter and setter methods for property values and
a getter for property itself are provided in the class, but
omitted in the UML diagram for brevity.
javafx.scene.control.TableColumn<S, T>

-editable: BooleanProperty Specifies whether this TableColumn allows editing.

-cellValueFactory: The cell value factory to specify how to populate all cells within a
ObjectProperty<Callback<TableColumn. single column.

CellDataFeatures<S,T>,ObservableValue
<T>>>
-graphic: ObjectProperty<Node> The graphic for this TableColumn.
-id: StringProperty The id for this TableColumn.
-resizable: BooleanProperty Indicates whether the column is resizable.
-sortable: BooleanProperty Indicates whether the column is sortable.
-text: StringProperty Text in the table column header.
-style: StringProperty Specify the CSS style for the column.
-visible: BooleanProperty Specify whether the column is visible (default: true).
+TableColumn() Creates a default TableColumn.
+TableColumn(text: String) Creates a TableView with the specified header text.

12
TableColumn Cell Value
Factory
• A TableColumn must have a cell value factory set on it.
• The cell value factory extracts the value to be displayed in each
cell (on each row) in the column.
• You can use PropertyValueFactory to extract the values from
your data class.
• You can use MapValueFactory to extract the values from a
Map.

13
TableView Example
Data Class
public class Student{
private StringProperty name;
private IntegerProperty Id;
private ObjectProperty<Date> dateOfBirth;

// constructor

// getters, setters, and property methods

}

14
TableView Example
Create TableView
// Create TableView
TableView<Student> tableView = new TableView<>();

15
TableView Example
Create Cell Factories
// Create Cell Factories
PropertyValueFactory nameFactory = new PropertyValueFactory<Student, String>("name");
PropertyValueFactory idFactory = new PropertyValueFactory< Student, Integer>("id");

Note:
• The property name “name” will match the getter method
getName() of the Student objects which contain the values are
displayed on each row.
• And the property type “String” will match the getter method
return type.

16
TableView Example
Create Cell Factories
// Create Cell Factories
PropertyValueFactory nameFactory = new PropertyValueFactory<Student, String>("name");
PropertyValueFactory idFactory = new PropertyValueFactory<Student, Integer>("id");

public class Student{

private StringProperty name;
...
public String getName(){
return name.get();
}
...
}

17
TableView Example
Create Columns
// Create TableColumns
TableColumn nameColumn = new TableColumn("Name");
nameColumn.setMinWidth(100);
nameColumn.setCellValueFactory(nameFactory);

TableColumn idColumn = new TableColumn("Id");

idColumn.setMinWidth(50);
idColumn.setCellValueFactory(idFactory);

18
TableView Example
Final steps
// Add the columns to the TableView
tableView.getColumns().addAll(nameColumn, idColumn);

// Add data to the Table View

tableView.getItems().add(new Student("Ahmad", 125));

19
MVC (MODEL-VIEW-
CONTROLLER)
Model
id=102
Database name=Muhamad
gender=Male Controller
birthDate=12/12/2000
[email protected]

addButtonAction

View
Model
id=102
name=Muhamad
gender=Male
birthDate=12/12/2000
[email protected]

20
FXML
The .fxml file describes the user interface.
You write the code to implement the logic in the controller file
The @FXML annotation denotes that these data fields are linked
to the text fields in the user interface.

21
LINKING VIEW WITH
CONTROLLER

Link the FXML file to the controller

<BorderPane …
fx:controller="javafx.chapter31.CalculatorFXMLController">
<bottom> …
<children>
<Button mnemonicParsing="false"
onAction="#addButtonAction" text="Add"
/>
…
Link to a method
inside the controller

22
ANY QUESTIONS?

23