Persistence API Overview  |  Simple Persistence Example  |  Query Persistence Example  |  Query-Sort Persistence Example

 

Persistence Example - Adjusting the User Interface

This example uses the same data structure as the Query-Sort Persistence Example.

Scenario

In this example we reduce the displayed columns to three. The attributes of the car (like engine and cylinders) are displayed on a detail page that is displayed when the user clicks on one car.

The list of cars is divided in pages. The navigation to next, previous, last and first page as well as going to a specific page is implemented. This user interface allows the display of a larger amount of data without scroll bars of the browser.

Layout

The layout of the user interface is similar to the AWT user interface.

Header Panel

The tableViewDefinition bean provides to methods to set the icon on the left hand side and the text on the right hand side. The icon can be used to navigate back to the MI home page.

Center Page

The center page is divided into the following sections:

Footer Panel

The tableViewDefinition bean provides to methods to set the text on the left and right hand side of the footer panel.

Components

Java - default package

Description
PersistenceExample.java Implementation of the servlet.
Constants.java Interface defining all text strings used in PersistenceExample.java.

Java - datafactory package

Description
Car.java Implementation of the car object.
License.java Implementation of the license object.
ExamplePackagePersistenceMaster.java Implementation of the PackagePersistenceMaster to define the data structure.
ReadWriteEntities.java Methods to add, read and delete entities.

Java - bean package

Description
BasicDataHandler.java This class handles the data. It is directly connected to the persistence classes in the datafactory package. When the user navigates to another page the BasicDataHandler takes care to get the proper data in a vector. This data is than displayed with the JSP.
TableViewDefinition.java Implementation of the bean that is loaded by the servlet and read by the JSP. It contains the layout information and text strings for the JSP.

JSP

Description
menu.jsp Initial JSP to display the persisted data.
query.jsp JSP to enter a filter string.
add.jsp JSP to add an entry.
delete.jsp JSP to delete an entry. It serves as plane information page, in case the user clicks the DELETE button in the menu.jsp, without a selected row.
detail.jsp JSP to display the car details.

What does the Example

As mentioned above, we create "Car" and "License" objects. One Car can have one License (number). In this implementation the "Car" and "License" must be unique. Whenever you add an entry that already exists, it replaces the existing entry with the new data.

The user interface of the initial screen has a display area and three buttons:

Implemented Classes in the Servlet for the Example

We create a class PersistenceExample that extends the class AbstractMEHttpServlet and implements Constants. Constants is an interface in which we define all relevant variables for the application. All variables used in Constants are written in uppercase characters. So anytime you see an uppercase variable used in class PersistenceExample you will find the definition in interface Constants.

The class PersistenceExample extends AbstractMEHttpServlet which extends javax.servlet.http.HttpServlet itself. The application is separated into the default package (containing all classes necessary to interact with the user), the datafactory (containing all classes necessary to manipulate the persisted data) and bean (which contains the bean which serves as data bag between the servlet and the JSP).

default package

Now comes the section were we check which event occurred. The events come from:

The next methods called are:

Now the JSP is called and the data is displayed on your web browser.

datafactory package

Bean

The bean serves as data bag. It has a string, a string array and two variables that define the length and width of the string array. All variables have get and set methods.

 

JSP

menu.jsp
The JSP gets the bean from the session context with the useBean command. It displays the the title and then uses the HTML grid (<td>, <tr> ...) to format the data in the bean. It uses a table view to display the persisted data. The table view has a check box in the first row to mark entries to be deleted. The JSP has three buttons to add and delete entries and to switch between full list or short list. The result of this JSP is shown in the Layout part of this documentation.

The first column of the table is displayed as link. If the user clicks on this link, the car details are displayed. The link contains the unique id of the car (which is at index 0 of the data vector) as event. When the event is sent to the servlet, the unique car id is taken from the event and the data for the unique id are collected and displayed with detail.jsp.

add.jsp
JSP with input fields and list boxes (to enter the car attributes and a license number) and two buttons ("Add" to add the entry, "Cancel" to go back to menu.jsp without adding the entry).

query.jsp
JSP with an input fields to define a filter string. The a filter string is applied to the "make" attribute of a car. If you enter "BMW" as filter string, only "BMW" cars are displayed in menu.jsp. The query condition is made with the STARTSWITH option. If you leave the input field empty and choose "OK", all entries are displayed. When the "Cancel" button is clicked, the menu.jsp is displayed without any changes.

delete.jsp
If no entry is activated in menu.jsp and the user clicks on the "Delete" button, an information message is displayed to select an entry first before pressing the "Delete" button.