Chapter 11. Implementing Enumeration Attributes in a Plain JS Web App

Table of Contents

1. New Issues
2. Make a JavaScript Class Model
3. Add the Library File Enumeration.js
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Code the enumerations
5.2. Code the model class as an ES6 class
5.3. Code the implicit getters and setters
5.4. Code the enumeration attribute checks
5.5. Write a serialization function
5.6. Data management operations
5.7. Creating test data
6. Write the View Code
6.1. Selection lists
6.2. Radio button and checkbox groups
6.3. Responsive validation for choice widgets
7. Run the App and Get the Code
8. Practice Projects
8.1. Project 1 - Adding ratings and genres as enumeration attributes
8.2. Project 2 - Adding country codes and religions as enumeration attributes
9. Quiz Questions
9.1. Question 1: Checking the range constraint of an enumeration attribute
9.2. Question 2: Computing MAX

In this chapter, we show how to build a front-end web application with enumeration attributes, using plain JavaScript. In addition to the topic of enumeration attributes, we also show how to deal with multi-valued attributes because in many cases, enumeration attributes are multi-valued.

1. New Issues

Compared to the Validation App discussed in Chapter 8, we now deal with the following new issues:

  1. We replace the ES5 constructor-based class definition of our model class Book with a corresponding ES6 class definition.

  2. Instead of defining explicit setters we now make use of the ES5 feature of defining implicit get/set methods for properties.

  3. Enumeration datatypes have to be defined in a suitable way as part of the model code.

  4. Enumeration attributes have to be defined in model classes and handled in the user interface with the help of suitable choice widgets.

In terms of coding, the new issues are:

  1. In the model code we now have to take care of

    1. defining an ES6 class (instead of a constructor function) for Book;

    2. defining get/set methods for all properties of the Book class definition;

    3. defining the enumerations with the help of a utility (meta-)class Enumeration, which is discussed below;

    4. defining the single-valued enumeration attributes originalLanguage and category together with their check functions checkOriginalLanguage and checkCategory;

    5. defining the multi-valued enumeration attributes otherAvailableLanguages and publicationForms together with their checks checkOtherAvailableLanguages and checkPublicationForms;

    6. extending the methods Book.update, and Book.prototype.toString such that they take care of the added enumeration attributes.

  2. In the user interface ("view") code we have to take care of

    1. adding new table columns in retrieveAndListAllBooks.html and suitable choice widgets in createBook.html and upateBook.html;

    2. creating output for the new attributes in the setupUserInterface() method of pl.v.retrieveAndListAllBooks;

    3. allowing input for the new attributes in the setupUserInterface() methods of pl.v.createBook and pl.v.updateBook.