Mix HTML and JSF

Question

How do I go about interspersing HTMl with the JSF components? The outputText works Ok for small bits of code but cannot be nested.
Basically, I need to go to Flow-Based layout using tables and cannot seem to get started so any ideas would help.

Answer 1

<%-- jsf:codeBehind language="java" location="/JavaSource/pagecode/jsp/banking/BankAccountsAndCreditCards.java" --%><%--
/jsf:codeBehind --%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<%@ page
language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
session="false"
%>
<portletAPI:init />
<f:view>
<LINK rel="stylesheet" type="text/css"
          href='<%=response.encodeURL("/theme/stylesheetx.css")%>' title="Stylex">
          <LINK rel="stylesheet" type="text/css"
          href='<%=response.encodeURL("/theme/stylesheet.css")%>' title="Style">
          <f:loadBundle basename="gov.ohio.jfs.eric.bundle.labels" var="labels" />
          <h:form id="bankAccountsAndCreditCards"\>
     <div id="contentzone">
     <div id="taskarea">
          <div id="taskareaheader" style="width:100%">
               <span class="style4" style="width:75%"><h:outputText
value="#{labels['bankAccountsAndCreditCards.title']}"/></span>
          </div>
<div id="instructions"><span class="style4"><h:outputText
value="#{labels['bankAccountsAndCreditCards.instructions.title']}"/></span><span class="style9"><h:outputText
value="#{labels['bankAccountsAndCreditCards.instructions']}"/></span> </div>
          <h:outputText value="#{labels['bankAccountsAndCreditCards.warning']}"
rendered="#{pc_BankAccountsAndCreditCards.bankAccountsAndCreditCardsFB.labelPresent}"></h:outputText>
<div id="datatable" style="padding-top:5px;MARGIN-top:15px" class="style16"><span
style="padding-left:15px"><h:outputText value="#{labels['bankAccountsAndCreditCards.bankAccounts.title']}"/></span>
               <div id="title">          
                    <table border="0" cellpadding="0" cellspacing="0">
                         <tr>
                         <td align="left" class="style16" style="width:80%"> </td>
                         <td align="right" style="width:10%" id="buttonpad"><hx:commandExButton
type="submit"
value="#{labels['bankAccountsAndCreditCards.bankAccounts.buttonName.addBankAccount']}" styleClass="commandExButton"
id="addBankAccount"
action="#{pc_BankAccountsAndCreditCards.addBankAccounts}" >
</hx:commandExButton></td>
                         <td align="right" style="width:10%" id="buttonpad"><hx:commandExButton
type="submit"
value="#{labels['bankAccountsAndCreditCards.bankAccounts.buttonName.delete']}" styleClass="commandExButton"
id="deleteBankAccount"
action="#{pc_BankAccountsAndCreditCards.deletBankAccounts}" >
</hx:commandExButton></td>
                         </tr>
                    </table>
          </div>
          <div id="datatable">          
               <h:dataTable var="varsecurityInfo" width="100%"
               rowClasses="rowon,rowoff" headerClass="tableheader"
               id="bankAccountid"
               value="#{pc_BankAccountsAndCreditCards.bankAccountsAndCreditCardsFB.bankAccountCreditCardCDB}">
               <h:column>
                    <f:facet name="header">
                         <h:selectBooleanCheckbox id="selectallaccounts1"></h:selectBooleanCheckbox>
                    </f:facet>
                    <h:selectBooleanCheckbox id="selectaccounts1"
                         value="#{varbankAccountCreditCardCDB.deleteRow}">
                    </h:selectBooleanCheckbox>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.accountType']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.accountType}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.routingNumber']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.transitNumber}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.accountNumber']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.accountNumber}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.nameOnAccount']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.bankName}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.status']}"></h:outputText>
                    </f:facet>
                    <h:outputText value=""></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.createdBy']}"></h:outputText>
                    </f:facet>
                    <h:commandLink id="actionlink" action="">
                         <h:outputText value="getLastUPDTS(use summaryofdebits like)"></h:outputText>
                    </h:commandLink>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.action']}"></h:outputText>
                    </f:facet>
                    <h:commandLink>
                         <h:outputText value="#{varbankAccountCreditCardCDB.action}"></h:outputText>
                    </h:commandLink>
               </h:column>
          </h:dataTable>          
          </div>                         
          </div>
          <div id="datatable" style="padding-top:5px;MARGIN-top:15px" class="style16"><span
style="padding-left:15px"><h:outputText
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.title']}"></h:outputText></span>
               <div id="title">          
                    <table border="0" cellpadding="0" cellspacing="0">
                         <tr>
                         <td align="left" class="style16" style="width:80%"> </td>
                         <td ><hx:commandExButton type="submit"
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.buttonName.addCreditCard']}" styleClass="commandExButton"
id="addcreditAccount"
action="#{pc_BankAccountsAndCreditCards.addCreditCardAccounts}" >
</hx:commandExButton></td>
                         <!-- <td align="right" style="width:10%" id="buttonpad"><input name="button"
type="button" value="Add Bank Account" class="style16"></td> -->
                         <td><hx:commandExButton type="submit"
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.buttonName.delete']}" styleClass="commandExButton"
id="deletecreditAccount"
action="#{pc_BankAccountsAndCreditCards.deleteCreditCardAccounts}"
>
</hx:commandExButton></td>
                         <!-- <td align="right" style="width:10%" id="buttonpad"><input name="button"
type="button" value="Delete" class="style16"></td> -->
                         </tr>
                    </table>
          </div>
          <div id="datatable">          
<h:dataTable var="varbankAccountCreditCardCDB" width="100%"
               rowClasses="rowon,rowoff" headerClass="tableheader"
               value="#{pc_BankAccountsAndCreditCards.bankAccountsAndCreditCardsFB.bankAccountCreditCardCDB}">
               <h:column>
                    <f:facet name="header">
                         <h:selectBooleanCheckbox></h:selectBooleanCheckbox>
                    </f:facet>
                    <h:selectBooleanCheckbox
                         value="#{varbankAccountCreditCardCDB.deleteRow}">
                    </h:selectBooleanCheckbox>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.cardType']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.accountType}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.creditCardAccountNumber']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.transitNumber}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.nameOnCreditCard']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.accountNumber}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.creditCardAccounts.status']}"></h:outputText>
                    </f:facet>
                    <h:outputText
value="#{varbankAccountCreditCardCDB.paymentProfileDataBean.thePaymentInfoDataBean.accountNumber}"></h:outputText>
               </h:column>
               <h:column>
                    <f:facet name="header">
                         <h:outputText
value="#{labels['bankAccountsAndCreditCards.bankAccounts.action']}"></h:outputText>
                    </f:facet>
                    <h:commandLink>
                         <h:outputText value="#{varbankAccountCreditCardCDB.action}"></h:outputText>
                    </h:commandLink>
               </h:column>
          </h:dataTable>               
          </div>                         
          </div>
          <div id="taskareanav" style="width:100%">          
          <table border="0" cellpadding="0" cellspacing="0">
               <tr>
               <td align="left" class="style16" style="width:100%"><
                    Previous</td>
               </tr>
          </table>
          </div>
</div>          
</div>
     <h:outputText value="#{pc_BankAccountsAndCreditCards.bankAccountsAndCreditCardsFB.name}"
rendered="#{pc_BankAccountsAndCreditCards.bankAccountsAndCreditCardsFB.labelPresent}"></h:outputText>
     </h:form>
</f:view>