5. Set up the Folder Structure with Library Files

The MVC folder structure of our validation app extends the structure of the minimal app by adding two folders, css for adding the CSS file main.css and lib for adding the generic code libraries browserShims.js, errorTypes.js and util.js. Thus, we end up with the following folder structure containing five initial files:

publicLibrary
  css
    main.css
  lib
    browserShims.js
    errorTypes.js
    util.js
  src
    ctrl
    model
    view
  index.html

We discuss the contents of the four initial files in the following sections.

5.1. Style the user interface with CSS

We style the UI with the help of the CSS library Pure provided by Yahoo. We only use Pure's basic styles, which include the browser style normalization of normalize.css, and its styles for forms. In addition, we define our own style rules for table and menu elements in main.css.

5.2. Provide general utility functions and JavaScript fixes in library files

We add three library files to the lib folder:

  1. browserShims.js contains a definition of the string trim function for older browsers that don't support this function (which was only added to JavaScript in ECMAScript Edition 5, defined in 2009). More browser shims for other recently defined functions, such as querySelector and classList, could also be added to browserShims.js.

  2. util.js contains the definitions of a few utility functions such as isNonEmptyString(x) for testing if x is a non-empty string.

  3. errorTypes.js defines general classes for error (or exception) types: NoConstraintViolation, MandatoryValueConstraintViolation, RangeConstraintViolation, IntervalConstraintViolation, PatternConstraintViolation, UniquenessConstraintViolation, OtherConstraintViolation.

5.3. Create a start page

The start page of the app first takes care of the page styling by loading the Pure CSS base file (from the Yahoo site) and our main.css file with the help of the two link elements (in lines 6 and 7), then it loads the following JavaScript files (in lines 8-12):

  1. browserShims.js and util.js from the lib folder, discussed in Section 5.2,

  2. initialize.js from the src/ctrl folder, defining the app's MVC namespaces, as discussed in Part 1 (the minimal app tutorial).

  3. errorTypes.js from the lib folder, defining exception classes.

  4. Book.js from the src/model folder, a model class file that provides data management and other functions discussed in Section 6.

Figure 6.3. The validation app's start page index.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Plain JS Validation App</title>
    <link rel="stylesheet" type="text/css" 
        href="http://yui.yahooapis.com/combo?pure/0.6.0/base-min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    <script src="lib/browserShims.js"></script>
    <script src="lib/util.js"></script>
    <script src="lib/errorTypes.js"></script>
    <script src="src/ctrl/initialize.js"></script>
    <script src="src/model/Book.js"></script>
  </head>
  <body>
    <h1>Public Library</h1> <h2>Validation Example App</h2>
    <p>This app supports the following operations:</p>
    <menu>
      <li><a href="listBooks.html"><button type="button">
          List all books</button></a></li>
      <li><a href="createBook.html"><button type="button">
          Add a new book</button></a></li>
      <li><a href="updateBook.html"><button type="button">
          Update a book</button></a></li>
      <li><a href="deleteBook.html"><button type="button">
          Delete a book</button></a></li>
      <li><button type="button" onclick="Book.clearData()">
          Clear database</button></li>
      <li><button type="button" onclick="Book.createTestData()">
          Create test data</button></li>
    </menu>
</body>
</html>