Tresavis

Aplicació d’escriptori JavaFX

Descripció.

Continuació de la practica "Java+Netbeans+Maven+EclipseLink+Mysql". Utilitzant JavaFX la llista de proveïdors es mostra en una taula gràfica

Contingut:

Vídeo tutoria

Practica anterior

En la practica anterior:

"Java+Netbeans+Maven+EclipseLink+Mysql"

Inseríem nous proveïdors a la base de dades i després mostràvem el resultat en la consola.

La practica actual vol obtenir la llista de proveïdors mostrant-los en una taula gràfica.

JavaFX-SDK

Descarreguem JavaFX-SDK de la següent pagina:

https://gluonhq.com/products/javafx/

Hem descarregat el zip de openjfx:

Descomprimim i col·loquem la carpeta obtinguda en C: \Program Files\Java\

En Netbeans anar a Tools/Libraries/New Library i busquem la ruta de javafx-sdk.

Afegim la carpeta lib

JavaFX MainClass

Hem de canviar la classe principal, orm4.java de la practica anterior, per una nova classe principal JavaFX.

Eliminem la classe orm4.java

Anem al pakage com.tresavis.orm4, botó dret, New/Other/JavaFX/JavaFX Main Class

Posem el nom MainApp

Next/Finish

Es crea MainApp.java que implementa un botó que al clicar-ho imprimeix a la consola “Hello World!!”

Si executem l’aplicació, hi ha un error: no troba la classe orm4.java, que és la que hem eliminat.

Solucio:

En el pom.xml canviar la mainClass de orm4 a MainApp

Anar a las propietats del projecte i dir-li quina és la classe principal

Sobre el projecte botó dret: Properties/Run/Browse/ escollir MainApp

Si executem l’aplicació surt els següent error:

Error: JavaFX runtime components are missing, and are required to run this application

Solució:

Sobre el projecte botó dret Properties/Run/ VM options, cal escriure la ruta de javafx-sdk:

--module-path "\path\to\javafx-sdk-20\lib" --add-modules javafx.controls,javafx.fxml            
        

En el nostre cas escrivim:

--module-path "\Program Files\Java\javafx-sdk-20.0.1\lib" --add-modules javafx.controls,javafx.fxml,javafx.graphics,javafx.base            
        

Ara si executem funciona correctament i al clicar el botó es mostra en la consola el “Hello World”.

Nous Packages

Creem dos nous Package en: Other Sources/src/main/resources

Package fxml que contindrà les vistes

Package estils on hi posarem les fulles d’estils

L’arquitectura del projecte és MVC, Model-Vista-Controlador

Exemple de nova vista

Creem una nova vista: escena.fxml

Sobre el Pakckage fxml: botó dret /New/Other/JavaFX/Empty FXML

Next

Posem el nom i clic en següent, demana si volem que la vista estigui governada per un controlador, diem que si, escollim el nom del controlador i el Package on guardar-ho.

Next. Pregunta l’assistent si volem una fulla d’estils per la nostre vista. Diem que si.

Netbeans crea automàticament la vista, el controlador i la fulla d’estils.

La vista

El controlador

En la vista el primer mètode que s’executarà serà inizialitze de la interfície Inizialitzable

Css fulla d’estils

Modifiquem la vista

Modifiquem la vista amb un label amb el text: ”Hola com esteu?”

Modifiquem MainApp

Modifiquem la classe principal perquè s'obri una vista, un arxiu fxml

Explicació del codi:

L’aplicació comença amb el mètode start

A dins d’un try/catch carrega la vista escena a dins d’un Parent

Ja fora del try/catch col·loquem el Parent en una Scene

En el escenari primaryStage hi posem títol. Hi posem l’escena i el mostrem

Resultat

Vista proveedor.fxml

Creem una nova vista per mostrar els proveïdors en una taula.

Igual que hem fet amb la vista anterior escena:

Sobre el Pakckage fxml /botó dret/New/Other/JavaFX/Empty FXML

Posem el nom proveedor

Demana si volem que la vista estigui governada per un controlador, diem que si, escollim el nom del controlador i el Package.

Pregunta l’assistent si volem una fulla d’estils per la nostre vista. Diem que si

Codi de la vista

Modifiquem proveedor.fxml

Volem que mostri una taula amb tres columnes, amb els següent codi:

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.tresavis.orm4.controladors.ControladorProveedor">
    <children>
   <TableView fx:id="tvProveidors" layoutX="14.0" layoutY="14.0" prefHeight="540.0" prefWidth="692.0">
    <columns>
        <TableColumn fx:id="tvColId" prefWidth="100.0" text="Id" />
        <TableColumn fx:id="tvColNom" prefWidth="200.0" text="Nom" />
        <TableColumn fx:id="tvColTelefon" prefWidth="300.0" text="Telefon" />         
      </columns>
    </TableView>
   </childre> 
</AnchorPane>           
        

Codi de MainApp

Modifiquem MainApp de la següent manera:

Creem el mètode mostrarProveidors()

 public void mostrarProveidors() {
        try {
           // Load the fxml file and create a new stage for the popup dialog.
           AnchorPane root = FXMLLoader.load(getClass().getResource("/fxml/proveedor.fxml"));
           Scene scene = new Scene(root);
           stageProveidors.setScene(scene);                                 
           stageProveidors.setTitle("PROVEÏDORS");
           stageProveidors.show();
       } catch (IOException e) {
           e.printStackTrace();          
       } 
    }            
        

El mètode mostrarProveidors carrega la vista proveedors.fxml l’hi posa un títol i la mostra

A dins del mètode start de MainApp. java cridem a mostrarProveidors()

Posem un atribut Stage primaryStage i l’iniciem en el constructor

Codi del ControladorProveedor

Primer posem tres variables globals, la unitat de persistència, la factoria que té com argument la unitat de persistència i el controlador JPA, que s’inicialitza amb la factoria

private static final String UNITAT_PERSISTENCIA = "unitatPersistencia";
private static final EntityManagerFactory FACTORIA = Persistence.createEntityManagerFactory(UNITAT_PERSISTENCIA);
private static ProveidorJpaController controllerJpa= new ProveidorJpaController(FACTORIA);            
        

Després posem els atributs del TableView i de les columnes. Les anotacions @FXML indiquen que les variables estan lligades amb la vista

@FXML
private TableColumn tvColId;
@FXML
private TableColumn tvColNom;
@FXML
private TableColumn tvColTelefon;
@FXML
private TableView tvProveidors;            
        

Creem el mètode llegirProveidorsOmplirTaula()

private void llegirProveidorsOmplirTaula() {
    ObservableList obsList;
    obsList=FXCollections.observableArrayList(controllerJpa.findProveidorEntities());
    tvColId.setCellValueFactory(new PropertyValueFactory<>("id"));
    tvColNom.setCellValueFactory(new PropertyValueFactory<>("nom"));        
    tvColTelefon.setCellValueFactory(new PropertyValueFactory<>("telefon"));

    tvProveidors.setItems(obsList); 
}            
        

Explicació del codi:

Al obrir-se la vista proveedor.fxml, el primer mètode que s’executarà serà inicialitze del seu controlador. Hi posem el codi: llegirProveidorsOmplirTaula()

Aquest mètode crea una llista ObservableList de objectes Proveidor.

Omplim la llista amb el mètode del controladorJpa: findProveidorEntities(), que fa un select a la base de dades.

Mostrem el id del proveïdor a la columna de la TableView aplicant el mètode setCellValueFactory al atribut tvColId lligat a la vista. Fem igual amb les altres dues columnes.

Omplim la taula tvProveidors amb setItems i com argument la llista.

Resultat final

Bibliografia

https://tresavis.cat/netbeans-maven-mysql.php

https://tresavis.cat/Java-Netbeans-Maven-EclipseLink-MySQL.php

https://medium.com/codex/solved-error-javafx-runtime-components-are-missing-and-are-required-to-run-this-application-ec4779eb796d