Sample CRUD application with JSF and RichFaces

30 March 2012, by: Mark van der Tol

During my thesis project I will be using JavaServer Faces. Therefore it is important I get familiar with the framework. To get familiar I made a small CRUD (Create Read Update Delete) application. It is a simple application that makes it possible to keep track of users. It consists of a user list, a page to add/edit users and a page to delete a user.

The code

The research project will focus on when it is beneficial to use client-side scripting instead of/complementary to server side programming. To get up to speed a small CRUD application has been made without the use of client-side scripting and the same CRUD application was adapted to use client-side scripting by using RichFaces. The client-side scripting was added to the editing form to allow validating the form, without the need of making requests to the server.

The structure of the source project is as follows:

  • backing
    • Index.java – Backing for index.xhtml
    • UserDelete.java – Backing for UserDelete.xhtml
    • UserEdit.java – Backing for UserEdit.xhtml
  • constraints
    • Email.java –  Validation annotation for fields. Fields with this annotation are validated to be a proper email address.
    • EmailConstraintValidator.java – Performs the validation for email addresses.
  • ejb
    • UserDAO.java – Data Access Object for users.
  • entities
    • User.java – Bean object for a user. The fields of this object are annotated with validators.
    • UserConvertor.java – Converts a userId to a user.
  • util
    • Messages.java – Utility object that helps with sending messages between pages.

The following JSF pages are in the project:

  • index.xhtml – Page with a list with all users
  • user_delete.xhtml – Page used to confirm whether a user should be validated
  • user_edit.xhtml – Page used for adding and editing users

While creating this application, I tried as much as possible to adhere to best practices. For examples, to go from the master (list) view to the detail (edit) view a GET request is used with the user id as parameter. The user is modified via POST and there’s a redirect and GET back to the master view (PRG pattern).

Both applications make use of Enterprise Java Beans, Bean Validation and Java Persistence API. EJB is used to inject persistence in the managed beans. Bean validation is used to ensure the data is consistent with the business rules.

In the RichFaces version user_edit.xhtml is updated to have client-side validations. Only the email address cannot be validated on the client. For that field is Ajax used.

The code of the project has been uploaded to Google Code so it can viewed by everyone. The code without the use of client-side scripting is put in the default branch and the code with client-side scripting is put in the RichFaces branch.

Demo

The compiled applications have been uploaded to OpenShift. It makes showing your work to the public very easy. This is a free cloud platform which runs a JBoss server. The projects can be directly uploaded from Eclipse to the OpenShift server. The live demo can be viewed here.

To upload your project yourself to OpenShift it is first required to make an account at OpenShift. Then register your public key at OpenShift. When you have the OpenShift plug-in installed in Eclipse you can add the OpenShift server to the server view in Eclipse. From there you can get the default project from OpenShift. This project is only used to send the war files to server, not to hold the code. By adding the JSF project to the OpenShift server it automatically places the war file in the OpenShift project during a publish. By pushing the OpenShift project to the server using GIT, the application is put in the cloud and is ready to use. The detailed process to upload to OpenShift from Eclipse is available here.

So wrapping up, I’ve made a small project to get familiar with the code, I have uploaded the code to Google Code and I’ve put the application OpenShift.

Mark van der Tol

Tags: , , ,

6 comments to “Sample CRUD application with JSF and RichFaces”

  1. Tab Sweep: FacesMessage enhancements, Look up thread pool resources, JQuery/JSF integration, Galleria, … « oracle fusion identity says:

    [...] • Java EE 6 Hand-on Workshop @ IIUI (Shahzad Badar) • javaee6-crud-example (Arjan Tims) • Sample CRUD application with JSF and RichFaces (Mark van der Tol) • 5 useful methods JSF developers should know (Java Code [...]

  2. viki says:

    hey,
    This CRUD application is good for beginners. But your uploaded code was removed. Can you upload again or send me the code? Thanks in advance.

    Regards,
    Viki.

  3. arjan tijms says:

    Viki, why do you think the code was removed? It’s still at the same location it always was, e.g. http://code.google.com/p/javaee6-crud-example/source/browse

  4. Joe says:

    Could you publish the whole project ? I don’t understand datasource. Where is the datasource defined? In standalone.xml ? Could you email me?

  5. Aditya says:

    Good Example to start learning JSF.
    Helped me in understanding the concepts.
    Thanks for sharing…

  6. Antti says:

    Thank you for this demo. I could have not done my practice work without it.

Type your comment below:


nine + 2 =

css.php best counter