Tabs with Errai-UI

Question

I'm trying to figure out how to do "tabs" with Errai-UI.

For example if the tab selected is #home the Home template is displayed or if #about the AboutUs template is displayed.

I have this entry-point class:

@Templated("#home")
@EntryPoint
public class App extends Composite {
       @PostConstruct
       public void setup()
       {
           RootPanel.get().clear();
           RootPanel.get("rootPanel").add(this);
       }
}

AboutUs template

@Templated("#about") 
public class AboutUs extends Composite {  
       @PostConstruct
       public void setup() { 
           RootPanel.get("rootPanel").clear();
           RootPanel.get("rootPanel").add(this);
       }
}

Answer 1

To turn on the navigation you should initialize Navigation component in the entry point. Every page should have annotation @Page(path = "pageName"). Switching between tabs then is possible just by url appending #pageName or using special component (see below).

See an example:

Inherit navigation module

<inherits name="org.jboss.errai.ui.nav.Navigation"/>

Implement entry point

@EntryPoint
public class Bootstrap
{

    @Inject
    Navigation navigation;


    @PostConstruct
    public void buildUI()
    {
        navigation.getContentPanel().setWidth("100%");
        navigation.getContentPanel().setHeight("100%");
        RootPanel.get().add(navigation.getContentPanel());
    }

}

Implement a page

@Templated
@Page(path = "myPage", startingPage = true)
public class MyPage extends Composite
{
   ...
}

To add a "link" inside another component you can use the following inject:

 @Inject
 private TransitionTo<MyPage> myPageTransition;

 ...
 myPageTransition.go(); // load MyPage
 ...