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 !
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 !
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
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 !
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);
}
}
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 ?
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);
}
}
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.