Introdução aos layouts JavaFX
Os layouts da interface do usuário são o centro do design da interface. Muitas das estruturas da interface gráfica do usuário oferecem suporte para layouts na forma de APIs (Application Programming Interfaces). Também no JavaFX, é fornecido um número rico de layouts que ajudam a cumprir muitas das restrições, a fim de abordar a aparência consistente. Somente o número mínimo de parâmetros precisa ser definido neste caso. Os layouts podem ser de diferentes tipos e são explicados nas seções a seguir em detalhes.
Os 5 principais layouts JavaFX
Como já discutido, os layouts do JavaFX podem ser de diferentes tipos, como VBox, HBox, BorderPane, FlowPane, StackPane, AnchorPane, TilePane, GridPane, etc. Nesta seção, discutiremos cinco deles.
1. VBox
O VBox ajuda a organizar o nó em uma coluna vertical. Nesse caso, a altura padrão da área de conteúdo pode exibir os filhos em sua altura preferida e a largura padrão é a maior da largura dos filhos. Mesmo que os locais não possam ser definidos para os filhos, pois são calculados automaticamente, eles podem ser controlados em certa medida pela personalização das propriedades do VBox.
Código:
// 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);
)
)
Resultado:
Aqui, três botões A, B e C são organizados de maneira horizontal.
2. HBox
HBox funciona no conceito oposto de VBox. Ou seja, os nós serão organizados horizontalmente. A seguir está um programa que ajuda a entender a HBox.
Código:
// 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);
)
)
Resultado:
Nesse caso, três botões A, B e C são organizados de maneira horizontal.
3. BorderPane
Nisso, a estrutura de layout possui cinco regiões, como SUPERIOR, INFERIOR, CENTRO, ESQUERDA e DIREITA.
Código:
// 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);
)
)
Resultado:
Aqui, cinco campos de texto são reenviados nas cinco direções do painel.
4. FlowPane
O FlowPane permite que o usuário faça o layout dos nós de maneira consecutiva e envolva os nós no limite. Aqui, os nós podem estar na direção vertical (colunas) ou na direção horizontal (linhas).
Código:
// 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);
)
)
Resultado:
5. StackPane
Nesse layout, todos os nós são colocados em uma única pilha. Ou seja, os nós são organizados como em uma pilha, em cima da outra.
Código:
// 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);
)
)
Resultado:
Conclusão
O JavaFX Layouts ajuda a criar o design da interface em uma aparência consistente. Os layouts podem ser de tipos diferentes e podem ser escolhidos com base nos requisitos do usuário. Neste documento, cinco dos layouts JavaFX são discutidos em detalhes.
Artigos recomendados
Este é um guia para layouts JavaFX. Aqui discutimos os 5 principais layouts do JavaFX, como VBox, HBox, BorderPane, FlowPane e StackPane, juntamente com exemplos e implementação de código. Você também pode consultar os seguintes artigos para saber mais -
- Instrução Break em Java
- JList em Java
- JPanel em Java
- For Loop em Java
- Guia completo para JavaFX Label
- Declaração de quebra em JavaScript
- Layout HTML
- Tipos e como criar gráficos JavaFx?
- Como inserir texto no JavaFX TextField?
- Construtores e métodos do botão JavaFx
- Os 15 principais métodos de HBox no JavaFX
- Como criar a caixa de seleção no JavaFX com exemplos?
- JavaFX VBox | Métodos do JavaFX VBox
- Métodos diferentes do JavaFX StackPane