Как разместить объекты JavaFX внутри ObservableList?

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

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

Где написано «Запрос к базе данных», затем стрелка, указывающая на следующий шаг «Загрузить страницу» и так далее. Мне нужно что-то подобное. Мне нужна возможность перемещать (Draggable), удалять, добавлять объекты/шаги.

Что я сделал до сих пор: я использую прямоугольники для каждого шага. Я пытался использовать GridPane, но это была боль, а не каламбур. Теперь я использую ListView горизонтально. Кажется, он работает, но я не могу заставить прямоугольники появляться.

Мне также нужно иметь возможность щелкать прямоугольники в listView и отображать новую сцену.

вот что у меня есть.

Есть ли что-то еще, что я могу использовать вместо 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();
        }

    }

}


person Salim    schedule 24.11.2015    source источник
comment
Существует пример для выполнения перетаскивания элементов в ListView здесь. Поможет ли это вам выполнить то, что вам нужно, я не знаю. В целом ваш вопрос в его текущей формулировке слишком широк для stackoverflow. Чтобы ответить на заголовок вопроса: observableList.add(item), но я уверен, что это не то, чего вы хотите...   -  person jewelsea    schedule 24.11.2015
comment
Одна из проблем, с которыми я сталкиваюсь, заключается в том, что когда экземпляр AddStep() добавляется в ObList, а затем загружается в ListView, результат не является прямоугольником. Результатом является строковый контроллер.AddStep()@3bcb379f что вызывает это?   -  person Salim    schedule 24.11.2015
comment
Энди, вам нужна фабрика ячеек, см. Настройка Содержимое представления списка: пример 12-4. Создание фабрики ячеек или пример, на который я ссылался ранее.   -  person jewelsea    schedule 24.11.2015