Dear Vaadin Champions and Gurus!!!
I have an appreciation of Vaadin 10 now, but my simple question is there documentation on best practice of designing a complex design of an application using a very simple example. I know there is Bakery Application but thats rather a bit to advanced at the moment for a newbie like me. Arrangement of services → views and components and the UI logic how to separte them in different classes.
Kind regards,
Teddy >
Hello Teddy,
What kind of application do you have in mind? Client-side UI or server-side UI? By complex design, do you mean the user interface only or the application as a whole?
-Petter-
Hi Peter,
To start with a server-side UI written in Java. The type of application i can think of is a UI interacting with an employeeService and departmentService backend. What I need to be guided on is how is the UI arranged. For instance in the backend we have model and entities, then we have repository and finally the service. Now using Vaadin what is the best practice.
I would like to see how a front end would be build using routes in a template with header, menu and content area. How view will be loaded and how the logic for the UI will be arranged as well to ensure the code scales well with increased complexity.
Kind regards,
Teddy L.
Hi,
It’s quite hard to have a “generic” answer.
I tried this add-on https://vaadin.com/directory/component/app-layout-add-on
To start a application with a menu + header + content-area, its quite nice and easy.
The only problem is the documentation of this plugin.
There will be a vaadin-app-layout but it’s a pro feature and it’s not yet released.
But that’s only for route + template.
For architecture inside your content-area, it’s quite hard to answer :).
You can split your views in 3 layers MVP or into multiple components (in vaadin 10 I feel it’s the best way to do).
I really like this article (written by Petter): https://vaadin.com/blog/is-mvp-a-best-practice-
In my opinion, keep it simple 
With server-side Vaadin you can basically use any backend you want so in terms of the backend, there really is no best practice for Vaadin.
As for the frontend, the first thing you should do is think about how you are going to structure the UI. For example, Vaadin 6 and 7 were designed with desktop-like applications in mind and so you had components for building UIs like that. Vaadin 10 is designed with progressive web applications in mind, i.e. you should be able to use them on everything from mobile phones to tablets and large-screen desktops. If you look at what desktop applications looked like 10-15 years ago and what many modern progressive web applications look like to day, you can see that they are quite different. PWAs have new UX paradigms that didn’t even exist 10-15 years ago. Likewise, the old desktop applications may use paradigms that doesn’t make much sense in a touch-friendly mobile UI (tree views for example). Thus, before you start to think about how to structure your UI code, you need to know what your UI is going to look like. Questions you can ask are:
Once you have a rough idea of what kind of a UI you are going to build, you can start to think about the best way of actually implementing it in code. Different UIs may require different approaches so there is no silver bullet here. Keeping it as simple as possible is a good piece of advice in any case, though.
-Petter-
Hey Peter,
Thank you for your valuable advise. This gives me enough latitude to span my mind on how the application will be designed.
I will back for more issues regards architecture especially with regards to performance.
Teddy L.
Jean-Christophe Gueriaud:
Hi,It’s quite hard to have a “generic” answer.
I tried this add-on https://vaadin.com/directory/component/app-layout-add-on
To start a application with a menu + header + content-area, its quite nice and easy.
The only problem is the documentation of this plugin.There will be a vaadin-app-layout but it’s a pro feature and it’s not yet released.
But that’s only for route + template.
For architecture inside your content-area, it’s quite hard to answer :).
You can split your views in 3 layers MVP or into multiple components (in vaadin 10 I feel it’s the best way to do).I really like this article (written by Petter): https://vaadin.com/blog/is-mvp-a-best-practice-
In my opinion, keep it simple
Think the app-layout is the one, very interesting component. Vaadin should make this control available to the community. How do we petition you :).
There will be a vaadin-app-layout but it’s a pro feature and it’s not yet released.
Vaadin App Layout is a free component after all. It’s not as full featured as the “App Layout add-on” from Directory, though.
Jouni Koivuviita:
There will be a vaadin-app-layout but it’s a pro feature and it’s not yet released.
Vaadin App Layout is a free component after all. It’s not as full featured as the “App Layout add-on” from Directory, though.
My bad. I thought it was a commercial one. I’ve just seen that it’s now stable, the demo and documentation have been updated: https://vaadin.com/components/vaadin-app-layout
Thanks
I wanted to try out the https://vaadin.com/components/vaadin-app-layout component but the dependency is not working:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-app-layout-flow</artifactId>
</dependency>
I have tried to reimport maven dependencies still the private AppLayout = new AppLayout(); cannot resolve symbol AppLayout.
Is there a problem with component or there is someting am missing out? i have attached my app.
Teddy L.
17407580.zip (83.1 KB)
Hello Teddy,
For some reason, vaadin-app-layout-flow is not included in the vaadin-bom import. Adding the version manually to the Maven dependency will fix the problem:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-app-layout-flow</artifactId>
<version>1.0.1</version>
</dependency>
-Petter-
Ok cool. Managed to AppLayout recognised in the maven application.
However, I trieed the example for the AppLayout in the documentation and I implemented the following class:
@Route("")
public class MainView extends VerticalLayout {
private AppLayout appLayout;
Image img;
AppLayoutMenu menu;
public MainView() {
appLayout = new AppLayout();
img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
img.setHeight("44px");
appLayout.setBranding(img);
creatMenu();
add(appLayout);
}
private void creatMenu() {
menu = appLayout.createMenu();
menu.addMenuItems(
new AppLayoutMenuItem("Page 1", "page1"),
new AppLayoutMenuItem("Page 2", "page2"),
new AppLayoutMenuItem("Page 3", "page2"));
Component content = new Span(new H3("Page title"),
new Span("Page content"));
appLayout.setContent(content);
}
}
But I am getting an error when adding items to the menu and the error is:
nested exception is java.lang.IllegalArgumentException: The 'index' argument should be greater than 0. It was: -1
Applayout looks like its a new component, it has very little dcoumentation even on google have tried with less success. What am i missing out. I have attached my simple project.
17409970.zip (92.9 KB)
I have not used that layout myself, but after having a quick look at the code it looks like there is a bug in the layout. I’m going to ask around a bit.
-Petter-
Petter Holmström:
I have not used that layout myself, but after having a quick look at the code it looks like there is a bug in the layout. I’m going to ask around a bit.-Petter-
Thought as much.
I had a look at your project. It looked all good, so I started browsing the demos for vaadin app layout and found this: https://github.com/vaadin/vaadin-app-layout-flow/blob/master/vaadin-app-layout-flow-vaadincom-demo/src/main/java/com/vaadin/flow/component/applayout/vaadincom/AppLayoutView.java#L65
So Vaadin App Layout uncovered a bug in Vaadin Tabs. It got fixed in vaadin-tabs-flow 1.0.5. You project is based on Vaadin 11.0.2 which has vaadin-tabs-flow 1.0.4. I upgraded to 12.0.0.beta2 and your app started working! You can also do that by changing pom.xml line 16 to <vaadin.version>12.0.0.beta2</vaadin.version>. App Layout is also part of Vaadin 12. Alternatively, if you want to stay on 11, you could put a direct dependency to vaadin-tabs-flow 1.0.5 in your pom, like you have for vaadin-app-layout-flow.
Jens Jansson:
I had a look at your project. It looked all good, so I started browsing the demos for vaadin app layout and found this: https://github.com/vaadin/vaadin-app-layout-flow/blob/master/vaadin-app-layout-flow-vaadincom-demo/src/main/java/com/vaadin/flow/component/applayout/vaadincom/AppLayoutView.java#L65So Vaadin App Layout uncovered a bug in Vaadin Tabs. It got fixed in vaadin-tabs-flow 1.0.5. You project is based on Vaadin 11.0.2 which has vaadin-tabs-flow 1.0.4. I upgraded to 12.0.0.beta2 and your app started working! You can also do that by changing pom.xml line 16 to
<vaadin.version>12.0.0.beta2</vaadin.version>. App Layout is also part of Vaadin 12. Alternatively, if you want to stay on 11, you could put a direct dependency to vaadin-tabs-flow 1.0.5 in your pom, like you have for vaadin-app-layout-flow.
Awesomeness!
I have further noticed that <vaadin.version>12.0.0.beta2</vaadin.version> is not yet available. I went with your second option of upgrading tabs-flow and leaving app-layout at 1.0.1. The result code is as follows for those who may wish to see how to use app-lay-out:
POM.XML
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-app-layout-flow</artifactId>
<version>1.0.1</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-tabs-flow</artifactId>
<version>1.0.5</version>
</dependency>
MAINVIEW.JAVA
@Route("")
public class MainView extends VerticalLayout implements RouterLayout {
private AppLayout appLayout;
Image img;
AppLayoutMenu menu;
public MainView() {
appLayout = new AppLayout();
img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
img.setHeight("44px");
appLayout.setBranding(img);
creatMenu();
add(appLayout);
}
private void creatMenu() {
menu = appLayout.createMenu();
menu.addMenuItems(
new AppLayoutMenuItem("Page 1", "page1"),
new AppLayoutMenuItem("Page 2", "page2"),
new AppLayoutMenuItem("Page 3", "page3"));
Component content = new Span(new H3("Page title"),
new Span("Page content"));
appLayout.setContent(content);
}
@Override
public void showRouterLayoutContent(HasElement content) {
appLayout.setContent(content.getElement());
}
}
VIEW.JAVA
@Route(value = "page1", layout = MainView.class)
public class page1 extends VerticalLayout {
public page1() {
add(new H1("Page 1"));
}
}
This is working fine.
Due to very limited documentation I have noticed that once you have a few menu items as you shrink the screen to mobile size, the menu items are not folding, only the image is disappearing and the menu goes to the bottom of the window. How possible is it to have a side menu with an option to colapse it as a drawer.
I have attached a working project but pointers on the side menu and making it collapse as in a drawer will be appreciated.
Teddy L >
17410583.zip (93.2 KB)
Maybe this link works better for showing capabilities: https://cdn.vaadin.com/vaadin-app-layout/1.0.1/demo/#element-basic-demos
We made the component react in a few ways when you go down to small screens, for the sake of usability.
We are looking into supporting side menu with collapsing, but we are not there yet. The plan on when, and if, and how is still all in the air, but hopefully we have that one day. Here’s a concept that we have for the implementation.
![App layout concept with side menu]
(https://vaadin.com/attachment/602b4b47-5f62-4030-855d-89be6cf14b24/side-menu.png)
Extra highlight: Just a concept, not a plan yet. Nothing locked. Feedback welcome.
Jens Jansson:
We are looking into supporting side menu with collapsing, but we are not there yet. The plan on when, and if, and how is still all in the air, but hopefully we have that one day. Here’s a concept that we have for the implementation.
![App layout concept with side menu]
(https://vaadin.com/attachment/602b4b47-5f62-4030-855d-89be6cf14b24/side-menu.png)
Wow, this concept looks very nice! Is there any place where we can ‘upvote’ this idea?
Jens Jansson:
Maybe this link works better for showing capabilities: https://cdn.vaadin.com/vaadin-app-layout/1.0.1/demo/#element-basic-demosWe made the component react in a few ways when you go down to small screens, for the sake of usability.
- when you use it on a small device, the menu is in the bottom instead of the top. You can see menu at bottom in many mobile apps and it helps with reaching the buttons with your thumb while holding your phone
- The branding part is hidden from small screen, to add more room for the menu, which is more important for a good UX.
- When there is not enough room to show all menu items at once, you can use arrows or drag to scroll the menu.
We are looking into supporting side menu with collapsing, but we are not there yet. The plan on when, and if, and how is still all in the air, but hopefully we have that one day. Here’s a concept that we have for the implementation.
![App layout concept with side menu]
(https://vaadin.com/attachment/602b4b47-5f62-4030-855d-89be6cf14b24/side-menu.png)Extra highlight: Just a concept, not a plan yet. Nothing locked. Feedback welcome.
That looks amazing. Would love to see that in Flow.
