xe:switchFacet – Dynamically switch content in XPages

Several roads are leading to Rome and so it is in XPages. There is always a different solution to solve a challenge.
Assume, you are using the Application Layout Control from the eXtension Library. The control offers an easy way to build a standard GUI in a few minutes.
It can have tabs and links and other things that are needed in the application to display content and switch between the different sections of an application.
The sample application, that comes with the eXtension Library shows one way to switch the content when a user clicks title bar tabs.

Here is another solution to achieve the goal. The application uses one XPage, a set of custom controls and a Variable Resolver. The variable resolver is responsible to highlight the selected value and to set the default tab. Switching the content of the left facet in the Application Layout Control is done by evaluating the value submitted via a scoped variable by a xe:switchFacet control.

Here is a picture of what the output in the browser should look like.

And here is the code for the different design elements.

home.xsp

The interesting part is in the beforeRenderResponse event of the page. setDefaultTab is a variable that is evaluated by the variable resolver. If viewScope.selectedTab does nor contain a value, a default value is returned and the according tab gets the focus.

ccLayout

ccLayout also uses the variable resolver. isTab1Selected and isTab2Selected return true or false according to value that is submitted, when the user clicks on a tab. In the onItemClick event, viewScope.selectedTab is set to the value that is defined in the submitValue= of a tab

ccSwitchFacet

The selectedFacet parameter in the xe:switchFacet control consumes the value in viewScope.selectedTab and then displays the content of the facet, tah matches the value.

ccNavTab1 / ccNavTab2

Variable Resolver

And finally, here is the code for the variable resolver. The sceleton for the code has been taken from OpenNTF XSnippets. Paul Withers has submitted the code.

package com.isatweb.jsf.core;

import static com.ibm.xsp.extlib.util.ExtLibUtil.getViewScope;

import java.util.Map;

import javax.faces.context.FacesContext;
import javax.faces.el.EvaluationException;
import javax.faces.el.VariableResolver;

public class VarResolver extends VariableResolver {

private final VariableResolver delegate;
private final String scopeVarSelectedTab = "selectedTab";

public VarResolver(VariableResolver resolver) {
delegate = resolver;
}

@Override
public Object resolveVariable(FacesContext context, String name)
throws EvaluationException {

Map<String, Object> viewScope = getViewScope();
Object sel = viewScope.get(scopeVarSelectedTab);

if ("isTab1Selected".equals(name)) {
if (sel == null) {
sel = false;
}
if (sel.toString().equals("tab1")) {
return true;
}
}

if ("isTab2Selected".equals(name)) {
if (sel == null) {
sel = false;
}
if (sel.toString().equals("tab2")) {
return true;
}
}

// sets the DEFAULT tab
if ("setDefaultTab".equals(name)) {
if (sel == null) {
viewScope.put(scopeVarSelectedTab,"tab1");
}

}

return delegate.resolveVariable(context, name);

}
}

You can download the complete application from here