如何将JavaFX对象放在ObservableList中？

Question

我正在尝试创建类似于此图像中的步骤流程

http://i.ytimg.com/vi/alU_Y2Uc3fA/maxresdefault.jpg

它所说的＆＃34;查询数据库＆＃34;然后是指向下一步的箭头＆＃34;加载页面＆＃34;等等。我需要这样的东西。我需要能够移动（可拖动），删除，添加对象/步骤。

到目前为止我做了什么： 我为每一步使用矩形。我尝试使用GridPane，但这是一个痛苦，没有双关语意。我现在正在水平使用ListView。它看似有效，但我无法显示矩形。

我还需要能够在listView中单击rectanlges并显示一个新阶段。

这就是我所拥有的。

我能用其他东西代替ListView，可以做我需要的吗？

public class singleStep{

           ObservableList<InstructionStep> obListSteps = FXCollections.observableArrayList();

            public void onClickButtonAddStepToListView(){
                obListSteps.add(new AddStep());
                StepListViewFromMainWindow.setItems(obListSteps);

            }

}



public class AddStep{

   public AddStep(){
        Rectangle rect = new Rectangle();
        rect.setArcHeight(5.0);
        rect.setArcWidth(5.0);
        rect.setHeight(58);
        rect.setWidth(66);
        rect.setFill(Color.LIGHTGREEN);

  }



    public void addStepPane(){
        try {
            FXMLLoader isLoader = new FXMLLoader(Main.class.getResource("/view/AddStep.fxml"));
            AnchorPane pane = isLoader.load();
            Scene scene = new Scene(pane);
            IAddStep is = isLoader.getController();
            primaryStepStage = new Stage();
            is.setStage(primaryStepStage);
            primaryStepStage.setScene(scene);
            primaryStepStage.initModality(Modality.APPLICATION_MODAL);
            primaryStepStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}