TabBarView (TouchKit) bottom buttons are placed as in VerticalLayout

General
1

I am trying to learn TouchKit.

I want to make TabBarView bottom buttons (“Ticket”, “24h Map”, “Shifts”, “Stats”) to appear as in Vaadin parking demo, each placed to each other horizontally.

What I get, is each of my bottom buttons are placed vertically to each other (as in VerticalLayout), as shown in screenshot.



What I am doing wrong? How should I make my TabBarView bottom buttons placed to each other horizontally?

I tried looking at Parking demo source code ( https://github.com/vaadin/parking-demo ), but I can’t see any clues… :frowning:

My source code:

main.MainUIWidgetset.gwt.xml

[code]

<?xml version="1.0" encoding="UTF-8"?> [/code]main.MainServlet.java [code] package main;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;

import com.vaadin.addon.touchkit.server.TouchKitServlet;
import com.vaadin.annotations.VaadinServletConfiguration;

@WebServlet(value=“/*”, asyncSupported=true)
@VaadinServletConfiguration(ui=MainUI.class, productionMode=false)
public class MainServlet extends TouchKitServlet {
private static final long serialVersionUID = 3477266251485781815L;

@Override
protected void servletInitialized() throws ServletException {
    super.servletInitialized();
}

}
[/code]
main.mainUI.java

[code]
package main;

import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;

@Widgetset(“main.MainUIWidgetset”)
public class MainUI extends UI {
private static final long serialVersionUID = -6001077028626247259L;

@Override
protected void init(VaadinRequest request) {
    setContent(new TabBarViewExample());
}

}
[/code]main.TabBarViewExample.java

[code]
package main;

import com.vaadin.addon.touchkit.ui.TabBarView;

public class TabBarViewExample extends TabBarView {
private static final long serialVersionUID = -193941031614717987L;

public TabBarViewExample() {
    addTab(new ViewOne(), "ViewOne");
    addTab(new ViewTwo(), "ViewTwo");
}

}
[/code]main.ViewOne.java

[code]
package main;

import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;

public class ViewOne extends VerticalLayout {
private static final long serialVersionUID = 4915889088478051671L;

public ViewOne() {
    addComponent(new Label("Welcome to ViewOne!"));
}

}
[/code]main.ViewTwo.java

package main;

import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;

public class ViewTwo extends VerticalLayout {
    private static final long serialVersionUID = 4316141496604132496L;
    
    public ViewTwo() {
        addComponent(new Label("Welcome to ViewTwo!"));
    }
}
2

P.S. I’m using Vaadin 7.6.8, TouchKit 4.1.0, JDK 1.8.0_101, Tomcat 9.