dynamic view injection or routing

Question

i have a JSF projekt and in there i have different views, which are backed by ManagedBeans.

What i would like to achieve is to change some views while others stay where they are. this has to happen dynamically. In other words. I want to inject and remove views from an xhtml page without a page refresh. I have no clue how to achieve this.

Even better would be a dynamic view injection based on urls. angularjs does that very well. But even without routing it would be great.

Thanks in advance.

Here is an example in pseudo code:

<nav>
    <h:link action="navigationBean.changeView(view1)" method="ajax">Link1</h:link>
    <h:link action="navigationBean.changeView(view2)" method="ajax">Link2</h:link>
</nav>

<h:viewContainer>
    // view selected by clicking the nav links should be injected here without page reload
</h:viewContainer>

Answer 1

What you ask is better done using Facelet templating. You'll be able that way to have a page template with the shared content (the navigation menu in your case) and make the rest of the views inherit from it.

What can I see from your suggested solution is that you're abusing the POST calls. #{fragmentsPresenter.changeView('viewOne')} doesn't make sense just because you already know where you want to go to when you press that link (to viewOne), So you'll be better using plain links for that.

Here you've got an example showing how to handle navigation in a proper way. Let's suppose you've got a view controller even you won't need it in most of the cases:

ViewController.java

/**
 * Give the scope you want to your bean depending on what are your operations
 * oriented to. This example could be @ApplicationScoped as well
 * 
 * @author amaeztu
 * 
 */
@ManagedBean
@SessionScoped
public class ViewController {

    /**
     * Just gets the current view path and switches to the other one
     * 
     * @return
     */
    public String changeView() {
        String viewId = FacesContext.getCurrentInstance().getViewRoot()
                .getViewId();
        if (viewId.equals("/view1.xhtml")) {
            return "/view2";
        } else {
            return "/view1";
        }
    }
}

This controller's job is just to check what view are you coming from and switch to the other one. It's pointless to perform a POST request (to send a form) just to navigate to the other view, while you could evaluate it before page rendering.

Here you've got how the template view is built:

template.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">
    <h:head />

    <h:body>
        <h:form>
            <!-- Use POST requests like this only when you have 
            to determine the destination dinamically at server side -->
            <h:commandButton value="Switch View with POST"
                action="#{viewController.changeView}" />
            <br />
        </h:form>
        <!-- For plain navigation, use GET requests -->
        <h:link value="Go to view 1" outcome="/view1" />
        <br />

        <!-- Determine where we are at page rendering time 
            and evaluate the other view path -->
        <h:link value="Switch view without POST"
            outcome="#{view.viewId eq '/view1.xhtml' ? '/view2' : '/view1'}" />
        <br />
        <br />
        <ui:insert name="content" />
    </h:body>

</ui:composition>

This template page defines a shared button/link set and calls for content. I've implemented different kind of navigation options. Using <h:link /> is, in this case, the most straight-forward way. Check the second link, here we evaluate the current view id when it gets rendered and a link to go to the opposite one is created. Cool, isn't it?

Now here it is the implementation of the child views:

view1.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" template="/template.xhtml">

    <ui:define name="content">
        <!-- Here you could have some @ViewScoped 
        bean managing the content i.e. #{view1Bean} -->
        View 1
    </ui:define>

</ui:composition>

view2.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" template="/template.xhtml">

    <ui:define name="content">
        View 2
    </ui:define>

</ui:composition>

You'll be able to type their address in your browser and see them, that's what's called bookmarkable ;-)

See also:

• Get current page programmatically

Answer 2

Ok, i solved it as follows:

my View:

<h:body>

<nav>
<h:form>
    <h:commandLink action="#{fragmentsPresenter.changeView('viewOne')}">
        viewOne
        <f:ajax execute="@this" render="fragment-container" />
    </h:commandLink>
    <h:commandLink action="#{fragmentsPresenter.changeView('viewTwo')}">
        viewTwo
        <f:ajax execute="@this" render="fragment-container" />
    </h:commandLink>
</h:form>
</nav>

<h:panelGroup id="fragment-container">
    <ui:fragment rendered="#{fragmentsPresenter.activeView('viewOne')}">
        <div>i am view one!</div>
    </ui:fragment>
    <ui:fragment rendered="#{fragmentsPresenter.activeView('viewTwo')}">
        <div>i am view Two!</div>
        <ui:include src="fragment.xhtml"/>
    </ui:fragment>
</h:panelGroup>

and my ManagedBean:

@ManagedBean
@SessionScoped
public class FragmentsPresenter {
    private String activeView;

    public void setActiveView(String viewName) { this.activeView = viewName; }
    public String getActiveView() { return this.activeView; }

    public FragmentsPresenter() { this.activeView = "viewOne"; }

    public void changeView(String viewName) { this.activeView = viewName; }

    public boolean activeView(String viewName) {
        return activeView.equals(viewName);
    }
}