web-dev-qa-db-de.com

Unterschied zwischen h: button und h: commandButton

Was ist in JSF 2 der Unterschied zwischen h:button und h:commandButton?

69
Geek

<h:button>

Das <h:button> generiert ein HTML <input type="button">. Das generierte Element navigiert mithilfe von JavaScript mithilfe einer HTTP-GET-Anforderung zu der Seite, die durch das Attribut outcome angegeben ist.

Z.B.

<h:button value="GET button" outcome="otherpage" />

wird erzeugen

<input type="button" onclick="window.location.href='/contextpath/otherpage.xhtml'; return false;" value="GET button" />

Obwohl dies zu einer (lesezeichenfähigen) URL-Änderung in der Adressleiste des Browsers führt, ist dies nicht SEO-freundlich. Suchbots folgen nicht der URL in onclick. Verwenden Sie besser einen <h:outputLink> oder <h:link>, wenn SEO für die angegebene URL wichtig ist. Sie können bei Bedarf CSS in das generierte HTML-Element <a> einfügen, damit es wie eine Schaltfläche aussieht.

Beachten Sie, dass Sie einen EL-Ausdruck, der auf eine Methode verweist, in das outcome -Attribut wie folgt einfügen können:

<h:button value="GET button" outcome="#{bean.getOutcome()}" />

es wird nicht aufgerufen, wenn Sie auf die Schaltfläche klicken. Stattdessen wird es bereits aufgerufen, wenn die Seite mit der Schaltfläche nur zum Abrufen des Navigationsergebnisses gerendert wird, das in den generierten onclick -Code eingebettet werden soll. Wenn Sie jemals versucht haben, die Syntax der Aktionsmethode wie in outcome="#{bean.action}" zu verwenden, wurden Sie bereits durch diesen Fehler/Missverständnis mit einem javax.el.ELException: Die Eigenschaft actionMethod konnte in der Klasse nicht gefunden werden com.example.Bean .

Wenn Sie eine Methode als Ergebnis einer POST) - Anforderung aufrufen möchten, verwenden Sie stattdessen <h:commandButton> (siehe unten). Oder Sie möchten eine Methode als Ergebnis einer GET-Anforderung aufrufen , gehen Sie zu JSF-Managed-Bean-Aktion beim Laden der Seite aufrufen oder, wenn Sie auch GET-Anforderungsparameter über <f:param> haben, Wie verarbeite ich GET-Abfragezeichenfolgen-URL-Parameter im Backing?) Bean beim Laden der Seite?


<h:commandButton>

Das <h:commandButton> generiert eine HTML <input type="submit"> -Schaltfläche, die standardmäßig den übergeordneten <h:form> über HTTP POST = Methode und ruft die Aktionen auf, die an action, actionListener und/oder <f:ajax listener> angehängt sind. Der <h:form> ist erforderlich.

Z.B.

<h:form id="form">
    <h:commandButton id="button" value="POST button" action="otherpage" />
</h:form>

wird erzeugen

<form id="form" name="form" method="post" action="/contextpath/currentpage.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="form" value="form" />
    <input type="submit" name="form:button" value="POST button" />
    <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="...." autocomplete="off" />
</form>

Beachten Sie, dass es somit an die aktuelle Seite übermittelt wird (die URL der Formularaktion wird in der Adressleiste des Browsers angezeigt). Anschließend wird forward zur Zielseite weitergeleitet, ohne dass die URL in der Adressleiste des Browsers geändert wird. Sie können dem Ergebniswert den Parameter ?faces-redirect=true hinzufügen, um eine Umleitung nach POST (gemäß Post-Redirect-Get pattern ) auszulösen Die Ziel-URL kann mit einem Lesezeichen versehen werden.

Der <h:commandButton> wird normalerweise ausschließlich zum Senden eines POST) - Formulars verwendet, um keine Seite-zu-Seite-Navigation durchzuführen. Normalerweise verweist der action auf ein Geschäft B. das Speichern der Formulardaten in der Datenbank, wodurch ein String -Ergebnis zurückgegeben wird.

<h:commandButton ... action="#{bean.save}" />

mit

public String save() {
    // ...
    return "otherpage";
}

Wenn Sie null oder void zurückgeben, kehren Sie zur gleichen Ansicht zurück. Es wird auch eine leere Zeichenfolge zurückgegeben, aber jede Bean mit Ansichtsbereich wird neu erstellt. Heutzutage kehren Aktionen mit modernem JSF2 und <f:ajax> mehr als häufig zu derselben Ansicht zurück (also null oder void), bei der die Ergebnisse von Ajax bedingt gerendert werden .

public void save() {
    // ...
}

Siehe auch:

106
BalusC

h:button - Klicken Sie auf ein h:button gibt eine bookmarkable GET -Anforderung aus.

h:commandbutton - Anstelle einer get-Anfrage wird h:commandbutton gibt eine POST Anfrage aus, die die Formulardaten an den Server zurücksendet.

6
lifetimes

h: commandButton muss in ein h: -Formular eingeschlossen sein und verfügt über zwei Navigationsmethoden, d. h. statisch durch Festlegen des Aktionsattributs und dynamisch durch Festlegen des Aktionslistener-Attributs.

<h:form>
    <h:commandButton action="page.xhtml" value="cmdButton"/>
</h:form>

dieser Code generiert den folgenden HTML-Code:

<form id="j_idt7" name="j_idt7" method="post" action="/jsf/faces/index.xhtml" enctype="application/x-www-form-urlencoded">

die Schaltfläche h: ist einfacher und wird wie folgt nur für statische oder regelbasierte Navigation verwendet

<h:button outcome="page.xhtml" value="button"/>

das generierte html ist

 <title>Facelet Title</title></head><body><input type="button" onclick="window.location.href='/jsf/faces/page.xhtml'; return false;" value="button" />
4
ashish

Dies ist dem Buch entnommen - The Complete Reference von Ed Burns & Chris Schalk

h: commandButton vs h: button

Was ist der Unterschied zwischen h: Befehlsschaltfläche | h: Befehlslink und h: Schaltfläche | h: Link?

Die beiden letztgenannten Komponenten wurden in 2.0 Eingeführt, um lesezeichenfähige JSF-Seiten zu aktivieren, wenn sie zusammen mit der Funktion "Parameter anzeigen" verwendet werden.

Es gibt 3 Hauptunterschiede zwischen h: button | h: link und h: commandButton | h: commandLink.

Zuerst veranlasst h:button|h:link Den Browser, eine HTTP-GET-Anforderung abzusetzen, während h:commandButton|h:commandLink Einen Formular-POST ausführt. Dies bedeutet, dass alle Komponenten auf der Seite, deren Werte vom Benutzer eingegeben wurden, wie z. B. Textfelder, Kontrollkästchen usw., bei Verwendung von h:button|h:link Nicht automatisch an den Server gesendet werden. Um die Übermittlung von Werten mit h:button|h:link Zu veranlassen, müssen zusätzliche Maßnahmen unter Verwendung der Funktion "Parameter anzeigen" ergriffen werden.

Der zweite Hauptunterschied zwischen den beiden Arten von Komponenten besteht darin, dass h:button|h:link Über ein Ergebnisattribut verfügt, das beschreibt, wohin als Nächstes zu gehen ist, während h:commandButton|h:commandLink Zu diesem Zweck ein Aktionsattribut verwendet. Dies liegt daran, dass Ersteres im Ereignissystem kein ActionEvent auslöst, während Letzteres dies tut.

Schließlich, und dies ist für das vollständige Verständnis dieser Funktion am wichtigsten, veranlassen die h:button|h:link - Komponenten das Navigationssystem, das Ergebnis während des Renderns der Seite abzuleiten, und die Antwort auf diese Frage wird im Markup codiert der Seite. Im Gegensatz dazu veranlassen die h:commandButton|h:commandLink - Komponenten das Navigationssystem, das Ergebnis auf dem POSTBACK von der Seite abzuleiten. Dies ist ein Zeitunterschied. Das Rendern erfolgt immer vor dem POSTBACK.

2
Shirgill Farhan

Hier ist, was die JSF javadocs über das commandButtonaction Attribut zu sagen haben:

MethodExpression, die die Anwendungsaktion darstellt, die aufgerufen werden soll, wenn diese Komponente vom Benutzer aktiviert wird. Der Ausdruck muss zu einer öffentlichen Methode ausgewertet werden, die keine Parameter akzeptiert und ein Objekt zurückgibt (dessen toString () aufgerufen wird, um das logische Ergebnis abzuleiten), das für diese Anwendung an den NavigationHandler übergeben wird.

Es wäre aufschlussreich für mich, wenn jemand erklären könnte, was dies mit den Antworten auf dieser Seite zu tun hat. Es scheint ziemlich klar zu sein, dass action auf den Dateinamen einer Seite verweist und nicht auf eine Methode.

0
jordanpg