3

私は現在JSF2.0（Sun Mojarra）を学習/使用しており、Webアプリにタブ付きペインを作成したいと考えています（単一のタブにはGeneral、Detail1、Detail2、...という名前を付けることができます）。

どうすればこれを達成できますか？私はこれまでのところこれに関する文書を見つけていません:(

4

4 に答える 4

6

Mojarra は基本的なJSF 実装です。既存の HTML 要素 (フォーム、入力フィールド、およびテーブル) のほとんどをカバーするために、必須コンポーネントの最小セットを提供します。HTML は 1 つの要素でタブ付きのパネルを提供しないため、基本的な JSF 実装も同様に機能しません。

タブ付きパネルは基本的に、非表示/表示を切り替える一連のリンク (またはボタン) とパネルです。リンクを表すには、通常、HTML<a>要素を使用します。パネルを表すには、通常、HTML<div>要素を使用します。表示/非表示を切り替えるには、基本的に 2 つの方法があります。

  1. 応答するようにすべてのパネルを印刷しますが、CSS を使用して他のすべてのパネルを非表示にし、 JavaScript を使用して、新しいパネルをに、古いパネルを にdisplay: none設定して表示を切り替えます。display: blockdisplay: none

  2. または、要求されたパネルを条件付きで応答に出力します。どのパネルが要求されたかは、リンク (またはボタン) の要求パラメーターによって決定できます。

方法 1の基本的なコピー & ペースト & 実行可能な例を次に示します。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>SO question 3491969</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#tabs a').click(function() {
                    $('#panels').children().hide();
                    $($(this).attr('href')).show();
                });
            });
        </script>
        <style>
            #tabs li { list-style-type: none; display: inline; border: 1px solid black; }
            #panels { width: 600px; height: 400px; border: 1px solid black; }
            .hide { display: none; }
        </style>
    </h:head>
    <h:body>
        <ul id="tabs">
            <li><a href="#panel1">panel1</a></li>
            <li><a href="#panel2">panel2</a></li>
            <li><a href="#panel3">panel3</a></li>
        </ul>
        <div id="panels">
            <div id="panel1">panel1 content</div>
            <div id="panel2" class="hide">panel2 content</div>
            <div id="panel3" class="hide">panel3 content</div>
        </div>
    </h:body>
</html>

<a>もちろん、 by<h:outputLink>や<div>byなどで置き換えることもできますが<h:panelGroup layout="block">、バッキング Bean や JSF コンポーネント ツリーにバインドする必要がない限り、プレーンな HTML も完全に有効であり、オーバーヘッドが少なくなります。 .

<ui:repeat>いくつかのリストに基づいて、タブとパネルを「動的に」繰り返すために持ち込む必要があります。また、見栄えを良くするために、CSS の良いショットを入れることも忘れないでください。これは基本的に、ほとんどの作業が行われる場所です。

これは基本的に、 PrimeFaces、RichFaces、IceFacesなどのサードパーティ コンポーネント ライブラリが行っていることでもあります。それらはすべて、繰り返し作業と見栄えを良くするすべての作業を行う単一のコンポーネントで目的の機能を提供します。たとえば、PrimeFaces には<p:tabView>、RichFaces <rich:tabPanel>、IceFaces<ice:panelTabSet>などがあります。

于 2010-08-16T13:27:31.257 に答える
3

既存のコンポーネント ライブラリの使用を検討してください。

PrimeFacesには、効果と動的コンテンツを追加する機能を備えたTabViewがあります。

PrimeFaces を実装するには、指示に従ってください

于 2010-08-16T09:36:31.527 に答える
1

JSF を「バックボーン」フレームワークと呼んでも差し支えありません。これは作成者の意図であるため、すぐに使用できるコンポーネントはほとんどありません。作成者は、他の人が自分の作業でこのフレームワークを拡張することを望んでいました (設定された標準に従う限り)。これで、独自のコンポーネントを作成するか、すでに多数のコンポーネントを備えている PrimeFaces、ICEFaces、RichFaces などのフレームワークを使用できます。

于 2010-08-16T09:55:01.630 に答える
0

JSFには多くの便利なコンポーネントがあり、（他の多くの中でも）多かれ少なかれより洗練されたタブパネルを提供します。RichFaces、IceFaces、OpenFaces（および前述のPrimeFaces）。これらはそれぞれかなり完全であり、通常は組み合わせることができないため、それぞれのデモサイトを参照して、好きなものを選択してください。私はRichFacesが好きですが、それは、私が最初にJSFを学んだSeam2のデフォルトであったためです。フレームワーク

于 2012-06-05T18:50:30.313 に答える