Directory

← Back

SubNavigator

SubNavigator - is an addon which extends the capabilities of the standard Navigator and allows easier to organize a hierarchical multilevel structure of vaadin-application with support of browser bookmarks, navigation history, Forward/Back buttons, etc.

Author

Rating

Popularity

<100

Sorry for my english.

Addon temporary is not available from vaadin repository. Temporary solution - add another repo to your pom ([see here] (https://github.com/indvd00m/vaadin-sub-navigator#using))

SubNavigator - is a server-side addon which extends the capabilities of the standard object Navigator and allows easier to organize a hierarchical multilevel structure of vaadin-application.

SubNavigator allows you to explicitly specify a hierarchy of objects, and when the user moves from one address (URI Fragment) to another SubNavigator will notify the appropriate objects on the need to clean/refresh the data in that prioritization as they are in the hierarchy.

Description

Two main interfaces in SubNavigator - is a ISubView and ISubContainer.

public interface ISubView extends Component {
    String getRelativePath();
    void clean();
    void build();
}
public interface ISubContainer extends ISubView {
    ISubView getSelectedView();
    void setSelectedView(ISubView view);
    void deselectView(ISubView view);
}

ISubContainer is a container, and generally can contain any other ISubContainer, or ISubView. Let's look in situation where you will need to display some data at address #!/path1/path2/path3. Both path1 and path2 is a ISubContainer implementation, path3 can be either ISubView or ISubContainer. The method getRelativePath() of these objects determine their relative path path1, path2, path3. path1 is a root element which contains other elements. For example, path1 could be Panel element with nested TabSheet, path2 - Tab, path3 - VerticalLayout.

To define the object tree in the application you can use addView(ISubContainer container, ISubView view):

// registering views
ISubNavigator subNavigator = new SubNavigator(ui, path1View); // path1View - root view
subNavigator.addView(path1View, path2View); // path2View contained in path1View
subNavigator.addView(path2View, path3View);
subNavigator.addView(path1View, path4View);
subNavigator.addView(path4View, path5View);

When user navigates from #!/path1/path2/path3 to #!/path1/path4/path5, SubNavigator first call methods clean() and deselectView(ISubView view) for objects with relative path path3 and path2, then call methods build() and setSelectedView(ISubView view ) for objects with path path4 and path5:

// log of navigating from #!/path1/path2/path3 to #!/path1/path4/path5
path3View.clean()
path2View.deselectView(path3View)
path2View.clean()
path1View.deselectView(path2View)
path1View.setSelectedView(path4View)
path4View.build()
path4View.setSelectedView(path5View)
path5View.build()

SubNavigator also support dynamic containers, exceptions handling, hierarchical page titles. See Wiki at github.

Sample code

public class SubView3 extends VerticalLayout implements ISubView {

	@Override
	public String getRelativePath() {
		return "path3";
	}

	@Override
	public void clean() {
		removeAllComponents();
	}

	@Override
	public void build() {
		addComponent(new Label("Hello, world!"));
	}

}
public class SimpleSubContainer2 extends VerticalLayout implements ISubContainer {

	@Override
	public String getRelativePath() {
		return "path2";
	}

	@Override
	public void clean() {
		removeAllComponents();
	}

	@Override
	public void build() {
		((MyUI) getUI()).getSubNavigator().addView(this, new SubView3());
	}

	@Override
	public ISubView getSelectedView() {
		return (ISubView) getComponent(0);
	}

	@Override
	public void setSelectedView(ISubView view) {
		addComponent(view);
	}

	@Override
	public void deselectView(ISubView view) {
		removeComponent(view);
	}

}
// registering views
ISubNavigator subNavigator = new SubNavigator(ui, path1View); // path1View - root view
subNavigator.addView(path1View, path2View); // path2View contained in path1View
subNavigator.addView(path2View, path3View);
subNavigator.addView(path1View, path4View);
subNavigator.addView(path4View, path5View);
public class DynamicContainer1 extends VerticalLayout implements ISubDynamicContainer, ISubTitled, CloseListener {

    protected ISubNavigator subNavigator;
    SimpleView selectedView;
    DynamicContainer1 thisView = this;

    Label info;
    TextField id;
    Button button;

    @Override
    public ISubView createView(String viewPathAndParameters) {
        if (!viewPathAndParameters.matches("\\d+"))
            return null;
        SimpleView view = new SimpleView(viewPathAndParameters);
        return view;
    }

    @Override
    public ISubView getSelectedView() {
        return selectedView;
    }

    @Override
    public void setSelectedView(ISubView view) {
        selectedView = (SimpleView) view;
        Window window = new Window();
        window.setModal(true);
        window.setWidth(300, Unit.PIXELS);
        window.setHeight(500, Unit.PIXELS);
        window.setContent(selectedView);
        window.setCaption("Dynamically created window");
        window.addCloseListener(this);
        getUI().addWindow(window);
    }

    @Override
    public void deselectView(ISubView view) {
        Window window = (Window) selectedView.getParent();
        window.removeCloseListener(this);
        window.close();
        selectedView = null;
    }

    @Override
    public void windowClose(CloseEvent e) {
        selectedView = null;
        subNavigator.notifySelectedChangeDirected(this);
    }

    @Override
    public void clean() {
        removeAllComponents();
    }

    @Override
    public String getRelativePath() {
        return "dynamic-container";
    }

    @Override
    public void build() {
        subNavigator = ((SubNavigatorUI) getUI()).getSubNavigator();

        setSizeUndefined();
        setSpacing(true);
        setMargin(true);

        info = new Label("This is dynamic container");
        addComponent(info);

        id = new TextField("Enter object id");
        id.setValue("123");
        id.setImmediate(true);
        addComponent(id);

        button = new Button("Click to open object");
        button.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                String sId = id.getValue().replaceAll("\\s+", "");
                subNavigator.navigateTo(thisView, sId);
            }
        });
        addComponent(button);
    }

    @Override
    public String getRelativeTitle() {
        return "Dynamic Container";
    }

}
	@Override
	public ISubView createErrorView(String viewPath, String errorPath) {
		return new ErrorView(viewPath, errorPath);
	}

	@Override
	public ISubView createErrorView(String viewPath, Throwable t) {
		return new ErrorView(viewPath, t);
	}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 1.0.0

  • Addon well tested in real project.

Version 1.0.1

  • Addon well tested in Vaadin 7.7 branch.
Released
2016-09-23
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Browser
Browser Independent

SubNavigator - Vaadin Add-on Directory

SubNavigator - is an addon which extends the capabilities of the standard Navigator and allows easier to organize a hierarchical multilevel structure of vaadin-application with support of browser bookmarks, navigation history, Forward/Back buttons, etc. SubNavigator - Vaadin Add-on Directory
_Sorry for my english._ _Addon temporary is not available from vaadin repository. Temporary solution - add another repo to your pom ([see here] (https://github.com/indvd00m/vaadin-sub-navigator#using))_ SubNavigator - is a server-side addon which extends the capabilities of the standard object Navigator and allows easier to organize a hierarchical multilevel structure of vaadin-application. SubNavigator allows you to explicitly specify a hierarchy of objects, and when the user moves from one address (URI Fragment) to another SubNavigator will notify the appropriate objects on the need to clean/refresh the data in that prioritization as they are in the hierarchy. ### Description Two main interfaces in [SubNavigator](https://github.com/indvd00m/vaadin-sub-navigator/blob/master/sub-navigator-api/src/main/java/com/indvd00m/vaadin/navigator/api/ISubNavigator.java) - is a `ISubView` and `ISubContainer`. ``` public interface ISubView extends Component { String getRelativePath(); void clean(); void build(); } ``` ``` public interface ISubContainer extends ISubView { ISubView getSelectedView(); void setSelectedView(ISubView view); void deselectView(ISubView view); } ``` `ISubContainer` is a container, and generally can contain any other` ISubContainer`, or `ISubView`. Let's look in situation where you will need to display some data at address `#!/path1/path2/path3`. Both `path1` and `path2` is a `ISubContainer` implementation, `path3` can be either `ISubView` or `ISubContainer`. The method `getRelativePath()` of these objects determine their relative path `path1`, `path2`, `path3`. `path1` is a root element which contains other elements. For example, `path1` could be `Panel` element with nested `TabSheet`, `path2` - Tab, `path3` - `VerticalLayout`. To define the object tree in the application you can use `addView(ISubContainer container, ISubView view)`: ``` // registering views ISubNavigator subNavigator = new SubNavigator(ui, path1View); // path1View - root view subNavigator.addView(path1View, path2View); // path2View contained in path1View subNavigator.addView(path2View, path3View); subNavigator.addView(path1View, path4View); subNavigator.addView(path4View, path5View); ``` When user navigates from `#!/path1/path2/path3` to `#!/path1/path4/path5`, SubNavigator first call methods `clean()` and `deselectView(ISubView view)` for objects with relative path `path3` and `path2`, then call methods `build()` and `setSelectedView(ISubView view )` for objects with path `path4` and` path5`: ``` // log of navigating from #!/path1/path2/path3 to #!/path1/path4/path5 path3View.clean() path2View.deselectView(path3View) path2View.clean() path1View.deselectView(path2View) path1View.setSelectedView(path4View) path4View.build() path4View.setSelectedView(path5View) path5View.build() ``` `SubNavigator` also support dynamic containers, exceptions handling, hierarchical page titles. See [Wiki](https://github.com/indvd00m/vaadin-sub-navigator/wiki) at github.
Online