Helma Logo
helma.org » Home > docs > tutorial > Creating A HopObject

Creating A HopObject

We are only a few more steps away from successfully having built a simple application with the basic and most important Helma features.

One thing that's still missing is to create a new person HopObject. Let's do this now.

Because the create form almost exactly looks like the edit form in HopObject/edit.skin from the previous step, we will recycle it for this purpose.

Therefore some slight adjustments are necessary:

Change the first line of HopObject/edit.skin from 

<form action="edit" method="post">
to 
<form action="<% response.action %>" method="post">
Then add the line 
res.data.action = "edit";
just before the last line containing renderSkin("html"); in Person/edit.hac (this is just to keep this action file compatible with our changes).

Create the action file Root/create.hac as follows:

apps/addressbook/Root/create.hac: 
if (req.data.submit) {
  var p = new Person();
  p.firstname = req.data.firstname;
  p.lastname = req.data.lastname;
  p.email = req.data.email;
  p.createtime = new Date();
  p.modifytime = new Date();
  root.add(p);
  res.redirect(root.href());
}

res.data.title = "Create Helma Address Book Entry";
res.data.body = this.renderSkinAsString("edit");
res.data.action = "create";
renderSkin("html");
Finally, add these three macro functions to a new file called macros.js (don't use Person/macros.js):

apps/addressbook/Root/macros.js: 
function firstname_macro() {
  return("");
}

function lastname_macro() {
  return("");
}

function email_macro() {
  return("");
}
Before we look at the result of these additions and modifications, let me explain some details.

The introduction of res.data.action and its corresponding macro <% response.action %> gives the skin file HopObject/edit.skin more flexibility since the action file that is invoking it determines the form action for it.

The reason why edit.skin is stored in the HopObject directory is to make it available for both, the Root and the Person prototypes. Everything that's belonging to the HopObject prototype also belongs to any other custom HopObject prototype. This way the Root and Person prototypes can share the same skin file.

Moreover, and this is a big difference to when we would have saved edit.skin as global skin file, we can use the scope variable this. It always refers to the actual HopObject, either the root object or a particular person object.

This is very convenient, since that way we can retrieve any HopObjects properties directly via this.firstname, this.lastname and this.email.

Because root does not have any of these properties, we have to avoid the output of error messages by adding corresponding macro functions.

So while the <% this.firstname %> macro for any person HopObject refers to its property stored in the database, <% this.firstname %> for the root HopObject refers to the macro function root.firstname_macro(), and respectively do the other two macros.

Now point your browser to the URL http://localhost:8080/addressbook/create and you will get an empty form. Fill in some data and press Save. Et voilà! You immediately should see a new item at the end of the list.

Here is the file structure you should have ended up with:

 - apps
   - addressbook
       db.properties
     - Global
         html.skin
     - HopObject
         edit.hac
         edit.skin
     - Person
         link.skin
         macros.js
         type.properties
     - Root
         create.hac
         macros.js
         main.hac
         type.properties


Up: Tutorial
Previous: Handling User Input

... comment


Page last modified on 2006-01-02 09:58 by czv
This site is powered by helma