Un primo programma con JavaFX

27 marzo 2017

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.

Tutte le lezioni

1 ... 47 48 49 ... 113

Se vuoi aggiornamenti su Un primo programma con JavaFX inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Un primo programma con JavaFX

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy