View Code

Let’s learn how to write the view code for the application.

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 ...