Views adapting to different screens

Flow
1

Hi all,

what is the best way to use different views on different screens? I am thinking of, for example, something like a mail app, which shows as list on a smartphone display (opening single mails in a new view) and which shows as master/detail combined view on tablets in landscape mode.

I think there must be a simple standard way, especially regarding PWA, but unfortunately I wasn’t able to find any search results … I’ve tried bakery example, but the only page which adapts it’s layout to the screen is this megacomplicated “Dashboard” page which uses some 3rdparty-Krempel and things named “Polymer” I don’t want to learn right now - for the moment, it is enough learning Vaadin Flow and it’s own components.

Isn’t there any example for such a simple use case? I think I must have overlooked something.

Regards

Marcus.

2

Marcus,

Have you looked at the Full starter app aka Bakery app?

https://vaadin.com/start/v14

It does have a master-detail view that is responsive. On a full sized browser it shows the list side-by-side with the detail, but on a smaller screen the detail is shown in a dialog.

3

Hi Martin

and thank you for your reply. Yes, I’ve tried Bakery app. I’ve built it locally, and I’ve tried the online demo at https://bakery-flow.demo.vaadin.com/storefront, but both with absolutely no success. The only page which is different between Desktop and mobile view is the “Dashboard” view, but Dashboard doesn’t seem to be a view which is understandable for a Vaadin beginner (it uses something called Polymer I do really not know anything about).

The “Storefront” page looks like it could have been designed to be master/detail on desktop (it displays the list very very big and has much unused space on desktop), but actually it doesn’t (on my machine). Should it?

Regards

Marcus.

PS. However, it even seems that Bakery doesn’t address beginners at all - it has loads of ununderstandable undocumented CSS. I’ve spent three hours investigating why in Bakery app the “Tab” buttons are centered in the menu bar, but I eventually wasn’t able to figure out. Perhaps I’m simply too old to learn such fancy new things …

4

Marcus,

Sorry, I just checked out the bakery app it I think it has been changed since the earlier V10 version. A better example might be the Business Starter App (also https://vaadin.com/start/v14). The business starter app uses side by side master-detail in on desktop and ipad and switches to full screen detail mode on an iphone. Also the Business Starter app is all java whereas the bakery app is polymer and java.

Speaking of Polymer - Polymer is the underlying frontend technology. It was created by Google and it is based on Javascript. This is fine for javascript engineers, but can be a very steep learning curve if your background is mostly java.

The good news is that you can develop great applications quickly in Vaadin without having to work with Polymer. The bad news is that if/when you need to do something that is not already in Vaadin or there isn’t a 3rd party component for it, it can be really time consuming to figure it out.

Polymer views are more effecient and loads faster because the views are sent once to the frontend as opposed to pure java views that are sent to the client everytime they are instantiated. I have not seen any published data quantifying the difference, but my own exeperience is that you can create quite complex forms purely in Java and still achieve good load speeds. I did end up rewrite a few views to be polymer because they loaded slowly (1-2 secs) in java where the corrosponding polymer views loaded instantanious. So my recommandation is to stay in Java as much as you can.

5

By the way - the icons in the bakery app is just tabs centered. This is how to do it in Java:

@Route("tabs")
public class TabsPage extends Composite<Div> {

   public TabsPage() {

      Tab tab1 = new Tab("Tab one");
      Tab tab2 = new Tab("Tab two");
      Tab tab3 = new Tab("Tab three");
      Tabs tabs = new Tabs(tab1, tab2, tab3);

      VerticalLayout vl = new VerticalLayout(tabs);
      vl.setAlignItems(Alignment.CENTER);

      getContent().add(vl);
   }

}
6

Wow, this is awful, I would never have had the idea to use a VerticalLayout to center something horizontally. But it works. Don’t know why - but it works! Thank you for that.

And now, I’ll have a look at the business starter app!

7

Hi Marcus,

Actually you can use VerticalLayout, HorizontalLayout, Flexbox or even just a Div. I just happened to pick the vertiallayout for the example.

In all cases, the underlying HTML is using the flexbox model: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

See also https://vaadin.com/components/vaadin-ordered-layout/java-examples and https://vaadin.com/learn/tutorials/vertical-and-horizontal-layouts