Hi,
I am trying to use tabView in the following manner
<ig:tabView> <ig:tabItem> <f:verbatim> <div style = "background-color:red;"> <h:outputText/> <ig:checkBox/> </div> </f:verbatim> </ig:tabItem></ig:tabView>
Note: All necessary attributes are given proper values.
Here tab appears properly with the div but the components dont appear(h:outputText and ig:checkBox )
And then i looked at the web tab samples in Infragistics site.
Tried the below version
<ig:tabView> <ig:tabItem> <f:verbatim> <div style = "background-color:red;"> </f:verbatim> <h:outputText/> <ig:checkBox/> <f:verbatim> </div> </f:verbatim> </ig:tabItem></ig:tabView>
But this also doesn't work, because Facelets expect the page to follow proper XML standards.
We get error from the SAX parser saying the div is not having /div in proper place.
How can we achieve the output in JSF facelets environment ?
Thanks
Hi Jansun,
You need <f:verbatim> tag for non-JSF content that appears in the page.
But if you are using Facelets, any time Facelets comes across static markup, it automatically creates a UIComponent to wrap the markup and output it during encoding.
The other thing is that you have perfectly XHTML compliant div element with opening and closing tag. So you don't need the <f:verbatim>.
Best regards
Thanks for the reply.
The reason i was trying to use f:verbatim in the facelets xhtml page is that, if i use tabView and tabItem tags and have content as below:
<ig:tabView> <ig:tabItem> <div style = "background-color:red;"> <h:outputText/> <ig:checkBox/> </div> </ig:tabItem></ig:tabView>
On initial load of the page, all tags (Both JSF components and plain html tas) get rendered properly. Once i switch to some other tabItem and then come back to this tab,
only the following gets rendered
<ig:tabItem> <h:outputText/> <ig:checkBox/> </ig:tabItem>
The plain html tag, div is not getting rendered during the AJAX call.
Is there a solution for this to make the plain HTML tag also get rendered inside tabs without using f:verbatim ?
Thanks for the quick reply.
I understand that for the plain Html <div> tag we can use some other JSF component like a h:panelGroup to achieve the same.
But we would need to use lot of html tags in our pages, like <dd><dl> or <ul><li> <p> <h> mostly for formatting and for defining the layout.
We cant try to have all these tags replaced with JSF controls.
So i basically want to mix html tags and JSF controls in a tabItem in Facelets (Xhtml pages).
How is it possible to do ?
Any suggestions are welcome.
If div element creates problems, try JSF component (tomhawk t:panelGroup or h:panelGroup).
You can try this approach:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:t="http://myfaces.apache.org/tomahawk" xmlns:ig="http://es.infragistics.com/faces/netadvantage"><head><style>.panelGroupStyle{ border: 1px solid black; height:40px; float: left; width:500px;}</style></head> <body><f:view><h:form id="form1"><ig:tabView id="tabView"> <ig:tabItem value="Tab one" id="tabItem1"> <t:panelGroup style = "background-color:red;" styleClass="panelGroupStyle"> <h:outputText value="Test01" /> <ig:checkBox/> </t:panelGroup> </ig:tabItem> <ig:tabItem value="Tab two" id="tabItem2"> <t:panelGroup style="background-color: green;" styleClass="panelGroupStyle"> <h:outputText value="Test02" /> <ig:checkBox /> </t:panelGroup> </ig:tabItem> </ig:tabView> </h:form></f:view></body></html>