Today you will learn, how to create new forums, and how to render a list of them on our start page.

The first thing we need is a new prototype, for the forums. A prototype in Helma is represented by a new folder in our application folder. In our case this is: apps/forum

In OOP language, this folder is the class which describes the properties and holds the methods. To declare new properties we will use the type.properties file and to create new methods, we will just add .hac files or functions() in .js files.

So what does this mean for the non-programming-pro?

In our forum application we want to be able to create new forums. But Helma, doesn't know what a forum is like, what it can do and what it can store. So we need to describe a prototype of this forum. You can imagine this as the production line, or form, that will produce our forums. (with the exception, that when we change something in our production line, it will also affect the already produced objects).

To create a new prototype in Helma, we just add a folder to our application directory. We will call this folder "forum". The complete path is: apps/forum/forum . It has no meaning or relevance, that the application folder, and the folder for our first own prototype are named the same.

create a main.hac file in the newly created folder. Open it in a text editor and type in:

res.write("I'm a forum");

Now if open the URL http://localhost:8080/forum/forum/main in your browser: Nothing will happen!?

That' because we just created the prototype of a forum, and not an actual forum (-object) itself.

Adding and storing properties and objects

The only object we have so far is the root object. The root object, is created as soon as we create our new application. We can use the root folder in our application directory to describe and script it, like we did this with our start page.

And the root object is persistent! That means, when we add or change a property than it will be still there after we stop and restart Helma. To make another object, than root persistent we need to "add" it to an already persistent object. And at the beginning of an application this is the root object.

Before we add new forums, we test how to add and change properties of root. So open the main.hac in root again, script the lines, and call it with the browser via http://localhost:8080/forum. This is just for testing!

To add a new property, or change it we can say:

this.propertyName="test";
this.header="My first Helma application";

this is the keyword, which represents the object, we are using
the dot is the sperator
propertyName is same name for our property. This name can be any leagal JavaScript variable name.
the equal sign says that the left part should become equal to the right part
"test" is a string (that's why it is quoted), but can be also a Number, or any other JavaScript datatype or object. And it can be a HopObject, what we will see next.

To call a property of an object we say:
object.propertyName
So when we want to print the header property of the root object to the screen, we script:
res.write(this.header);
This is the same like we would say:
res.write("My first Helma application");

Creating forums and rendering the list

The new code for root/main.hac is:

var aNewForum = new forum();
this.add(aNewForum);

for (var i=0; i<this.count(); i++) { res.write('<a href="'+this.get(i).href("main")+'"> Forum No.'+i+'</a><br>'); }

// this.renderSkin("main");

Open the URL http://localhost:8080/forum in your browser and hit the reload button for a few times. If it doesn't work right from the start you maybe have to restart Helma.

What you can see is a growing list of links to Forums. When you click on one of the links you will see: I'm a forum and when you take a look at the URL in your brwoser you will see something like: http://localhost:8080/forum/4/main

Basically the few lines of code we wrote create a new forum each time we call root/main.hac, with a browser. After we created and added a new forum, we loop through all the existing forums and render a link to this forums.

Here is a very detailed description of what is going on:

Line1: var aNewForum = new forum(); var is a keyword, and just declares a variable. A variable is a temporary placeholder for data. It will be just available within its scope. aNewForum is the name of the variable new forum() creates a new object, of the class forum. That means we produce a forum object with our forum production line and temporarily store it in the variable aNewForum the semicolone ends a line of code in JavaScript

Line2: this.add(aNewForum); this means this root object add() add is a Helma function, which appends HopObjects to an existing HopObject. That means we make the forum, that is just stored in the temporary variable aNewForum yet, persistant, by adding it to root.

Line4: for (var i=0; i<this.count(); i++) { for (initialize, test, increment) { ...code...} This is a for loop. var i=0The first time it loops it executes the initialize statement, in our case we declare the variable i and initialize it with 0 (zero). i<this.count();Each time before the loop is entered, it tests the test code. That means if i (our counter) is smaller then this.count() it will execute the code between the braces { } . this.count() This is a Helma function, which returns the number of added HopObjects of this object. That is the number of forums we already added. i++ This will be executed after the loop ended, and before the next test is executed. It just increases our counter i by 1. and is a shortform of i=i+1;

Line5: res.write(''<a href="'+this.get(i).href("main")+'">Forum No.'+i+'</a><br>'); res.write(); we already know this ... right? '<a href="'+this.get(i).href("main")+'">Forum No.'+i+'</a><br>' This is the string we want to print to the screen. You have to take care about the single and double quotes!! Strings can be combined by the plus singn. for example: "Hello "+"World!"; this.get(i) get is a Helma function that returns a HopObject that had been added to this object this.get(i).href("main") We just continue by adding another dot sepperator and call the href() function on the forum returned by this.get(i). The href() function is a Helma function, that returns a URL string for the object. "main" says that we want to get a URL for the main.hac of that forum.

Line6: } ends the loop

Line8: // this.renderSkin("main"); // says that the rest of the line is just a comment. We want to diable the rendering of the rendering of the start screen.

Helma is scripted with JavsScript!

To fully understand the code we will use in the rest of this tutorial you need to learn JavaScript or consider a book or online Tutorial about this. But even, if you are just familiar with an other programming language, like PHP, ASP, C++ or Java you should be able to read the code and follow the examples.

The fact, that we are using JavaScript doesn't mean it's the same JavaScript like you are maybe used to from scripting in a HTML page. The main difference is, that there are no special ClientSide objects, like the window object, or document.all or stuff like this. But at least the syntax is the same.

But there are a lot of other objects in exchange we will need on the server side. For example the res (response) or the req (request) object, and so on.

Next time

Next time we will learn how to control this behavior a little bit more :)