![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
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.
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.
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
(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
(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
(Click to see a detailed description of this figure.)
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
(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
(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.
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
(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
(Click to see a detailed description of this figure.)
This completes the creation of the data entry form.
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
(Click to see a detailed description of this figure.)
This concludes creation of the data entry Web page.
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
(Click to see a detailed description of this figure.)
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.
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.
Learn
- Keep up with the development community for
WebSphere sMash at Project zero.
- See more about WebSphere sMash in the zone on
developerWorks.
- Learn more about the Apache Derby project.
- See the documentation for
WebSphere sMash.
- Check out My
developerWorks where you can find or create groups, blogs, and
activities about WebSphere sMash, Web Development, or anything else that
interests you.
Get products and technologies
- Download IBM WebSphere sMash from the Project Web
site.
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.
Table of contents
Next steps from IBM
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
