web-dev-qa-db-fra.com

Différence entre h: button et h: commandButton

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

jsfbuttonjsf-2
69
Geek

<h:button>

Le <h:button> génère un code HTML <input type="button">. L'élément généré utilise JavaScript pour naviguer vers la page donnée par l'attribut outcome, à l'aide d'une requête HTTP GET.

Par exemple.

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

va générer

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

Même si cela se traduit par un changement d'URL (pouvant être marqué par un signet) dans la barre d'adresse du navigateur, cela ne facilite pas le référencement. Les Searchbots ne suivront pas l'URL dans le onclick. Vous feriez mieux d'utiliser un <h:outputLink> ou <h:link> si le référencement est important pour l'URL donnée. Vous pouvez éventuellement ajouter du code CSS à l'élément HTML <a> généré pour lui donner l'aspect d'un bouton.

Notez que vous pouvez mettre une expression EL référençant une méthode dans l'attribut outcome comme ci-dessous,

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

non ne sera pas appelé lorsque vous cliquerez sur le bouton. Au lieu de cela, il est déjà appelé lorsque la page contenant le bouton est rendue dans l'unique but d'obtenir le résultat de la navigation à incorporer dans le code onclick généré. Si vous avez déjà essayé d'utiliser la syntaxe de la méthode d'action comme dans outcome="#{bean.action}", vous seriez déjà laissé entendre par cette erreur/cette idée fausse en faisant face à un javax.el.ELException: impossible de trouver la propriété actionMethod dans la classe com.example.Bean .

Si vous avez l'intention d'appeler une méthode à la suite d'une demande POST, utilisez plutôt <h:commandButton>, voir ci-dessous. Ou si vous avez l'intention d'appeler une méthode à la suite d'une demande GET , tête à invoquez l'action du 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 d'URL de chaîne de requête GET dans la sauvegarde haricot au chargement de la page?

<h:commandButton>

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

Par exemple.

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

va générer

<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 se soumet ainsi à la page en cours (l'URL d'action du formulaire apparaît dans la barre d'adresse du navigateur). Il sera ensuite transféré à la page cible, sans modification de l'URL dans la barre d'adresse du navigateur. Vous pouvez ajouter le paramètre ?faces-redirect=true à la valeur du résultat pour déclencher une redirection après POST (selon le modèle modèle Post-Redirect-Get) ) afin que l'URL cible devient bookmarkable.

Le <h:commandButton> est généralement exclusivement utilisé pour soumettre un formulaire POST), pas pour effectuer une navigation de page à page. Normalement, le action pointe vers une entreprise. action, telle que l'enregistrement des données de formulaire dans la base de données, qui renvoie un résultat String.

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

avec

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

Retourner null ou void vous ramènera à la même vue. Renvoyer une chaîne vide également, mais cela recréerait n'importe quel bean à la portée de la vue. De nos jours, avec JSF2 moderne et <f:ajax>, la plupart des actions ne font que retourner à la même vue (ainsi, null ou void) dans lesquelles les résultats sont restitués sous forme conditionnelle par ajax .

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

Voir également:

106
BalusC

h:button - en cliquant sur un h:button _ émet une demande GET pouvant être marquée par un signet.

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

6
lifetimes

h: commandButton doit être enfermé dans un h: form et dispose des deux méthodes 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 code HTML suivant:

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

alors que le bouton h: est plus simple et juste utilisé pour 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='/jsf/faces/page.xhtml'; return false;" value="button" />
4
ashish

Ceci est tiré du livre - The Complete Reference de Ed Burns & Chris Schalk

h: bouton de commande vs h: bouton

Quelle est la différence entre h: commandButton | h: commandLink et h: button | h: link?

Les deux derniers composants ont été introduits dans 2.0 pour activer les pages JSF pouvant être marquées d'un signet, lorsqu'elles sont utilisées conjointement avec la fonction Afficher les paramètres.

Il y a 3 différences principales entre h: button | h: lien et h: commandButton | h: commandLink.

Première, h:button|h:link, le navigateur émet une requête HTTP GET, alors que h:commandButton|h:commandLink fait un formulaire POST. Cela signifie que les composants de la page dont les valeurs ont été entrées par l'utilisateur, tels que les champs de texte, les cases à cocher, etc., ne seront pas automatiquement soumis au serveur lors de l'utilisation de h:button|h:link. Pour que les valeurs soient soumises avec h:button|h:link, une action supplémentaire doit être entreprise à l’aide de la fonction "Afficher les paramètres".

La deuxième différence principale 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 fin. Cela est dû au fait que le premier ne génère pas d'ActionEvent dans le système d'événements, alors que le second en résulte.

Enfin, et le plus important pour la compréhension complète de cette fonctionnalité, le h:button|h:link _ composants obligent le système de navigation à dériver le résultat lors du rendu de la page et la réponse à cette question est codée dans le balisage de la page. En revanche, le h:commandButton|h:commandLink _ composants obligent le système de navigation à extraire le résultat de la page après le postback. C'est une différence de timing. Le rendu a toujours lieu avant POSTBACK.

2
Shirgill Farhan

Voici ce que les javadocs JSF ont à dire à propos de l'attribut commandButtonaction:

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

Il serait éclairant pour moi si quelqu'un peut expliquer ce que cela a à voir avec les réponses données sur cette page. Il semble assez clair que action fait référence au nom de fichier d'une page et non à une méthode.

0
jordanpg