Javafx GUI programming - user-interface

Question

So im trying to make 3 buttons on the top panel and 3 radio buttons on the bottom panel, but when i run it, it comes out all weird, would love it if someone can help me. Im still pretty new to GUI so my code might be completely wrong.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
public class ColorFactory extends Application {
#Override
public void start(Stage stage)
{
BorderPane pane = new BorderPane();
// sets the width and height
stage.setHeight(300);
stage.setWidth(500);
//calls the mainpanel constructor
pane.setCenter(new MainPanel());
//make the mainpanel visible using the setVisible(true)
//call the stage.setScene
stage.setScene(new Scene(pane));
// set title to Color Factory
stage.setTitle("Color Factory");
//call stage.show
stage.show();
}
private class MainPanel extends BorderPane
{
public MainPanel()
{
HBox Tpanel = new HBox(25);
Tpanel = new HBox(25);
Tpanel.setPrefWidth(500);
Tpanel.setPrefHeight(50);
Tpanel.setAlignment(Pos.TOP_CENTER);
Button red = new Button("Red");
red.setStyle("-fx-background-color: red");
Button yellow = new Button("Yellow");
yellow.setStyle("-fx-background-color: yellow;");
Button orange = new Button("Orange");
orange.setStyle("-fx-background-color: orange;");
Tpanel.setStyle("-fx-background-color: white;");
Tpanel.getChildren().addAll(red,yellow,orange);
HBox Bpanel = new HBox(15);
Bpanel.setPrefWidth(500);
Bpanel.setPrefHeight(75);
RadioButton green = new RadioButton("Green");
RadioButton blue = new RadioButton("Blue");
RadioButton cyan = new RadioButton("Cyan");
green.setStyle("-fx-background-color: green;");
blue.setStyle("-fx-background-color: blue;");
cyan.setStyle("-fx-background-color: cyan;");
Bpanel.setAlignment(Pos.BOTTOM_CENTER);
Bpanel.getChildren().addAll(green,blue,cyan);
Label label = new Label("Top buttons change the panel color and bottom radio buttons change the text color");
label.setAlignment(Pos.CENTER_LEFT);
label.setTextFill(Color.BLUE);
getChildren().addAll(Tpanel,Bpanel,label);
HBox.setMargin(Tpanel, new Insets(5,10,5,10));
HBox.setMargin(Bpanel, new Insets(5,10,5,10));
HBox.setMargin(label, new Insets(150,10,5,10));
}
}
public static void main(String[] args) {
launch(args);
}
}

Answer 1

Your MainPanel is a BorderPane: simply adding nodes to it will put them all in the top left by default (so they are all on top of each other). When using a BorderPane, you need to call setCenter(...), setTop(...), setLeft(...) etc to position the nodes.
E.g.:
// getChildren().addAll(Tpanel,Bpanel,label);
setTop(Tpanel);
setBottom(Bpanel);
setCenter(label);