8. Practice Projects
Prev Chapter 11. Implementing Enumeration Attributes in a Plain JS Web App Next

8. Practice Projects

In the following practice projects, first make a list of all the constraints that have been expressed in the information model. Then code the app by following the guidance of this chapter and Chapter 8.

Compared to the validation app, you now have to take care of

  1. defining enumeration data types with the help of the meta-class Enumeration and defining any enumeration attribute together with a static check function and implicit get/set methods in the model code,

  2. adding suitable choice widgets for the enumeration attributes in the Create and Update user interfaces in the view code.

Make sure that your pages comply with the XML syntax of HTML5 by checking them with the XHTML5 validator (setting the validator field Preset to "HTML5 + SVG 1.1 + MathML 3.0"), and that your JavaScript code complies with our Coding Guidelines and its style is checked with JSHint.

If you have any questions about how to carry out the following projects, you can ask them on our discussion forum.

8.1. Project 1 - Adding ratings and genres as enumeration attributes

The purpose of the app to be built is managing information about movies. The app deals with just one object type, Movie, and with two enumerations, as depicted in the following class diagram.

Compared to the corresponding validation app project, two attributes have been added: the optional single-valued enumeration attribute rating, and the multi-valued enumeration attribute genres.

Following the tutorial, you have to take care of

  1. defining the enumeration data types MovieRatingEL and GenreEL with the help of the meta-class Enumeration;

  2. defining the single-valued enumeration attribute Movie::rating;

  3. defining the multi-valued enumeration attributes Movie::genres;

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

in the model code of your app, while In the user interface ("view") code you now have to take care of

  1. adding new table columns in retrieveAndListAllMovies.html and suitable choice widgets in createMovie.html and upateMovie.html;

  2. creating output for the enumeration attributes in the method v.retrieveAndListAllMovies.setupUserInterface();

  3. allowing input for the enumeration attributes in the methods v.createMovie.setupUserInterface() and v.upateMovie.setupUserInterface().

You can use the following sample data for testing your app:

Table 11.1. Sample data about movies with rating and genres

Movie ID Title Rating Genres
1 Pulp Fiction R Crime, Drama
2 Star Wars PG Action, Adventure, Fantasy, Sci-Fi
3 Casablanca PG Drama, Film-Noir, Romance, War
4 The Godfather R Crime, Drama


More movie data can be found on the IMDb website.

8.2. Project 2 - Adding country codes and religions as enumeration attributes

The purpose of the app to be built is managing information about countries. The app deals with just one object type, Country, and with two enumerations, as depicted in the following class diagram.

Compared to the corresponding validation app project, two attributes have been added: the single-valued enumeration attribute code, which is a "key" attribute (implying a uniqueness constraint), and the multi-valued enumeration attribute religions.

You can use the following sample data for testing your app:

Table 11.2. Sample data about countries with country code and religions

Name Code Population Life expectancy Religions
Germany DE 80,854,408 80.57 Protestant, Catholic, Muslim
France FR 66,553,766 81.75 Catholic, Muslim
Russia RU 142,423,773 70.47 Orthodox, Muslim
Monaco MC 30,535 89.52 Catholic

More data about countries can be found in the CIA World Factbook.

Prev Up Next
7. Run the App and Get the Code Home 9. Quiz Questions