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 using Eclipse. 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 the Eclipse development environment already open.

1. Click File -> New -> Project.
2. Expand the Zero category folder near the bottom and select the Project Zero Application project type as shown on the following screen.
   
   
   
   
3. Click Next.
4. Enter a name to create your Zero project. For this tutorial, we'll name it simpletodo as shown on the following screen.
   
   
   
   
5. Click Finish.
6. Click Window -> Open Perspective -> Java to change to the Java perspective if you have not already done so. Your new project is shown, as on the following screen, with a Zero icon next to it.
   
   
   
   

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. You can expand the project in the Package Explorer view to see the structure.

• 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.
• Zero Resolved Libraries: is a library container that contains a list of libraries that were successfully resolved by the dependency management system. When you create a new project, it includes two explicit dependencies. When Zero tries to resolve those two dependencies, they pull in their own dependencies and populate the list of resolved libraries.
• JRE System Library: is a library container that contains the JRE system library used by the project to compile any java resources.
• Zero Local Libraries: is a library container that contains libraries from the lib folder of the project.

• 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. Click File -> New -> File
2. Select the public folder of the project that you just created, and specify todo.groovy as the file name as shown on the following screen.
   
   



3. Click Finish.
4. Click No if a dialog box appears that asks you to add runtime Groovy support to the project.
   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.
5. 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>
   '''

6. 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. Right-click the simpletodo project and click Run As -> Project Zero Application.
2. 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. Click File -> New -> File
2. Select the app/views folder of the project that you just created, and specify todo.gt as the file name as shown on the following screen.
   
   



3. Click Finish.
4. Click No if a dialog box appears that asks you to add runtime Groovy support to the project.
5. 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>

6. Save the todo.gt file.
7. 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();

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