1

次のJSF 2テンプレートページとprimefacesメニューがあります。左側のメニューからのリンクのクリックでページの中心を部分的に更新したいのですが、ページ全体を更新したくありません.スタックオーバーフローの投稿を調べました.彼らは私がcentral_body_divにフォーム名を持つべきであることを示唆していますが、私はcentral_body_divでフォームを指定したくありません.動的に読み込まれたページには独自の名前のフォームがあるため、 central_body_div div に動的に表示されるページ。

まず、レイアウト ページ自体が読み込まれず、以下の例外が発生します。

「leftMenuFormId:menuItem1」から参照される識別子「central_body_div」を持つコンポーネントが見つかりません。

専門家は、この問題の解決策を提供できます。あなたの返信に感謝します。

<?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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="cssLayout.css" library="css" />
            <h:outputStylesheet name="default.css" library="css" />        
            <title> Lightweight Mediation - Secure Pages </title>
        </h:head>

        <h:body id="securebody">

            <div id="top">
                <ui:insert name="top">
                    <ui:include src="/secure/home/header.xhtml" />
                </ui:insert>
            </div>
            <div id="content_holder">
                <div id="left">
                    <ui:insert name="left">
                        <ui:include src="/secure/home/leftMenu.xhtml" />
                    </ui:insert>
                </div>
                <div id="central_body_div" class="left_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="/secure/home/footer.xhtml" />
                </ui:insert>
            </div>

        </h:body>
    </f:view>
</html>

私の leftMenu.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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition id="leftMenuCompositionId"> 
            <h:form id="leftMenuFormId">
                <p:menu id="lMenuId">
                    <p:menuitem id="menuItem1" value="page1" action="page1" update="central_body_div" partialSubmit="true"/>
                    <p:menuitem id="menuItem2" value="page2"  action="page2" update="central_body_div" partialSubmit="true" />
                </p:menu>
            </h:form>
        </ui:composition>
    </h:body>
</html>
4

4 に答える 4

2

次のようにコードを変更して、もう一度やり直してください。

leftMenu.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:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <ui:composition id="leftMenuCompositionId"> 
        <h:form id="leftMenuFormId">
            <p:menu id="lMenuId">
                <p:menuitem id="menuItem1" value="page1" action="page1" update=":form1:central_body_div" partialSubmit="true"/>
                <p:menuitem id="menuItem2" value="page2"  action="page2" update=":form1:central_body_div" partialSubmit="true" />
            </p:menu>
        </h:form>
    </ui:composition>
</h:body>

そしてあなたのテンプレート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:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="cssLayout.css" library="css" />
        <h:outputStylesheet name="default.css" library="css" />        
        <title> Lightweight Mediation - Secure Pages </title>
    </h:head>

    <h:body id="securebody">

        <div id="top">

        </div>
        <div id="content_holder">
            <div id="left">
                <ui:insert name="left">
                    <ui:include src="leftMenu.xhtml" />                        
                </ui:insert>
            </div>
            <h:form id="form1" >
                <h:panelGroup id="central_body_div">
                    <script type="text/javascript">alert('Content Updated')</script>
                    <ui:insert name="content">Content</ui:insert>
                </h:panelGroup>
            </h:form>
        </div>
        <div id="bottom">

        </div>

    </h:body>
</f:view>

動作確認済みです。

于 2013-05-05T19:25:48.007 に答える
0

この投稿での議論から得た解決策と、他の投稿からの参照を配置しました。含めるページには、異なるフォーム名を付けることができます。

template.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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="cssLayout.css" library="css" />
            <h:outputStylesheet name="default.css" library="css" />        
            <title> Lightweight Mediation - Secure Pages </title>
        </h:head>

        <h:body id="securebody">

            <div id="top">
                <ui:insert name="top">
                    <ui:include src="header.xhtml" />
                </ui:insert>
            </div>

            <div id="content_holder">        
                <div id="left">
                    <ui:insert name="left">
                        <ui:include src="leftMenu.xhtml" />                        
                    </ui:insert>
                </div>
                <div id="center" class="left_content">
                    <h:panelGroup id="central_body_div">
                        <ui:include src="#{templateBean.page}.xhtml" />
                    </h:panelGroup>
                </div>       
            </div>

            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="footer.xhtml" />
                </ui:insert>
            </div>

        </h:body>
    </f:view>
</html>

leftMenu.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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition id="leftMenuCompositionId">    

            <h:form id="leftMenuFormId">
                <f:ajax render=":central_body_div">
                    <h:commandLink value="page1" action="#{templateBean.setPage('page1')}" /><br></br>
                    <h:commandLink value="page2" action="#{templateBean.setPage('page2')}" />
                </f:ajax>
            </h:form>

        </ui:composition>
    </h:body>
</html>

ページ1

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition>              
            <h1>Page One</h1>
        </ui:composition>
    </h:body>
</html>

ページ2

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition >  
            <h:form id="form1" >
                <h1>Page Two</h1>
            </h:form>
        </ui:composition>
    </h:body>
</html>



package ae.co.gui.beans;

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.event.ActionEvent;

@Named(value = "templateBean")
@SessionScoped
public class TemplateBean implements Serializable {

    private String page;

    public TemplateBean() {
    }

    @PostConstruct
    public void init() {
        this.page = "page1"; // Ensure that default is been set.
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

}
于 2013-05-08T05:23:45.437 に答える
0

警告！ビルド時間とレンダリング時間の問題を先に見る!

ここでよくある間違いは、ナビゲーションを実行すること、またはあなたが言うように、中央のホルダーを<ui:insert>/<ui:define>で更新することです。これは、ビュー レンダー UI コンポーネントではなく、ビュー ビルド タグです。したがって、コンポーネント ツリーがビュー ステートから復元され、新たに構築されないため、AJAX 要求で再計算されることはありません。

<h:link>したがって、多くの点で欠陥がある AJAX ナビゲーションを作成して (SEO、ブックマーク機能がない、ユーザー フレンドリではないなど) 、<p:menuItem>そのために設計されたコンポーネントによってナビゲーションを実行することによって、その間違いをしないでください。平野はasを取得します。

あなたのコメントによると、ナビゲーション リンクとコマンド リンクを完全には区別していません。前者はナビゲーションのみを実行し、ブックマーク可能aな要素を生成するために使用されますが、後者は (部分的に) フォームの送信、ビジネス ジョブの実行、および (部分的に) ビューの更新、またはナビゲーションの実行に使用されます。

あなたがする必要があるのは、これらのケースを区別することだけです。ナビゲーションには<h:link>/を使用<p:menuitem outcome="/your-view-id">し、POST アクションには代わりに<p:commandButton>/を使用します。<p:menuitem action(listener)="#{bean.action(listener)}"

この場合、AJAX リクエストでタグ ハンドラが更新されることを期待しない限り、テンプレート構造は問題になりません。

于 2013-05-06T05:09:04.270 に答える