Vaadin Touchkit - TabBarView and UriFragmentUtility

Flow
1

Hi there,

i am trying to use UriFragmentUtility in my mobile Application.

public class MyvaadinApplication extends TouchKitApplication {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	public final static UriFragmentUtility urifu = new UriFragmentUtility();
	private final MyTabBarView mtbv = new MyTabBarView();
	
	
	@Override
	public void init() {
		final MyMainWindow main = new MyMainWindow();
		
		
		setMainWindow(main);

		urifu.addListener(new FragmentChangedListener() {
			/**
			 * 
			 */
			private static final long serialVersionUID = 1L;

			@Override
		    public void fragmentChanged(FragmentChangedEvent source) {
		        String fragment =
		                  source.getUriFragmentUtility().getFragment();
		        System.out.println("URI_fragment: "+fragment);		       
		    }
		});
		
        
	}

	
	@Override
	public void onBrowserDetailsReady() {
		mtbv.setSizeFull();
		getMainWindow().addComponent(mtbv);
		getMainWindow().addComponent(urifu);
	}

This Works, but the TabBarView shows no Content.

To see the Content in mtbv have to change getMainWindow().addComponent(mtbv); with getMainWindow().setContent(mtbv);

	@Override
	public void onBrowserDetailsReady() {
		mtbv.setSizeFull();
		getMainWindow().setContent(mtbv);
		getMainWindow().addComponent(urifu);
	}

Now i get this Error:[quote]
Schwerwiegend [com.vaadin.Application]
(http–0.0.0.0-8080-1) Terminal error:: java.lang.UnsupportedOperationException: Use the specialized API instead.
at com.vaadin.addon.touchkit.ui.TabBarView.addComponent(TabBarView.java:112) [vaadin-touchkit-agpl-2.1.1.jar:2.1.1]

[/quote]

My question is:
How can use the TabBarView with UriFragmentUtility, which only works with “getMainWindow().addComponent(urifu);” ?!

2

Hi,

I think you have faced a common WTF for Vaadin newcomers. If you add component to a Panel (from which Window is derived), component ends up to its layout (aka content). The default content is VerticalLayout which should be configured to give space vertically to your tab bar view.

Something like this should work (I’m using CssLayout in example code for slightly better client side performance):

CssLayout layout = new CssLayout();
layout.setSizeFull();
layout.addComponent(actualContentLikeTabBarView);
layout.addComponent(uriFragmentUtility);
main.setContent(layout);

cheers,
matti