Script for the SimpleTodo Tutorial demo

http://projectzero.org/wiki/bin/view/Documentation/CoreGettingStartedTutorialDemo

Show welcoming screen >

Hello, welcome to Project Zero application development demo. In this demo, we'll develop a simple application to show some key features of the ProjectZero programming model,especially the simplified environment for creating and deploying Web Oriented Applications.

show projectzero.org screen >

For more details, we encourage you to go to our Web site at projectzero.org, where you may find information on Project Zero development, the community creating and supporting it, and, most importantly, how you may participate in this exciting Open Software Development.

show Eclipse >

The preferred development environment for Zero is Eclipse. Of course, you may use others, even with Notepad or Emacs.

show zero plugin installation >

First, we need install the Project Zero plugin that will provide the neccessary development tools. The plugin is available on our community web site: http://www.projectzero.org/update/zero.eclipse.latest/

show create project >

Now, we are ready to create our application.

Let's call it SimpleTodo.

show result of creating project >

Here is our project structure. It has several folders, which you may find detail information of the project structure on the our web site.

Brieftly, the public folder is the web root directory where static contents and scripts reside. Every file in this folder is accessible from the browser. And this is where we will create our first script.

show create file and code >

This is a Groovy script, like php or jsp script. In this simple version of the application, the script returns a form containing the current list of todo items. The user may add or delete items from the list as shown here in processing of the POST request.

show screen pointing at the code >

Now we are ready to try out the application and see how it works

show default port number >

The default port is 8080. It may be set to other port number via Configuration.

show add and delete todo items >

We include the port number in the request, and this is the result.

We can add a few items, and remove them.

go back to eclipse >

So as you have seen, in general, a Zero application may be organized entirely in the public folder;

However, one of the most important architectural patterns for Web programming is REST. In Zero programming model, REST is very prominent: Methods such as GET, PUT, POST, and DELETE are translated into scriptable events onGET, onPUT, onPOST, and onDELETE respectively.

show adding the app/resources/todos folder >

To illustrate Zero REST conventions, we'll enhance our application with a resource collection folder called todos. A typical application may have multiple collections such as customers and accounts.

Zero searches for these collections in the app/resources folder. Each resource folder contains 2 scripts: collection.groovy and item.groovy. The collection.groovy handles the REST interactionS with the todo collection, and the item.groovy handles interactionS with each individual todo item.

show collection.groovy - slide 80 >

This script implements onGet and onPost events. onGet returns the todo items in JSON format, and onPost adds an item to the todo collection.

Note that we are using zero.data.manager to access the database containing the todo items. We'll come back to database configuration later.

show item.groovy >

Similarly, we create the item.groovy to handle individual todo item.

show summary table of REST URIs >

In summary, we have these RESTful APIs. Notice the URI conventions: to access todo collection, the URI is /rest/todos, and to access the todo item, the URI is /rest/todos/*the_item_id*. This is different from accessing files or scripts from the public folder.

We'll enhance our todo script to use these APIs.

And leverage Ajax/Dojo, 1 of the key features of the Zero programming model, to enable Rich Internet Application development.

show addTodo method >

Dojo provides a rich set of widgets and APIs for client scripting in JavaScript. As shown here, to add a todo item, we call dojo to POST the item to the todo collection.groovy with the URI /rest/todos. This will invoke the onPOST event of the collection.groovy on the server.

show config folder, open ivy.xml >

At this point, we need to include the dependencies such as dojo and database in the application. The dependencies are specified in the ivy.xml file.

show manage configuration dialog >

The available libraries of components are set up in some repositories. You may search those repositories to find the components you want to use in your application. Zero will manage the packaging of the application and its dependencies.

show zero.config >

The zero.config file contains the application configurations. We configure our the database using mysql.

And here is the database script for our application.

show run the app and browser >

At this point, we are ready to run our enhanced todo list. Make sure your mysql server is running.

As you see, the UI is much richer with only a few dojo APIs added.

And notice that the update doesn't refresh the entire screen, but only the area effected, making the application more enticing and usable.

This concludes our demo.

show thank-you screen and note the projectzero.org site >

Thank you for your time. We hope you will participate in our ProjectZero community.

Good bye.