The BalusC Code: Restore tabbedpanel

Maintain the tab selection after form submission

The IBM JSF version as is in Websphere Studio Application Developer 5.x doesn't return to the tab selected after submitting a form in a certain tab of the odc:tabbedPanel, while the IBM JSF version as is in WSAD 6.x does. This practice describes the javascript hack for IBM JSF in WSAD 5.x to maintain the tab selected after a form submission.

Use Javascript

The trick is to put boolean getter methods in the backing bean and handle the tab selection using Javascript. The boolean getter methods should return true if the appropriate form has been submitted before. All ODC elements are stored in the Javascript ODCRegistry object, you can retrieve the ODC element as object using getClientControl(). With the restoreUIState() function you can set the tab selection state. It is important that the managed bean has a session scope instead of a request scope. Otherwise, the data of the managed bean (vars, state, etc) will be garbaged directly after one request.

The relevant XML code of the faces-config file:

<managed-bean>
    <managed-bean-name>myBean</managed-bean-name>
    <managed-bean-class>mypackage.MyBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

The basic JSF code example for the JSP file:

<body>
    <hx:scriptCollector id="scriptCollector1">
        ...
        <odc:tabbedPanel id="tabbedPanel1">
            <odc:bfPanel id="bfpanelForm1">
                <h:form id="form1">
                    ...
                    <h:commandButton value="submit" action="#{myBean.submitForm1}" />
                </h:form>
            </odc:bfPanel>
            <odc:bfPanel id="bfpanelForm2">
                <h:form id="form2">
                    ...
                    <h:commandButton value="submit" action="#{myBean.submitForm2}" />
                </h:form>
            </odc:bfPanel>
            ...
        </odc:tabbedPanel>
        ...
    </hx:scriptCollector>
    <f:verbatim>
        <script>
            panel = ODCRegistry.getClientControl('tabbedPanel1');
            panel.restoreUIState('bfpanelForm' + 
                </f:verbatim><h:outputText value="#{myBean.submittedForm}"/><f:verbatim>);
        </script>
    </f:verbatim>
</body>

Note: in JSF 1.2 those f:verbatim tags aren't needed however.

It is important that the Javascript is executed after the hx:scriptCollector part, otherwise the panel state will be overriden by the default value.

The relevant java code of the backing bean MyBean.java should look like:

package mypackage;

public class MyBean {

    // Init --------------------------------------------------------------------------------------

    private int submittedForm;

    // Actions -----------------------------------------------------------------------------------

    public void submitForm1() {
        // Do your action thing for form1.
        ...
        submittedForm = 1;
    }

    public void submitForm2() {
        // Do your action thing for form2.
        ...
        submittedForm = 2;
    }

    // Getters -----------------------------------------------------------------------------------

    public int getSubmittedForm() {
        return submittedForm;
    }

}

Copyright - There is no copyright on the code. You can copy, change and distribute it freely. Just mentioning this site should be fair.

The BalusC Code

Sunday, May 21, 2006

Restore tabbedpanel

Maintain the tab selection after form submission

Use Javascript

1 comment:

About

Tags

Articles