Interactions
Interactions between the client and the server take place when the user clicks buttons in forms or elsewhere on a page. There are the following kinds of button:
- Add
- Edit
- Delete
- Cancel
- Proceed
- Move.
The buttons are used to add, edit, delete and move blocks on a page. They are also used to add, edit, delete and move rows of data in views, and rows of other data tables that behave like views (item definitions, access level definitions, etc.).
Original Method
The original method of client-server interaction is by HTML forms, as shown in the figure. Submission of a form by clicking an add, edit, delete, confirm, proceed or move button causes a POST request to be made to the server. On receipt of the post request, the server updates the data and re-displays the page. There is no direct interaction between the code that updates the data and the code that displays the page: the page is displayed just as though the user had refreshed it, using the updated data.
Delete Confirmation
The original method is modified to display a dialog for the user to confirm a delete request, using Javascript to display the dialog before interacting with the server.
Move
Moving blocks is now done by drag-and-drop. This will be extended to rows in views and data tables that behave like views, where these can be moved.
New Method for Adding and Editing
The new method uses javascript to update the display, so that the whole page does not need to be re-displayed when only part of it has changed. The javascript methods are invoked when buttons on the page are clicked. The figure shows how add and edit interactions work. Delete interactions are handled slightly differently, and move interactions are to be by drag-and-drop.
When an add or edit button is clicked for a block or row, a Start Add or Start Edit Javascript method is invoked. This makes a Start Add or Start Edit Ajax API call, which invokes the existing Start Add or Start Edit Java method. The Java method retrieves the block or row data, creates an HTML form to edit the block or row, and returns this via the API to the Javascript method. The Javascript method displays the form, without refreshing the rest of the page. The form includes proceed and cancel buttons. If there is an error in retrieving the data, the Java method returns this and the Javascript method displays an error alert without refreshing the page.
When the user clicks the cancel button while updating the row or block, the Javascript method closes the dialog without refreshing the page.
When the user clicks the proceed button while updating the row or block, an Add or Edit Javascript method is invoked. This makes an Add or Edit Ajax API call, which invokes the existing Add or Edit Java method, which updates the data store. The API then invokes a new Java method to retrieve the block or row from the data store, and returns this to the Javascript method. The Javascript method displays the block or row, without refreshing the rest of the page. If there is an error in updating the data, the Java method returns this and the Javascript method refreshes the page and displays an error alert.
New Method for Deletion
When a delete button is clicked for a block or row, a Delete Javascript method is invoked. This displays a confirm dialog with Cancel and Proceed buttons.
If the user clicks the cancel button then the Javascript method closes the dialog without interacting with the server.
If the user clicks the proceed button, the Javascript method makes a Delete Ajax API call, which invokes the existing Delete Java method, which updates the data store.
If the API call returns success, the Javascript method removes the block or row from the page, without refreshing the rest of the page.
If there is an error in updating the data, the Java method returns this and the Javascript method refreshes the page and displays an error alert.
Transition
It will not be practical to change all interactions at once. For some interactions, it may always be better to use forms. The two methods will therefore be used in combination, at least for a transition period, possibly forever.