Vaadin like Windows 10 Design

Flow
1

Ekran görüntüsü 2024-10-20 174646
Ekran görüntüsü 2024-10-20 1746461901×866 35.4 KB

I have a system built using ExtJS and Java, and I want to completely rebuild it using Vaadin. However, I couldn’t figure out how to create a similar structure or where to find the necessary components.

As you can see in the image, I have a layout that resembles Windows 10. There is a menu button at the bottom left, and a list at the bottom showing the open windows. When a window is opened from the menu, it appears, and if minimized, it gets added to the list at the bottom. I’ve noticed that Vaadin also has a Window component. However, when I tried to use it in my Vaadin test project, I couldn’t call the Window component. I’m not sure if it was removed after Vaadin 8, but I couldn’t find it in Vaadin 24.

Could you help me figure out how to create a similar system in Vaadin?

2

Dialog may be the component you’re looking for Dialog | Components | Vaadin Docs

3

I think what you are looking for is something that is called MDI or multi document interface. The Dialog component is not full Window implementation but it can be extended.

I have an example project that has extended Dialog component which I call Window. The demo has also rudimentary Window manager.

I am not big fan of this design pattern in web applications, as in web applications you probably should not use sub-windows but user multiple browser tabs.

But the demo shows that the pattern is possible with Vaadin.