To do list Part I - Simple to do

In this tutorial, we'll discuss the steps needed to create a simple Zero application to manage a to do list. To start with, we'll create a simple single user application. The data will be held in memory and will not be persistent. In the later tutorials, we will enhance the application to use a database for persistent storage.

The following concepts are covered in this tutorial:

• Directory structure
• Global context
• File access from the public folder
• HTTP request handlers in a Groovy template

Creating an empty Zero application

We'll begin by creating an empty Zero application to use for developing our "to do list" application. This step assumes that you have downloaded the Project Zero package.

1. Open a Command Prompt window.
2. Change the current directory to <zerohome>, (assuming that zerohome is the directory where you unzipped the Zero package).
3. Type zero create simpletodo .
4. Change the current directory to <zerohome>/apps/simpletodo .

Working with the structure of a Zero project

Let's look into what a zero project contains, by default. Zero uses conventions that reduce the amount of configuration necessary to develop an application. We will now talk about how those conventions relate to the structure of a zero application.

• java: contains Java source code
• public: is analogous to the document root of a web server. It contains web content such as html and javascript files.
• app:
  • resources: contains the resources that are to be accessed RESTfully.
  • views: contains groovy templates that are used for response rendering.
  • errors: contains error pages
  • scripts: contains scripts that only contain business logic and are not web resources.
• config: contains the configuration files for the Zero project.
• lib: contains local .jar and .zip files included in the project.
• logs: contains logs and traces.
• reports: contains reports generated by the dependency management system.
• export: default location for packaged applications (created after package or export command)

Adding to do list handling to the application

To create our to do list application, we will use a Groovy file to handle requests from the browser and service them accordingly. Groovy is an agile and dynamic language which builds upon the strengths of Java but has additional power features inspired by languages like Python, Ruby and Smalltalk. If you are not familiar with Groovy, you can get more information at the Groovy Web site.

First, we'll use the following steps to create the Groovy file:

1. Change the current directory to <zerohome>/apps/simpletodo/public
2. Using your favorite text editor, create and edit the todo.groovy file.
   Note: The file is in the public folder. The public folder in a Zero application is similar to the document root of a Web server. However, there are some special handling rules for files placed in this folder. For more information, see the File serving article.
3. Add the following content to the todo.groovy file:
   
   

   /*
    * ============================================================================
    * Licensed Materials - Property of IBM
    * Project  Zero
    *
    * (C) Copyright IBM Corp. 2007  All Rights Reserved.
    *
    * US Government Users Restricted Rights - Use, duplication or disclosure
    * restricted by GSA ADP Schedule Contract with IBM Corp.
    * ============================================================================
    */
   
      todos = app.todos.get();
      if (todos == null) {
         todos = [];
      }
   
      if (request.method.get().equals('POST')) {
         action = zero.util.XMLEncoder.escapeXML(request.params.action[0].get());
         if (action.equals("Add")) {
            items = request.params.item.get();
            if (null != items){
                item = zero.util.XMLEncoder.escapeXML(items[0]);
                if (null != item && item.size() > 0)
                   todos.add(item);
            }
         } else {
            selected = request.params.todos.get();
            for (i in selected)
               todos.remove(i);
         }
         app.todos = todos; 
      }
   
   writer = request.writer.get()   
      
   writer.write '''   
   <html>
   <head>
      <title>Simple Todo List</title>
   </head>
   <body>
      <b>Your todo items:</b>
      <br>
      <form name="input" action="/todo.groovy" method="POST">
   '''
     
   todos.each { writer.write "<input type=\"checkbox\" name=\"todos\" value=\"" + it + "\"> "+it+"<br>" } 
   writer.write '''
         <br>
         <input type="text" name="item">
         <input type="submit" name="action" value="Add">
         <input type="submit" name="action" value="Delete">
      </form>   
   </body>
   </html>
   '''
   

4. Save the todo.groovy file.

That is all you need to do to create your to do application! Your to do application is ready to try out.

Working with the todo.groovy file

Running the simpletodo application

To run your simpletodo application, use the following steps:

1. Change the current directory to <zerohome>/apps/simpletodo
2. Type zero make to compile.
3. Type zero run to run the simpletodo application.
4. Using your browser, go to the http://localhost:8080/todo.groovy site.
   
   The following example shows some sample output:
   
   

Adding template handling to the application

We just ran the simple to do list application. Now, lets make some changes to it to incorporate a groovy template and take some of the HTML generation away from the groovy script.

First, we'll use the following steps to create the Groovy template:

1. Change the current directory to <zerohome>/apps/simpletodo/app/views
2. Using your favorite text editor, create and edit the todo.gt file.
3. Add the following content to the todo.gt file:
   
   

   <% 
   /*
    * ============================================================================
    * Licensed Materials - Property of IBM
    * Project  Zero
    *
    * (C) Copyright IBM Corp. 2007  All Rights Reserved.
    *
    * US Government Users Restricted Rights - Use, duplication or disclosure
    * restricted by GSA ADP Schedule Contract with IBM Corp.
    * ============================================================================
    */
   %>
   <html>
   <head>
      <title>Simple Todo List</title>
   </head>
   <body>
      <b>Your todo items:</b>
      <br>
      <form name="input" method="POST">
         <% app.todos.get().each { %>
            <input type="checkbox" name="todos" value="<%=it%>"> <%=it%> <br> 
         <% } %>
         <br>
         <input type="text" name="item">
         <input type="submit" name="action" value="Add">
         <input type="submit" name="action" value="Delete">
      </form>   
   </body>
   </html>
   
   

4. Save the todo.gt file.
5. To make use of this template that we just created, we need to modify our todo.groovy. Replace the contents of public/todo.groovy with the following:

   /*
    * ============================================================================
    * Licensed Materials - Property of IBM
    * Project  Zero
    *
    * (C) Copyright IBM Corp. 2007  All Rights Reserved.
    *
    * US Government Users Restricted Rights - Use, duplication or disclosure
    * restricted by GSA ADP Schedule Contract with IBM Corp.
    * ============================================================================
    */
   
      todos = app.todos.get();
      if (todos == null) {
         todos = [];
      }
   
      if (request.method.get().equals('POST')) {
         action = zero.util.XMLEncoder.escapeXML(request.params.action[0].get());
         if (action.equals("Add")) {
            items = request.params.item.get();
            if (null != items){
                item = zero.util.XMLEncoder.escapeXML(items[0]);
                if (null != item && item.size() > 0)
                   todos.add(item);
            }
         } else {
            selected = request.params.todos.get();
            for (i in selected)
               todos.remove(i);
         }
         app.todos = todos; 
      }
   
   request.view = 'todo.gt';
   render();
   
   

6. Run the application again just like you did before !