jsf - false - Diferencia entre h: button y h: commandButton

h commandbutton tags

Question

En JSF 2, ¿cuál es la diferencia entre h:button y h:commandButton ?

Answer 1

<h:button>

El <h:button> genera un HTML <input type="button"> . El elemento generado usa JavaScript para navegar a la página dada por el outcome del atributo, utilizando una solicitud HTTP GET.

P.ej

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

Generará

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

A pesar de que esto termina en un cambio de URL (marcado) en la barra de direcciones del navegador, esto no es amigable para los motores de búsqueda. Los buscadores no seguirán la URL en el onclick . Será mejor que use un <h:outputLink> o <h:link> si el SEO es importante en la URL dada. De ser necesario, podría incluir algo de CSS en el elemento <a> HTML generado para que parezca un botón.

Tenga en cuenta que si bien puede poner una expresión EL que refiera un método en el atributo de outcome siguiente manera,

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

no se invocará cuando haga clic en el botón. En cambio, ya se invoca cuando la página que contiene el botón se representa con el único propósito de obtener el resultado de navegación para incrustarlo en el código onclick generado. Si alguna vez has intentado usar la sintaxis del método de acción como en outcome="#{bean.action}" , ya outcome="#{bean.action}" insinuado por este error / concepto erróneo al enfrentar una excepción javax.el.ELEx: no se pudo encontrar la propiedad actionMethod in class com .example.Bean .

Si tiene la intención de invocar un método como resultado de una solicitud POST, use <h:commandButton> lugar, vea a continuación. O si tiene la intención de invocar un método como resultado de una solicitud GET, diríjase a Invocar acción Beans administrada JSF en la carga de la página o si también tiene parámetros de solicitud GET a través de <f:param> , ¿Cómo se procesan los parámetros URL de la cadena de consulta GET en backing bean en la carga de la página?

<h:commandButton>

El <h:commandButton> genera un botón HTML <input type="submit"> que envía de forma predeterminada el padre <h:form> utilizando el método HTTP POST e invoca las acciones asociadas a action , actionListener y / o <f:ajax listener> , si hay alguno. La <h:form> es obligatoria.

P.ej

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

Generará

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

Tenga en cuenta que, por lo tanto, se envía a la página actual (la URL de acción del formulario aparecerá en la barra de direcciones del navegador). Posteriormente, se reenviará a la página de destino, sin ningún cambio en la URL en la barra de direcciones del navegador. Podría agregar ?faces-redirect=true parameter al valor de resultado para desencadenar una redirección después de POST (según el patrón Post-Redirect-Get ) para que la URL de destino se vuelva marcable.

El <h:commandButton> generalmente se usa exclusivamente para enviar un formulario POST, no para realizar una navegación de página a página. Normalmente, la action apunta a alguna acción comercial, como guardar los datos del formulario en DB, que devuelve un resultado de String .

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

con

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

Si se devuelve null o void , volverá a la misma vista. También devolvió una cadena vacía, pero recrearía cualquier bean de ámbito de vista. Hoy en día, con JSF2 y <f:ajax> modernos, más que a menudo las acciones simplemente vuelven a la misma vista (por lo tanto, null o void ) en donde los resultados se representan condicionalmente por ajax.

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

Ver también:

• ¿Cómo navegar en JSF? Cómo hacer que la URL refleje la página actual (y no la anterior)
• ¿Cuándo debería usar h: outputLink en lugar de h: commandLink?
• Diferencias entre acción y acción

Answer 2

Contribución del libro de Ed Burns y Chris Schalk The Complete Reference

Comparando h: commandButton y h: botón

¿Cuál es la diferencia entre h: commandButton / h: commandLink y h: button / link?

Los últimos dos componentes se introdujeron en 2.0 para habilitar páginas JSF que pueden marcarse como favoritas , cuando se usan en concierto con la función "Ver parámetros" .

Hay 3 diferencias principales entre h: button / h: link y h: commandButton / h: commandLink .

Primero, h:button/h:link hace que el navegador emita una solicitud HTTP GET, mientras que h:commandButton/h:commandLink realiza un formulario POST. Esto significa que cualquier componente de la página que tenga valores ingresados ​​por el usuario, como campos de texto, casillas de verificación, etc., no se enviarán automáticamente al servidor cuando se utiliza h:button/h:link . Para hacer que los valores se envíen con h:button/h:link , se debe tomar acción adicional, usando la función "View Parameters".

La segunda diferencia principal entre los dos tipos de componentes es que h:button/ h:link tiene un atributo de resultado para describir hacia dónde ir, mientras que h:commandButton/ h:commandLink usa un atributo de acción para este propósito. Esto se debe a que el primero no da como resultado un evento de acción en el sistema de eventos, mientras que el segundo sí lo hace.

Finalmente, y lo más importante para la comprensión completa de esta característica, los componentes h:button/h:link hacen que se solicite al sistema de navegación que obtenga el resultado durante la prestación de la página, y la respuesta a esta pregunta está codificada en el marcado de la página. Por el contrario, los componentes h:commandButton/h:commandLink hacen que se h:commandButton/h:commandLink al sistema de navegación que obtenga el resultado en el POSTBACK de la página. Esta es una diferencia en el tiempo. La representación siempre ocurre antes de POSTBACK.

Answer 3

h: commandButton debe estar encerrado en ah: form y tiene las dos formas de navegación, es decir, estático estableciendo el atributo de acción y la dinámica configurando el atributo actionListener, por lo tanto, está más avanzado de la siguiente manera:

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

este código genera el siguiente html:

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

mientras que el botón h: es más simple y solo se usa para la navegación estática o basada en reglas de la siguiente manera

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

el html generado es

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

Answer 4

Esto es lo que tienen que decir los commandButton JSF sobre el commandButton action commandButton :

MethodExpression que representa la acción de la aplicación a invocar cuando este componente es activado por el usuario. La expresión debe evaluar a un método público que no toma parámetros, y devuelve un objeto (el toString () del cual se llama para derivar el resultado lógico) que se pasa al NavigationHandler para esta aplicación.

Sería esclarecedor para mí si alguien puede explicar lo que tiene que ver con cualquiera de las respuestas en esta página. Parece bastante claro que la action refiere al nombre de archivo de una página y no a un método.

Answer 5

h:button hacer clic en un h:button emite una solicitud GET marcada.

h:commandbutton - En lugar de una solicitud get, h:commandbutton emite una solicitud POST que envía los datos del formulario de vuelta al servidor.