Представление списка записей в виде карточек

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

Добрый день.

Подскажите пожалуйста есть ли возможность представить список записей в виде каких-либо карточек. В виде таблиц платформа позволяет, но как на пример вывести картинку с описанием и парой полей в примерах найти не смог.
Направьте пожалуйста где искать.

2

Например, на базе DataGrid или Table и механизма генерируемой колонки.

image
image945×577 36.2 KB

На самом деле это GroupTable без заголовка, с фиксированной группировкой по полю “Срок”.
У нее есть единственная отображаемая колонка для отображения “Карточки” - это генерируемая колонка.
Основу “карточки” можно задать в виде Hbox с фиксированной высотой.
Далее в него упакованы прочие элементы: CheckBox, Image, TextArea…

@Install(to = "tableGeneratedColumn.taskCard", subject = "columnGenerator")
private Component tableGeneratedColumnTaskColumnGenerator(Task task) {
    HBoxLayout hboxMain = uiComponents.create(HBoxLayout.class);
    hboxMain.setHeight("95px");
    hboxMain.setWidth("100%");
    hboxMain.setSpacing(true);

    //кнопка флага
    Button isFlag = uiComponents.create(Button.class);
    isFlag.setIcon("font-icon:BOOKMARK_O");
    isFlag.setStyleName("borderless cscTailTaskButtonFlag");
    isFlag.setAlignment(TOP_CENTER);
    isFlag.setHeight("18px");
    isFlag.setWidth("24px");

    //чек бокс Выполнения задачи 
    CheckBox isReadyCheckBox = uiComponents.create(CheckBox.class);
    isReadyCheckBox.setAlignment(MIDDLE_CENTER);
    isReadyCheckBox.setEnabled(false);

    //аватарка Автора Задачи
    Image avatarImage = uiComponents.create(Image.class);
    avatarImage.setScaleMode(Image.ScaleMode.CONTAIN);
    avatarImage.setWidth("36px");
    avatarImage.setHeight("36px");
    avatarImage.setAlignment(MIDDLE_CENTER);
    ....
    ....
    ....

    return hboxMain;
}

Можно и на ScrollBoxLayout аналогичное представление собрать.
Но если нужно отрабатывать выделение элементов, группировку, сортировку - проще на базе DataGrid или Table.

3

Спасибо большое за такой детальный ответ.
Сейчас буду пробовать.
Но на сколько я понимаю механизм DataGrid позволяет отображать одна “карточка/запись” в одной строке, а есть ли какая-то возможность с помощью данной технологии отобразить несколько “карточек/записей” в одной строке?

4

Да, у DataGrid и Table стандартная логика работы - “одна строка - одна запись” (сущность контейнера).
Тогда лучше смотрите ScrollBoxLayout. Там скомпонуете как угодно.

5

Есть Jmix sampler - там как раз карточки с картинками на главном экране.
https://demo.jmix.io/sampler/#main

Исходный код, придется разобраться в коде, верстка построена на кастомных CSS стилях:

1 лайк
6

Спасибо большое за ответы.
Оба метода работают.
Получилось все сделать.