Create Web applications using IBM WebSphere sMash DE

Simplify the creation of Web applications

IBM WebSphere® sMash Developer Edition 1.1 (DE) provides a Web-based development environment called App Builder that allows you to develop Web applications. Learn how to use this tool to create a simple online RSVP application that provides Atom feeds.

Share:

Yoav Rubin, Software engineer, IBM

Yoav Rubin has been working for the last 10 years at the IBM Haifa Research Lab as a software engineer and researcher. His main interests are web technologies, end user development, and usability.



Gal Shachor, STSM, IBM

Gal Shachor is an IBM Senior Technical Staff Member and researcher working at the IBM Haifa Research Lab, on various topics related to middleware and rich Internet applications.



Brandon J.W. Smith, Software Engineer, IBM

Brandon J. Smith holds a Master’s degree from Carnegie Mellon University. His interests are REST data services, Web-scale databases, and cloud computing.



11 August 2009

Also available in Chinese Japanese

Introduction

Develop skills on this topic

This content is part of a progressive knowledge path for advancing your skills. See Build RESTful web services with Java technology

Developing Web applications is sometimes a difficult task when starting from scratch. Overhead tasks such as database setup and user interface design require no small set of skills. To help, IBM has introduced WebSphere sMash DE with App Builder to provide you with a set of tools for creating applications while abstracting many tedious and sometimes difficult tasks. This reduces your mental burden, thus helping you keep your eyes on the prize—a running and working Web application.

An example of a commonly needed Web application is an RSVP system that allows you to invite your friends to an event and be notified of their intentions and needs. In this article, we will show you how to create such an application while demonstrating the benefits of the App Builder.


The scenario

For the sake of this article, let us pretend your friend’s 50th birthday is coming and you would like to invite friends and family to the party. You're a busy person, so you would like to send a link for a simple RSVP form to all the invitees and be notified each time a form is submitted.


Creating the application

Download IBM WebSphere sMash from the project Web site (see Resources) and follow the instructions there to correctly install it on your system. When that is complete, start the App Builder by issuing the following command from the command prompt:

appbuilder open

The App Builder will be opened in your browser and you will see a screen such as in Figure 1:

Figure 1. Initial screen
A screen shot of the App Builder Welcome screen. A menu labeled actions has various options, with 'Create new application' circled in red.

(Click to see a detailed description of this figure.)

The first thing to do is create a new application by clicking on the Create new application link (circled in Figure 1). In the new application dialog, name this application Birthday RSVP and click Create. The results will look similar to the screen shot in Figure 2.

Figure 2. Applications management screen
Another screenshot of the Application Builder, on the My Applications Screen.

(Click to see a detailed description of this figure.)

Now click on the link with the application name (circled in Figure 2) to move to the application editing view, as illustrated in the following figure:

Figure 3. Application editing
A screen shot of the application builder within the application view screen.

(Click to see a detailed description of this figure.)

Creating the data model

As the first component, define a Zero Resource Model (ZRM)—which is equivalent to a relational database table, but provides numerous services on top of it. In particular, ZRM provides a basic Atom feed service that we'll use later in this article.

To create the data model, open the New File menu (circled in red in Figure 3), and then select Create a Zero Resource Model (not based on a form). In the pop-up dialog that appears, name the model file invitation.json. App Builder will open the model editor as shown below in Figure 4.

Figure 4. Empty ZRM editor
A screen shot of the application builder with the ZRM editor.

(Click to see a detailed description of this figure.)

In the model editor, add the following fields to the model by clicking on the palette (circled in red in Figure 4):

  • String field — for the invitee name
  • Boolean field — to state whether the invitee spouse comes along, too
  • String field — to add various remarks

When completed, the editor should look like Figure 5 below.

Figure 5. ZRM Editor with fields
The editor page from figure 4 is pictured again, but now the list of Fields is populated with several entries named string1, boolean1, and string2.

(Click to see a detailed description of this figure.)

Next, set the various properties of the fields by pressing on the properties icon (pointed out by the red arrow in Figure 5) and set the following attributes for each field:

  • For the first string field, set its name to name and its label to Enter your name, and check the Required checkbox.
  • For the boolean field, set its name to withSpouse and its label to Arriving with spouse.
  • For the second string field, set its name to comments and its label to Additional comments.

The model is now complete. The ZRM framework will automatically create a backing database to store data instances of this model definition. Also by default, ZRM will use a Derby database unless you provide configuration to use another supported database. For the purposes of this article, we will accept the Derby default.

Create the database table for this resource by going to the Console tab (circled in yellow in Figure 3) and typing the following command in the command prompt:

zero model sync

You will see console messages confirming that the Derby database table is created.

Lastly, create the HTTP resource handler for this model. In the New File menu, select Create a Resource Handler. Name it invitation.groovy and set its content to be ZRM.delegate().

You have successfully created the data model.

Creating the form

The invitation form is the user interface of the data model you just created. Therefore you can create a form based on that model and just configure its appearance to a specific event.

Begin by selecting "create a Zero resource form based on a model" in the New File menu. Name it rsvp.json and set its model to be invitation.json, as shown in Figure 6.

Figure 6. New form based on model
The 'New form based on a model' configuration window.

(Click to see a detailed description of this figure.)

This will open the form editor. In the form editor, set the title of the form to be Welcome to the party and the description to be Please fill up this RSVP form. The editor should now look similar to Figure 7.

Figure 7. Form editor
The Application Builder window shows a form titled 'Welcome to the party' with a message 'Please fill up this RSVP form.'

(Click to see a detailed description of this figure.)

This completes the creation of the data entry form.

Creating the invitation page

Now you create a Web page to hold the form that the invitees will use to enter the needed information.

Begin by selecting Create an HTML file in the New File menu. Name it invitation.html.

Next, add a ZRM form element. This can be found in the Zero section of the palette, which runs down the right side of the edit window. Edit the form properties by right clicking on it and selecting Properties in the pop-up menu. Enter ./zero/forms/rsvp.json into the Relative URI to form model file: field. The result should look like Figure 8 below.

Figure 8. HTML page editor
The HTML page editor with the 'Welcome to the party' overlay form.

(Click to see a detailed description of this figure.)

This concludes creation of the data entry Web page.

Running the application

All that remains is to run the application. Just press Start (circled with green in Figure 3). Finally, send the following link to all your invitees: http://[your-server]:8080/invitation.html.

When they open this link, they will see the page as shown in Figure 9 below.

Figure 9. The form as viewed by the user
A screen shot shows a browser pointed to 'http://localhost:8080/invitation.html' with our form in the middle and the Submit and Clear options.

(Click to see a detailed description of this figure.)

Receiving atom feeds

In order to be notified upon each RSVP form submission, add the following URL to your favorite feeds reader: http://[your-server]:8080/resources/invitation?format_as=atom. You will see the notifications as they come in.


Summary

IBM WebSphere sMash and the Web-based App Builder are a powerful duo that enables users with programming skills to create Web applications appropriate for their needs with minimal requirements for database and form design. This article provided only a glimpse into the capabilities. Take some time to experiment with these tools, and you will see how they are starting to realize the long-promised vision of creating programs without programming.

Resources

Learn

Get products and technologies

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=420126
ArticleTitle=Create Web applications using IBM WebSphere sMash DE
publish-date=08112009