24
JavaFX tables and charts Tecniche di Programmazione – A.A. 2013/2014
JavaFX tables and charts
Tecniche di Programmazione – A.A. 2013/2014
Summary
A.A. 2013/2014 Tecniche di programmazione 2
1. Data Tables
2. Charts
Tables
JavaFX programming
Table View
A.A. 2013/2014 Tecniche di programmazione 4
Tabular representation of
data
Multiple rows
Labeled columns
Lots of “automatic”
features
Warning – do not confuse
Grid Pane Table View
A.A. 2013/2014 Tecniche di programmazione 5
A layout element
Invisible
Arranges children in
rows/columns
A control node
2D data container
Strings and numbers, usually
javafx.scene.layout.GridPane javafx.scene.control.TableView<S>
Structure of a Table View
A.A. 2013/2014 Tecniche di programmazione 6
TableView<S>
The table container
<S>: The type of the
objects contained within
the TableView items list
TableColumn<S,T>
Nested TableColumn
objects (one per column)
Labeled columns
T - The type of the content
in all cells in this
TableColumn.
Table views are smart
A.A. 2013/2014 Tecniche di programmazione 7
Support for cell factories to easily customize cell contents in both rendering and editing states.
Specification of minWidth/ prefWidth/maxWidth, and also fixed width columns.
Width resizing by the user at runtime.
Column reordering by the user at runtime.
Built-in support for column nesting
Different resizing policies to dictate what happens when the user resizes columns.
Support for multiple column sorting by clicking the column header (hold down Shift keyboard key whilst clicking on a header to sort by multiple columns
Table Columns are «smart»
A.A. 2013/2014 Tecniche di programmazione 8
Can be resized
Programmatically (minWidth/ prefWidth/maxWidth)
Interactively (mouse dragging)
Have its visibility toggled
Can display header text
Can display any nested columns
May have a context menu when the user right-clicks the
column header area
Enable the contents of the table to be sorted
(using comparator, sortable and sortType)
Table data
A.A. 2013/2014 Tecniche di programmazione 9
TableView<S> is customized with the class of data
objects (beans)
E.g., TableView<Person>
The contents of the table are stored in the ‘items’
property
table.setItems(teamMembers);
table.getItems().add(onePerson) ;
If possible, use ObservableList<S>
Table items store data, they don’t display it
Displaying column data
A.A. 2013/2014 Tecniche di programmazione 10
Each column is mapped to one property of the bean <S>
Each column must «know» what property it must display
TableColumn is customized with the class of the data property
A suitable cell factory method must be created, for creating
new cells and extract the relevant property from the bean
For simple cases, we may use the pre-defined
PropertyValueFactory that understands the bean naming
conventions
Example
A.A. 2013/2014 Tecniche di programmazione 11
TableColumn<Person,String> firstNameCol = new TableColumn<Person,String>("First Name"); // or firstNameCol.setText("First Name"); firstNameCol.setCellValueFactory( new PropertyValueFactory("firstName") );
Class Person { private String firstName ; public String getFirstName() {...} ... }
TableView<Person>
Charts
JavaFX programming
Some Nodes (Charts)
A.A. 2013/2014 Tecniche di programmazione 13
BarChart AreaChart
BubbleChart
PieChart
LineChart
ScatterChart
Main classes (javafx.scene.chart)
A.A. 2013/2014 Tecniche di programmazione 14
Chart
XYChart
AreaChart BarChart
BubbleChart LineChart
ScatterChart StackedAreaChart
StackedBarChart
PieChart
Main ingredients of a XYChart
A.A. 2013/2014 Tecniche di programmazione 15
Generics: javafx.scene.chart.XYChart<X,Y>
Axes
Axis<X>, Axis<Y>
May be ValueAxis (numeric) or CategoryAxis (string)
Data series (property .data)
Defined as XYChart.Series<X,Y>
One or more series may be defined (a List)
Data points (property .data)
Defined as XYChart.Data<X,Y>
Data points are Added to a Series
Decorative items: Title, legend, …
Visually…
A.A. 2013/2014 Tecniche di programmazione 16
Chart title
Chart legend
Data series
Data items
Y Axis
X Axis
XYChart structure
A.A. 2013/2014 Tecniche di programmazione 17
XYChart<X,Y>
chart
CategoryAxis
ValueAxis<Y>
.data
ObservableList<XYChart.Series<X,Y>>
XYChart structure
A.A. 2013/2014 Tecniche di programmazione 18
XYChart<X,Y>
chart
XYChart.Series<X,Y>
series1
XYChart.Series<X,Y>
series2 CategoryAxis
ValueAxis<Y>
.data .data
.data
ObservableList<XYChart.Series<X,Y>>
.name
.name
XYChart structure
A.A. 2013/2014 Tecniche di programmazione 19
XYChart<X,Y>
chart
XYChart.Series<X,Y>
series1
XYChart.Series<X,Y>
series2 CategoryAxis
ValueAxis<Y>
.data
XYChart.Data<X,Y>
data item 1
XYChart.Data<X,Y>
data item 2 XYChart.Data<X,Y>
data item 3
XYChart.Data<X,Y>
data item 8
XYChart.Data<X,Y>
data item 9 XYChart.Data<X,Y>
data item 10
.data
.data
ObservableList<XYChart.Data<X,Y>> ObservableList<XYChart.Series<X,Y>>
.name
.name
.xValue
.yValue
.extraValue
Axes and orientation
A.A. 2013/2014 Tecniche di programmazione 20
XYCharts need to have 2 axes defined
CategoryAxis: <T> is String
ValueAxis: <T> must be a numeric type
Inherits from java.lang.Number
Normal orientation
xAxis is a CategoryAxis
yAxis is a ValueAxis
Rotated (e.g. horizontal bars)
xAxis is a ValueAxis
yAxis is a CategoryAxis
Axis<T>
CategoryAxis<T> ValueAxis<T>
Resources
Introduction to JavaFX
Resources
A.A. 2013/2014 Tecniche di programmazione 22
API
http://docs.oracle.com/javafx/2/api/index.html
Slides/Tips
http://www.slideshare.net/steveonjava/java-fx-20-a-developers-guide
http://refcardz.dzone.com/refcardz/getting-started-javafx
Tutorials/Articles
http://docs.oracle.com/javafx/2/events/jfxpub-events.htm
http://amyfowlersblog.wordpress.com/2011/06/02/javafx2-0-layout-a-class-tour/
Examples (Downloads)
JavaFX Demos and Samples, at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
Resources
A.A. 2013/2014 Tecniche di programmazione 23
Properties and Bindings
http://docs.oracle.com/javafx/2/binding/jfxpub-binding.htm
http://thierrywasyl.wordpress.com/2012/07/29/properties-and-
bindings-in-javafx/
Licenza d’uso
A.A. 2013/2014 Tecniche di programmazione 24
Queste diapositive sono distribuite con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo (CC BY-NC-SA)”
Sei libero: di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico,
rappresentare, eseguire e recitare quest'opera
di modificare quest'opera
Alle seguenti condizioni: Attribuzione — Devi attribuire la paternità dell'opera agli autori
originali e in modo tale da non suggerire che essi avallino te o il modo in cui tu usi l'opera.
Non commerciale — Non puoi usare quest'opera per fini commerciali.
Condividi allo stesso modo — Se alteri o trasformi quest'opera, o se la usi per crearne un'altra, puoi distribuire l'opera risultante solo con una licenza identica o equivalente a questa.
http://creativecommons.org/licenses/by-nc-sa/3.0/
