View Code

The user interface (UI) consists of a start page index.html that allows the user to choose one of the data management operations by navigating to the corresponding UI page—such as retrieveAndListAllBooks.html or createBook.html in the application folder. We’ve discussed the start page index.html before.

We render the data management menu items in the form of buttons. For simplicity, we invoke the Book.clearData() and Book.createTestData() methods directly from the buttons’ onclick event handler attribute. However, it is generally preferable to register such event handling functions with addEventListener(...), as we do in all other cases.

The data management UI pages

Each data management UI page loads the basic CSS and JavaScript files, like the start page index.html discussed above. In addition, it loads a use-case-specific view code file src/v/useCase.js. It sets the setupUserInterface procedure of the use-case as an event handler for the page load event, which takes care of initializing the use case when the UI page has been loaded.

Initialize the application

For initializing the application, its namespace and MVC sub-namespaces have to be defined. For our example application, the main namespace is defined to be pl, which stands for “Public Library”, with the three sub-namespaces m, v, and c being initially empty objects.

Set up the user interfaces

To set up the user interfaces of the data management use cases, we have to distinguish the case of “Retrieve/List All” from the others—Create, Update, and Delete. While the latter ones require using an HTML form and attaching event handlers to form controls, in the case of “Retrieve/List All,” we only have to render a table displaying all books as in the case of theMinimalApp.

For the Create, Update, and Delete use cases, we need to add event listeners for the following:

1. Responsive validation on form field input events.
2. Handling the event when the user clicks (or pushes) the “Save” (or “Delete”) button.
3. Making sure the main memory data is saved when a beforeunload event occurs, that is, when the browser window/tab is closed.

The Create use case

For the Create use case , we obtain the following code (in src/v/createBook.js):