Question

我在Tomcat 7.0上使用Primefaces 3.5和JSF 2.0。我正在尝试完成看似简单的任务，即在选择menuitem时动态加载fullPage布局的中心layoutunit部分。我花了最近几天研究这个问题，但我遇到的答案似乎都没有。选择menuitem后，中心layoutunit部分变为空白。

这是我的layoutTemplate.xhtml，它定义了两个layoutunits top和center，每个都有两个模板部分菜单和中心。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"           "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
            <title>ESF-12 Control Panel</title>
        </f:facet>
        <link type="text/css" rel="stylesheet" href="/css/default.css" />
        <style type="text/css">
            .ui-layout-north {
                z-index: 20 !important;
                overflow: visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow: visible !important;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit id="top" position="north" size="50">
                    <ui:insert name="menu">Top Section</ui:insert>
            </p:layoutUnit> 
            <p:layoutUnit id="center" position="center">
                    <ui:insert name="center">Center Section</ui:insert>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</f:view>
</html>

这是我的home.xhtml，它使用布局并定义菜单和中心部分的值。

<ui:composition template="/layoutTemplate.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"
     xmlns:p= "http://primefaces.org/ui">

     <ui:define name="menu">
         <ui:include src="/menu.xhtml" />
     </ui:define>
     <ui:define name="center">
         <ui:include src="#{viewControllerBean.view}" />
     </ui:define>
</ui:composition>

这是一个简单的ViewControllerBean.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class ViewControllerBean {

private String view = "/centerLayoutUnit1.xhtml";

/**
 * @return the view
 */
public String getView() {
    return view;
}

/**
 * @param view the view to set
 */
public void setView(String view) {
    this.view = view;
}
}

这是我的menu.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
    <ui:composition>
        <h:form>
            <p:menubar>
                <p:submenu label="Test" icon="ui-icon-power">
                    <p:menuitem value="Change Center Layout" icon="ui-icon-pencil" update=":center" actionListener='#{viewControllerBean.setView("/centerLayoutUnit2.xhtml")}'/>
                </p:submenu>
            </p:menubar>
        </h:form>
    </ui:composition>
</body>
</html>

最后我想用两个xhtml文件来填充中心layoutunit模板内容。

这是centerLayoutUnit1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
    <ui:composition>
        Center Layout Unit 1
    </ui:composition>
</body>
</html>

这是centerLayoutUnit2.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
    <ui:composition>
        Center Layout Unit 2
    </ui:composition>
</body>
</html>

非常感谢所有帮助!!!

如何从primefaces中的menuitem动态更新中心layoutunit内容？

0 个答案: