web-dev-qa-db-ja.com

JSFページで<h：form>を使用する方法は？シングルフォーム？複数のフォーム？ネストされたフォーム？

Facelet Templating Technologyを使用して、作業中のJSF 2アプリでページをレイアウトしています。

私のheader.xhtmlでは、primefacesではメニューバーをh：formで囲む必要があります。

<h:form>
    <p:menubar autoSubmenuDisplay="true">
        Menu Items here!
    </p:menubar>
</h:form>

だから、私のコンテンツページには、別のh：form以上があります。

Template.xhtmlにh：formを配置するだけで機能しますか？

<h:body>
    <h:form>
        <div id="top">
            <ui:insert name="header"><ui:include src="sections/header.xhtml"/></ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="sidebar"><ui:include src="sections/sidebar.xhtml"/></ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="footer"><ui:include src="sections/footer.xhtml"/></ui:insert>
        </div>
    <h:form>
</h:body>

私は実際に、ページに複数のh：formが必要なユースケースを考えています。

ありがとう

formsjsfjsf-2nested
42
Mark Estrada

JSFページで複数のフォームを安全に使用できます。プレーンHTMLを使用する場合と違いはありません。

_<form>_要素のネストは [〜＃〜] html [〜＃〜] の 無効 です。 JSFはHTMLの束を生成するだけなので、JSFでも違いはありません。したがって、_<h:form>_のネストもJSFでは無効です。

_<h:form>
    ...
    <h:form> <!-- This is INVALID! -->
        ...
    </h:form>
    ...
</h:form>
_

ネストされたフォームの送信に関するブラウザの動作は指定されていません。期待どおりに動作する場合と動作しない場合があります。たとえば、Beanアクションメソッドを呼び出さずにページを更新するだけです。 dom操作を使用して（またはPrimeFaces appendTo="@(body)"を使用して）ネストされたフォーム（またはそれを含むコンポーネント）を親フォームの外に移動しても、動作しませんnoページのロード時にネストされたフォーム。

どちらのフォームを保持する必要があるかについて、単一の「神」_<h:form>_を使用するのは実際には悪い習慣です。したがって、マスターテンプレートから外側の_<h:form>_を削除し、header、sidebar、contentなどのセクションでそれぞれ独自の_<h:form>_。複数の並列形式が有効です。

_<h:form>
    ...
</h:form>
<h:form> <!-- This is valid. -->
    ...
</h:form>
_

各フォームには1つの明確な責任が必要です。例えば。ログインフォーム、検索フォーム、メインフォーム、ダイアログフォームなど。特定のフォームを送信するときに、他のすべてのフォーム/入力を不必要に処理することは望ましくありません。

したがって、特定のフォームを送信すると、他のフォームは処理されないことに注意してください。したがって、とにかく別のフォームの入力を処理する場合、設計上の問題が発生します。同じフォームに入れるか、orいJavaScriptハックを投げて、送信ボタンを含むフォームの非表示フィールドに必要な情報をコピーします。

ただし、特定のフォーム内では、ajaxを使用して、入力の処理をより小さなサブセットに制限できます。例えば。 _<f:ajax execute="@this">_は、現在のコンポーネントのみを処理（送信/変換/検証/呼び出し）し、同じフォーム内の他のコンポーネントは処理しません。これは通常、同じフォーム内の他の入力を動的に入力/レンダリング/トグルする必要があるユースケースで使用されます。依存するドロップダウンメニュー、オートコンプリートリスト、選択テーブルなど.

こちらもご覧ください：

85
BalusC