Différence entre h: button et h: commandButton

dans JSF 2, Quelle est la différence entre h:button et h:commandButton ?

66
demandé sur BalusC 2012-10-25 18:12:09

5 réponses

<h:button>

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

E. G.

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

générera

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

même si cela aboutit à un changement D'URL (bookmarkable) dans la barre d'adresse du navigateur, ce n'est pas SEO-friendly. Les Searchbots ne suivront pas L'URL dans le onclick . Vous feriez mieux d'utiliser un <h:outputLink> ou <h:link> si SEO est important sur L'URL donnée. Vous pouvez si nécessaire ajouter quelques CSS sur L'élément HTML généré <a> pour le faire ressembler à un bouton.

notez que bien que vous puissiez mettre une expression EL se référant à une méthode dans outcome attribut comme ci-dessous,

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

il pas être invoquée lorsque vous cliquez sur le bouton. Au lieu de cela, il est déjà invoqué lorsque la page contenant le bouton est rendue dans le seul but d'obtenir le résultat de navigation à intégrer 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/idée fausse en faisant face à un javax .El.ELException: Je n'ai pas trouvé de propriété actionMethod dans class com.exemple.Bean .

si vous avez l'intention d'invoquer une méthode suite à 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, dirigez-vous vers invoquer JSF managed bean action sur la page load ou si vous avez aussi les paramètres GET request via <f:param> , Comment faire pour traiter les paramètres GET query string URL dans le support bean sur la page load?


<h:commandButton>

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

E. G.

<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'elle soumet donc à la page courante (L'URL d'action du formulaire s'affichera dans la barre d'adresse du navigateur). Il sera ensuite envoyer à la page cible, sans aucun changement D'URL dans la barre d'adresse du navigateur. Vous pouvez ajouter ?faces-redirect=true paramètre à la valeur de résultat pour déclencher une redirection après le POST (selon le post-Redirect-Get pattern ) de sorte que l'URL cible devient bookmarkable.

le <h:commandButton> est habituellement utilisé exclusivement pour soumettre un formulaire postal, pas pour effectuer la navigation de page en page. Normalement, le action pointe à une certaine action d'affaires, telles que la sauvegarde 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";
}

Retour "à la 1519330920" ou void vous ramène à la même vue. Retourner une corde vide aussi, mais il recréerait n'importe quelle vue scoped bean. Ces jours-ci, avec JSF2 moderne et <f:ajax> , plus que souvent, les actions reviennent simplement à la même vue (donc, null ou void ) où les résultats sont rendus conditionnellement par ajax.

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

Voir aussi:

98
répondu BalusC 2017-05-23 11:47:01

h:button - en cliquant sur un h:button , vous obtenez une demande GET .

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.

6
répondu lifetimes 2012-10-25 14:16:26

h: le bouton de commande doit être enfermé dans une forme h:et avoir les deux modes de navigation, c'est-à-dire statique par définition de l'attribut action et dynamique par définition de 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">

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
répondu ashish 2012-11-04 14:08:53

Ceci est pris à partir du livre La Référence Complète par Ed Burns Et 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 bookmarkable Les pages JSF, lorsqu'elles sont utilisées de concert avec la fonctionnalité des paramètres de vue.

il y a 3 principales différences entre h:button/h:link et h:commandButton/h:commandLink .

D'abord, h:button|h:link provoque L'émission D'un GET HTTP par le navigateur demande, tandis que la h:commandButton|h:commandLink est-ce un formulaire POST. Ce signifie que tous les composants dans la page qui ont des valeurs entrées par le utilisateur, comme les champs de texte,les cases à cocher, etc. ne sera pas automatiquement être soumis au serveur lorsque vous utilisez h:button|h:link . Causer valeurs à soumettre avec h:button|h:link , action supplémentaire doit être pris, en utilisant la fonctionnalité" Afficher les paramètres".

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 alors que h:commandButton|h:commandLink utilise un attribut d'action pour cette but. C'est parce que le premier ne donne pas lieu à une action dans le système event, alors que ce dernier le fait.

enfin, et plus important pour la compréhension complète de ce caractéristique, les composants h:button|h:link font que le système de navigation soit demandé de 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. Dans en revanche, les composants h:commandButton|h:commandLink causent système de navigation à demander dériver le résultat sur le POSTBACK à partir de la page. C'est une différence de timing. Rendu toujours ça arrive avant le POSTBACK.

2
répondu Shirgill Farhan Ansari 2018-09-07 15:48:36

voici ce que le JSF javadocs a à dire sur le commandButton action attribut:

MethodExpression représentant l'application de l'action de l'invoquer lors de l' ce composant est activé par l'utilisateur. L'expression doit évaluer pour une méthode publique qui ne prend aucun paramètre et renvoie un Objet (le toString() qui est appelée à tirer la conséquence logique) qui est passé au gestionnaire de navigation pour cette application.

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

0
répondu jordanpg 2015-06-27 18:17:10