I made a simple UI design with vaadin and springboot.It works properly but i can not make it responsive.
And i also want to show a error message when a user will give a input which breaks my conditions,as like as Cgpa must not be greater than 4.00 and ID must not be 0 .I already use a notification that shows “Please complete all the fields properly” but i also set a error message under or upper of the textfield.
How can i solve those problems?
first one is my design and second one i want to set error message.
Hi Kamrul!
The first question that I would ask you is about the Vaadin version that you’re using. Besides that, let me tell you that there is no “magic” involved in creating a responsive application. Is not like a switch that you just turn on and your application is fully responsive. For example, if you are building a Grid, and you want it to be shown in a desktop device and also in a mobile phone, probably the number of columns should be different, and you should configure which ones are more “important” to be seen in all the devices.
So taking that into account, let me list some tips for building responsive applications in Vaadin:
- Use a [ResizeListener]
(https://vaadin.com/api/framework/8.5.1/com/vaadin/ui/Window.ResizeListener.html) to know the viewport size of the window, and set some flags on/off according to it (ie: isDesktop, isTablet, isPhone, etc.), and then use those flags to configure components like Grid. - Use [MediaQueries]
(https://www.w3schools.com/css/css_rwd_mediaqueries.asp) - Use a component like [Board]
(https://vaadin.com/components/vaadin-board) - Read about [responsive themes]
(https://vaadin.com/docs/v8/framework/themes/themes-responsive.html) in the official documentation
Regards!