Chapter 7. Implementing Enumeration Attributes in a Plain JS Web App
Prev Part III. Enumerations Next

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

Table of Contents

1. New Issues
2. Make a JavaScript Class Model
3. Add Two Library Files
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Code the enumerations
5.2. Code the model class as a JS 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. Quiz Questions
7.1. Question 1: Invocation of constructor
7.2. Question 2: Implicit getters and setters
7.3. Question 3: Retrieving the options selected by the user
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

In this chapter, we show how to build a front-end web application with enumeration attributes, using plain JavaScript. 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 5, we now deal with the following new issues:

  1. We replace the ES5 constructor-function-based class definition of our model class Book with a corresponding ES6 class definition, which provides a more convenient syntax while preserving the prototype-based semantics of JS constructor functions.

  2. Instead of defining explicit setters we now make use of implicit get/set methods for properties because they can be conveniently defined within a class definition.

  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 for Book;

    2. replacing the constructor parameter slots with a single record parameter using the ES6 syntax for function parameter destructuring.

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

    4. defining the enumerations with the help of a utility class Enumeration, which is discussed below;

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

    6. defining the multi-valued enumeration attributes otherAvailableLanguages and publicationForms together with their check functions checkOtherAvailableLanguages and checkPublicationForms;

    7. extending the methods Book.update and Book::toString such that they take care of the added enumeration attributes;

    8. defining a Book::toJSON function for facilitating the conversion from a Book object to a corresponding JSON record;

    9. defining extensions of the built-in JS object Array by adding two class-level functions (max and min) and two instance-level functions (clone and isEqualTo) in browserShims.js.

  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 v/retrieveAndListAllBooks.mjs;

    3. allowing input for the new attributes in v/createBook.mjs and v/updateBook.mjs.

Prev Up Next
5. Quiz Questions Home 2. Make a JavaScript Class Model