Can TabBarView be used inside a view?

Flow
1

I have an application where I use multiple UIs:
https://github.com/steinarb/ukelonn/tree/using-vaadin

I have one UI for the users:
https://github.com/steinarb/ukelonn/blob/using-vaadin/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnUI.java

I have a different UI for the admins:
https://github.com/steinarb/ukelonn/blob/using-vaadin/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/UkelonnAdminUI.java

There is a UI to handle login (Shiro-backed forms based authentication):
https://github.com/steinarb/ukelonn/blob/using-vaadin/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/LoginUI.java

And finally there is a TopUI that just distributes requests to the appropriate UI:
https://github.com/steinarb/ukelonn/blob/using-vaadin/ukelonn.bundle/src/main/java/no/priv/bang/ukelonn/impl/TopUI.java

This works as long as everything starts normally, but when the server is reloaded and the UI isn’t ie. when the web page has a cookie the server knows nothing about reloading gets stuck and never completes.

Since a reload of the server happens everytime I rebuild the bundle with maven and the apache karaf server picks up the new version, having the UI stuck during reload happens annoyingly often during the development phase.

So I tried moving to a different model: having a single UI and instead of moving between UIs, moving between views.

Ie. the UI now contains the following content:

[code]
public class UkelonnUI extends AbstractUI {
private static final long serialVersionUID = 1388525490129647161L;
private Navigator navigator;

@Override
protected void init(VaadinRequest request) {
    getPage().setTitle("Ukelønn");
    navigator = new Navigator(this, this);

    // Add all of the different views
    navigator.addView("", new UserView(request));
    navigator.addView("admin", new AdminView(request));
    navigator.addView("login", new LoginView(request, navigator));
    if (!isLoggedIn()) {
        navigator.navigateTo("login");
    } else if (isAdministrator()) {
        navigator.navigateTo("admin");
    } else {
        navigator.navigateTo("");
    }
}

}
[/code]with the UserView containing the code formerly found in the UkelonnUI, the AdminView containing code formerly found in the UkelonnAdminUI and the LoginView containing code formerly found in the LoginUI.

The LoginUI shows up as expected, but the two TabBarView-based views, UserView and AdminView only shows the tabs and not the content, ie. like the attached screenshot

Is it possible to use a TabBarView inside a view that has been navigated to?

Or do the TabBarView and the navigator used on the top level conflict?

Thanks!
31303.png

2

I haven’t pushed my transform of UI-to-View yet (since it doesn’t work).
I can push it to a separate branch if that’s of interest…?

The definition of one of the view is, roughly:

[code]
public class UserView extends VerticalLayout implements View {
private BeanItemContainer paymentTypesContainer;
private BeanItemContainer recentJobs;
private ObjectProperty greetingProperty;
private ObjectProperty balance;
private BeanItemContainer recentPayments;
private Account account;

public UserView(VaadinRequest request) {
// GUI setup from the UI class went here
// except for the stuff that needed an authenticated user
TabBarView tabs = new TabBarView()
…
addComponent(tabs);
}

@Override
public void enter(ViewChangeEvent event) {
// Find authenticated user and update object properties and bean containers
// from the database
account = getAccountInfoFromDatabase(getClass(), currentUser);
greetingProperty.setValue("Ukelønn for " + account.getFirstName());
balance = new ObjectProperty(account.getBalance());
recentJobs.removeAllItems();
recentJobs.addAll(getJobsFromAccount(account, getClass()));
recentPayments.removeAllItems();
recentPayments.addAll(getPaymentsFromAccount(account, getClass()));
}
}
[/code]Is the problem my use of VerticalLayout that conflicts with CssLayout used inside the TabBarView?
Is the problem my use of TabBarView (with its use of navigation) and the use of Navigator in the UI class?

Thanks!

3

I tried switching from TabBarView to the regular TabSheet.

But that lost me the mobile look and feel (even before I got the tabs actually filled again), so that’s not an option.

4

I tried making UserView inherit TabBarView, instead of “extends VerticalLayout implements View”.

But TabBarView, in spite of its name, was not a view I could use in the top level navigation (see the code fragment of the first post).

My problem, compared to the TouchKit examples, such as e.g.
Vaadin TouchKit in Action
, is that I need to have two distinct top level windows, one for regular users and one for admin users.

The two windows share some code (e.g. the code to create and populate tables), but none of the layout.

In addition I need a third top level view for the login.

It might be that the multiple UI solution I have implemented so far, is the only way forward, but the single UI solution plays much better with reloads of the server (I haven’t seen it stuck in “reloading UI” once since I switched).

5

As it turns out, the fix was extremely simple: just call “setSizeFull();” at the start of the view constructors, like the example in “Implementing a view” in
Navigating in an Application
.

Ie. the view constructor now starts like this:[code]
public class UserView extends VerticalLayout implements View {

public UserView(VaadinRequest request) {
setSizeFull();
// GUI setup from the UI class went here
// except for the stuff that needed an authenticated user
TabBarView tabs = new TabBarView()
…
addComponent(tabs);
}
@Override
public void enter(ViewChangeEvent event) {
// Find authenticated user and update object properties and bean containers
// from the database
}
}
[/code]
(But it may be that it would have been better to put everything that was in the UI inside the enter() method instead of in the constructor…? More like the way things were in the UI perhaps?)