webentwicklung-frage-antwort-db.com.de

Wie verwende ich <h: form> auf einer JSF-Seite? Einzelne Form? Mehrere Formen? Verschachtelte Formulare?

Ich benutze die Facelet Templating-Technologie, um meine Seite in einer JSF 2-App zu gestalten, an der ich arbeite.

In meiner Datei header.xhtml erfordern Primefaces, dass die Menüleiste in h: form eingeschlossen ist.

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

Auf meinen Inhaltsseiten werde ich also eine andere h: Form oder mehr haben.

Funktioniert es nur, wenn ich das h: -Formular in meine template.xhtml lege?

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

Ich denke tatsächlich an einen Anwendungsfall, in dem ich mehrere h: Formulare auf einer Seite benötige.

Vielen Dank

42
Mark Estrada

Sie können problemlos mehrere Formulare auf einer JSF-Seite verwenden. Es ist nicht anders als bei der Verwendung von einfachem HTML.

Das Verschachteln von <form>-Elementen ist ngültig in HTML . Da JSF nur eine Menge HTML generiert, ist dies in JSF nicht anders. Das Verschachteln von <h:form> ist daher auch in JSF ungültig.

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

Das Browserverhalten beim Senden eines verschachtelten Formulars ist nicht festgelegt. Möglicherweise funktioniert es nicht so, wie Sie es erwarten. Es kann zum Beispiel nur die Seite aktualisieren, ohne die Bean-Aktionsmethode aufzurufen. Auch wenn Sie das verschachtelte Formular (oder eine Komponente, die es enthält) mit dom-Manipulation (oder z. B. mit PrimeFaces appendTo="@(body)") aus dem übergeordneten Formular verschieben, funktioniert es immer noch nicht und es sollte Keine verschachtelten Formulare zum Zeitpunkt des Ladens der Seite.

Welche Formulare Sie behalten müssen, wenn Sie einen einzigen "Gott" haben, ist <h:form> eine schlechte Praxis. Entfernen Sie daher am besten den äußeren <h:form> aus der Master-Vorlage und lassen Sie die Abschnitte header, sidebar, content usw. jeweils einen eigenen <h:form> definieren. Mehrere parallele Formulare sind gültig.

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

Jedes Formular muss eine eindeutige Verantwortung haben. Z.B. ein Anmeldeformular, ein Suchformular, das Hauptformular, das Dialogformular usw. Sie möchten nicht unnötig alle anderen Formulare/Eingaben verarbeiten, wenn Sie ein bestimmtes Formular absenden.

Beachten Sie daher, dass beim Senden eines bestimmten Formulars andere Formulare NICHT verarbeitet werden. Wenn Sie also beabsichtigen, eine Eingabe eines anderen Formulars zu verarbeiten, liegt ein Entwurfsproblem vor. Stellen Sie es entweder in dasselbe Formular oder werfen Sie einige hässliche JavaScript-Hacks ein, um die benötigten Informationen in ein verstecktes Feld des Formulars zu kopieren, das die Senden-Schaltfläche enthält.

Innerhalb eines bestimmten Formulars können Sie jedoch Ajax verwenden, um die Verarbeitung der Eingaben auf eine kleinere Teilmenge zu beschränken. Z.B. <f:ajax execute="@this"> verarbeitet (Submit/Convert/Validate/Invoke) nur die aktuelle Komponente und keine anderen innerhalb desselben Formulars. Dies ist normalerweise in Anwendungsfällen zu verwenden, in denen andere Eingaben in derselben Form dynamisch gefüllt/gerendert/umgeschaltet werden müssen, z. abhängige Dropdown-Menüs, Autocomplete-Listen, Auswahltabellen usw.

Siehe auch:

85
BalusC