Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 48 di 134
  • livello avanzato
Indice lezioni

Un primo programma con JavaFX

Impariamo arealizzare un primo programma utilizzando JavaFX, componente avanzato di Java per la realizzazione di interfacce grafiche.
Impariamo arealizzare un primo programma utilizzando JavaFX, componente avanzato di Java per la realizzazione di interfacce grafiche.
Link copiato negli appunti

In JavaFX uno Stage rappresenta
l'intera finestra applicativa, mentre una Scena,
costruita attraverso uno Scene Graph (struttura grafo), è l'effettiva interfaccia con cui l'utente interagisce. Ogni elemento della Scena è denominato nodo, un nodo è un oggetto grafico e può includere :

  • oggetti 2D o 3D;
  • controlli UI (pulsanti, aree di testo, label;
  • pannelli di layout per organizzare i contenuti;
  • elementi media (audio, video, immagini).

Ciascun nodo della Scena ha un solo genitore e il nodo che non ha genitore
è noto come nodo root; ogni nodo ha uno o più figli e un nodo senza figli
è definito come leaf node. Ai nodi di una Scena possono essere aggiunti degli effetti
grafici, utilizzando JavaFX è anche possibile incorporare HTML
in una Scena. Il componente WebView di JavaFX
aggiungere questa funzionalità e utilizza il motore di
rendering Web Kit che offre il supporto a
HTML5, CSS, JavaScript, DOM ed SVG.

Con WebView, è quindi possibile:

  • il rendering HTML;
  • gestire lo storico e la navigazione "Avanti" e "Indietro";
  • applicare effetti;
  • mkodificare l'HTML;
  • eseguire JavaScript;
  • gestire eventi.

Per la realizzazione di un applicativo di conversione
gradi - radianti. Abbiamo bisogno di una classe che estenda javafx.application.Application
e che contenga il metodo main con istruzione launch() per lanciare l'applicativo:

public class GradiRadiantiJavaFX extends Application {
          public static void main(String[] args) {
             launch(args);
          }
          @Override
          public void start(Stage primaryStage) {
            .....
          }

Proseguiamo con la definizione di uno Scena nel metodo start() e notiamo come esso contenga un parametro Stage quale riferimento alla finestra contenitrice. Definiamo un titolo
per la finestra ed inseriamo dei pannelli per aree di testo, label e pulsanti:

primaryStage.setTitle("Convertitore da gradi a radianti");
        BorderPane borderPane = new BorderPane();
        borderPane.setPadding(new Insets(10,50,50,50));
        HBox horizontalBox = new HBox();
        horizontalBox.setPadding(new Insets(20,20,20,30));
        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(20,20,20,20));
        gridPane.setHgap(5);
        gridPane.setVgap(5);

I pannelli di JavaFX ci consentono di disporre
opportunamente i vari controlli all'interno della Scena, proseguiamo quindi con la costruzione
dell'interfaccia aggiungendo un pulsante e due aree di testo per i gradi e i radianti con le
label per l'utente:

Label lblGradi = new Label("Gradi");
        TextField txtGradi = new TextField();
        Label lblRadianti = new Label("Radianti");
        TextField txtRadianti = new TextField();
        Button btnCalcola = new Button("Calcola");

Colleghiamo questi nodi al nodo padre gridPane:

gridPane.add(lblGradi, 0, 0);
        gridPane.add(txtGradi, 1, 0);
        gridPane.add(lblRadianti, 0, 1);
        gridPane.add(txtRadianti, 1, 1);
        gridPane.add(btnCalcola, 2, 1);

Aggiungiamo degli effetti decorativi di riflessione per gridPane
e di ombra per un titolo:

Reflection reflection = new Reflection();
        reflection.setFraction(0.7f);
        gridPane.setEffect(reflection);
        DropShadow dropShadow = new DropShadow();
        dropShadow.setOffsetX(3);
        dropShadow.setOffsetY(3);
        Text text = new Text("Convertitore da gradi a radianti");
        text.setFont(Font.font("Arial", FontWeight.BOLD, 28));
        text.setEffect(dropShadow);
        horizontalBox.getChildren().add(text);

Prima di proseguire definiamo un foglio di stile CSS (form.css) per applicare effetti grafici
a pannelli, aree di testo e pulsante:

#gridPane {
             -fx-background-color:  linear-gradient(lightgray, gray);
             -fx-border-color: white;
             -fx-border-radius: 20;
             -fx-padding: 10 10 10 10;
             -fx-background-radius: 20;
            }
            #borderPane {
             -fx-background-color:  linear-gradient(gray, DimGrey );
            }
            #button {
                -fx-background-radius: 30, 30, 29, 28;
                -fx-padding: 3px 10px 3px 10px;
                -fx-background-color: linear-gradient(orange, orangered );
            }
            #text {
             -fx-fill:  linear-gradient(orange , orangered);
            }

Colleghiamo le regole CSS ai controlli della Scena:

borderPane.setId("borderPane");
        gridPane.setId("gridPane");
        btnCalcola.setId("button");
        text.setId("text");

Aggiungiamo con un'espressione Lambda il codice di conversione attivato
dal click del pulsante:

btnCalcola.setOnAction((ActionEvent event) -> {
            event.consume();
            float gradi = Float.parseFloat(txtGradi.getText());
            float radianti = gradi * 3.14f / 180;
            txtRadianti.setText(String.valueOf(radianti));
        });

E completiamo la Scena caricando il foglio di stile:

borderPane.setTop(horizontalBox);
     borderPane.setCenter(gridPane);  
     Scene scene = new Scene(borderPane);
     scene.getStylesheets().add(getClass().getClassLoader().
     getResource("form.css").toExternalForm());
     primaryStage.setScene(scene);
     primaryStage.setResizable(false);
     primaryStage.show();

In allegato potete trovare il codice completo con le importazioni
e il CSS della cartella Source del progetto NetBeans.

Possiamo finalmente lanciare il programma e visualizzare la nostra prima applicazione
JavaFX 8:

Figura 1. Convertitore gradi - radianti
Convertitore gradi-radianti

Per mantenere il programma leggibile si è evitata
l'implementazione di controlli sul corretto formato dei dati di input
nelle aree di testo. Aggiungeremo questa parte nei successivi capitoli.


Ti consigliamo anche