Your First Server-side JavaScript Application | WebReference

Your First Server-side JavaScript Application

By Rob Gravelle


[next]

In the Introduction to Server-side JavaScript article, we leaned about the Aptana Jaxer Server, which is a plug-in for other servers such as Apache, Jetty or Tomcat. Based on Mozilla Gecko, Jaxer's server-side JavaScript APIs enable database/file system access, network communications, user sessions, and other functions that are typically only found in web application languages. Today, we will be using the Aptana Studio IDE to build a simple file-based blog for Jaxer.

Familiarizing Yourself with the Aptana Studio IDE

The version of Aptana Studio that we will be using is free, open source software that is based on the Eclipse Integrated Development Environment (IDE). If you've ever worked with Eclipse, you'll notice how closely it resembles the popular IDE. The base studio supports HTML, DOM, JavaScript and CSS, but you can further customize it with additional plug-ins for PHP, Ruby on Rails, Python, Adobe AIR, Apple iPhone and Nokia S60 development. There is also an Eclipse plug-in version of the studio, which provides additional Java support. The Pro version adds SFTP, FTPS secure file transfer, a JSON editor, an Internet Explorer debugger, reporting engine, Ruby Performance Profiler, Remote Project Import Wizard, the Adobe AIR Application XML Editor, as well as perks such as priority support and early access to new builds. The free IDE comes with a free 30-day trial of the Pro features set so that you can give them a try before deciding whether or not to buy. Studio Pro licenses start at $99 for a single user, but include discounts for multi-user licenses.

Visit the Aptana Studio IDE download page to get the latest version.

The web page that we'll be working on today will be part of a project named "blog". We should create the project before moving on to individual files so that they will be grouped together and share the same root directory. Launch the Aptana Studio now to create the project. Once the app has loaded, select File => New => Default Web Project from the menu.

Figure 1

This will bring up the Project Wizard, which is where we can configure all the properties for our project. The first screen sets the project's name and root directory. Enter "blog" in the Project name text field. Accept the default location for the project root.

The project root defaults to the location of your current workspace, which is normally best. Click Next to continue.

Figure 2

The second page of the wizard is the Import JavaScript Library screen. Aptana Studio supports many of the most popular JS frameworks in use today. Select Prototype 1.6.0.1 and hit Next.

Figure 3

You can skip the Host screen as we don't require hosting services.

Figure 4

Hit the Finish button to complete the creation of the blog project. Our new project will appear in the Project pane, on the left-hand side of the studio. The project includes a lib folder, which contains the prototype library, an index.html file, and a prototype_sample.htm page. If you're familiar with Prototype, you can delete the Prototype sample.

Figure 5

The post files will reside in the posts subfolder. You can create a folder by right-clicking the blog project icon in the Project pane, and selecting New => Folder from the popup menu.

Figure 6

The New Folder dialog allows you to choose the parent folder and a name for the new folder. Leave the "blog" root as the parent and enter "posts" in the Folder name text field. Click OK to create the new folder:

Figure 7



The blog.html Page

Now we'll modify the index.html page to display the posts.

First, we'll rename it to something a little more descriptive. Right-click the index.html file in the Project pane and select Rename from the popup menu. That will change the name label into an editable textbox. Rename the file to "blog.html" and hit Enter to effectuate the name change.

Figure 8

Double-click the blog.html file to open it in the editor. The title and page heading can be updated to "The Blog Page". Next, we need to assign the init() JavaScript function to the <BODY> tag's onserverload event. As you type in the <BODY> tag, a dropdown list will appear with a list of available events. Choose onserverload from the list and enter "init()" between the quotes to set the event action:

The Server-side JavaScript Code

The init() function will read all the files in the posts folder and format them as HTML using the Showdown JS library, which is a JavaScript port of the Markdown text-to-HTML conversion tool. First, we'll add code to create a <DIV> element to the page: