Let's now continue adding Primefaces to our Spring Boot project. First we need to modify pom.xml to include Primefaces' themes dependency and repository as shown below.
Next we modify our index.xhtml and add the following xmlns.
Next we add a jsf form <h:form id="customer-form">. Inside the form we add a Primefaces panel <p:panel id="pnlCustomer" header="Add New Customer">. And inside the panel we add a Primefaces panel grid component <h:panelGrid columns="2" cellpadding="4">. We divide the panel grid into two columns. For each row in panel grid, we add a label and an input component. The structure can be seen below.
Now we add a label and an input text to enter customer's first name as shown below. The value in input text #{customerController.customer.firstName} means we get the value from or save the value to a bean named customerController that has property named customer which has a property firstName. We will see the bean later.
Next we will see a calendar component. We use it to choose a date of birth. In addition to the value, we can define its maximum date, date pattern, etc as shown below.
We also need to have a submit button to save the form. To do that we have a command button with an action listener. The listener is fired when the button is clicked. After the listener finish running, a JSF component named "growl" will be updated. This is where we display success/error message to user.
Customer id can be saved in a hidden input as shown below.
Before creating customerController bean, we have to understand the concept of bean scope in JSF. Below is a good explanation provided by someone in Stack overflow.
As of JSF 2.x there are 4 Bean Scopes:
@SessionScoped
The session scope persists from the time that a session is established until session termination. A session terminates if the web application invokes the invalidate method on the HttpSession object, or if it times out.
@RequestScoped
The request scope is short-lived. It starts when an HTTP request is submitted and ends after the response is sent back to the client. If you place a managed bean into request scope, a new instance is created with each request. It is worth considering request scope if you are concerned about the cost of session scope storage.
@ApplicationScoped
The application scope persists for the entire duration of the web application. That scope is shared among all requests and all sessions. You place managed beans into the application scope if a single bean should be shared among all instances of a web application. The bean is constructed when it is first requested by any user of the application, and it stays alive until the web application is removed from the application server.
@ViewScoped
View scope was added in JSF 2.0. A bean in view scope persists while the same JSF page is redisplayed. (The JSF specification uses the term view for a JSF page.) As soon as the user navigates to a different page, the bean goes out of scope.
Now we will create a package and put all JSF bean classes there. The structure of our project is shown below.
Our customerController is shown below. We annotate it with @ViewScope since we want the bean to exist as long as the xhtml is open. @Named indicates that we want to create a bean named customerController.
We then add our ICustomerDao and annotate it with @Autowired. We also have an object Customer which is used in our form, dateOfBirthMax & dateFormat which are used by calendar. We also create a method addCustomer() which is referenced in command button's action listener. The method is annotated with @Transactional so that any thrown Exception results database rollback. Here we check if the customer's id is empty, then we save it. Otherwise it is not a new customer and error message is shown. The success or error message will be displayed in growl Primefaces component.
Then we create a method and annotate it with @PostConstruct. This means the method will always be executed after the customerController bean is created. Here we can do any initialization as shown below.
In Spring Boot application class, add @ComponentScan annotation so that our controller's package is scanned by Spring.
Running this project gives you the following result.
There are so many other components we can try as example displaying data on a grid, changing themes, etc.
@SessionScoped
The session scope persists from the time that a session is established until session termination. A session terminates if the web application invokes the invalidate method on the HttpSession object, or if it times out.
@RequestScoped
The request scope is short-lived. It starts when an HTTP request is submitted and ends after the response is sent back to the client. If you place a managed bean into request scope, a new instance is created with each request. It is worth considering request scope if you are concerned about the cost of session scope storage.
The application scope persists for the entire duration of the web application. That scope is shared among all requests and all sessions. You place managed beans into the application scope if a single bean should be shared among all instances of a web application. The bean is constructed when it is first requested by any user of the application, and it stays alive until the web application is removed from the application server.
View scope was added in JSF 2.0. A bean in view scope persists while the same JSF page is redisplayed. (The JSF specification uses the term view for a JSF page.) As soon as the user navigates to a different page, the bean goes out of scope.
Now we will create a package and put all JSF bean classes there. The structure of our project is shown below.
Our customerController is shown below. We annotate it with @ViewScope since we want the bean to exist as long as the xhtml is open. @Named indicates that we want to create a bean named customerController.
We then add our ICustomerDao and annotate it with @Autowired. We also have an object Customer which is used in our form, dateOfBirthMax & dateFormat which are used by calendar. We also create a method addCustomer() which is referenced in command button's action listener. The method is annotated with @Transactional so that any thrown Exception results database rollback. Here we check if the customer's id is empty, then we save it. Otherwise it is not a new customer and error message is shown. The success or error message will be displayed in growl Primefaces component.
Then we create a method and annotate it with @PostConstruct. This means the method will always be executed after the customerController bean is created. Here we can do any initialization as shown below.
Running this project gives you the following result.
There are so many other components we can try as example displaying data on a grid, changing themes, etc.
0 comments:
Post a Comment