2017-11-15 6 views
1

GridFaneをペインに追加することで、JavaFXを使用して簡単な電子レンジをモデル化したいと考えています。 MicrowaveJavaFXのレイアウトの修正

以上が結果ですが、gridPanesを正しく配置するのに問題があります。

私がこれをどのように改善できるかについてのお手伝いをいただければ幸いです。 ここに私の結果がどのように見えるのか、私のコードがそれに付随するのです。ここで

my output

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.BorderPane; 
import javafx.stage.Stage; 
import javafx.geometry.Insets; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.ColumnConstraints; 
import javafx.scene.layout.Priority; 
import javafx.scene.layout.Pane; 
import javafx.scene.control.Label; 

public class Microwave extends Application 
{ 
    @Override 
    public void start(Stage primaryStage) 
    { 
     Pane root = new Pane(); 
     GridPane gPane1 = new GridPane(); 
     GridPane gPane2 = new GridPane(); 
     TextField time = new TextField("Time to be displayed here"); 
     Label food = new Label("Place food here"); 

     Button start_button = new Button("Start"); 
     Button stop_button = new Button("Stop"); 
     Button button_0 = new Button("0"); 
     Button button_1 = new Button("1"); 
     Button button_2 = new Button("2"); 
     Button button_3 = new Button("3"); 
     Button button_4 = new Button("4"); 
     Button button_5 = new Button("5"); 
     Button button_6 = new Button("6"); 
     Button button_7 = new Button("7"); 
     Button button_8 = new Button("8"); 
     Button button_9 = new Button("9"); 

     gPane1.add(start_button, 1, 3); 
     gPane1.add(stop_button, 2, 3); 
     gPane1.add(button_0, 0, 3); 
     gPane1.add(button_1, 0, 0); 
     gPane1.add(button_2, 1, 0); 
     gPane1.add(button_3, 2, 0); 
     gPane1.add(button_4, 0, 1); 
     gPane1.add(button_5, 1, 1); 
     gPane1.add(button_6, 2, 1); 
     gPane1.add(button_7, 0, 2); 
     gPane1.add(button_8, 1, 2); 
     gPane1.add(button_9, 2, 2); 

     gPane2.add(time,0,0); 

     root.getChildren().addAll(gPane1,gPane2,food);  

     Scene scene = new Scene(root,200,50); 
     primaryStage.setTitle("Microwave Oven"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

} 
+0

なぜあなたはルートのため、プレーン 'Pane'を使用している:それは何のレイアウトを実行しませんか? 'BorderPane'、おそらくテキストフィールドを持つ' HBox'と 'VBox'の' gridPane1'やルートの 'GridPane'を使うことができます。 –

+0

GridPaneをルートとして使用すると、他のGridPaneを簡単に整理できますか? –

+2

はい、「ペイン」(実際にはあなたがやりたいことをしない)を使うよりも簡単です。 'GridPane'をルートとして使用し、すべてのボタン、テキストフィールド、ラベルを直接「サブペイン」なしで置くこともできますが、どちらの選択肢も簡単です。 –

答えて

0

SceneBuilderで作成された例です。 FXMLを使用して、コードでこれを行う方法を理解することができます。

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.geometry.Insets?> 
<?import javafx.scene.control.Button?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.control.TextField?> 
<?import javafx.scene.layout.ColumnConstraints?> 
<?import javafx.scene.layout.GridPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.Pane?> 
<?import javafx.scene.layout.RowConstraints?> 
<?import javafx.scene.layout.VBox?> 

<HBox alignment="CENTER" prefHeight="300.0" prefWidth="500.0" style="-fx-border-color: black; -fx-border-width: 3px;" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <Label alignment="CENTER" text="Place Food Here"> 
     <HBox.margin> 
      <Insets left="10.0" right="10.0" /> 
     </HBox.margin> 
     </Label> 
     <VBox style="-fx-border-color: black; -fx-border-width: 3px;" HBox.hgrow="ALWAYS"> 
     <children> 
      <TextField prefHeight="50.0" promptText="Time to be displayed here"> 
       <VBox.margin> 
        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> 
       </VBox.margin> 
      </TextField> 
      <Pane prefHeight="10.0" style="-fx-background-color: black;" /> 
      <GridPane VBox.vgrow="ALWAYS"> 
       <columnConstraints> 
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> 
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> 
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /> 
       </columnConstraints> 
       <rowConstraints> 
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
       </rowConstraints> 
       <children> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="1"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="2" GridPane.columnIndex="1"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="3" GridPane.columnIndex="2"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="4" GridPane.rowIndex="1"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="5" GridPane.columnIndex="1" GridPane.rowIndex="1"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="6" GridPane.columnIndex="2" GridPane.rowIndex="1"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="7" GridPane.rowIndex="2"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="8" GridPane.columnIndex="1" GridPane.rowIndex="2"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="9" GridPane.columnIndex="2" GridPane.rowIndex="2"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="0" GridPane.rowIndex="3"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Start" GridPane.columnIndex="1" GridPane.rowIndex="3"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Stop" GridPane.columnIndex="2" GridPane.rowIndex="3"> 
        <GridPane.margin> 
         <Insets bottom="10.0" left="15.0" right="5.0" top="10.0" /> 
        </GridPane.margin> 
        </Button> 
       </children> 
      </GridPane> 
     </children> 
     </VBox> 
    </children> 
</HBox> 

enter image description here

+0

いいですが、なぜこんなに多くの要素がありますか?なぜ、各ボタンを 'StackPane'でラップするのですか?メインの 'HBox'が' AnchorPane'でラップされているのはなぜですか?同様に、 'Label'は' StackPane'にラップされます。このStackPane自体は 'AnchorPane'でラップされています。アンカーペインとスタックペインの両方が冗長に見えます。これをかなり減らして同じ結果を達成できませんか? –

+0

それぞれの 'Node'がどのように働いているかを知っていたときの悪い習慣。私は答えを更新しました。 – Sedrick

関連する問題