1

Tomcat 7.0 で JSF 2.0 とともに Primefaces 3.5 を使用しています。menuitem を選択するときに、fullPage レイアウトの中央の layoutunit セクションを動的にロードするという一見単純なタスクを達成しようとしています。私はこの問題を調査するのにここ数日を費やしましたが、私が遭遇した答えはどれもうまくいかないようです. menuitem が選択されると、中央の layoutunit セクションが空白になります。

これは私の layoutTemplate.xhtml で、上部と中央に 2 つのレイアウトユニットを定義し、それぞれの内側にメニューと中央の 2 つのテンプレートセクションがあります。

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

そして最後に、中央のレイアウト ユニット テンプレート コンテンツを設定するために使用する 2 つの xhtml ファイルを作成します。

ここに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>

すべてのヘルプは大歓迎です!!!

4

0 に答える 0