Demo Catalog UI component

Flow
1

Hi,

I was looking at this https://demo.vaadin.com/dashboard/#!schedule and the “Catalog” tab is exactly something I want to do.

Is there any component to achieve this or start source code somewhere ?

Thanks !

2

Hi,

This demo is a Vaadin 8 application. I don’t know if the source code has been published but perhaps somebody else knows.

In Vaadin 14, I think the best fit is currently this component: https://vaadin.com/directory/component/full-calendar-4-web-component

3

Hi,

Thank you for your anwser. I had already found the full-calendar component but I’m not talking about this part. In the demo application there is indeed the “Schedule” section but there is 2 tabs.

The first on is “Calendar” (which is full-calendar component) and the second one is “Catalog” which is the one I’m looking for, something to display image in rows & columns and maybe to add category sections etc.

Thanks !

4

It depends on your need. If you want a fix number of columns then you can try the GridLayout:
https://vaadin.com/directory/component/css-grid-layout

If you need a list of images that wrap, this is working (you should put the style in css classname):

@Route("images")
public class ImageView extends VerticalLayout  {

    private String src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png";
    
    public ImageView() {
        Div div = new Div();
        div.getStyle().set("display","flex");
        div.getStyle().set("flex-wrap","wrap");
        div.setWidthFull();
        for (int i = 0; i < 30; i++) {
            Image image = new Image();
            image.setSrc(src);
            image.setWidth("250px");
            image.getStyle().set("padding", "var(--lumo-space-m)");
            div.add(image);
        }
        add(div);
    }

}
5

Ok I see

I won’t have a fix number of columns because images/objects will be retrieved from an API and could change with time. The objective would be to have a fully dynamic front-end based on our API.

Also the rows will represent categories (only 3 maximum) also based on our API.

Final thing is that I don’t only want to display images in a row but images with a button and a title (for now), I guess that using GridLayout and for each object a VerticalLayout would do the trick right ?

6

You can change my code and replace the Image by a VerticalLayout.
If you want 3 rows of “infinite” images and don’t wrap the images, then you can use the HorizontalLayout.


@Route("images")
public class ImageView extends VerticalLayout  {

    private String src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png";

    public ImageView() {
        // row 1
        H1 categoryTitle = new H1();
        categoryTitle.setText("Category 1");
        add(categoryTitle);
        addRow();
        H1 categoryTitle2 = new H1();
        categoryTitle2.setText("Category 2");
        add(categoryTitle2);
        addRow();
        H1 categoryTitle3 = new H1();
        categoryTitle3.setText("Category 2");
        add(categoryTitle3);
        addRow();
    }

    private void addRow() {
        HorizontalLayout horizontalLayout = new HorizontalLayout();
        horizontalLayout.setWidthFull();
        for (int i = 0; i < 30; i++) {
            VerticalLayout verticalLayout = new VerticalLayout();
            Image image = new Image();
            image.setSrc(src);
            image.setWidth("250px");
            verticalLayout.add(image);
            verticalLayout.add(new Span("title"));
            verticalLayout.add(new Button("btn"));
            horizontalLayout.add(verticalLayout);
        }
        add(horizontalLayout);
    }

}
7

sidenote: If you expect the amount of images to be too many to display on a single horizontal row, you might want to use a HorizontalScrollLayout ([ScrollLayout]
(https://vaadin.com/directory/component/scrolllayout) add-on), so the images don’t get mushed due to lack of space.