I created a Dynamic Web Application in Eclipse Neon 3 to try some PrimeFaces showcase example out. I have put the primefaces-6.1.jar into the classpath of the war project. The JSF implementation is Mojarra 2.2.
The <p:tabView> appears in a very distinct way as in the showcase.
The tab titles appears just single links (nothing tab like appearance) and all the tabs are visible in the same time below.
I copy/paste the basic tabview part of the example into an empty facelet:
<!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<head>
<title>JSF Facelet</title>
</head>
<body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<h3 style="margin-top: 0">Basic</h3>
<p:tabView>
<p:tab title="Godfather Part I">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="demo/images/godfather/godfather1.jpg" />
<h:outputText value="The story begins as Don Vito Corleone..." />
</h:panelGrid>
</p:tab>
<p:tab title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="demo/images/godfather/godfather2.jpg" />
<h:outputText value="Francis Ford Coppola's legendary..." />
</h:panelGrid>
</p:tab>
<p:tab title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage name="demo/images/godfather/godfather3.jpg" />
<h:outputText value="After a break of more than 15 years..." />
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</body>
</html>
The generated page source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.org/ui">
<head>
<title>JSF Facelet</title>
</head>
<body>
<form id="form" name="form" method="post" action="/EEApp1-war/faces/index.xhtml;jsessionid=02c69d11b0bfea5adbc5c27cfa33" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<p:growl id="msgs" showDetail="true"></p:growl>
<h3 style="margin-top:0">Basic</h3>
<p:tabView>
<p:tab title="Godfather Part I"><table cellpadding="10">
<tbody>
<tr>
<td>
<p:graphicImage name="demo/images/godfather/godfather1.jpg"></p:graphicImage></td>
<td>The story begins as Don Vito Corleone...</td>
</tr>
</tbody>
</table>
</p:tab>
<p:tab title="Godfather Part II"><table cellpadding="10">
<tbody>
<tr>
<td>
<p:graphicImage name="demo/images/godfather/godfather2.jpg"></p:graphicImage></td>
<td>Francis Ford Coppola's legendary...</td>
</tr>
</tbody>
</table>
</p:tab>
<p:tab title="Godfather Part III"><table cellpadding="10">
<tbody>
<tr>
<td>
<p:graphicImage name="demo/images/godfather/godfather3.jpg"></p:graphicImage></td>
<td>After a break of more than 15 years...</td>
</tr>
</tbody>
</table>
</p:tab>
</p:tabView><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-152009560656088582:-2166935493356532768" autocomplete="off" />
</form>
</body>
</html>
My question is : what have I missed to set to get the same appearance just as like in the showcase?
As I can see the generated code contains <p:growl>, <p:tabView>, <p:tab> and <p:graphicImage> elements. The editor does not show any error (it finds them by the namespace). The <h:*> elements got rendered. Why does not it render the <p:*> elements?
