JavaFX tables and charts - polito.itelite.polito.it/.../2014/slide/03-javafx-tables-charts.pdfData...

transcript

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

Tabular representation of

Multiple rows

Labeled columns

Lots of “automatic”

features

Warning – do not confuse

Grid Pane Table View

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

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

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»

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

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

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

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)

BarChart AreaChart

BubbleChart

PieChart

LineChart

ScatterChart

Main classes (javafx.scene.chart)

XYChart

AreaChart BarChart

BubbleChart LineChart

ScatterChart StackedAreaChart

StackedBarChart

PieChart

Main ingredients of a XYChart

Generics: javafx.scene.chart.XYChart<X,Y>

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…

Chart title

Chart legend

Data series

Data items

Y Axis

X Axis

XYChart structure

XYChart<X,Y>

CategoryAxis

ValueAxis<Y>

ObservableList<XYChart.Series<X,Y>>

XYChart structure

XYChart<X,Y>

XYChart.Series<X,Y>

series1

XYChart.Series<X,Y>

series2 CategoryAxis

ValueAxis<Y>

.data .data

ObservableList<XYChart.Series<X,Y>>

XYChart structure

XYChart<X,Y>

XYChart.Series<X,Y>

series1

XYChart.Series<X,Y>

series2 CategoryAxis

ValueAxis<Y>

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

ObservableList<XYChart.Data<X,Y>> ObservableList<XYChart.Series<X,Y>>

.xValue

.yValue

.extraValue

Axes and orientation

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

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

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

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/

JavaFX tables and charts - polito.itelite.polito.it/.../2014/slide/03-javafx-tables-charts.pdfData...

Documents