Tabsheet not displaying tabs - step-by-step tutorial

Hi there!
I was following the step-by-step video tutorial and although it compiled and runned with no apearent errors I got my tabsheet with no tab captions and no tab buttons as you can see:

I went through a lot of search and found nothing about this… so I found that it was something wrong with the client side and got the GWT dev-mode to help. The app found a null pointer exception:

        00:08:59,621 [ERROR]
 Mon Feb 03 01:28:32 BRST 2014 com.vaadin.client.VConsole
SEVERE:
java.lang.NullPointerException: null at com.vaadin.client.ui.VTabsheet.isClipped(VTabsheet.java:1031) at com.vaadin.client.ui.VTabsheet.updateTabScroller(VTabsheet.java:982) at com.vaadin.client.ui.VTabsheet.iLayout(VTabsheet.java:917) at com.vaadin.client.ui.VTabsheet.renderContent(VTabsheet.java:894) at com.vaadin.client.ui.VTabsheet.renderTab(VTabsheet.java:844) at com.vaadin.client.ui.tabsheet.TabsheetBaseConnector.updateFromUIDL(TabsheetBaseConnector.java:75) at com.vaadin.client.ui.tabsheet.TabsheetConnector.updateFromUIDL(TabsheetConnector.java:47) at com.vaadin.client.ApplicationConnection$8.updateVaadin6StyleConnectors(ApplicationConnection.java:1860) at com.vaadin.client.ApplicationConnection$8.execute(ApplicationConnection.java:1473) at com.vaadin.client.ApplicationConfiguration.runWhenDependenciesLoaded(ApplicationConfiguration.java:535) at com.vaadin.client.ApplicationConnection.handleUIDLMessage(ApplicationConnection.java:2331) at com.vaadin.client.ApplicationConnection.handleReceivedJSONMessage(ApplicationConnection.java:1294) at com.vaadin.client.ApplicationConnection.handleWhenCSSLoaded(ApplicationConnection.java:1048) at com.vaadin.client.ApplicationConnection.handleJSONText(ApplicationConnection.java:943) at com.vaadin.client.ApplicationConnection.start(ApplicationConnection.java:542) at com.vaadin.client.ApplicationConfiguration$1.execute(ApplicationConfiguration.java:427) at com.google.gwt.core.client.impl.SchedulerImpl$Task$.executeScheduled$(SchedulerImpl.java:50) at com.google.gwt.core.client.impl.SchedulerImpl.runScheduledTasks(SchedulerImpl.java:180) at com.google.gwt.core.client.impl.SchedulerImpl.flushPostEventPumpCommands(SchedulerImpl.java:346) at com.google.gwt.core.client.impl.SchedulerImpl$Flusher.execute(SchedulerImpl.java:78) at com.google.gwt.core.client.impl.SchedulerImpl.execute(SchedulerImpl.java:138) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103) at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71) at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172) at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:338) at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:219) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:571) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:279) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91) at com.google.gwt.core.client.impl.Impl.apply(Impl.java) at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:324) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103) at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71) at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172) at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:293) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:547) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364) at java.lang.Thread.run(Unknown Source)

The code of the component was generated using the visual editor:

package com.example.vaadinintro;

import com.vaadin.annotations.AutoGenerated;
import com.vaadin.data.util.TextFileProperty;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.RichTextArea;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextArea;

public class DocEditor extends CustomComponent {

	/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */

	@AutoGenerated
	private AbsoluteLayout	mainLayout;
	@AutoGenerated
	private TabSheet	tabSheet_1;
	@AutoGenerated
	private TextArea	textArea_1;
	@AutoGenerated
	private RichTextArea	richTextArea_1;
	/**
	 * The constructor should first build the main layout, set the
	 * composition root and then do any custom initialization.
	 *
	 * The constructor will not be automatically regenerated by the
	 * visual editor.
	 */
	public DocEditor() {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		// TODO add user code here
	}
	
	public void setPropertyDataSource(TextFileProperty textFileProperty) {
		richTextArea_1.setPropertyDataSource(textFileProperty);
		textArea_1.setPropertyDataSource(textFileProperty);
	}

	@AutoGenerated
	private AbsoluteLayout buildMainLayout() {
		// common part: create layout
		mainLayout = new AbsoluteLayout();
		mainLayout.setImmediate(false);
		mainLayout.setWidth("100%");
		mainLayout.setHeight("100%");
		
		// top-level component properties
		setWidth("100.0%");
		setHeight("100.0%");
		
		// tabSheet_1
		tabSheet_1 = buildTabSheet_1();
		mainLayout.addComponent(tabSheet_1, "top:20.0px;right:20.0px;bottom:20.0px;left:20.0px;");
		
		return mainLayout;
	}

	@AutoGenerated
	private TabSheet buildTabSheet_1() {
		// common part: create layout
		tabSheet_1 = new TabSheet();
		tabSheet_1.setImmediate(true);
		tabSheet_1.setWidth("100.0%");
		tabSheet_1.setHeight("100.0%");
		
		// richTextArea_1
		richTextArea_1 = new RichTextArea();
		richTextArea_1.setImmediate(false);
		richTextArea_1.setWidth("100.0%");
		richTextArea_1.setHeight("100.0%");
		tabSheet_1.addTab(richTextArea_1, "Wysiwyg", null);
		
		// textArea_1
		textArea_1 = new TextArea();
		textArea_1.setImmediate(false);
		textArea_1.setWidth("100.0%");
		textArea_1.setHeight("100.0%");
		tabSheet_1.addTab(textArea_1, "HTML", null);
		
		return tabSheet_1;
	}

}

And finally the main file which was written manually:

package com.example.vaadinintro;

import java.io.File;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.data.util.FilesystemContainer;
import com.vaadin.data.util.TextFileProperty;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Table;
import com.vaadin.ui.UI;

@SuppressWarnings("serial")
@Theme("vaadinintro")
public class VaadinintroUI extends UI {

    FilesystemContainer docs = new FilesystemContainer(new File("/tmp/"));
    Table box = new Table("Documents", docs);
    DocEditor docView = new DocEditor();
    
    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = VaadinintroUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        HorizontalSplitPanel split = new HorizontalSplitPanel();
        setContent(split);
        split.addComponent(box);
        split.addComponent(docView);
        box.setSizeFull();
        
        box.addValueChangeListener(new ValueChangeListener(){
            @Override
            public void valueChange(ValueChangeEvent event) {
                docView.setPropertyDataSource(new TextFileProperty((File) event.getProperty().getValue()));
            }
        });
        box.setImmediate(true);
        box.setSelectable(true);
    }
    

}

Nobody has a clue? =(
C’mon, this is the only place I can search for help! I really liked the framework but since I can’t even follow the startup tutorial it makes it unusable so far… I followed that video twice, did everything accordingly.

Same problem here. First, I was amazed, now I’m confused. How can this be possible?

Lucas, I just opened an issue in github.

Could you give me a link so I can follow the resolution?

Lucas: have you tried the code with the latest version of Vaadin? There were some issues with VTabsheet.isClipped throwing an NPE in Vaadin 7.1.10, but in 7.1.11 they should have been fixed.

Oh, and we don’t use GitHub for tracking issues. Please report them at http://dev.vaadin.com/ instead.

I’m using the Vaadin eclipse plugin. Just checked for updates and there are none. Should I drop the plugin or manually install the .jar?

If you have created the project with the plug-in (using Ivy), just update the version number at the top of your ivy.xml .

:love:! Worked!