Enumeration Implementation Issues

This chapter covers how to build a front-end web application with enumeration attributes using plain JavaScript. We’ll also learn how to deal with multi-valued attributes because enumeration attributes are multi-valued in many cases.

New Issues

In addition to the complications in the validation application that we discussed earlier, the following new issues arise when implementing enumeration attributes:

1. We replace the ES5 constructor-based class definition of our model class Book with a corresponding ES2015 class definition. This provides a more convenient syntax while preserving the constructor-based semantics of JS classes.
2. Instead of defining explicit setters, we now use the ES5 feature of implicit get and set methods for properties because they can be conveniently defined within a class definition.
3. Enumeration data types 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 addition to the complications above, the following problems arise in the code as well:

1. In the model code, we now have to take care of:
   • Define an ES2015 class for Book.
   • Define get/set methods for all properties of the Book class definition.
   • Define the enumerations with the help of a utility class Enumeration
   • Define the single-valued enumeration attributes originalLanguage, and categorize those attributes together with their check functions, checkOriginalLanguage and checkCategory.
   • Define the multi-valued enumeration attributes otherAvailableLanguages and publicationForms together with their check functions checkOtherAvailableLanguages and checkPublicationForms.
   • Extend the methods Book.update and Book.prototype.toString so that they take care of the added enumeration attributes.
2. In the user interface, or view code, the following tasks must be performed:
   • Add new table columns in retrieveAndListAllBooks.html along with suitable choice widgets in createBook.html and upateBook.html.
   • Create output for the new attributes in the setupUserInterface() method of pl.v.retrieveAndListAllBooks.
   • Allow input in the new attributes of the setupUserInterface() methods of pl.v.createBook and pl.v.updateBook.