Difference between h button and h commandButton

Question

In JSF 2   what is the difference between h button and h commandButton

User · Answer

h commandButton must be enclosed in a h form and has the two ways of navigation i e  static by setting the action attribute and dynamic by setting the actionListener attribute hence it is more advanced as follows    lt h form gt       lt h commandButton action  page xhtml  value  cmdButton   gt   lt  h form gt    this code generates the follwing html    lt form id  j idt7  name  j idt7  method  post  action   jsf faces index xhtml  enctype  application x-www-form-urlencoded  gt        whereas the h button is simpler and just used for static or rule based navigation as follows   lt h button outcome  page xhtml  value  button   gt    the generated html is    lt title gt Facelet Title lt  title gt  lt  head gt  lt body gt  lt input type  button  onclick  window location href   jsf faces page xhtml   return false   value  button    gt

User · Answer

This is taken from the book - The Complete Reference by Ed Burns  amp  Chris Schalk  h commandButton vs h button     What   s the difference between h commandButton h commandLink and   h button h link     The latter two components were introduced in 2 0 to enable bookmarkable  JSF pages  when used in concert with the View Parameters feature   There are 3 main differences between h button h link and h commandButton h commandLink      First  h button h link causes the browser to issue an HTTP GET   request  while h commandButton h commandLink does a form POST  This   means that any components in the page that have values entered by the   user  such as text fields  checkboxes   etc   will not automatically   be submitted to the server when using h button h link   To cause   values to be submitted with h button h link  extra action has to be   taken   using the     View Parameters    feature       The second main difference between the two kinds of components is that   h button h link has an outcome attribute to describe where to go next   while h commandButton h commandLink uses an action attribute for this   purpose  This is because the former does not result in an ActionEvent   in the event system  while the latter does       Finally  and most important to the complete understanding of this   feature  the h button h link components cause the navigation system to   be asked to derive the outcome during the rendering of the page  and   the answer to this question is encoded in the markup of the page  In   contrast  the h commandButton h commandLink components cause the   navigation system to be asked to derive the outcome on the POSTBACK   from the page  This is a difference in timing  Rendering always   happens before POSTBACK

User · Answer

lt h button gt  The  lt h button gt  generates a HTML  lt input type  quot button quot  gt   The generated element uses JavaScript to navigate to the page given by the attribute outcome  using a HTTP GET request  E g   lt h button value  quot GET button quot  outcome  quot otherpage quot    gt   will generate  lt input type  quot button quot  onclick  quot window location href   contextpath otherpage xhtml   return false  quot  value  quot GET button quot    gt   Even though this ends up in a  bookmarkable  URL change in the browser address bar  this is not SEO-friendly  Searchbots won t follow the URL in the onclick  You d better use a  lt h outputLink gt  or  lt h link gt  if SEO is important on the given URL  You could if necessary throw in some CSS on the generated HTML  lt a gt  element to make it to look like a button  Do note that while you can put an EL expression referring a method in outcome attribute as below   lt h button value  quot GET button quot  outcome  quot   bean getOutcome    quot    gt   it will not be invoked when you click the button  Instead  it is already invoked when the page containing the button is rendered for the sole purpose to obtain the navigation outcome to be embedded in the generated onclick code  If you ever attempted to use the action method syntax as in outcome  quot   bean action  quot   you would already be hinted by this mistake misconception by facing a javax el ELException  Could not find property actionMethod in class com example Bean  If you intend to invoke a method as result of a POST request  use  lt h commandButton gt  instead  see below  Or if you intend to invoke a method as result of a GET request  head to Invoke JSF managed bean action on page load or if you also have GET request parameters via  lt f param gt   How do I process GET query string URL parameters in backing bean on page load    lt h commandButton gt  The  lt h commandButton gt  generates a HTML  lt input type  quot submit quot  gt  button which submits by default the parent  lt h form gt  using HTTP POST method and invokes the actions attached to action  actionListener and or  lt f ajax listener gt   if any  The  lt h form gt  is required  E g   lt h form id  quot form quot  gt       lt h commandButton id  quot button quot  value  quot POST button quot  action  quot otherpage quot    gt   lt  h form gt   will generate  lt form id  quot form quot  name  quot form quot  method  quot post quot  action  quot  contextpath currentpage xhtml quot  enctype  quot application x-www-form-urlencoded quot  gt       lt input type  quot hidden quot  name  quot form quot  value  quot form quot    gt       lt input type  quot submit quot  name  quot form button quot  value  quot POST button quot    gt       lt input type  quot hidden quot  name  quot javax faces ViewState quot  id  quot javax faces ViewState quot  value  quot      quot  autocomplete  quot off quot    gt   lt  form gt   Note that it thus submits to the current page  the form action URL will show up in the browser address bar   It will afterwards forward to the target page  without any change in the URL in the browser address bar  You could add  faces-redirect true parameter to the outcome value to trigger a redirect after POST  as per the Post-Redirect-Get pattern  so that the target URL becomes bookmarkable  The  lt h commandButton gt  is usually exclusively used to submit a POST form  not to perform page-to-page navigation  Normally  the action points to some business action  such as saving the form data in DB  which returns a String outcome   lt h commandButton     action  quot   bean save  quot    gt   with public String save                    return  quot otherpage quot      Returning null or void will bring you back to the same view  Returning an empty string also  but it would recreate any view scoped bean  These days  with modern JSF2 and  lt f ajax gt   more than often actions just return to the same view  thus  null or void  wherein the results are conditionally rendered by ajax  public void save                    See also   How to navigate in JSF  How to make URL reflect current page  and not previous one  When should I use h outputLink instead of h commandLink  Differences between action and actionListener

User · Answer

Here is what the JSF javadocs have to say about the commandButton action attribute      MethodExpression representing the application action to invoke when   this component is activated by the user  The expression must evaluate   to a public method that takes no parameters  and returns an Object    the toString   of which is called to derive the logical outcome    which is passed to the NavigationHandler for this application    It would be illuminating to me if anyone can explain what that has to do with any of the answers on this page   It seems pretty clear that action refers to some page s filename and not a method

User · Answer

h button - clicking on a h button issues a bookmarkable GET request   h commandbutton - Instead of a get request  h commandbutton issues a POST request which sends the form data back to the server

[jsf] Difference between h:button and h:commandButton

Examples related to jsf

Examples related to button

Examples related to jsf-2