esempioInterfaccia

applicazione interattiva

Fai click sulle linee colorate del listato e vedi cosa succede alla finestra.

L'applicazione funziona: basta scrivere il nome e fare click sul pulsante "saluta".

ApplicazioneCheSaluta.java

package esempi;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class ApplicazioneCheSaluta extends Application{
    
  TextField cNome = new TextField("James");
  Label eRisposta = new Label("Click su saluta");
    
  @Override
  public void start(Stage primaryStage){
      Button pSaluta = new Button("saluta");
      Label eNome = new Label("nome:");
      GridPane griglia = new GridPane();
        
        griglia.add(eNome,0,0);
        griglia.add(cNome, 1, 0);
        griglia.add(pSaluta, 0, 1, 2, 1);
        griglia.add(eRisposta, 0, 2, 2, 1);

        Scene s = new Scene(griglia);
        pSaluta.setMaxWidth(Integer.MAX_VALUE);
        primaryStage.setScene(s);
        primaryStage.setTitle("salve a tutti");
        primaryStage.initStyle(StageStyle.UNDECORATED);
        eRisposta.setId("risp");
        s.getStylesheets().add("esempi/stileApplicazione.css");
        primaryStage.show();
        
        pSaluta.setOnAction(e->saluta());
  }
    
  private void saluta(){
      String nome = cNome.getText();
      eRisposta.setText("ciao "+nome);
  }
    
  public static void main(String x[]){ launch(x); }
}

stileApplicazione.css

#risp { -fx-text-fill: green; }
.text-field {  -fx-background-color:yellow;  }

immagini e stili

Il programma di questa sezione ha molte impostazioni per l'interfaccia grafica, mancano però tutte le funzionalità di calcolo!

Per farlo funzionare basta inserire questi due file e le due immagini nello stesso pacchetto: "esempi"

In questo esempio vengono utilizzate nel foglio di stile due classi senza impostarle: button e label, questo perché alcuni oggetti (quelli del pacchetto javafx.scene.control) hanno già una classe predefinita.

Le parti scritte in blu servono soltanto per curare l'aspetto, non hanno scopi funzionali.

ControlliCSS.java

package esempi;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class ControlliCSS extends Application {

    @Override
    public void start(Stage primaryStage) {
        // creo tutti gli oggetti che andrò a mettere nell'interfaccia
        GridPane pannello = new GridPane();
        Label eBase = new Label("base:");
        TextField base = new TextField();
        Label eAltezza = new Label("altezza:");
        TextField altezza = new TextField();
        Button calcolaPerimetro = new Button("perimetro");
        Button calcolaArea = new Button("area");
        Text risposta = new Text("Qui la risposta");
        
        // imposto alcune proprietà che riguardano l'aspetto degli elementi
        // i pulsanti devono allargarsi fino a riempire tutto lo spazio disponibile
        calcolaPerimetro.setMaxWidth(Double.MAX_VALUE);
        calcolaArea.setMaxWidth(Double.MAX_VALUE);
        
        // creo due immagini a partire da due faile presenti nella stessa cartella di questa classe
        Image iBase = new Image(getClass().getResourceAsStream("base.png"));
        Image iAltezza = new Image(getClass().getResourceAsStream("altezza.png"));
    
        // inserisco le immagini nelle etichette
        eBase.setGraphic(new ImageView(iBase));
        eAltezza.setGraphic(new ImageView(iAltezza));

        // imposto l'id del pannello
        pannello.setId("pannello");
        // imposto l'id del pulsante del perimetro
        calcolaPerimetro.setId("pulsantePerimetro");
        // imposto l'id del pulsante dell'area
        calcolaArea.setId("pulsanteArea");
        // alcuni oggetti hanno la stessa classe
        calcolaArea.getStyleClass().add("gigante");
        calcolaPerimetro.getStyleClass().add("gigante");
        risposta.getStyleClass().add("gigante");
        
        // inserisco gli elementi nel pannello
        pannello.add(eBase,    0, 0);
        pannello.add(base,     1, 0);
        pannello.add(eAltezza, 2, 0);
        pannello.add(altezza,  3, 0);
        // i pulsanti devono occupare due spazi della griglia
        pannello.add(calcolaPerimetro,0,1,2,1);
        pannello.add(calcolaArea,     2,1,2,1);
        // il testo di risposta occupa 4 spazi nella griglia
        pannello.add(risposta, 0, 2, 4, 1);
      
        // creo la scena principale
        Scene scene = new Scene(pannello);
        // associo un foglio di stile alla scena principale
        scene.getStylesheets().add("esempi/impostazioni.css");
        // imposto il titolo dello stage (la finestra)
        primaryStage.setTitle("Finestra di esempio");
        // imposto la scena principale (il contenuto della finestra)
        primaryStage.setScene(scene);
        // mostro la finestra a schermo
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

impostazioni.css

/* proprietà da applicare a tutte le etichette ( Label )*/
.label {  
    /* sopra, destra, sotto, sinistra */
    -fx-padding: 1em 0em 1em 1em;
} 

/* proprietà da applicare a tutti i Button */
.button {
    -fx-border-color: black;
    -fx-border-radius: 5px;
    -fx-border-width: 2px;
    /* lo spazio da mettere tra il bordo e il riempimento */
    -fx-background-insets: 0px;
}

/* impostazioni per il pulsante del perimetro */
#pulsantePerimetro { -fx-background-color: yellow; }
/* ... quando il mouse ci passa sopra */
#pulsantePerimetro:hover { -fx-background-color: red; }
/* impostazioni per il pulsante dell'area */
#pulsanteArea { -fx-background-color: green; }
/* ... quando il mouse ci passa sopra */
#pulsanteArea:hover { -fx-background-color: blue; }

#pannello {
    -fx-background-color: linear-gradient(to bottom , yellow, orange);
    /* spazio tra gli elementi */
    -fx-hgap: 0.5em;
    -fx-vgap: 1em;
    /* spazio tra questo pannello e il bordo della finestra */
    -fx-padding: 1em;
}

/* proprietà da applicare a tutti gli oggetti che appartengono alla classe "gigante" */
.gigante{
    -fx-font-family: times;
    -fx-font-size: 1.5em;
    -fx-font-weight: bold;
}