Web Applications with JavaScript or Java
   Next

Understanding and Implementing Information Management Concepts and Techniques

Web Applications with JavaScript or Java

Volume 1: Constraint Validation, Enumerations, Special Datatypes

Gerd Wagner

Ion Mircea Diaconescu

This book will be published by De Gruyter Oldenbourg in Sep/Oct 2017 with the ISBN: 978-3-11-049995-7. It is also available as a "living document" in the form of an open access online (HTML) book. Please help to improve the book's contents. We reward your reports of any issues, like typos (1 point each), errors (2-5 points each) or missing information (2-10 points each), to [email protected]. As a reward for your help, you may obtain an e-book file (PDF) if you have earned at least 5 points, or a printed copy if you have earned at least 10 points.

Copyright © 2017 De Gruyter Oldenbourg

This book, along with any associated source code, is licensed under The Code Project Open License (CPOL), implying that the associated code is provided "as-is", can be modified to create derivative works, can be redistributed, and can be used in commercial applications, but the book must not be distributed or republished without the publisher's consent.

2017-08-19

Revision History
Revision 0.220170601gw
create 2nd version
Revision 0.120170327gw
create first version

Dedication

To Our Families.

Table of Contents

Foreword
1. Mastering App Development Requires More than Coding Skills
2. Why is JavaScript a Good Choice for Building Web Apps?
3. Why is Java a Good Choice for Building Web Apps?
4. Comparing Java with JavaScript
5. Good Programs Are: Effective, Robust, Efficient and Maintainable
6. Run the Apps and Get Their Code
I. Getting Started
1. A Quick Tour of the Foundations of Web Apps
1. The World Wide Web (WWW)
2. HTML and XML
2.1. XML documents
2.2. Unicode and UTF-8
2.3. XML namespaces
2.4. Correct XML documents
2.5. The evolution of HTML
2.6. HTML forms
3. Styling Web Documents and User Interfaces with CSS
4. JavaScript - "the assembly language of the Web"
4.1. JavaScript as an object-oriented language
4.2. Further reading about JavaScript
5. Accessibility for Web Apps
6. Quiz Questions
6.1. Question 1: Well-Formed XML
6.2. Question 2: HTML Forms
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Strict Mode
1.4. Different kinds of objects
1.5. Array lists
1.6. Maps
1.7. JavaScript supports four types of basic data structures
1.8. Methods and Functions
1.9. Defining and using classes
1.10. Quiz Questions
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
3. A Minimal Web App with Plain JS
1. Step 1 - Set up the Folder Structure
2. Step 2 - Write the Model Code
2.1. Representing the collection of all Book instances
2.2. Creating a new Book instance
2.3. Loading all Book instances
2.4. Updating a Book instance
2.5. Deleting a Book instance
2.6. Saving all Book instances
2.7. Creating test data
2.8. Clearing all data
3. Step 3 - Initialize the Application
4. Step 4 - Implement the Create Use Case
5. Step 5 - Implement the Retrieve/List All Use Case
6. Step 6 - Implement the Update Use Case
7. Step 7 - Implement the Delete Use Case
8. Run the App and Get the Code
9. Possible Variations and Extensions
9.1. Using IndexedDB as an Alternative to LocalStorage
9.2. Styling the User Interface
10. Points of Attention
10.1. Catching invalid data
10.2. Database size and memory management
10.3. Boilerplate code
10.4. Serializing and de-serializing attribute values
10.5. Implicit versus explicit form field labels
10.6. Synchronizing views with the model
10.7. Architectural separation of concerns
11. Practice Projects
11.1. Project 1 - Managing information about movies
11.2. Project 2 - Managing information about countries
4. A Minimal Web App with Java EE
1. Java Basics
2. Step 1 - Set up the Folder Structure
3. Step 2 - Write the Model Code
3.1. Storing Book objects in a database table books
3.2. Creating a new Book instance and storing it
3.3. Retrieving all Book instances
3.4. Updating a Book instance
3.5. Deleting a Book instance
3.6. Creating test data
3.7. Clearing all data
4. Step 3 - Configure the App
4.1. Create the EntityManager and UserTransaction objects
4.2. Configure the JPA database connection
4.3. Create the main template
4.4. Define the managed beans needed in facelets
4.5. Build the WAR file and deploy it to TomEE
5. Step 4 - Implement the Create Use Case
6. Step 5 - Implement the Retrieve/List All Use Case
7. Step 6 - Implement the Update Use Case
8. Step 7 - Implement the Delete Use Case
9. Style the User Interface with CSS
10. Run the App and Get the Code
11. Possible Variations and Extensions
11.1. Using resource URLs
11.2. Using an alternative DBMS
12. Points of Attention
12.1. Boilerplate code
12.2. Offline availability
12.3. Architectural separation of concerns
13. Practice Projects
13.1. Project 1 - Managing information about movies
13.2. Project 2 - Managing information about countries
14. Quiz Questions
14.1. Question 1: Casting types in Java
14.2. Question 2: JPA standard identifier property
14.3. Question 3: Valid Java Bean classes
14.4. Question 4: HTML5 attributes with JSF forms
14.5. Question 5: JPQL query
5. Information Modeling
1. Classes with Properties and Methods
2. Connecting Classes with Associations
3. From a Conceptual Model via a Design Model to Class Models
4. Excursion: Formalizing Information Models with RDF and OWL
4.1. RDF vocabularies
4.2. RDF fact statements
4.3. Expressing structured data in web documents
4.4. OWL vocabularies and constraints
4.5. Usability issues of RDF and OWL
5. Summary
6. Exercises
6. Application Architecture
1. The Model-View-Controller (MVC) Architecture Metaphor
2. The Onion Architecture Metaphor
3. "Logical" versus "Physical" User Interface
4. MVC Web Applications
5. Deployment Architectures
II. Constraint Validation
7. Constraint Validation
1. Introduction
2. Integrity Constraints
2.1. String Length Constraints
2.2. Mandatory Value Constraints
2.3. Range Constraints
2.4. Interval Constraints
2.5. Pattern Constraints
2.6. Cardinality Constraints
2.7. Uniqueness Constraints
2.8. Standard Identifiers (Primary Keys)
2.9. Referential Integrity Constraints
2.10. Frozen and Read-Only Value Constraints
2.11. Beyond property constraints
3. Responsive Validation
4. Constraint Validation in MVC Applications
5. Adding Constraints to a Design Model
6. Summary
7. Criteria for Evaluating the Validation Support of Frameworks
8. Quiz Questions
8.1. Question 1: Where to check constraints
8.2. Question 2: Where to define constraints
8.3. Question 3: Counting constraints
8.4. Question 4: Constraint names
8.5. Question 5: Compliant objects
8. Constraint Validation in Plain JS
1. Introduction
2. New Issues
3. Make a JavaScript Class Model
4. Set up the Folder Structure Adding Some Library Files
4.1. Provide general utility functions and JavaScript fixes in library files
4.2. Create a start page
5. Write the Model Code
5.1. Summary
5.2. Code the model class as a constructor function
5.3. Code the property checks
5.4. Code the property setters
5.5. Add a serialization function
5.6. Data management operations
6. Write the View Code
6.1. The data management UI pages
6.2. Initialize the app
6.3. Set up the user interface
7. Run the App and Get the Code
8. Possible Variations and Extensions
8.1. Adding an object-level validation function
8.2. Using implicit JS setters
9. Points of Attention
9.1. Boilerplate code
9.2. Configuring the UI for preventing invalid user input
10. Practice Projects
10.1. Project 1 - Validate movie data
10.2. Project 2 - Validate country data
11. Quiz Questions
11.1. Question 1: Validation in setter (1)
11.2. Question 2: Validation in setter (2)
11.3. Question 3: Methods to add in JS class model
11.4. Question 4: Implementing constraints
9. Constraint Validation in Java EE
1. Java Annotations for Persistent Data Management and Constraint Validation
1.1. JPA constraint annotations
1.2. Bean Validation annotations
2. New Issues
3. Make an Entity Class Model
4. Write the Model Code
4.1. Type mapping
4.2. Code the constraints as annotations
4.3. Checking uniqueness constraints
4.4. Dealing with model-related exceptions
4.5. Requiring non-empty strings
5. Write the View Code
5.1. Validation in the Create use case
5.2. Validation in the Update use case
6. Defining a Custom Validation Annotation
7. Run the App and Get the Code
8. Possible Variations and Extensions
8.1. Object-level constraint validation
8.2. JSF custom validators
9. Practice Projects
9.1. Project 1 - Validate movie data
9.2. Project 2 - Validate country data
10. Quiz Questions
10.1. Question 1: String length validation
10.2. Question 2: Requiring a value
10.3. Question 3: Defining a custom validation annotation
10.4. Question 4: JSF custom validator method
10.5. Question 5: Show validation error messages with JSF
III. Enumerations
10. Enumeration Attributes
1. Enumerations
1.1. Simple enumerations
1.2. Code lists
1.3. Record enumerations
1.4. Extensible enumerations
2. Enumeration Attributes
3. Enumerations in Computational Languages
3.1. Enumerations in SQL
3.2. Enumerations in XML Schema
3.3. Enumerations in JavaScript
4. Dealing with Enumeration Attributes in a Design Model
5. Quiz Questions
5.1. Question 1: Languages Supporting Enumerations
5.2. Question 2: UI Widget for Single-Valued Enum Attribute
5.3. Question 3: UI Widget for Multi-Valued Enum Attribute
11. Enumeration Attributes in Plain JS
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
12. Enumeration Attributes in Java EE
1. New Issues
2. Make an Entity Class Model
3. Write the Model Code
3.1. Code the enumerations
3.2. Code the JPA entity class
3.3. Define a converter for serializing enumeration attribute values
3.4. Code the enumeration attribute setters
3.5. Write a serialization function
3.6. Database schema
3.7. Creating test data
4. Write the View Code
4.1. Selection lists
4.2. Radio button groups and checkbox groups
5. Displaying Value Sets for Multi-Valued Enumeration Attributes
6. Run the App and Get the Code
7. Practice Projects
7.1. Project 1 - Adding ratings and genres as enumeration attributes
7.2. Project 2 - Adding country codes and religions as enumeration attributes
8. Quiz Questions
8.1. Question 1: JPA custom converter implementation class
8.2. Question 2: Cardinality constraints for enum attributes
8.3. Question 3: JPA enum attribute serialization annotation
8.4. Question 4: JSF single-valued enum attribute
8.5. Question 5: JSF multi-valued enum attribute
IV. Special Datatypes and Derived Attributes
13. Special Datatypes
1. Boolean Values
2. String Patterns
2.1. Telephone numbers
2.2. Email addresses
2.3. URLs
3. Special Numeric Data Types
3.1. Positive and non-negative integers
3.2. The unit interval
3.3. Percentages
3.4. Arbitrary precision numbers
4. Calendar Dates and Times
4.1. Using JavaScript's Date class
4.2. Calendar dates and times in the user interface
4.3. Using Java's Date and Calendar classes
4.4. Using Date and Calendar with JPA
4.5. Rendering Date Attributes with JSF
5. Quantities
6. Complex Data Types
6.1. Records
6.2. Data collections
14. Derived Properties
1. Virtual Derived Properties
2. Materialized Derived Properties
3. Dealing with Derived Properties in the User Interface
Glossary
Index

List of Figures

2.1. The built-in JavaScript classes Object and Function.
3.1. The object type Book.
4.1. The object type Book.
5.1. From a conceptual model via a design model to a JavaScript class model
5.2. From a conceptual model via design models to implementation models
6.1. The MVC code base architecture with the model as the foundation.
6.2. The mediating-controller MVC pattern
6.3. Architectures for front-end web apps
6.4. Architectures for back-end and distributed web apps
7.1. An example of an object-level constraint
7.2. A design model defining the object type Book with two invariants
8.1. From an information design model to a JS class model
9.1. Deriving an Entity class model from an information design model
10.1. An example of an extensible enumeration
10.2. A single and a multiple select element with no selected option
10.3. A radio button group
10.4. A checkbox group
10.5. An information design model for the object type Book
11.1. A JavaScript class model for the object type Book
11.2. The UI for creating a new book record with enumeration attributes
12.1. A JPA entity class model for the object type Book
12.2. The user interface for creating a new book record
13.1. An information design model with special datatypes.
13.2. The date picker widget rendered by the Google Chrome browser.
13.3. Quantity types.
14.1. An example of a virtual derived attribute in a class diagram.
14.2. A materialized derived attribute in a class diagram.

List of Tables

2.1. An example of an entity table representing a collection of books
2.2. Required and desirable features of JS code patterns for classes
3.1. A collection of book objects represented as a table
3.2. Sample data about movies
3.3. Sample data about countries
4.1. Sample data about books
4.2. Java Visibility Level
7.1. Sample data for Book
8.1. Datatype mapping
8.2. Sample data about movies
8.3. Sample data about countries
9.1. Bean Validation annotations for properties
9.2. Datatype mapping to Java
9.3. Datatype mapping to MySQL
10.1. Representing an enumeration of records as a table
10.2. Sample data for Book
11.1. Sample data about movies with rating and genres
11.2. Sample data about countries with country code and religions
   Next
   Foreword