左侧JSF Primefaces，中心布局

Question

单击“左侧”菜单中的按钮时，我不知道如何显示在中心屏幕中。

现在，当我单击“左”菜单中的按钮时，会打开一个新页面，而没有“左”菜单，但是我不想要它，我需要“左”菜单不消失。

下面是我的代码。

<h:head>
    <title>Facelet Title</title>
</h:head>
   <frameset rows="65,*" frameborder="0">
            <frame scrolling="no" src="header.xhtml"/>
            <frameset cols="200,*" frameborder="0">
                    <frame scrolling="no" src="menu.xhtml"/>
             </frameset>
    </frameset>

Answer 1

基本上，您需要给目标框架起一个name并在<a>元素的target属性中指定它。 例如

<frame name="center">

同

<a href="page.xhtml" target="center">

但是，这并非完全是现代Web应用程序模板化的正确方法。 框架集在用户体验和SEO评估价值方面有许多缺点。 相反，应该使用任何服务器侧视图技术（包括您所使用的Facelets）的include和tempulation工具。 仅当您手头上完全没有服务器服务器侧视图技术（因此，只有纯HTML）或要显示外部网站时，才应使用框架集。

使用Facelets，您应该改为使用类似这样的内容作为主模板

/WEB-INF/templates/layout.xhtml

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
    </h:head>
    <h:body>
        <div id="header"><ui:include src="/WEB-INF/includes/header.xhtml"></div>
        <div id="menu"><ui:include src="/WEB-INF/includes/menu.xhtml"></div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
    </h:body>
</html>

（您可以使用CSS以所需的方式float:left布局组件，例如#menu和#content上的float:left ）

这就是模板客户端（实际上是通过URL打开的页面）的外观：

/page.xhtml

<ui:composition template="/WEB-INF/templates/layout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="title">
        New page title here
    </ui:define>

    <ui:define name="content">
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

有关现代JSF / Facelets Web应用程序的开放源代码示例，请检查OmniFaces展示应用程序。

当您使用PrimeFaces时，还有另一种选择， <p:layout> 。 请参见其展示应用程序中的“完整示例” ，例如此示例。

也可以看看：

Java EE 6教程-Facelets

Answer 2

您的描述有些混乱，但是我想您正在使用JSF模板系统，从而使您可以在多个页面上包含相同的代码（例如，菜单）。 镜框非常过时，不再使用。

参见http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/

作为进一步的评论，此问题似乎与Primefaces（这是一个组件包，这些注释中未包含任何代码）有关。

Answer 3

这是一个简单的页眉，页面，页脚示例。 所有人都可以相信或不相信它，都可以使用一个表单ID。 标头位于WebContent / templates中。 其他.xhtml可以放在WebContent中。 如果您的@ManagedBean String方法返回“ second”，则将显示second.xhtml页面。 每个页面仍然与其自己的@ManagedBean对话。

<body">
<f:view>
<div id="container">
<h:form id="templateForm">
    <div id="header">
        <ui:include src="header.xhtml" />
    </div>

    <div id="wrapper">
        <div id="firstId">
            <ui:insert name="first"></ui:insert>
        </div>
        <div id="secondId">
            <ui:insert name="second"></ui:insert>
        </div>
        <div id="inputMaskId">
            <ui:insert name="inputMask"></ui:insert>
        </div>
        <div id="valtestId">
            <ui:insert name="valtest"></ui:insert>
        </div>
    </div>

    <div id="footer">
        <ui:include src="footer.xhtml" />
    </div>
</h:form>
</div>      
</f:view>
</body>

Answer 4

我们可以使用布局来代替包含名称空间xmlns：p =“ http://primefaces.org/ui”

<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header=
"Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for North" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom"
resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for South" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header=
"Left" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for West" />
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header=
"Right" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for Right" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Layout content for Center" />
</p:layoutUnit>
</p:layout>

这将渲染五个面板

左侧JSF Primefaces，中心布局

问题描述

4 个解决方案

解决方案1
4 2012-06-24 11:14:37

也可以看看：

解决方案2
0 2012-06-24 11:08:38

解决方案3
0 2013-03-16 13:55:23

解决方案4
0 2014-06-03 13:10:53

左侧JSF Primefaces，中心布局

问题描述

4 个解决方案

解决方案1 4 2012-06-24 11:14:37

也可以看看：

解决方案2 0 2012-06-24 11:08:38

解决方案3 0 2013-03-16 13:55:23

解决方案4 0 2014-06-03 13:10:53

解决方案1
4 2012-06-24 11:14:37

解决方案2
0 2012-06-24 11:08:38

解决方案3
0 2013-03-16 13:55:23

解决方案4
0 2014-06-03 13:10:53