Index / JavaFX / JavaFX y ApiRest – GET

JavaFX y ApiRest – GET

Autor jc mouse domingo, febrero 14, 2016

En este tutorial construiremos una aplicación en JavaFX para leer datos de un servicio web

Herramientas

IDE Netbeans 8.x + java + javaFX
Librería java-json.jar
Conocimientos sobre JSON (JavaScript Object Notation)
Servidor Web (XAMPP, AppServ, etc)

Tiempo 20 minutos

Paso 1: Crear el proyecto

Archivo → Proyecto Nuevo → JavaFX (Categoria) → JavaFX FXML Application (Proyectos) → NEXT

a continuación escribimos nombre del proyecto y nombre del archivo FXML como se a continuación:

presionar Terminar para crear el proyecto.

Paso 2: Agregar librería

Añade la librería java-json.jar al proyecto

Paso 3: Clases

En el mismo paquete de la vista, crea una clase que se llamara «Country.java«, esta clase nos permitirá interactuar con los datos que obtengamos del servidor y con la vista de la aplicación.

package jfxget;
import javafx.beans.property.SimpleStringProperty;
/**
 * @web https://www.jc-mouse.net/
 * @author jcmouse
 */
public class Country {
    
    private final SimpleStringProperty countryName = new SimpleStringProperty();
    private final SimpleStringProperty capitalName = new SimpleStringProperty();
    private final SimpleStringProperty population = new SimpleStringProperty();

    public Country() {}
    
    public Country(String countryname, String capitalname, String num) {
        countryName.set(countryname);
        capitalName.set(capitalname);
        population.set(num);
    }
    
    public String getCountryName() {
        return countryName.get();
    }

    public void setCountryName(String value) {
        countryName.set(value);
    }
    
    public SimpleStringProperty countryNameProperty() {
        return countryName;
    }    

    public String getCapitalName() {
        return capitalName.get();
    }

    public void setCapitalName(String value) {
        capitalName.set(value);
    }

    public SimpleStringProperty capitalNameProperty() {
        return capitalName;
    }
    
    public String getPopulation() {
        return population.get();
    }

    public void setPopulation(String value) {
        population.set(value);
    }

    public SimpleStringProperty populationProperty() {
        return population;
    }

}

Debes tener algo como esto:

Paso 4: La vista

Abre el archivo «FXMLGet.fxml» clic derecho → Open. Por defecto al crear el proyecto, se creo un Button y un Label, elimina el label y añade un TableView, del table elimina las columnas. Ordena y añade los fx:id como se ve en la imagen de abajo:

Guarda los cambios y cierra el Scene Builder

Paso 5: El Servicio Web

Un WebService es algo complicado y largo de hacer, como no es el objetivo de este tutorial, reduciremos este apirest (si es que podemos llamarlo así) a un archivo de texto. Este archivo de texto se llamara «country.txt» y debemos colocar en una carpeta de nuestro servidor, por ejemplo «C:\xampp\htdocs\webservice\country.txt», el contenido de este archivo estará en formato JSON:

[{
	"countryName": "Bolivia",
	"capitalName": "Sucre",
	"population": "11 040 300 Hab."
}, {
	"countryName": "Brasil",
	"capitalName": "Brasilia",
	"population": "200 400 012 Hab."
}, {
	"countryName": "Canada",
	"capitalName": "Ottawa",
	"population": "32 742 990 Hab."
}, {
	"countryName": "Japon",
	"capitalName": "Tokio",
	"population": "7 430 021 Hab."
}, {
	"countryName": "Australia",
	"capitalName": "Canberra",
	"population": "51 320 100 Hab."
}]

Para acceder a este archivo desde un navegador usamos la URL «http://localhost/webservice/country.txt»

Paso 6: El controlador

Abre el archivo «FXMLGetController.java«, por defecto al crear el proyecto te debió crear el siguiente código:

public class FXMLGetController implements Initializable {
    
    @FXML
    private Label label;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
    
}

Reemplaza por:

package jfxget;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * @web https://www.jc-mouse.net/
 * @author jc mouse
 */
public class FXMLGetController implements Initializable {
    
    @FXML private TableView<Country> tableview;
    private ObservableList<Country> data;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        
        BufferedReader bufferedReader;
        StringBuilder stringBuilder;
        String line;
        try {
            //direccion a nuetro api rest 
            URL url = new URL("http://localhost/webservice/country.txt");
            //realiza la conexión
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");            
            connection.connect(); 
            if(connection.getResponseCode()==200){  
                //obtiene respuesta
                bufferedReader  = new BufferedReader(new InputStreamReader(connection.getInputStream()));
                stringBuilder = new StringBuilder();            
                while ((line = bufferedReader.readLine()) != null)
                {
                    stringBuilder.append(line);
                }
                //limpia datos del tableview
                tableview.getItems().removeAll(data);
                //convierte a formato JSON el texto leido del servidor web, el texto que leemos del servidor
                //es un array asi que usamos JSONArray
                JSONArray dataArray  = new JSONArray(stringBuilder.toString());
                //lee los datos del array JSON y agrega al tableview
                for(int i = 0 ; i < dataArray.length(); i++){
                   JSONObject row = dataArray.getJSONObject(i);                   
                   data.add(new Country(row.getString("countryName"), row.getString("capitalName"),  row.getString("population") ));
                }
            }
        } catch (MalformedURLException ex) {
            System.err.println("MalformedURLException: " +  ex.getMessage() );            
        } catch (IOException ex) {
            System.err.println( "IOException: " + ex.getMessage() );            
        } catch (JSONException ex) {
            System.err.println( "JSONException: " + ex.getMessage() );       
        } 
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        //nombre de las columnas
        TableColumn colName = new TableColumn("Pais");
        TableColumn colLastName = new TableColumn("Capital");
        TableColumn colCareer = new TableColumn("Población");
        //relaciona el valor para cada columna
        colName.setCellValueFactory(new PropertyValueFactory<>("countryName"));
        colLastName.setCellValueFactory(new PropertyValueFactory<>("capitalName"));
        colCareer.setCellValueFactory(new PropertyValueFactory<>("population"));
        //añade columnas al tableview
        tableview.getColumns().addAll(colName); 
        tableview.getColumns().addAll(colLastName); 
        tableview.getColumns().addAll(colCareer);    
        //inicializamos datos
        data = tableview.getItems();          
    }    
    
}

Ejecuta y prueba. Cuando presiones el botón, se conectara con el servidor y mostrara los datos en el tableview, si añades o eliminas datos en el archivo de texto, cuando vuelvas a presionar el botón «Load JSON«, los datos se actualizaran.