Recently I have been thinking about crud layouts. The major part of ui-based applications is made up of a bunch of screens with crud functionality with an added provision for search. Hence screens are required to provide cruds (create, read, update, delete, search) functionality. Read is for list-all records.
What is the best user interface and layout to provide cruds functionality? I thought with so many years of development there would be a repository of standard cruds layouts. I searched the web and could not locate a website that compiled various options and gave us ready choices.
During my web search, I found various crud layouts at different places, mostly in example tutorials that explain particular frameworks like Grails or JSF. Here is one such example.
Not satisfied, I took the time out and drew a couple of layouts. The entity I considered is currency with three attributes: id, code and description. So here’s my first shot:
Here is my second attempt:
Not satisfied with these either, what I felt is that the options we have are: one screen for one entity and put all widgets to invoke cruds in that screen. The examples I drew above pertain to that thinking. (I am only playing with only the positioning of the widgets). Second option is, we could put five different screens per entity, one for each of the cruds operations. Didn't like either option i.e., one screen or five screens, I moved towards a via media of three. Virtue lies in the middle (Aristotle).
Then what should the three screens be? My proposal is one screen for add operation, one for list all entities, and the last for semode operation. Semode is not an English word. I created it by joining se for search, mo for modify and de for delete.
In a web-based application, each entity should be a menu item in the menubar, and have three sub-menu items (Add, List, Semode) which invoke the AddEntity, ListAllEntities, and SemodeEntity screen. For a JSF2-based application, the required files will be:
Entity.java (annotated with @Entity).
EntityServiceBean.java (annotated with @Stateless, having an EntityManager as a private variable and public methods for all five cruds database operations).
addEntity.xhtml (invoked from the sub-menuitem).
AddEntityController.java (backing bean annotated with @Managed and having EntityService bean annotated with @EJB as a private variable).
listEntities.xhtml (invoked from the sub-menuitem).
ListEntitiesController.java (backing bean annotated with @Managed and having EntityService bean annotated with @EJB as a private variable).
semodeEntity.xhtml (invoked from the sub-menuitem).
SemodeEntityController.java (backing bean annotated with @Managed and having EntityService bean annotated with @EJB as a private variable).
I think this would look good.