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



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



4. Test It

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

We will get the following screen :



Press the ‘ButtonEvent’ button :



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



Download source code