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
nome: | James |
saluta | |
click su saluta |
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; }