Sub-navigation (beta 2)

Vaadin 6 / 7 / 8
1

Are there any suggestions for providing sub-navigation?

In beta 1 I had a technique working where the sub-components had their own Navigator, however that seems to be broken now that the ErrorProvider concept has been added. In some cases I will have two Navigators, one for the main navigation and one for the sub-component, and I don’t need them to use the ErrorProvider or do anything special if they can’t find a view.

To put the question in context here is the specific scenario that I have.

I have top navigation as the first component in a VerticalLayout that displays it’s content in the second component in a VerticalLayout.

Sometimes the views being displayed in the second component of the VerticalLayout create a Component that is a HorizontalSplitPanel where the first component is more navigation and the second component is another ViewDisplay?

Thanks for the suggestions!

2

Any thoughts on this? Am I taking a wrong approach to get sub navigation?

3

If i understand correctly you have:

  • a main navigation which uses a navigator to display its content below itself.
  • a layout which has a sidebar subnavigation which in turn uses a navigator to display the content to it’s right.

am I correct?
Why not just add the views hierarchically to the the same navigator and reuse the sidebar navigation?

For example: your main navigation displays “#!users” which is a view with a sidebar.
Your sidebar links to other views which in turn display “#!users/add” or “#!users/edit/5” and just reuse the previously instantiated sidebar?

I hope this can help you figure out a way to do it with one navigator.

Bart

4

It should also be possible to use multiple navigators.
However, you might need to use a custom NavigationStateManager in that case to avoid the instances “competing” about URI fragment changes.

5

Sub-navigation is certainly something that is often needed. We should probably have some explicit support for that at some point, but it was deemed that it would be wise to first gather some implementation experience to see how Navigator is actually best used in real-world code. Currently, I’d agree with Bart - you can use a single Navigator with hierarchical view names like this:


Navigator n = ...
n.addView('', DefaultView.class);
n.addView('foo', FooView.class);
n.addView('foo/bar', FooBarView.class);
n.addView('foo/baz', FooBazView.class);

FooView, FooBarView and FooBazView could extend a common superclass that contains the sidebar component. Alternatively, you could have a custom ViewDisplay that somehow decides whether to draw a “main view” or “sub view”.

I’m not sure whether it’s a good idea to support multiple Navigators per UI – at least there should be only one main Navigator, bound to the UI the way Navigator currently is. Perhaps, though, sub-Navigators could be attached to the main Navigator.


Ticket 9800
 tracks the issue.

6

If there was a way to turn off the “view not found” functionality, I believe it will work as I had it working before.

Essentially after the first navigator found it’s view, then I passed it to the next navigator in the onEnter method of the View.

7

Hmm… Could you provide a short code sample? I’m not sure if I understand how exactly the “view not found” feature broke your code.

8

Sometimes sub navigation is needed for a ViewDisplay different from the main navigation’s ViewDisplay. In this case, you’ll need a way tie a subURI ( ex: /main/subpath ) to a different ViewDisplay. some API like:

addView( “/main/subpath”, View.class, ViewDisplay )

Currently I’m using multiple Navigator instances as discussed above, and fix the hashtag path to reflect the hierarchical relationship.

Thoughts?

9

In my scenario, I have a View whose base is a HorizontalLayout. It comprises of two components; having a Table
on the left-hand side and a layout on the right-hand side which shows the details of table items that appears on an item click. Following
is the scenario that I want to accomplish:

When user types the item id on the browser after the view fragment the corresponding item in the table should be selected.
I mean each row in my table should behave like a view. This also leads to a situation that I have to manage the sub-navigation dynamically since I have any number of items in my table. How can I manage that?

Any suggestions would be appreciated.

10

Hello everyone

I have a similar problem. I created a navigator and everything works just fine if I have a reference to the myUI. However, if I have a child view that should reference to the view I had before I cannot go back because it doesn’t know the path.

This is the java code I usually use with my clickListener:

clientBtn.addClickListener(e → {
myui.getNavigator().navigateTo(myui.PATIENTDIRECTORY);
});

Now I’m “two layers” down so I’d like to go from the Insurance class (subview of TabNavigator) to the TabNavigator (subview of TabClass).

I cannot use the same clickListener method because there is no reference to the myui.

Does anyone have a solution for this?