Unterschied zwischen h: button und h: commandButton

72

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

Geek
quelle
1
Ich fand diesen Link nützlicher und detaillierter
exexzian

Antworten:

108

<h:button>

Das <h:button>generiert einen HTML <input type="button">. Das generierte Element verwendet JavaScript, um outcomemithilfe einer HTTP-GET-Anforderung zu der durch das Attribut angegebenen Seite zu navigieren .

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 (mit einem Lesezeichen versehenen) URL-Änderung in der Adressleiste des Browsers führt, ist dies nicht SEO-freundlich. Searchbots folgen nicht der URL in der onclick. Verwenden Sie besser eine <h:outputLink>oder <h:link>wenn SEO für die angegebene URL wichtig ist. Sie können bei Bedarf CSS in das generierte HTML- <a>Element einfügen , damit es wie eine Schaltfläche aussieht.

Beachten Sie, dass Sie zwar einen EL-Ausdruck, der auf eine Methode verweist, wie folgt in das outcomeAttribut 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 zum alleinigen Zweck gerendert wird, um das Navigationsergebnis zu erhalten, das in den generierten onclickCode eingebettet werden soll. Wenn Sie jemals versucht haben, die Syntax der Aktionsmethode wie in zu verwenden outcome="#{bean.action}", werden Sie bereits durch diesen Fehler / dieses Missverständnis durch eine javax.el.ELException angedeutet: Die Eigenschaft actionMethod in der Klasse com.example.Bean konnte nicht gefunden werden .

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


<h:commandButton>

Das <h:commandButton>erzeugt eine HTML - <input type="submit">Taste , die standardmäßig unterwirft die Mutter <h:form>unter Verwendung von HTTP POST - Methode und ruft die Aktionen an action, actionListenerund / oder <f:ajax listener>, falls vorhanden. Das<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 gesendet wird (die URL der Formularaktion wird in der Adressleiste des Browsers angezeigt). Es wird danach vorwärts auf die Zielseite, ohne jede Änderung der URL in der Adressleiste des Browsers. Sie können ?faces-redirect=truedem Ergebniswert einen Parameter hinzufügen , um eine Umleitung nach dem POST auszulösen (gemäß dem Post-Redirect-Get-Muster ), sodass die Ziel-URL mit einem Lesezeichen versehen werden kann.

Das <h:commandButton>wird normalerweise ausschließlich zum Senden eines POST-Formulars verwendet, nicht zum Navigieren von Seite zu Seite. Normalerweise actionverweist dies auf eine Geschäftsaktion, z. B. das Speichern der Formulardaten in der Datenbank, die ein StringErgebnis zurückgibt .

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

mit

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

Wenn Sie zurückkehren nulloder zurückkehren void, kehren Sie zur gleichen Ansicht zurück. Es wird auch eine leere Zeichenfolge zurückgegeben, die jedoch alle Bean mit Ansichtsbereich neu erstellt. Heutzutage <f:ajax>kehren Aktionen mit modernem JSF2 und mehr als oft nur zu derselben Ansicht (also nulloder void) zurück, in der die Ergebnisse von Ajax bedingt wiedergegeben werden.

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

Siehe auch:

BalusC
quelle
1
Wie wird action = "otherpage" zu action = "/ contextpath / currentpage.xhtml"? Sollte es nicht action = "/ contextpath / otherpage.xhtml" sein
Geek
3
Diese haben eigentlich nichts miteinander zu tun. Das <h:form>wird immer erzeugt ein <form action>zeigt auf die aktuell angeforderten URL. Das <h:commandButton action="otherpage">weist JSF grundsätzlich an, eine Weiterleitung an die angegebene Ansichts-ID durchzuführen, wenn die POST-Anforderung abgeschlossen ist.
BalusC
"Obwohl dies zu einer (mit einem Lesezeichen versehenen) URL-Änderung in der Adressleiste des Browsers führt, ist dies nicht SEO-freundlich. Searchbots folgen der URL beim Klicken nicht." Warum?
Geek
2
Searchbots interpretieren normalerweise nur HTML und ignorieren JS (und CSS). Obwohl Google mit der Entschlüsselung von JS-Code experimentiert. Sie sollten sich Suchbots als Benutzer mit deaktiviertem JS vorstellen.
BalusC
7

h:button- Klicken Sie auf ein h:buttonProblem mit einem LesezeichenGET erstellen.

h:commandbutton- Anstelle einer Get-Anfrage wird h:commandbuttoneine POST-Anfrage ausgegeben, die die Formulardaten an den Server zurücksendet.

dsgriffin
quelle
4

h: commandButton muss in ah: form eingeschlossen sein und bietet zwei Navigationsmöglichkeiten: statisch durch Festlegen des Aktionsattributs und dynamisch durch Festlegen des actionListener-Attributs. Daher ist es wie folgt weiter fortgeschritten:

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

Dieser Code generiert das folgende HTML:

<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 nur für die statische oder regelbasierte Navigation wie folgt 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" />
aschfahl
quelle
1
Generierter Code für h: commandButton scheint falsch zu sein. Die generierte Aktion sollte page.xhtml anstelle von index.xhtml sein.
Arun Gupta
3

Dies stammt aus dem Buch - The Complete Reference von Ed Burns & Chris Schalk

h: commandButton vs h: button

Was ist der Unterschied zwischen h: commandButton | h: commandLink und h: button | h: link ?

Die beiden letztgenannten Komponenten wurden in eingeführt 2.0 , um mit Lesezeichen versehene JSF-Seiten zu ermöglichen, wenn sie zusammen mit der Funktion "Parameter anzeigen" verwendet werden.

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

h:button|h:linkVerursacht zunächst , dass der Browser eine HTTP-GET-Anforderung ausgibt, während h:commandButton|h:commandLinkein Formular-POST ausgeführt wird. Dies bedeutet, dass Komponenten auf der Seite, für die vom Benutzer Werte eingegeben wurden, wie z. B. Textfelder, Kontrollkästchen usw., bei der Verwendung nicht automatisch an den Server gesendet werden h:button|h:link. Um die Übermittlung von Werten zu veranlassen, müssen h:button|h:linkmithilfe der Funktion "Parameter anzeigen" zusätzliche Maßnahmen ergriffen werden.

Der zweite Hauptunterschied zwischen den beiden Arten von Komponenten besteht darin, dass h:button|h:linkein Ergebnisattribut vorhanden ist, das beschreibt, wohin als nächstes zu gehen ist, während h:commandButton|h:commandLinkein Aktionsattribut für diesen Zweck verwendet wird. Dies liegt daran, dass Ersteres nicht zu einem ActionEvent im Ereignissystem führt, während Letzteres dies tut.

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

Shirgill Farhan
quelle
0

Folgendes sagen die JSF-Javadocs zu dem commandButton actionAttribut:

MethodExpression stellt die Anwendungsaktion dar, die aufgerufen werden soll, wenn diese Komponente vom Benutzer aktiviert wird. Der Ausdruck muss für eine öffentliche 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 für mich aufschlussreich, wenn jemand erklären könnte, was dies mit einer der Antworten auf dieser Seite zu tun hat. Es scheint ziemlich klar zu sein, dass es actionsich um den Dateinamen einer Seite handelt und nicht um eine Methode.

jordanpg
quelle