Turn WEB UI to Mobile UI

I have the follwoing code and it run nice in a browser. How can I make this to run with TouchKit
and have a mobile layout?

package ch.oneict.facmulta.vaadin;

import ch.oneict.facmulta.dao.PersonenDao;
import ch.oneict.facmulta.model.Personen;
import com.vaadin.addon.touchkit.ui.VerticalComponentGroup;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Table;
import com.vaadin.ui.UI;
import java.util.List;
import javax.servlet.annotation.WebServlet;

public class MyVaadinUI extends UI

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "ch.oneict.facmulta.vaadin.AppWidgetSet")
public static class Servlet extends VaadinServlet {

protected void init(VaadinRequest request) {   
    final VerticalLayout layout = new VerticalLayout();
    final CssLayout layout = new CssLayout();
    //new Responsive(this);
    IndexedContainer contactContainer = createPersonenDatasource();
    Table contactList = new Table();
    contactList.setVisibleColumns(new String { NAME, VORNAME });

private static final String NAME = "Name";
    private static final String VORNAME = "Vorname";
    private static final String fieldNames = new String { NAME, VORNAME };
private static IndexedContainer createPersonenDatasource() {
    IndexedContainer ic = new IndexedContainer();

    for (String p : fieldNames) {
        ic.addContainerProperty(p, String.class, "");

    PersonenDao personenDao = new PersonenDao();
    List<Personen> personen = personenDao.getPersonAllPersonen();

    for (int i = 0; i < personen.size(); i++) {
        Object id = ic.addItem();
        ic.getContainerProperty(id, NAME).setValue(personen.get(i).getName());
        ic.getContainerProperty(id, VORNAME).setValue(personen.get(i).getName());

    return ic;


You can create a seperate UI class containing an optimized layout for Mobile and then you can switch to the appropriate UI as described here:


OK. Thanks. I thought you just change a setting and then you have mobile. This is not so well described. How do I convert my code to mobile widgets above? What else do I need to do in xml or…
I just want to have above as mobile layout, I understand your link, but how do I get the correct widgets?
I think this is the selling point, why has not vaadin done a video about this?

If the UI you built would work on a Mobile device as well as on in a desktop browser you don’t have to do anything. Only if you want to have different layouts/components in desktop and browser you have to difference between the too layouts and the easiest and probably cleanest way to do this if the two layouts differentiate much is to use 2 different UIs.
The tutorials for Touchkit generally show cases where you have just one UI for Mobile users and not multiple UIs for desktop and mobile. …If i remember in the beginning of Touchkit there was a Tutorial for Touchkit which involved multiple UIs and Touchkit widgets, …
If you want to use a Touchkit Widget instead of a Standard one you just replace the component in your code.
Also note that Standard Vaadin components work on mobile and Touchkit components work on desktop. They just aren’t optimized for that platform.

If you already have Touchkit working in your project as described in any Vaadin Touchkit tutorial and you added the UiProvider to the web.xml you should be good to go…

So how would my code looke like for TouchKit? There is very little code. I have a new Table() why is this not displayed correclty for mobile? And I have a new IndexedContainer(); why is this not displayed correctly for mobile?
I think vaadin should handle this for you and make general components. Also their video material is not good. They should be precise and clear.

Well it depends how much and whether you want to change it for a mobile device.
As it stands the UI you currently should work without a problem on mobile devices (just try it and conenct to the App using a phone or tablet). If you then need to do some changes on the look, maybe using some new Touchkit components you can do that in the sperate UI without changing the look of the dektop ui

Looks like this, no mobile look…

To be honest i don’t really know what the big problem is. Yes i agree that it doesn’t really look like something you’d see on a Mobile App but this just requires changing the layout and styling a bit (like making the table of layout setSize Full or at least some percentage which makes it bigger and maybe adding some styling to enlarge the Text, column height, and so on)
…also you should try out Vaadin 7.3.0 beta1 it has the new Valo theme which has a more modern/mobile look to it
There isn’t a special Touchkit Tabel component. All special components are mentioned here:

I ended up copying demo widget set parking to VAADIN/themes/parking
and changed to:

public class MyVaadinUI extends UI

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "ch.oneict.facmulta.vaadin.AppWidgetSet")
public static class Servlet extends TouchKitServlet {