Hide
Java

Adding Application Code and UI

In this part of the tutorial, we'll create an app that integrates with Google Accounts so users can sign in using their Google accounts. In App Engine, the integration with Google accounts is achieved via the App Engine Users service. We'll use this to personalize our application's greeting.

This is what the app will look like, in this part of the tutorial (we'll add more later):

Hello_UI

This application consists of these main logical "parts":

  • A JSP page that the user interacts with to make requests to the app.
  • A servlet named GuestbookServlet.java that prompts the user to log in and then displays a personalized greeting.

Creating the UI using JSP

To create the UI:

  1. In guestbook/src/main/webapp, create a file named guestbook.jsp with the following contents:

    Notice the imports for the App Engine Users service. Also, by default, any file in webapp/ or in a subdirectory other than WEB-INF/ that has the s file suffix .jsp is automatically mapped to a URL path consisting of the path to the .jsp file, including the filename. This JSP will be mapped automatically to the URL /guestbook.jsp.

  2. In guestbook/src/main/webapp, create a directory named stylesheets, and create a file named main.css with the following contents:

  3. Proceed to web.xml configuration, described next.

Configuring web.xml

To configure the web.xml file:

  1. In guestbook/src/main/webapp/WEB-INF, open web.xml in a text editor, and replace the contents of the file with the following: This configuration maps the servlet to its serving location and specifies the JSP file you created to be the application home page. For more information about the web.xml file and how to use it, see the Deployment Descriptor page.

  2. Proceed to servlet creation, described next.

Creating the servlet GuestbookServlet.java

App Engine Java applications use the Java Servlet API to interact with the web server. An HTTP servlet is an application class that can process and respond to web requests. This class extends either the javax.servlet.GenericServlet class or the javax.servlet.http.HttpServlet class.

To create the servlet:

  1. In guestbook/src/main/java, create the subdirectories com/example/guestbook by invoking the following command (in a Linux or Mac OSX terminal window):

    mkdir -p com/example/guestbook
    
  2. In guestbook/src/main/java/com/example/guestbook, create a file named GuestbookServlet.java.

  3. Add the following contents to the file: The servlet checks whether the user is logged on. If the user is logged on, the servlet displays a personalized greeting; otherwise the user is redirected to the logon page.

  4. You project should look like this:

    Simple Hello World

    Your app is now ready to build and test the app locally on the development server, which is described next.

Building and testing the app

To build and test the app:

  1. Change directory to guestbook, and invoke the command:

    mvn clean install
    

    Wait for the build to complete.

  2. Run the app in the development server on your local machine by invoking this command from /guestbook:

    mvn appengine:devserver
    

    Wait for the success message, which looks something like this:

    [INFO] INFO: The admin console is running at http://localhost:8080/_ah/admin
    [INFO] Aug 18, 2014 5:35:04 PM com.google.appengine.tools.development.DevAppServerImpl doStart
    [INFO] INFO: Dev App Server is now running
    
  3. In a browser that is running on the same machine as your terminal window, visit localhost:8080 to access the app on your local machine. If prompted, click Sign in.

  4. In the login form supply an email or accept the test@example.com dummy email and click Log In. (When run locally, there is no validity check.)

  5. Observe that the greeting now displays your email address.

  6. You have successfully created a simple Java App Engine app. You are ready to do something a bit more useful next, adding the ability to accept and store user posts in a database.

Storing User-Supplied Data in Datastore >>