title: Creating a custom node in JavaFX and adding it to a layout
body: <p>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.</p>
  
  <p>I want the final GUI to look like this:
  <a href="http://d2vlcm61l7u1fs.cloudfront.net/media%2Fecc%2Fecc3c2db-2a7e-4571-bcf0-37858846dadf%2FphphG0pUA.png" rel="nofollow noreferrer">http://d2vlcm61l7u1fs.cloudfront.net/media%2Fecc%2Fecc3c2db-2a7e-4571-bcf0-37858846dadf%2FphphG0pUA.png</a></p>
  
  <p>Here is what I have so far</p>
  
  <pre><code>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&lt;Double&gt; tri1List = triangle1.getPoints();
          Polygon triangle2 = new Polygon();
          ObservableList&lt;Double&gt; tri2List = triangle1.getPoints();
          Polygon triangle3 = new Polygon();
          ObservableList&lt;Double&gt; tri3List = triangle1.getPoints();
          Polygon triangle4 = new Polygon();
          ObservableList&lt;Double&gt; tri4List = triangle1.getPoints();
          Polygon triangle5 = new Polygon();
          ObservableList&lt;Double&gt; tri5List = triangle1.getPoints();
          Polygon triangle6 = new Polygon();
          ObservableList&lt;Double&gt; 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&lt;Double&gt; 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 &lt; 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&lt;Double&gt; 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&lt;String&gt; 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);
  
  
      }
  
  
  
  }
  </code></pre>
  
  <p>This is the main GUI where I want to instantiate my custom node (hexagon)</p>
  
  <pre><code>    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);
      }
  }
  </code></pre>