The f:verbatim tag can be used to nest plain HTML within the JSF component tree. If you leave it away, then plain HTML will be rendered outside the JSF component tree. It also gives control whether to render plain HTML or not. For example:
<f:verbatim rendered="#{myBean.userLoggedIn}">
<h1>Some plain HTML heading</h1>
You are logged in.
</f:verbatim>
And about wrapping text, use the CSS white-space property. By default the text is always wrapped inside the space of the parent block element, unless you specify white-space: nowrap, for example in table cells.
[nobr]the verbatim tag is still confusing..
Why is it that this code runs well without Verbatim tags:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<f:view>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/pages.css"/>
<script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/thatThing.js"></script>
</head>
<body>
<%@ include file="/selfService/header.jsp" %>
<table width="90%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td colspan="2" class="titleBar">Generate Access Code</td>
</tr>
<tr>
<td width="15%" class="adminMenu" style="vertical-align:top;"><%@ include file="adminMenu.jsp" %></td>
<td style="vertical-align:top;">
<br>
<h:form id="genAccessCode">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="formBox">
<tr>
<td align="right">Enter TNID:</td>
<td align="center"><h:inputText value="#{adminController.tnidForAccessCode}"/></td>
<td><h:commandButton value="Generate Access Code" action="#{adminController.generateAccessCode}"/></td>
</tr>
<tr>
<td colspan="3" align="center"><h:commandButton value="Clear" action="#{adminController.clearAccessCode}"/></td>
</tr>
</table>
</h:form>
<h:panelGroup rendered="#{not empty adminController.generatedAccessCode}">
<h:panelGrid border="1"
width="100%"
cellpadding="3"
cellspacing="0"
columns="2"
rowClasses="shaded">
<h:column>
<h:outputText value="Code"/>
</h:column>
<h:column>
<h:outputText value="#{adminController.generatedAccessCode}"/>
</h:column>
<h:column>
<h:outputText value="Link"/>
</h:column>
<h:column>
<h:outputText value="http://www.dfasd.jsf?accessCode=#{adminController.generatedAccessCode}"/>
</h:column>
</h:panelGrid>
</h:panelGroup>
</td>
</tr>
</table>
</body>
</html>
while this one doesn't? its as if this one needs those tags..
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<f:view>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/pages.css"/>
<script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/thatThing.js"></script>
<script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/generalCheck.js"></script>
</head>
<body>
<%@ include file="header.jsp" %>
<h:form>
<%@ include file="steps.jsp" %>
<h:panelGroup rendered="#{addEditController.adminMode}">
<table border="0" cellpadding="5" cellspacing="0" width="60%" align="center" class="formBox">
<tr>
<td colspan="2" align="center">Administration Panel</td>
</tr>
<tr>
<td align="left">Directory Entry Status</td>
<td align="left">
<h:selectOneMenu value="#{addEditController.supplier.directoryEntryStatus}" valueChangeListener="#{adminController.selectEntryStatus}">
<f:selectItems value="#{applicationRes.allDirectoryEntryStatus}"/>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td align="left">Listing Expiry Date</td>
<td align="left">
<t:inputDate type="date" popupCalendar="true" value="#{addEditController.supplier.listingExpiryDate}"/>
</td>
</tr>
<tr>
<td align="left">Directory Listing Level</td>
<td align="left">
<h:selectOneMenu value="#{addEditController.supplier.listingLevelId}" valueChangeListener="#{adminController.selectListingLevel}" onchange="submit()">
<f:selectItems value="#{applicationRes.allDirectoryListingLevels}"/>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td align="left">Directory Comm Status</td>
<td align="left">
<h:selectOneMenu value="#{addEditController.supplier.directoryComStatus}" valueChangeListener="#{adminController.selectComStatus}">
<f:selectItems value="#{applicationRes.allDirectoryComStatus}"/>
</h:selectOneMenu>
</td>
</tr>
</table>
</h:panelGroup>
<%@ include file="stepsStepper.jsp" %>
</h:form>
</body>
</html>
</f:view>
Message was edited by:
Arch_Bytes[/nobr]
Yes, I can understand why that is confusing...
f:view and h:form are somewhat of an exception... In that you can print plain HTML within them (as children) without using f:verbatim. However, most all other components, including h:panelGroup and h:panelGrid, requires you to use f:verbatim on any HTML printed between opening and closing tag.
As Balus mentioned, it's because of the JSF component tree. JSF components must render themselves and their registered children (or at the very least, tell their children to render themselves). HTML alone is not considered a JSF component, thus it cannot be registered as a child of the parent component. So unless the f:verbatim tag is there, it doesn't actually know what all those characters between the parent tags mean and how to render them. It treats them as garbage, and discards them because they are not registered children components.
If you find it easier, you can often substitute f:verbatim with h:outputText (with escape="false" set).
CowKing