Как динамический создавать компоненты к которым есть шаблон?

Вопросы и проблемы
#1

Привет,
В проекте есть сущность задача, с полями name, startTime, endTime, status. Мне нужно вывести задачи из базы и отобразить записи как список. Для отображения мы создали шаблон (HTML template) и хотим чтобы Cuba компоненты были отображены как в шаблоне, Annotation 2020-07-31 004045.

Я пытался реализовать таким образом, в XML дескрипторе скрина есть пустой htmlBox с привязкой к шаблону. В контроллере скрина я запрашиваю задачи из базы в виде списка(List<Задачи>), и для каждой задачи из списка создаю компоненты: Label для name, еще label-ы для startTime, endTime и CheckBox для status. И добавляю эти компоненты в htmlBox. Но пока не смог добиться конечного результата, хотел спросить это возможно таким реализовать? Или возможно я делаю что-то не так? Прошу помогите с направлением.

Спасибо, за помощь.

#5

Здравствуйте!

Шаблон в компоненте HtmlBox это уже готовая разметка с маппингом на компоненты. Поэтому динамически добавлять компоненты в HtmlBox не получится, если только при этом не изменять сам шаблон.

Думаю, можно повторить данный мокап с помощью динамически добавляемых компонентов в ScrollBox. В качестве основной разметки для строки можно взять CssLayout, чтобы не перегружать страницу дополнительными div. Однако придётся выравнивать отображение с помощью CSS.

Небольшой пример

XML descriptor:

<layout expand="scrollBox">
    <scrollBox id="scrollBox" width="100%">
    </scrollBox>
</layout>

Controller:

@Inject
private ScrollBoxLayout scrollBox;
@Inject
private UiComponents uiComponents;

@Subscribe
public void onInit(InitEvent event) {
    for (int i = 1; i <= 100; i++) {
        CssLayout row = uiComponents.create(CssLayout.class);
        row.setStyleName("todo-row");
        row.setWidthFull();

        CheckBox checkBox = uiComponents.create(CheckBox.NAME);
        checkBox.setStyleName("todo-check");
        row.add(checkBox);

        Label<String> time = uiComponents.create(Label.NAME);
        time.setStyleName("todo-time");
        time.setValue("10:00-11:00");
        row.add(time);

        Label<String> description = uiComponents.create(Label.NAME);
        description.setStyleName("todo-description");
        description.setValue("TODO description " + i);
        row.add(description);

        scrollBox.add(row);
    }
}
2 симпатии
#6

Спасибо за ответ