Chapter 9. Implementing Enumeration Attributes in a Plain JS App

Table of Contents

1. New Issues
2. Make a JavaScript Data Model
3. Set up the Folder Structure with Library Files
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Encode the enumerations
5.2. Encode the model class as a constructor function
5.3. Encode the enumeration attribute checks
5.4. Encode the enumeration attribute setters
5.5. Write a serialization function
5.6. Data management operations
5.7. Creating test data
6. Write the View and Controller Code
6.1. Selection lists
6.2. Choice widgets
6.3. Responsive validation for selection lists and choice widgets
7. Run the App and Get the Code
8. Possible Variations and Extensions
9. Points of Attention
9.1. Database size and memory management
9.2. Boilerplate code
10. Quiz Questions
10.1. Question 1: Checking the Range Constraint of an Enum Attribute
10.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.

We again consider the simple data management problem that was considered in Part 2 of this tutorial. So, again, the purpose of our app is to manage information about books. But now we have four additional enumeration attributes, as shown in the UML class diagram in Figure 9.1 below:

  1. the single-valued mandatory attribute originalLanguage with the enumeration datatype LanguageEL as its range,

  2. the multi-valued optional attribute otherAvailableLanguages with range LanguageEL,

  3. the single-valued mandatory attribute category with range BookCategoryEL

  4. the multi-valued mandatory attribute publicationForms with range PublicationFormEL

Figure 9.1. An information design model for the object type Book

An information design model for the object type Book

Notice that the attributes otherAvailableLanguages and publicationForms are multivalued, as indicated by their multiplicity expressions [*] and [1..*]. This means that the possible values of these attributes are sets of enumeration literals, such as the set {ePub, PDF}, which can be represented in JavaScript as a corresponding array list of enumeration literals, [PublicationFormEL.EPUB, PublicationFormEL.PDF].

The meaning of the design model and its enumeration properties can be illustrated by a sample data population for the model class Book:

Table 9.1. Sample data for Book

ISBN Title Original language Other languages Category Publication forms
0553345842 The Mind's I English (en) de, es, fr novel paperback, ePub, PDF
1463794762 The Critique of Pure Reason German (de) de, es, fr, pt, ru other paperback, PDF
1928565379 The Critique of Practical Reason German (de) de, es, fr, pt, ru other paperback
0465030793 I Am A Strange Loop English (en) es textbook hardcover, ePub

1. New Issues

Compared to the Validation App discussed in Part 2 (Validation App Tutorial) we have to deal with the following new issues:

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

  2. Enumeration attributes have to be defined in model classes and handled in the user interface.

In terms of coding, the new issues are:

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

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

    2. defining the single-valued enumeration attributes (like Book::originalLanguage) together with their checks and setters (like Book.checkOriginalLanguage, Book.prototype.setOriginalLanguage);

    3. defining the multi-valued enumeration attributes (like Book::publicationForms) together with their checks and setters (like Book.checkPublicationForms, Book.prototype.setPublicationForms and Book.prototype.addPublicationForm);

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

  2. In the user interface code we have to take care of

    1. adding new table columns in listBooks.html and suitable form controls (such as selection lists, radio button groups or checkbox groups) in createBook.html and upateBook.html;

    2. creating output for the new attributes in the method pl.view.listBooks.setupUserInterface();

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