JSF2 CommandButton Example

In this example, we will see how to add an HTML button in a JSF page using the tag <h:commandButton ../>

 

1. Project structure

JSF2-CommandButton-Example-0

 

2. The JSF pages

We will add three buttons in the entering page :

  • A submit button associated with a backing bean, which means the navigation will be performed with the POST method
  • A reset button to initialize the fields in the form
  • A button with the onclick event to execute a JavaScript

File : index.xhtml

 

File : welcome.xhtml

Display the ‘myname‘ filed value :

 

3. The backing bean

UserController

 

4. Test It

Open the browser and type : http://localhost:8080/JSF2-CommandButton-Example/index.jsf

We will get the following screen :

JSF2-CommandButton-Example-1

 

Press the ‘ButtonEvent’ button :

JSF2-CommandButton-Example-2

 

Make OK, then enter a name and press the ‘Submit’ button :

JSF2-CommandButton-Example-3

 

Download source code