h:commandbutton vs h:commandlink

Gibt es keinen funktionalen Unterschied abgesehen von den erzeugten markup und das Erscheinungsbild. Die <h:commandButton> generiert eine HTML - <input type="submit"> element und die <h:commandLink> generiert eine HTML - <a> element, das verwendet JavaScript zum Absenden des Formulars. Beide werden verwendet, um ein Formular Absenden. Zusätzliche styling ist unerheblich für die Funktionalität.

Verwenden Sie die <h:commandButton> wenn Sie ein Einreichen Taste und verwenden Sie die <h:commandLink> wenn Sie ein Einreichen link. Wenn das nicht machen Sinn, dann weiß ich nicht. Wenn Sie können nicht entscheiden, welche zu verwenden, wählen Sie einfach diejenige, die am meisten Sinn macht, im UI-Perspektive. Fragen Sie die web-designer, wenn Sie sich nicht sicher sind.

Den Unterschied zwischen <h:commandLink> und <h:outputLink> ist übrigens mehr interessant. Diese ist beantwortet worden hier im detail: Wann sollte ich h:outputLink anstelle von h:commandLink?

InformationsquelleAutor BalusC

Kurz, meine Empfehlung ist eine Mischung aus <h:commandButton type="submit"> für die primäre (Standard -) senden-Schaltfläche und <h:commandLink>s für jedes weitere Tasten (z.B. filtern, Sortieren, Suche, Vorschau, generieren, Kennwort, ...).

Langwierige Erklärung folgt:

Zunächst einige Hintergrundinformationen: Man sollte wohl auch bewusst sein, die verschiedenen <h:commandButton> type Attribute. (Die type Attribut übersetzt sich direkt in die generierte <input type=""> - Attribut.) Ich habe nicht gefunden, dies ausdrücklich überall, aber einige tests haben gezeigt, dass:

• type="submit" (Standard ist dies, wenn Sie weggelassen werden) nicht den normalen "senden" - Verhalten der form (d.h., die Buchung der form) sowie die action - und/oder actionListener.
• type="reset" hat den normalen "reset" - Verhalten (D. H. clearing/zurücksetzen der form-Felder), ohne Aufruf irgendeiner action - und/oder actionListeners.
• type="button" erzeugt eine Schaltfläche (anscheinend <input type="button"> ist ein bisschen mehr begrenzt als die <button> tag) ohne Aufruf irgendeiner action - und/oder actionListeners.

Abgesehen von der Wiederherstellung der Felder, die beiden letzteren scheinen nützlich zu sein, nur zu aktivieren, z.B. Javascript. Sie nicht nach der form.

Also um die Frage zu beantworten: in einer form Kontext:

• <h:commandButton> (das entspricht <h:commandButton type="submit"> erinnern) ist oft nützlich, vor allem, da die meisten Browser implementieren Sie nun die Aktivierung der ersten submit-button gefunden in der DOM-Baum von der form wenn Enter gedrückt wird. Dies kann verbessern Sie Ihre form, die die Benutzer-Erfahrung

E. g. es ist etwas schneller anmelden mit:

1. Benutzername Tab Passwort Enter

im Gegensatz zu

1. Benutzername Tab Passwort ... bewegen Sie die hand von der Tastatur zu Maus, Jagd Zeiger und die position auf Schaltfläche, klicken Sie auf.

Beachten Sie auch, dass jede <input> Tasten (Optional CSS-Stil) noch erreicht werden kann über die Tastatur, indem Sie Tabing, bis die <a> (CSS-styled wie eine Schaltfläche), die den Fokus hat, und dann Leertaste,.

• Jedoch weitere Schaltflächen auf dem Formular, das sollten einige andere Maßnahmen anstelle der Einreichung (oder "nur" die Säuberung der Felder), <h:commandLink> wäre eher angebracht. Dieses noch erreicht werden kann über die Tastatur, indem Sie Tabing, bis die <a> (CSS-styled wie eine Schaltfläche), die den Fokus hat, und dann Enter. Hinweis, dass dies unvereinbar ist mit den Tasten erzeugt mit <h:commandButton>, die möglicherweise CSS-gestylt Aussehen identisch, aber anders behandelt werden durch den browser (Tab...Leertaste,).

Das ist die Allgemeine Erklärung, ABER es gibt einige Probleme, die Sie vielleicht beachten sollten,...

Wenn Sie nicht über eine <h:commandButton type="submit"> Schaltfläche auf einem Formular, nur ein <h:commandLink> - Taste (oder auch gar keine Taste mehr an), wenn der Benutzer die Taste Enter das Formular wird trotzdem abgeschickt, aber ohne den Vorteil einer action{Listener} läuft. Die möglicherweise nicht zu groß ein problem, wie das Formular die Werte gespeichert, die in der backing-bean und wieder angezeigt, wenn die Seite geladen wird, also mal abgesehen von den server-roundtrip wird der Benutzer oft nicht bemerken, dass etwas nicht in Ordnung ist. Aber das könnte nicht sein, wie Sie wollen, Enter, um behandelt werden.... Die einzige Möglichkeit die ich denken kann, im moment zu umgehen, ist onSubmit - Ereignis im Formular, die Ihr Standard - <h:commandLink> - button via Javascript.... Arghhhh!!

Sollten Sie auch sicherstellen, dass Ihre CSS-Selektoren sound.

• A.mystyle angewendet wird <h:commandLink>;
• INPUT[type=submit].mystyle zu <h:commandButton type="submit">;
• INPUT[type=reset].mystyle zu <h:commandButton type="reset">;
• INPUT[type=button].mystyle zu <h:commandButton type="button">;

Diese kann natürlich sein, verbunden mit einem Komma als Selektor für ein einzelnes style-definition. Oder, wenn Sie wollen, um das Risiko von etwas anderem sein gestylt wie ein mystyle - Taste, Sie könnte das auslassen der A/INPUT Planern. Allerdings habe ich stylte meine buttons da oben, damit könnte ich auch dieses verwenden:

• SPAN.mystyle definition, wenn Sie den link bzw. die Schaltfläche ist deaktiviert (z.B. über die disabled Attribut) - dies ermöglicht die Versorgung einer getönten-down (Grau) suchen eine deaktivierte Taste.

Habe ich auch einige Höhenunterschiede (line-height auf den Button vs. Inhalt Höhe auf den Link - das kann ein problem sein, wenn dein button mit einem hintergrund-Bild als icon statt text), und auch einige leichte Unterschiede, wie die :before/:after pseudoclasses behandelt werden. Alles was ich sage: testen und testen Sie Ihre CSS auf beiden <h:commandButton>s und <h:commandLink>s um sicherzustellen, dass Sie Aussehen (im wesentlichen) dasselbe!

Hier ist meine Zusammenfassung cheat sheet:

JSF <h:commandButton <h:commandButton <h:commandButton <h:commandLink> 
type="submit"> " type="reset"> " type="button"> 

Übersetzt <input <input <input <a> 
type="submit"> " type="reset"> " type="button"> 
Senden Sie das Formular-POST nicht, löscht Felder keine POST 
Javascript-Ereignisse ja JA ja JA 
action{Hörer} JA Nein Nein JA 
Geben Sie auf dem Formular aktiviert JA Nein Nein Nein 
Registerkarte...+EINGABETASTE aktiviert JA(*) ja ja JA 
Registerkarte...+Leertaste aktiviert JA(*) ja JA Nein 
Highlight des Tab-Fokus: 
- Firefox 32 JA Nein Nein Nein 
- Chrom 41 ja JA ja JA 
- Internet Explorer 11 ja JA ja JA 
- Opera 28 ja JA JA Nein(*) 

(*=Opera 28 scheint nicht zu erlauben, Tab (oder Alt+Pfeil), um hyperlinks zu aktivieren.) 

InformationsquelleAutor fr13d