Creating a custom node in JavaFX and adding it to a layout - user-interface

Question

I am new to GUI programming, I need help creating 7 Custom Nodes and putting them into a layout. I do not know what parent class I should be extending or how to implement this class as a node.
I want the final GUI to look like this:
http://d2vlcm61l7u1fs.cloudfront.net/media%2Fecc%2Fecc3c2db-2a7e-4571-bcf0-37858846dadf%2FphphG0pUA.png
Here is what I have so far
public class HexagonShape extends CustomNode {//what to extend?
//color of each segment
public String A;
public String B;
public String C;
public String D;
public String E;
public String F;
private final double angle30degree = Math.PI / 6;
public HexagonShape() {
// Create a pane, a polygon, and place polygon to pane
Pane pane = new Pane();
Polygon triangle1 = new Polygon();
ObservableList<Double> tri1List = triangle1.getPoints();
Polygon triangle2 = new Polygon();
ObservableList<Double> tri2List = triangle1.getPoints();
Polygon triangle3 = new Polygon();
ObservableList<Double> tri3List = triangle1.getPoints();
Polygon triangle4 = new Polygon();
ObservableList<Double> tri4List = triangle1.getPoints();
Polygon triangle5 = new Polygon();
ObservableList<Double> tri5List = triangle1.getPoints();
Polygon triangle6 = new Polygon();
ObservableList<Double> tri6List = triangle1.getPoints();
Polygon hexagon = new Polygon();
pane.getChildren().addAll(hexagon, triangle1, triangle2, triangle3, triangle4, triangle5, triangle6);
hexagon.setFill(Color.WHITE);
hexagon.setStroke(Color.BLACK);
ObservableList<Double> list = hexagon.getPoints();
triangle1.setFill(Color.GRAY);
triangle1.setStroke(Color.BLUEVIOLET);
final double WIDTH = 250, HEIGHT = 250;
double centerX = WIDTH / 2, centerY = HEIGHT / 2;
double radius = Math.min(WIDTH, HEIGHT) * 0.4;
// Add points to the polygon list
for (int i = 0; i < 6; i++) {
list.add(centerX + radius * Math.cos(2 * i * angle30degree));
list.add(centerY - radius * Math.sin(2 * i * angle30degree));
}
createTriangle(tri2List, radius, centerX, centerY, 0);
createTriangle(tri1List, radius, centerX, centerY, 2);
createTriangle(tri6List, radius, centerX, centerY, 4);
createTriangle(tri5List, radius, centerX, centerY, 6);
createTriangle(tri4List, radius, centerX, centerY, 8);
createTriangle(tri3List, radius, centerX, centerY, 10);
}
private void createTriangle(ObservableList<Double> vectors, double radius, double centerX, double centerY, int radian) {
vectors.add(centerX);
vectors.add(centerY);
vectors.add(centerX + radius * Math.cos(radian * angle30degree));
vectors.add(centerY - radius * Math.sin(radian * angle30degree));
vectors.add(centerX + radius * Math.cos((radian + 2) * angle30degree));
vectors.add(centerY - radius * Math.sin((radian + 2) * angle30degree));
}
public void loadHexagon(ArrayList<String> colors, int id){
this.A = colors.get(0);
this.B = colors.get(1);
this.C = colors.get(2);
this.D = colors.get(3);
this.E = colors.get(4);
this.F = colors.get(5);
}
}
This is the main GUI where I want to instantiate my custom node (hexagon)
package gui;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Scanner;
import javax.swing.JFileChooser;
import hexagon.Hexagon;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
public class HexagonGUI extends Application {
#Override
public void start(Stage primaryStage) {
GridPane gp = new GridPane();
gp.setGridLinesVisible(true);
gp.setVgap(10);
gp.setHgap(10);
gp.setPadding(new Insets(10,10,10,10));
HexagonShape h1 = new HexagonShape();//custom node to add
GridPane.setConstraints(h1, 10, 10);
HexagonShape h2 = new HexagonShape();
HexagonShape h3 = new HexagonShape();
HexagonShape h4 = new HexagonShape();
HexagonShape h5 = new HexagonShape();
HexagonShape h6 = new HexagonShape();
HexagonShape h7 = new HexagonShape();
Scene scene = new Scene(gp, 260, 80);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) throws IOException{
launch(args);
}
}

Answer 1

You can extend Region class in your HexagonShape class,
Then do this.getChildren.add(pane); in your HexagonShape class
Note: Region extends Parent which extends Node class