Автоматическое изменение размера прямоугольников на панели с использованием Java FX-8

Question

Я пытаюсь создать сетку прямоугольников, которые будут содержаться внутри панели, используя JavaFX. Я хочу, чтобы эти прямоугольники были автоматически изменены, чтобы занимать пространство, доступное в зависимости от размера панели, с небольшим зазором между прямоугольниками.

Код, который я сейчас использую, таков: вызывается функция createVisual для генерации группы, содержащей панель:

public class Visualizer extends NodePart {
    private VBox m_vbox;
    private AnchorPane m_pane;

    public static class ResizableRectanble extends javafx.scene.shape.Rectangle {
        public ResizableRectangle(double w, double h) {
            super(w,h);
        }
        @Override
        public boolean isResizable() {
            return true;
        }
        @Override
        public void resize(double width, double height) {
            setWidth(width);
            setHeight(height);
        }
    }

    @Override
    protected Group createVisual() {
        final Group group = new Group() {
            @Override
            public boolean isResizable() {
                return true;
            }
            @Override
            public void resize(double w, double h) {
                m_pane.setPrefSize(w,h);
            }
        };
        m_pane = new AnchorPane();
        m_pane.setStyle("-fx-background-color : lightcyan; -fx-border-color: silver; -fx-border-width: 3;");
        m_pane.setPrefSize(100, 100);
        m_pane.setMouseTransparent(false);

        m_vbox = new VBox(3.0);
        m_vbox.setFillWidth(true);
        m_vbox.setMouseTransparent(false);

        for(int i=0; i<16; i++) {
            HBox hbox = new HBox(3.0);
            hbox.setAlignment(Pos.CENTER);
            for(int j=0; j<4; j++) {
                Rectangle rect = new ResizableRectangle(50.0,50.0);
                rect.setStyle("-fx-fill: lime; -fx-border-color: red; -fx-border-width: 3;");
                hbox.setHgrow(rect, Priority.ALWAYS);
                hbox.getChildren().add(rect);   
                hbox.setFillHeight(true);
            }
        }
        m_vbox.setVGrow(hbox, Priority.ALWAYS); 
        m_pane.setTopAnchor(m_vbox, 5.0);
        m_pane.setBottomAnchor(m_vbox, 5.0);
        m_pane.getChildren().add(m_vbox);
        group.getChildren().add(m_pane);
        return group;
    }
}

Это на самом деле не работает, так как ширина прямоугольника не изменяется от исходного значения при изменении размера группы. Высота прямоугольников также очень мала, и между ними намного больше 3,0 пикселей.

Я также пытался настроить левый и правый якорь на m_vbox, но, похоже, он не работает, так как прямоугольники уменьшаются до размеров, меньших половины размера панели.

Я попытался использовать GridPane и ограничения на столбцы и строки, но он также не работает, так как есть наложение. Я бы предпочел использовать комбинацию VBox и HBox, если это возможно.

Эта функция вызывается Eclipse GEF (Graphical Editing Framework) для создания узла в графе. Я использую GEF версии 5 в Eclipse Neon.

Я новичок в JavaFX, любая помощь будет высоко ценится!

Изменить, код, который я пытался с помощью GridPane:

public class Visualizer extends NodePart {
    private GridPane m_gridPane;

    public static class ResizableRectanble extends javafx.scene.shape.Rectangle {
        public ResizableRectangle(double w, double h) {
            super(w,h);
        }
        @Override
        public boolean isResizable() {
            return true;
        }
        @Override
        public void resize(double width, double height) {
            setWidth(width);
            setHeight(height);
        }
    }

    @Override
    protected Group createVisual() {
        final Group group = new Group() {
            @Override
            public boolean isResizable() {
                return true;
            }
            @Override
            public void resize(double w, double h) {
                m_gridPane.setPrefSize(w,h);
            }
        };
        m_gridPane = new GridPane();
        m_gridPane.setStyle("-fx-background-color : lightcyan; -fx-border-color: silver; -fx-border-width: 3;");
        m_gridPane.setPrefSize(100, 100);
        m_gridPane.setMouseTransparent(false);

        for(int i=0; i<16; i++) {
            for(int j=0; j<4; j++) {
                if(i == 0) {
                    ColumnConstraints cc = new ColumnConstraints();
                    cc.setFillWidth(true);
                    cc.setHgrow(Priority.ALWAYS);
                    m_gridPane.getColumnConstraints().add(cc);
                }

                Rectangle rect = new ResizableRectangle(50.0,50.0);
                rect.setStyle("-fx-fill: lime; -fx-border-color: red; -fx-border-width: 3;");
                m_gridPane.add(rect, j, i);
            }
            RowConstraints rc = new RowConstraints();
            rc.setFillHeight(true);
            rc.setVgrow(Priority.ALWAYS);
            m_gridPane.getRowConstraints().add(rc);
        }
        group.getChildren().add(m_gridPane);
        return group;
    }
}

Редактировать 2: код с использованием GridPane работает, и узлы не перекрываются. Тем не менее, границы прямоугольников не показаны, что привело меня к мысли, что произошло наложение.