Making my Vaadin page mobile-friendly

Hey,

so i have a vaadin project for school. everything works but i have a problem with the layout. i use setSizeFull() methods of the components but somehow they do not use all the space given by the browser.

my ui code:


package de.java_ee_e.roboterarm_final;

import javax.servlet.annotation.WebServlet;

import de.java_ee_e.roboterarm_final.GPIOController;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("roboterarm_final")
public class WebUI extends UI {
	
	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = true, ui = WebUI.class)
	public static class Servlet extends VaadinServlet {
	}

	final GPIOController roboter = new GPIOController();

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout main = new VerticalLayout();
		main.setSizeFull();
		main.setMargin(true);
		
		final GridLayout buttons = new GridLayout(6, 3);
		buttons.setMargin(true);
		buttons.setSizeFull();
		main.addComponent(buttons);
		
		final TextArea status = new TextArea();
		status.setSizeFull();
		status.setReadOnly(true);
		main.addComponent(status);
		
		setContent(main);
		
		Button motor1Rechts = new Button("Rechts");
		Button motor2Hoch = new Button("Hoch");
		Button motor3Hoch = new Button("Hoch");
		Button motor4Hoch = new Button("Hoch");
		Button motor5Auf = new Button("Auf");
		
		Button motor1Links = new Button("Links");
		Button motor2Runter = new Button("Runter");
		Button motor3Runter = new Button("Runter");
		Button motor4Runter = new Button("Runter");
		Button motor5Zu = new Button("Zu");
		
		buttons.addComponent(motor1Rechts,0,0);
		buttons.addComponent(motor2Hoch,1,0);
		buttons.addComponent(motor3Hoch,2,0);
		buttons.addComponent(motor4Hoch,3,0);
		buttons.addComponent(motor5Auf,4,0);
		
		buttons.addComponent(new Label("Motor 1"),0,1);
		buttons.addComponent(new Label("Motor 2"),1,1);
		buttons.addComponent(new Label("Motor 3"),2,1);
		buttons.addComponent(new Label("Motor 4"),3,1);
		buttons.addComponent(new Label("Motor 5"),4,1);
		
		buttons.addComponent(motor1Links,0,2);
		buttons.addComponent(motor2Runter,1,2);
		buttons.addComponent(motor3Runter,2,2);
		buttons.addComponent(motor4Runter,3,2);
		buttons.addComponent(motor5Zu,4,2);
		
		motor1Rechts.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor1Rechts();
				status.setValue(status.getValue() + "Motor 1 rechts\n");
				status.setReadOnly(true);
			}
		});
		
		motor1Links.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor1Links();
				status.setValue(status.getValue() + "Motor 1 links\n");
				status.setReadOnly(true);
			}
		});
		
		motor2Hoch.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor2Hoch();
				status.setValue(status.getValue() + "Motor 2 hoch\n");
				status.setReadOnly(true);
			}
		});
		
		motor2Runter.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor2Runter();
				status.setValue(status.getValue() + "Motor 2 runter\n");
				status.setReadOnly(true);
			}
		});
		
		motor3Hoch.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor3Hoch();
				status.setValue(status.getValue() + "Motor 3 hoch\n");
				status.setReadOnly(true);
			}
		});
		
		motor3Runter.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor3Runter();
				status.setValue(status.getValue() + "Motor 3 runter\n");
				status.setReadOnly(true);
			}
		});
		
		motor4Hoch.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor4Hoch();
				status.setValue(status.getValue() + "Motor 4 hoch\n");
				status.setReadOnly(true);
			}
		});
		
		motor4Runter.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor4Runter();
				status.setValue(status.getValue() + "Motor 4 runter\n");
				status.setReadOnly(true);
			}
		});
		
		motor5Auf.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor5Auf();
				status.setValue(status.getValue() + "Motor 1 auf\n");
				status.setReadOnly(true);
			}
		});
		
		motor5Zu.addClickListener(new Button.ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				status.setReadOnly(false);
				roboter.motor5Zu();
				status.setValue(status.getValue() + "Motor 1 zu\n");
				status.setReadOnly(true);
			}
		});
	}


}

this is how it currently looks like:

i want the page to use the full screen size available. for example if i visit the page on my mobile (1280x720), i want it to be a 1280x720 page, if i visit it from 5000x5000 screen i want it to use the full size as well, because when i open the page on my mobile, i have to zoom out to see everything. what i also wanted to do but could not really achieve is to center the buttons and labels in their grids (they have a left align instead of center).

thanks in advance!


Selim

The code works exactly as it should; if you want other behaviour, you need to change it :slight_smile: What exactly do you want to be different? The grid and the label already follow the size of the browser, but what else?

I figured out how to get the Alignment in the grid-cells right but the grid does
not
follow the size of the browser as I stated in my post (even if it looks like it does on the screenshot). When i visit the site on my phone (1280x720) I have to zoom in (tested with chrome mobile, firefox mobile) to use all the space available. Also when i make the desktop browser fullscreen the grid and the textbox are on the upper left edge of my browser (they are not responsive like in twitter bootstrap).

Thanks

Maybe calling setSizeFull() for the UI itself would help.

If you want the buttons to grow to fill the space, use NativeButton instead of Button - the themeing of Button gets tricky when you want to grow it vertically (for historical reasons related to IE6 support back in Vaadin 6 and trying to preserve theme and DOM structure compatibility in Vaadin 7).