2. Step 1 - Set up the Folder Structure

2. Step 1 - Set up the Folder Structure
Prev	Chapter 4. Building a Minimal Web App with Java EE in Seven Steps	Next

In the first step, we set up our folder structure for the application program code. The application name is "Public Library", so it would be natural to use a corresponding name for the application folder, like "PublicLibrary", but we prefer using MinimalApp. Then we create the application structure. There are many ways to do this, like for example to use the Eclipse development environment (and create and configure a Dynamic Web Project). In this chapter we show how to do it manually, so there is no need to use special tools. For your convenience, we also provide an ANT script (see our guide for a download link), allowing to automatically create the folder structure of the web application, compile it to a Web application Archive (WAR) file and then deploy it to a TomEE server for execution. The application structure (which is compatible with the Dynamic Web Project structure of Eclipse, so it can be imported in Eclipse) is the following:

MinimalApp
  src
    pl
      m
      c
    META-INF
      persistence.xml
  WebContent
    resources
      media
        img
    views
      books
    WEB-INF
      templates
      faces-config.xml
      web.xml

This folder structure has the following parts:

The src folder contains the app code folder pl, defining the Java package name for the app (as a shortcut of 'public library'), and the folder META-INF with configuration files:
1. the app code folder pl contains the model and controller code in its subfolders m and c, while the view/UI related code is contained in the WebContent folder;
2. the most important configuration file is the persistence.xml file. It contains the configuration for the database connection. The content of this file is discussed in Section 4.2.
The WebContent folder contains various web resources, including template files and custom view files:
1. the resources folder is used for storing resources, such as downloadable documents, images or videos.
2. the views folder stores our custom view files for the application, so it represents the View part of the MVC paradigm. Please note that it is not strictly required to name it "views", but it makes a lot of sense to do it so, since this is what this folder represents.
3. the WEB-INF folder contains project libraries in the form of jar files in the lib subfolder (in our case we don't need such libraries), the facelet files for the UI pages (in the templates subfolder), the faces-config.xml file, which stores the facelet configuration and the web.xml configuration file, specific to the TomEE server used to run our application.

We create a "Main Menu" page for our application, thus we add an index.xhtml file to our views folder with the following content:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
<h:head>
 <meta charset="UTF-8" />
 <title>Minimal App with Java and JPA/JSF</title>
</h:head>
<body>
 <header>
  <h1>Public Library</h1>
  <h2>Minimal App with Java and JPA/JSF</h2>
 </header>
 <main>
  <menu>
   <li><h:button value="Create" outcome="create" /> a new book</li>
   <li><h:button value="Retrieve" outcome="retrieveAndListAll" /> 
    and list all books</li>
   <li><h:button value="Update" outcome="update" /> a book</li>
   <li><h:button value="Delete" outcome="delete" /> a book</li>
  </menu>
  <hr />
  <h:form>
   <menu>
    <li><h:commandButton value="Clear" 
         action="#{bookCtrl.clearData()}" /> database</li>
    <li><h:commandButton value="Generate" 
         action="#{bookCtrl.generateTestData()}" /> test data</li>
   </menu>
  </h:form>
 </main>
 <footer>
  <!-- copyright text -->
 </footer>
</body>
</html>

Notice that the <html> element contains JSF elements, such as <h:head> and <h:button>, which are discussed below.