Creating a custom node in JavaFX and adding it to a layout

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