Tresavis

App JavaFX amb SceneBuilder

Descripció.

Continuació de la practica: Aplicació d’escriptori JavaFX. Fem servir SceneBuilder per crear les vistes gràfiques.

Contingut:

Vídeo tutoria

Practica anterior

En la practica anterior, Aplicació d’escriptori JavaFX, havíem arribat a desenvolupar una aplicació amb JavaFX que mostrava els proveïdors d’una base de dades, tal com la següent imatge:

La vista no té cap tipus d’estil. Amb l’eina SceneBuilder hi posarem colors i afegirem un botó i altres components d’una manera gràfica i senzilla.

Instal·lació de SceneBuilder

La pagina de descarrega es la següent:

Cal observar el destí on s’instal·la l’aplicació SceneBuilder, per defecte és:

Users\el teu usuari\AppData\Local\SceneBuilder

Configurar SceneBuilder al editor

En Netbeans anar a: Tools/Options/Java/JavaFX.

En SceneBuilder Home buscar la ruta de l’aplicació SceneBuilder.

Clic en Apply/OK

Al editar el arxius .fxml ja no s’obre el codi sinó l’entorn gràfic de SceneBuilder.

Doble clic en proveidor.fxml, s’obre automàticament SceneBuilder.

Labels

Editem la fulla d’estils proveidor.css.

El codi css per l’etiqueta Label és com el següent:

.label{
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold"; 
    -fx-text-fill: #d45c02;
}           
        

Mida de la lletra d’11 punts

Tipus de lletra

Color de la lletra: salmó

Enllaç de la fulla d’estils a SceneBuilder

A la dreta en AnchorPane/styleSheets busquem la fulla d’estils proveidor.css:

SplitPane

Necessitem un botó per inserir nous proveïdors i tres textField per escriure el Id, el nom i el telèfon del nou proveïdor.

Canviem les mides del AnchorPane a 1000x800.

Partim la pantalla en dues parts amb SplitPane horizontal, a l’esquerra la TableView i a la dreta el botó, els Labels i els TextFields.

A la dreta col·loquem un GridPane de 2x4.

Un botó , tres Labels i tres TextFields

Arrastrem un botó al GridPane.

Col·loquem tres Labels i també tres TextFields.

En el botó en Properties, canviem el text i posem "Inserir".

El botó necessita un identificador.

En el Code del botó:

En el identificador Fx:id posem btnInserir

On Action: btnInserir_clic (serà el mètode que s’executarà al prémer el botó).

Canviem el text dels Labels, en Properties.

Els textFiels necessiten de un identificador fx:id perquè intervenen en el codi.

txtId

txtNom

txtTelefon

Controller Class

Cal assegurar-se de que el controlador de la vista és la correcte, és troba a l’esquerra en Controller Class.

Guardem els canvis: Ctrl+S

Sample Skeleton

En View/Sample Skeleton copiem els identificadors dels TextFiels i el Button per enganxar en el controlador.

En ControladorProveidor.java, enganxem els atributs del botó, dels TextFields i el mètode d’acció del botó.

Afegim els Imports en el controlador, guardem i executem. El resultat és com el següent:

Els Labels ja tenen estil, el color salmó.

Css del botó i del TextField

Editem la fulla d’estils proveidor.css

.button{
    -fx-background-color:#d45c02;
    -fx-font-size:11pt;
    -fx-font-family:"Segoe UI Semibold"; 
    -fx-text-fill:white;
    -fx-border-color: green,green;
}
.button:hover {
    -fx-background-color: #d6f50b;
}
.button:pressed{
    -fx-background-color: #f93302;
    -fx-shadow-highlight-color: #CCFF99;
}

.text-field{
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold"; 
    -fx-text-fill: #d45c02;
}
            
        

El botó és de color salmó, al passar-hi per sobre ( hover ) és torna de color verd i al clicar-ho ( pressed ) canvia a color vermell.

El textField és de mida de 11 punts, la família de la lletra és la mateixa de tota la vista i de color salmó.

Per veure el resultat en SceneBuilder: Clic Preview/Show Preview in Windows

El botó és de color salmó. Al prémer el botó es vermell i al passar per sobre és verd.

Codi del controlador

En ControladorProveidor.java posem codi al mètode btnInserir_clic():

@FXML
    void btnInserir_clic() {
        String id=txtId.getText();
        String nom=txtNom.getText();
        String telefon=txtTelefon.getText();
        if(id.compareTo("")!=0 && nom.compareTo("")!=0 && telefon.compareTo("")!=0){
           Proveidor p= new Proveidor(); 
           p.setId(Integer.parseInt(id));
           p.setNom(nom);
           p.setTelefon(telefon);
           controllerJpa.create(p);
           llegirProveidorsOmplirTaula();
        }else{
            Alert alert = new Alert(Alert.AlertType.ERROR);
            alert.setTitle("INSERIR NOU PROVEÏDOR");
            alert.setHeaderText("Tots els camps son obigatoris!!");
            alert.setContentText("Falta editar camps");
            alert.showAndWait();
        }
    }
            
        

Explicació del codi

Obtenim el id, nom i telèfon dels textFields amb el mètode getText().

Comprovem amb un if si els camps estan plens amb el mètode compareTo("")!=0. Això vol dir que si el camp és diferent de res, continuem amb el codi, altrament passem al else.

A dins del if:

Creem un nou Proveidor p. Assignem a p els valors del id, nom i telèfon amb el setId(valor), setNom(valor), setTelefon(valor). Aquest mètodes estan definits en la classe Proveidor.

Ara intervé el controladorJpa que amb el mètode create(p) insereix el nou proveïdor a la base de dades.

Llegim la base de dades i posem el resultat al tableView amb el mètode llegirProveidorsOmplirTaula()

A dins del else:

Alert que és un missatge d’error (finestra emergent) que explica que hi han camps buits.

Recordem que el mètode llegirProveidorOmplirTaula() explicat en la practica anterior, és com el següent:

Resultat

Al inserir un nou proveïdor immediatament s’actualitza la taula amb una nova fila del nou proveïdor.

Bibliografia

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

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

https://tresavis.cat/aplicacio-escriptori-javafx.php