My First Implementation Of cruds With JSF2 & PrimeFaces
I got past my implementation of cruds in JSF2 successfully. Just to be clear, I say cruds and not crud. Cruds is for create-read-update-delete-search. I don’t know what can be considered as the best UI layout for crud functionality. As I blogged earlier, I had decided that “my” design is that these actions need to be accommodated in three screens - create, list, semode. There is no scientific basis for the three screens, just a feel-good intuition that this sounds right.
Architecture: the flow part is simple. For an entity like Employee, Curency, or Book, we write three cruds screens. Each of the three screens is a .xhtml file. Following conventions in books like “Beginning Java EE 6 Platform With GlassFish 3 “ by Antonio Gonsalves, the backing beans for these screens are called controllers.
Each controller class has a ServiceBean class injected as a reference. The ServiceBean class is annotated with @Stateless. All three controllers have reference of this same ServiceBean class. It has methods for the cruds operations each of which invokes a JPA query. All the JPA named queries are clubbed together in @NameQueries tag in the entity class (for which these cruds operations are being written).
The add and list screens were very straight forward. What took most of the time is the semode screen. We probably don’t have such a screen defined available in the public domain. The starting point of my semode implementation is the example in Chapter 11 of Gonsalves’s book. It illustrates ajax functionality.
The screen has two parts - the upper part has input fields to take the properties of a book entity, and a button. The lower part has a data table. When the button is pressed, without a full screen refresh, a new book is created and added to the data table that lists all books. How he achieves this is a bit of ajax lengthiness:
I use PrimeFaces for the component library. This library’s commandButton has ajax function true by default. All we need to do is tell the commandButton which component to update after it is clicked and it fetches data from the server side - in my case it being a dataTable. Hence my ajax code is much shorter, just I say update="myDataTable". This takes care of the search part of semode - "se". Inside the dataTable, I added the modify and delete parts - "mo" and "de".
The first column of the dataTable has check boxes to indicate whether the user wants to (modify) the row or not. When the check box is selected, a button appears, and the fields become editable. When the user clicks the button it saves the row changes.
There is one more column for delete links. It's quite simple - a commandLink - when the user clicks it, the row is deleted.
Both the checkbox and the delete link concepts are from examples in chapter 6 of Horstmann and Geary’s book.
Thus, I implemented the semode screen combining the three concepts i.e., button ajax-updating the dataTable with search results and the dataTable having columns for modifying and deleting the row.
Initially the delete links did not work. I would click the link and nothing would happen. I gave the implementation effort a rest for a couple of days, came back and then made two changes. First, the controller did not have any annotation for the scope. I tried @RequestScoped, but the search lists were being lost. Search list, implemented as Java ArrayList, holds the result of the search query on the server. The JSF guys had thought through well regarding scopes for ajax screens, and once again from the Core JSF book, I came to know that @ViewScoped was the right selection for semode functionality. I annotated the semodeController with @ViewScoped. Secondly I reset the searchList to delete the entity so that the database and the screen were in sync. And it worked!
Phew, finally implemented what is “my” UI design for cruds. There are a few improvements possible still. For now, I am happy with what I have and here’s the screen shot of the semode screen for currency entity (my example for this implementation) -
