Différence entre h:button et h:commandButton

Question

Dans JSF 2, quelle est la différence entre h:button et h:commandButton ?

Answer 1

<h:button>

Le site <h:button> génère un fichier HTML <input type="button"> . L'élément généré utilise JavaScript pour naviguer vers la page indiquée par l'attribut outcome en utilisant une requête HTTP GET.

Par exemple

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

générera

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

Même si cela se traduit par un changement d'URL (pouvant être ajouté à un signet) dans la barre d'adresse du navigateur, cette méthode n'est pas favorable au référencement. Les robots de recherche ne suivront pas l'URL dans la barre d'adresse du navigateur. onclick . Vous feriez mieux d'utiliser un <h:outputLink> ou <h:link> si le référencement est important sur l'URL donnée. Si nécessaire, vous pouvez ajouter quelques CSS au HTML généré. <a> pour qu'il ressemble à un bouton.

Notez bien que si vous pouvez placer une expression EL renvoyant à une méthode dans outcome comme ci-dessous,

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

elle le fera pas être invoqué lorsque vous cliquez sur le bouton. Au contraire, il est déjà invoqué lorsque la page contenant le bouton est rendue dans le seul but d'obtenir le résultat de la navigation qui sera intégré dans le message généré. onclick code. Si vous avez déjà essayé d'utiliser la syntaxe de la méthode d'action comme dans le cas de outcome="#{bean.action}" vous seriez déjà confronté à cette erreur/mauvaise conception en faisant face à une javax.el.ELException : Impossible de trouver la propriété actionMethod dans la classe com.example.Bean .

Si vous avez l'intention d'invoquer une méthode comme résultat d'une requête POST, utilisez <h:commandButton> à la place, voir ci-dessous. Ou si vous avez l'intention d'invoquer une méthode à la suite d'une requête GET, rendez-vous à l'adresse suivante Invoquer l'action d'un bean géré JSF au chargement de la page ou si vous avez également des paramètres de requête GET via <f:param> , Comment traiter les paramètres URL de la chaîne de requête GET dans le backing bean lors du chargement de la page ?

---

<h:commandButton>

Le site <h:commandButton> génère un fichier HTML <input type="submit"> qui soumet par défaut le parent <h:form> à l'aide de la méthode HTTP POST et invoque les actions attachées aux action , actionListener et/ou <f:ajax listener> le cas échéant. Le site <h:form> est nécessaire.

Par exemple

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

générera

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

Notez qu'il soumet ainsi la page actuelle (l'URL de l'action du formulaire apparaîtra dans la barre d'adresse du navigateur). Il va ensuite avant vers la page cible, sans modification de l'URL dans la barre d'adresse du navigateur. Vous pouvez ajouter ?faces-redirect=true à la valeur du résultat pour déclencher une redirection après le POST (conformément à la directive Modèle post-réorientation ) afin que l'URL cible devienne un signet.

Le site <h:commandButton> est généralement utilisé exclusivement pour soumettre un formulaire POST, et non pour effectuer une navigation de page en page. Normalement, l'élément action pointe vers une action commerciale, telle que l'enregistrement des données du formulaire dans la base de données, qui renvoie un message de type String résultat.

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

avec

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

Retour à null ou void vous ramènera à la même vue. Renvoyer une chaîne vide aussi, mais cela recréerait n'importe quel bean à portée de vue. De nos jours, avec les technologies modernes JSF2 et <f:ajax> le plus souvent, les actions ne font que revenir au même point de vue (ainsi, null ou void ) dans lequel les résultats sont rendus de manière conditionnelle par ajax.

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

---

Voir aussi :

• Comment naviguer en JSF ? Comment faire en sorte que l'URL reflète la page actuelle (et non la précédente) ?
• Quand dois-je utiliser h:outputLink au lieu de h:commandLink ?
• Différences entre action et actionListener

Answer 2

h:button - en cliquant sur un h:button émet un signet GET demande.

h:commandbutton - Au lieu d'une requête get, h:commandbutton émet une requête POST qui renvoie les données du formulaire au serveur.

Answer 3

H:commandButton doit être inclus dans un h:form et dispose de deux modes de navigation, à savoir statique en définissant l'attribut action et dynamique en définissant l'attribut actionListener ; il est donc plus avancé comme suit :

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

ce code génère le html suivant :

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

tandis que le h:button est plus simple et sert uniquement à la navigation statique ou basée sur des règles, comme suit

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

le html généré est

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

Answer 4

Ceci est tiré du livre - La référence complète par Ed Burns & Chris Schalk

h:commandButton vs h:button

Quelle est la différence entre h:commandButton|h:commandLink et h:bouton|h:lien ?

Ces deux dernières composantes ont été introduites dans 2.0 pour permettre l'ajout de signets aux pages JSF, lorsqu'elle est utilisée de concert avec la fonction View Parameters.

Il existe 3 différences principales entre h:bouton|h:lien et h:commandButton|h:commandLink .

D'abord, h:button|h:link fait en sorte que le navigateur émette une requête HTTP GET tandis que h:commandButton|h:commandLink fait un formulaire POST. Ce signifie que tous les composants de la page dans lesquels des valeurs ont été saisies par l'utilisateur, tels que les champs de texte, les cases à cocher, etc. l'utilisateur, comme les champs de texte, les cases à cocher, etc. ne seront pas automatiquement soumis au serveur lors de l'utilisation h:button|h:link . Pour que à soumettre des valeurs avec h:button|h:link une action supplémentaire doit être en utilisant la fonction "View Parameters".

La deuxième grande différence entre les deux types de composants est que h:button|h:link a un attribut de résultat pour décrire où aller ensuite tandis que h:commandButton|h:commandLink utilise un attribut d'action à cette à cette fin. En effet, la première action ne donne pas lieu à un ActionEvent dans le système d'événements, alors que le second le fait.

Enfin, et c'est le plus important pour la compréhension complète de cette fonction, le h:button|h:link composants font que le système de navigation soit invité à dériver le résultat pendant le rendu de la page, et que la réponse à cette question est encodée dans le balisage de la page. Sur En revanche, les h:commandButton|h:commandLink composants font que le le système de navigation est invité à dériver le résultat sur le POSTBACK à partir de la page. Il s'agit d'une différence de timing. Le rendu se fait toujours toujours avant le POSTBACK.

Answer 5

Voici ce que le JSF javadocs ont à dire sur le commandButton action attribut :

MethodExpression représentant l'action de l'application à invoquer lorsque ce composant est activé par l'utilisateur. L'expression doit être évaluée à une méthode publique qui ne prend pas de paramètres et renvoie un Object (dont la fonction toString() est appelée pour dériver le résultat logique) qui est transmis au NavigationHandler de cette application.

Je souhaiterais que quelqu'un m'explique ce que cela a à voir avec l'une des réponses de cette page. Il semble assez clair que action fait référence au nom de fichier d'une page et non à une méthode.