Introduzione ai layout JavaFX
I layout dell'interfaccia utente sono al centro del design dell'interfaccia. Molti dei framework di interfaccia utente grafica offrono supporto per i layout sotto forma di API (Application Programming Interface). Anche in JavaFX viene fornito un ricco numero di layout che aiuta a soddisfare molti dei vincoli al fine di affrontare l'aspetto coerente. In questo caso è necessario impostare solo il numero minimo di parametri. I layout possono essere di diversi tipi ed è spiegato in dettaglio nelle sezioni seguenti.
I 5 migliori layout JavaFX
Come già discusso, i layout di JavaFX possono essere di diversi tipi come VBox, HBox, BorderPane, FlowPane, StackPane, AnchorPane, TilePane, GridPane, ecc. In questa sezione ne discuteremo cinque.
1. VBox
VBox aiuta a organizzare il nodo in una colonna verticale. In questo, l'altezza predefinita dell'area contenuto può visualizzare i bambini nella sua altezza preferita e la larghezza predefinita è la massima della larghezza dei bambini. Anche se le posizioni non possono essere impostate per i bambini poiché viene calcolato automaticamente, può essere controllato in una misura mediante la personalizzazione delle proprietà del VBox.
Codice:
// Java Program to create a VBox
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
// Title set
stage.setTitle("Example for VBox");
// VBox creation
VBox vb = new VBox(10);
// Label creation
Label lb = new Label("this is VBox example");
// Add the created label to vbox
vb.getChildren().add(lb);
// add the buttons to VBox
vb.getChildren().add(new Button("Click A"));
vb.getChildren().add(new Button("Click B"));
vb.getChildren().add(new Button("Click C"));
// Scene creation
Scene scene = new Scene(vb, 300, 300);
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produzione:
Qui, 3 pulsanti A, B e C sono disposti in modo orizzontale.
2. HBox
HBox lavora nel concetto opposto di VBox. Cioè, i nodi saranno organizzati in orizzontale. Di seguito è riportato un programma che aiuta a comprendere HBox.
Codice:
// Java Program to create an HBox
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
// Title set
stage.setTitle("Example for HBox");
// HBox creation
HBox hb = new HBox(10);
// Label creation
Label lb = new Label("this is HBox example");
// Add the created label to Hbox
hb.getChildren().add(lb);
// add the buttons to Hbox
hb.getChildren().add(new Button("Click A"));
hb.getChildren().add(new Button("Click B"));
hb.getChildren().add(new Button("Click C"));// Scene creation
Scene scene = new Scene(hb, 300, 300);
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produzione:
In questo caso, 3 pulsanti A, B e C sono disposti in modo orizzontale.
3. BorderPane
In questo, la struttura del layout ha cinque aree come TOP, BOTTOM, CENTER, LEFT e RIGHT.
Codice:
// Java Program to create an BorderPane
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
BorderPane bp = new BorderPane();
bp.setTop(new TextField("A-Top"));
bp.setBottom(new TextField("B-Bottom"));
bp.setLeft(new TextField("C-Left"));
bp.setRight(new TextField("D-Right"));
bp.setCenter(new TextField("E-Center"));// Scene creation
Scene scene = new Scene(bp);// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produzione:
Qui, 5 campi di testo vengono rinviati nelle cinque direzioni del riquadro.
4. FlowPane
FlowPane consente all'utente di disporre i nodi in modo consecutivo e avvolge i nodi al limite. Qui, i nodi possono essere nella direzione verticale (colonne) o nella direzione orizzontale (righe).
Codice:
// Java Program to create a flowpane
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;
public class JFXLayouts extends Application (
// start method helps in launching the application
public void start(Stage stage)
(
//create buttons
Button b1 = new Button("Button A");
Button b2 = new Button("Button B");
Button b3 = new Button("Button C");
Button b4 = new Button("Button D");
//Flow Pane creation
FlowPane fp = new FlowPane();
//Set horizontal gap
fp.setHgap(25);
//Set margin
fp.setMargin(b1, new Insets(20, 0, 20, 20));
ObservableList list = fp.getChildren();
//Add nodes to the flow pane
list.addAll(b1, b2, b3, b4);
// Scene creation
Scene scene = new Scene(fp);
// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produzione:
5. StackPane
In questo layout, tutti i nodi sono collocati in un singolo stack. Cioè, i nodi sono disposti proprio come in uno stack, uno sopra l'altro.
Codice:
// Java Program to create a flowpane
import javafx.application.Application;
import javafx.scene.shape.Sphere;
import javafx.collections.ObservableList;
import javafx.scene.text.Font;
import javafx.geometry.Insets;
import javafx.scene.text.FontWeight;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
public class JFXLayouts extends Application (
@Override
public void start(Stage stage) (
//draw a sphere
Sphere sph = new Sphere(50);
//text creation
Text t = new Text("DEMO");
//Set font of the text
t.setFont(Font.font(null, FontWeight.BOLD, 13));
//Set color of the text
t.setFill(Color.RED);
//set position of the text
t.setX(20);
t.setY(50);
//Create a Stackpane
StackPane sp = new StackPane();
ObservableList list = sp.getChildren();
//Add nodes to the pane
list.addAll( sph, t);
// Scene creation
Scene scene = new Scene(sp);
// Title set
stage.setTitle("Example for BorderPane");
// Scene setting
stage.setScene(scene);
stage.show();
)
// Main Method
public static void main(String args())
(
//method to launch the JavaFX application
launch(args);
)
)
Produzione:
Conclusione
JavaFX Layouts aiuta a creare il design dell'interfaccia in un aspetto coerente. I layout possono essere di diversi tipi e possono essere scelti in base alle esigenze dell'utente. In questo documento, cinque dei layout JavaFX sono discussi in dettaglio.
Articoli consigliati
Questa è una guida ai layout JavaFX. Qui discutiamo i primi 5 layout di JavaFX come VBox, HBox, BorderPane, FlowPane e StackPane insieme ad esempi e implementazione del codice. Puoi anche consultare i seguenti articoli per saperne di più -
- Dichiarazione di break in Java
- JList in Java
- JPanel in Java
- Per Loop in Java
- Guida completa all'etichetta JavaFX
- Dichiarazione di break in JavaScript
- Layout HTML
- Tipi e come creare grafici JavaFx?
- Come inserire testo in JavaFX TextField?
- Costruttori e metodi del pulsante JavaFx
- I 15 principali metodi di HBox in JavaFX
- Come creare la casella di controllo in JavaFX con esempi?
- JavaFX VBox | Metodi di JavaFX VBox
- Diversi metodi di JavaFX StackPane