Mix HTML and JSF in a JSF subview

Question

The problem I have today is about dealing with HTML in an included JSP, with JSF. So here's the situation : I use JSF 1.2 by IBM on RAD with Websphere v6.1 I have a custom component (from the company layer) to use tabs. And in order to have a cleaner code, I just want to separate the JSF code of each tab in a separated JSP, this way, main.jsp :

<customTag:tabComponent>
<jsp:include page="/jsp/workflow/tab1.jsp"></jsp:include>
<div align="right">
    <customTag:switchToTab title="Next" tabValue="2"></customTag:switchToTab>
</div>
</customTag:tabComponent>

And my tab1.jsp :

<!-- Taglibs declared here -->
<f:verbatim>
<div id="myDivId">
    <fieldset>
        <legend>myLegend</legend>
        <h:outputText value="#{myBean.someContent}"></h:outputText>
        <!-- HERE are a lot of JSF components, selectItems, inputText... -->
    </fieldset>
</div>
</f:verbatim>

So the JSF components are processed, but HTML seems to be treated after and appears after, outside of the HTML generated by JSF. Something like

<table>
    <!-- generated content -->
</table>
<div id="myDivId">
...

although the table should be inside the div. I tried to use the <f:verbatim> tag different ways, and the only solution was to surround <div> and </div> by the verbatim opening and closing tags, which is dirty and makes Websphere going crazy.

Google did not find anything relevant, so have you guys already encountered the same issue? Is it possible to find a clean solution or do I have to include all my code inside the same JSP? Thanks in advance.

Answer 1

First of all, that's recognizeable as legacy JSF 1.0/1.1 behaviour. The f:verbatim was indeed required to take template text into the JSF component tree. However, the f:verbatim is entirely superfluous since the new view handler of the 2006's JSF 1.2 which automatically takes any template text inside f:view into the component tree. Thus, are you really using JSF 1.2? Websphere 6.1 ships with builtin JSF 1.1 libraries and upgrading to 1.2 isn't as easy as just placing libs in /WEB-INF/lib.

As to your actual problem, you need to wrap only template text with f:verbatim, not worthfully JSF components. Thus, the following should work:

<f:verbatim>
    <div id="myDivId">
        <fieldset>
            <legend>myLegend</legend>
</f:verbatim>
<h:outputText value="#{myBean.someContent}"></h:outputText>
<!-- HERE are a lot of JSF components, selectItems, inputText... -->
<f:verbatim>
        </fieldset>
    </div>
</f:verbatim>