PrimeFaces <p:tabview>同时显示所有选项卡

时间:2017-04-02 18:14:31

标签: eclipse jsf primefaces tabview

我在Eclipse Neon 3中创建了一个动态Web应用程序来尝试一些PrimeFaces展示示例。我已将primefaces-6.1.jar放入war project的类路径中。 JSF实现是Mojarra 2.2。 <p:tabView>以与展示中非常不同的方式出现。 标签标题仅显示单个链接(没有任何标签,如外观),所有标签在下面的同一时间可见。

我将示例的基本tabview部分复制/粘贴到空的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>

生成的页面源:

<!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>

The view of the page

我的问题是:我错过了什么才能在展示中获得相同的外观? 正如我所看到的,生成的代码包含<p:growl><p:tabView><p:tab><p:graphicImage>元素。编辑器不显示任何错误(它通过命名空间找到它们)。 <h:*>元素已渲染。为什么不渲染<p:*>元素?

0 个答案:

没有答案