Show data in JavaFX is made easy by DataFX project

A friend of mine, Teles Maciel, was scrapping a page that contains all the Islam formal prayers schedule for 2012 for who lives in São Paulo. He aims to create an app for mobile. While checking his sample XML I decided to use DataFX project to show these data, and I created an app in less than 5 minutes!

The DataFX project

It's divided in two main parts: Cell Factories and Data Sources and there is the RedFX integration.

Data Sources objective is to facilitate the access to XML/JDBC/CSV/JSON data and show in JavaFX. For example, you can read an XML file and visualize the data in a JavaFX table with a few lines of code.
Talking in code, you basically need to know the following Interfaces to use DataFX:

- DataSourceReader: Responsile for reading a source of data. Two classes that implements this interface are NetworkSource and FileSource;

- DataSource: Responsible for create the JavaFX(e.g. TableColumn, ObsevableLists) stuffs from the DataSourceReader. From this class, you can retrieve the items and the columns from the DataSourceReader. There's a Data Source implementation for each specific format, for example: XMLDataSource, ObjectDataSource, CSVDataSource and more sources are planned in future project releases.

If you want to know more about DataFX I recommend you to see the Jonathan Giles and Johan Vos presentation and read the API JavaDoc.

The "Salah Time" application

Let's start talking about this application showing the data we want to show:

 <?xml version="1.0" encoding="UTF-8"?>  
 <oracoes>  
 <oracao>  
 <nome>fajr</nome>  
 <dia>01/01</dia>  
 <horario tipo="verao">03:55</horario>  
 </oracao>  
 <oracao>  
 </oracao>  
 ...  
 </oracoes>  

As you can see, we have a pretty simple XML. The "horario"(time) tag has a "tipo"(type) attribute that may have two possible values: "verao"(summer, for daylight saving time) and "comum"(common, for common time). Imagine if you would show these data the first step would parse the data and then show according the toolkit/API you are using. For example, in JavaFX you would have to create a table and its columns. It is not hard, but a repetitive task when you just want to show the data or when you have a lot of files to show and that's when DataFX starts to help you.

The first thing I had to do was load my file using FileSource:

 FileSource fs = new FileSource("oracoes.xml");  

Then I created my XMLDataSource using this FileSource, the tag name ("oracao") and the columns I want to retrieve from oracao: nome, dia and horario. Here is the code (yes, one line):

 XMLDataSource<String[], Object> salatDataSource = new XMLDataSource<String[], Object>(  
 fs, "oracao", "nome", "dia", "horario");  

Now the last step is simply integrate XMLDataSource with a TableView. I just had to retrieve the columns I want and add it to my TableView and the items is the DataSource itself:

 package org.salattime.main;  
 import javafx.application.Application;  
 import javafx.scene.SceneBuilder;  
 import javafx.scene.control.TableColumn;  
 import javafx.scene.control.TableView;  
 import javafx.stage.Stage;  
 import org.javafxdata.datasources.io.FileSource;  
 import org.javafxdata.datasources.protocol.XMLDataSource;  
 /**  
  *   
  * So, I want to read the data from oracoes.xml and show in a table. This class  
  * will do it  
  *   
  * @author jesuino  
  *   
  */  
 public class Main extends Application {  
      @SuppressWarnings("unchecked")  
      @Override  
      public void start(Stage stage) throws Exception {  
           stage.setTitle("Salats do ano de 2012");  
           // Just loading the file...  
           FileSource fs = new FileSource("oracoes.xml");  
           // Now creating my datasource, I just need to inform my columns and  
           // oracao, because it is the root of the columns I want  
           XMLDataSource<String[], Object> salatDataSource = new XMLDataSource<String[], Object>(  
                     fs, "oracao", "nome", "dia", "horario");  
           @SuppressWarnings("rawtypes")  
           TableView salats = new TableView();  
           TableColumn<?, ?> nomeCol = salatDataSource.getNamedColumn("nome");  
           TableColumn<?, ?> diaCol = salatDataSource.getNamedColumn("dia");  
           TableColumn<?, ?> horarioCol = salatDataSource  
                     .getNamedColumn("horario");  
           salats.getColumns().addAll(nomeCol, diaCol, horarioCol);  
           salats.setItems(salatDataSource);  
           stage.setScene(SceneBuilder.create().root(salats).build());  
           stage.show();  
      }  
      public static void main(String[] args) {  
           Application.launch(args);  
      }  
 }  

Here is the result:

Further use of DataFX(the DataSource part)

This sample seems very simple, but here are some uses for DataFX you may consider:

- Visualization of a REST API result using the NetworkSource;
- Help you to show data in multiple formats with a small portion of code with FileSource and the currently available DataSources implementations (more will come in a future);
- In future, read data from database with a JDBC DataSource;


Remember this project is just getting started, there are more to come :-)