Building Front-End Web Applications with Plain JavaScript/

...

/

View Code

View Code

Let’s take a look at the final steps of our application and learn how to code the view.

We'll cover the following...

Retrieve/List All

To show information about the authors of a book in the Retrieve/List All use case, the corresponding cell in the HTML table is filled with a list of the names of all authors with the help of the utility function util.createListFromMap, shown in the code below:

Javascript (babel-node)
pl.v.books.retrieveAndListAll = {
  setupUserInterface: function () {
    const tableBodyEl = document.querySelector(
      "section#Book-R>table>tbody");
    tableBodyEl.innerHTML = ""; // drop old contents
    for (let key of Object.keys(Book.instances)) {
      const book = Book.instances[key];
      // create list of authors for this book
      const listEl = util.createListFromMap(book.authors, "name");
      const row = tableBodyEl.insertRow(-1);
      row.insertCell(-1).textContent = book.isbn;
      row.insertCell(-1).textContent = book.title;
      row.insertCell(-1).textContent = book.year;
      row.insertCell(-1).appendChild(listEl);
      // if the book has a publisher, show its name
      row.insertCell(-1).textContent =
        book.publisher ? book.publisher.name : "";
    }
    document.getElementById("Book-M").style.display = "none";
    document.getElementById("Book-R").style.display = "block";
  }
};

The utility function util.createListFromMap has the following code:

Javascript (babel-node)
createListFromMap: function (m, displayProp) {
  var listEl = document.createElement("ul");
  util.fillListFromMap(listEl, m, displayProp);
  return listEl;
},
fillListFromMap: function (listEl, m, displayProp) {
  const keys = Object.keys(m);
  // delete old contents
  listEl.innerHTML = "";
  // create list items from object property values
  for (let key of keys) {
    let listItemEl = document.createElement("li");
    listItemEl.textContent = m[key][displayProp];
    listEl.appendChild(listItemEl);
  }
}

Create

To allow the selection of multiple authors to be associated with the currently edited book in the Create use case, a multiple selection list is populated with the instances of the associated object type. This multiple selection list (a select element with multiple="multiple") is shown in the HTML code below:

HTML
<section id="Book-C" class="UI-Page">
   <h2>Public Library: Create a new book record</h2>
   <form>
      ...
      <div class="select-one">
         <label>Publisher: <select name="selectPublisher"></select></label>
      </div>
      <div class="select-many">
         <label>Authors:
    <select name="selectAuthors" multiple="multiple"></select>
 </label>
      </div>
      ...
   </form>
</section>

The Create UI is set up when we populate the selection lists for the selection of the authors and the publisher. This is done with the help of a utility method fillSelectWithOptions, as shown in the following program listing:

Javascript (babel-node)
pl.v.books.create = {
 setupUserInterface: function () {
   const formEl = document.querySelector("section#Book-C > form"),
     selectAuthorsEl = formEl.selectAuthors,
     selectPublisherEl = formEl.selectPublisher,
     saveButton = formEl.commit;
   // add event listeners for responsive validation
   ...
   // set up a multiple selection list for selecting authors
   util.fillSelectWithOptions( selectAuthorsEl, Author.instances,
 "authorId", {displayProp:"name"});
   // set up a single selection list for selecting a publisher
   util.fillSelectWithOptions( selectPublisherEl,
     Publisher.instances, "name");
   ...
 },
 handleSaveButtonClickEvent: function () {...}
};

When the user clicks the “Save” ...