英文:
JavaFX -- Creating multiple panes within a scene
问题
public class ZodiacGUI extends Application {
public static void main(String args[]) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane mainPane = new BorderPane();
mainPane.setStyle("-fx-background-color: PINK");
setupControls(mainPane);
Scene scene = new Scene(mainPane);
setStage(primaryStage, scene);
}
public void setStage(Stage primaryStage, Scene scene) {
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setTitle("What is my Zodiac Sign?");
primaryStage.setScene(scene);
primaryStage.show();
}
public void setupControls(BorderPane mainPane) {
VBox topPane = new VBox();
HBox centerPane = new HBox();
VBox bottomPane = new VBox();
topPane.setAlignment(Pos.TOP_LEFT);
topPane.setSpacing(10);
centerPane.setAlignment(Pos.CENTER);
centerPane.setSpacing(10);
bottomPane.setAlignment(Pos.CENTER);
bottomPane.setSpacing(10);
Label label = new Label("Enter your birthday formatted as -> mm/dd");
TextField userInput = new TextField();
userInput.setPromptText("Enter birthday");
Button exitButton = new Button("Exit");
Button findSign = new Button("Find my sign");
Button clear = new Button("Clear");
exitButton.setOnAction(e -> System.exit(0));
topPane.getChildren().addAll(label, userInput);
centerPane.getChildren().addAll(clear, exitButton, findSign);
bottomPane.getChildren().addAll(new Label("Prompting the sign"));
mainPane.setTop(topPane);
mainPane.setCenter(centerPane);
mainPane.setBottom(bottomPane);
}
}
英文:
So I have to make a Zodiac Sign GUI, and we are tasked with having the following:
- a Label in the top left, and a TextField in the top right (both with padding)
- an exit Button in the center of the GUI, along with a clear and find my sign on either side
- and finally, a Label in the bottom center prompting the sign
I am utterly confused on how to have this come out, as I am a novice in JavaFX. I believe I would need a branch node along with the root node in order to get this kind of layout. I do not need assistance in instantiating the button, labels etc., mainly confused with how this layout can even work. The code I have now is the following:
public class ZodiacGUI extends Application {
public static void main(String args[]) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane mainPane = new BorderPane();
mainPane.setStyle("-fx-background-color: PINK");
setupControls(mainPane);
Scene scene = new Scene(mainPane);
setStage(primaryStage, scene);
}
public void setStage(Stage primaryStage, Scene scene) {
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setTitle("What is my Zodiac Sign?");
primaryStage.setScene(scene);
primaryStage.show();
}
public void setupControls(BorderPane mainPane) {
Label label = new Label("Enter you birthday formatted as -> mm/dd");
Button exitButton = new Button();
Button findSign = new Button();
Button clear = new Button();
TextField userInput = new TextField();
userInput.setPromptText("Enter birthday");
exitButton.setText("Exit.");
findSign.setText("Find my sign.");
clear.setText("Clear.");
exitButton.setOnAction(e -> System.exit(0));
mainPane.setLeft(label);
mainPane.setRight(userInput);
mainPane.setCenter(exitButton);
mainPane.setCenter(findSign);
mainPane.setCenter(clear);
BorderPane.setAlignment(label, Pos.TOP_LEFT);
BorderPane.setAlignment(userInput, Pos.TOP_RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.CENTER_LEFT);
BorderPane.setAlignment(clear, Pos.CENTER_RIGHT);
}
}
This only outputs one of the buttons out of the three, as I assume it is because the necessary addition of another BorderPane? Here is a drawn out picture of what I would like to come out with:
Just to clarify, I do not need assistance with the handling of finding the zodiac sign, etc. Mainly need assistance on the layout, as it has stumped me for days. Thank you in advance for helping out a novice to JavaFX :).
答案1
得分: 0
你可能想使用GridPane:
GridPane grid = new GridPane();
grid.add(label, 0, 0);
grid.add(userInput, 2, 0);
grid.add(findSign, 0, 1);
grid.add(exitButton, 1, 1);
grid.add(clear, 2, 1);
或者使用带有BorderPane的VBox来帮助布局和对齐:
BorderPane mainPane = new BorderPane();
BorderPane centerPane = new BorderPane();
mainPane.setLeft(label);
mainPane.setRight(userInput);
centerPane.setLeft(findSign);
centerPane.setRight(clear);
centerPane.setCenter(exitButton);
BorderPane.setAlignment(label, Pos.LEFT);
BorderPane.setAlignment(userInput, Pos.RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.LEFT);
BorderPane.setAlignment(clear, Pos.RIGHT);
VBox items = new VBox();
items.getChildren().addAll(mainPane, centerPane);
英文:
You might want to use a GridPane
GridPane grid = new GridPane();
grid.add(label,0,0);
grid.add(userInput,2,0);
grid.add(findSign,0,1);
grid.add(exitButton,1,1);
grid.add(clear,2,1);
or use a VBox with BorderPane to help with the layout/alignment
BorderPane mainPane, centerPane;
mainPane.setLeft(label);
mainPane.setRight(userInput);
centerPane.setLeft(findSign);
centerPane.setRight(clear);
centerPane.setCenter(exitButton);
BorderPane.setAlignment(label, Pos.LEFT);
BorderPane.setAlignment(userInput, Pos.RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.LEFT);
BorderPane.setAlignment(clear, Pos.RIGHT);
VBox items = new VBox();
items.getChildren().addAll(mainPane, centerPane);
</details>
# 答案2
**得分**: 0
有三行,每行的子元素数量不同。如果一行有多个子元素,可以使用 HBox。
```java
BorderPane mainPane = new BorderPane();
mainPane.setTop(new HBox(topLabel, topField));
mainPane.setCenter(new HBox(centerLabel, centerField, centerButtom));
mainPane.setBottom(bottomCenterButton);
如果你需要超过三行(BorderPane 的顶部、中间、底部部分),可以使用 VBox,其中每个子元素都是一行,如下所示:
HBox row1 = new HBox(child1, child2);
HBox row2 = new HBox(child1, child2, child3);
HBox row3 = new HBox(child1);
HBox row4 = new HBox(child1, child2);
VBox pane = new VBox(row1, row2, row3, row4);
英文:
You have three rows with diffrent number of children. You can use HBox if row have more than one child.
BorderPane mainPane = new BorderPane();
mainPane.setTop(new HBox(topLabel, topField));
mainPane.setCenter(new HBox(centerLabel, centerField, centerButtom));
mainPane.setBottom(bottomCenterButton);
If you need more than 3 rows (top, center, bottom section of BorderPane) you can use VBox, where every child is row like:
HBox row1 new HBox(child1, child2)
HBox row2 new HBox(child1, child2, child3)
HBox row3 new HBox(child1)
HBox row4 new HBox(child1, child2)
VBox pane = new VBox(row1, row2, row3, row4);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论