0

「左」メニューのボタンをクリックしたときに中央の画面に表示する方法がわかりません。

「左」メニューのボタンをクリックすると、「左」メニューなしで新しいページが開きますが、「左」メニューが消えていない必要があります。

以下は私のコードです。

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

4

4 に答える 4

4

基本的には、ターゲットフレームにanameを指定し、要素のtarget属性で指定する必要があります。<a>例えば

<frame name="center">

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

しかし、これはすべて、最新のWebアプリケーションをテンプレート化するための完全に正しい方法ではありません。フレームセットには、ユーザーエクスペリエンスとSEOの価値に関して多くの欠点があります。代わりに、サーバーサイドビューテクノロジ(使用しているFaceletsなど)のインクルードおよびテンプレート機能を使用する必要があります。フレームセットは、サーバーサーバー側のビューテクノロジがまったくない場合(つまり、プレーンHTMLのみ)、または外部Webサイトを表示する場合にのみ使用してください。

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:lefton #menuand #content))

テンプレートクライアント(実際に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>ます。ショーケースアプリケーションの「完全な例」を参照してください。たとえば、これです。

参照:

于 2012-06-24T11:14:37.977 に答える
0

あなたの説明は少し紛らわしいですが、JSFテンプレートシステムがあなたが求めているものであり、複数のページに同じコード(たとえばメニュー)を含めることができると思います。フレームは非常に古く、ほとんど使用されていません。

http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/の例を参照してください

さらなるコメントとして、この問題はPrimefacesに関連していないようです(これはコンポーネントパックであり、これらのコメントはいずれもコードに含まれていません)。

于 2012-06-24T11:08:38.777 に答える
0

簡単なヘッダー、ページ、フッターの例を次に示します。信じられないかもしれませんが、1つのフォームIDを使用できます。ヘッダーはWebContent/templatesにあります。他の.xhtmlはWebContentに入れることができます。@ManagedBeanStringメソッドが"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>
于 2013-03-16T13:55:23.293 に答える