Creating Personalized Output

In the last lesson you created a simple servlet capsule that sent HTML-formatted output to a browser. Now you are going to modify the capsule you built so that it sends customized output, depending on information given to it by the user. This servlet asks the user their name, and then greets them with it.

If you did not create and save a capsule in the previous lesson, you can open the capsule AppComposer/docs/manuals/tutorials/resources/helloServlet.zac to begin this exercise.

The goals for this section include:

• Adding a parameter to the servlet
• Creating a new behavior
• Learning more about editing behaviors

In order to make the servlet interactive, you need to edit the servlet capsule so that it can receive input from a browser. The servlet capsule has to accept that input, process it, and send the appropriate output back to the user. Once you have edited the servlet so that it can do all this, you can use some of AppComposer's testing tools to verify that you set up the servlet correctly.

To add a servlet parameter:

1. Open the hello.zac capsule in AppComposer.
   
2. Select the capsule in the outline.
3. Scroll down in the Details pane until you see the field labeled Servlet Parameters .
4. Click the plus sign over the Servlet Parameters field.
5. In the dialog box, enter username
6. Click OK.
   Your editor should look similar to this:
   
7. Close the editor.

You have edited the servlet properties so that the servlet capsule expects a parameter called username. This parameter will come from an HTML form field that the user fills in.

Creating a New Behavior

You need to edit GreetingText so that it can add the content from username to the HTML greeting it sends in reply to the user's form submission.

To edit GreetingText:

1. Select GreetingText in the outline.
2. In the Text field of the Details pane, erase world! but leave a space after Hello, .

GreetingText now has half of its message. It still needs to get the user's name from the username parameter posted by the client browser. You need to add a behavior to GreetingText so that it can find the user's name and add it to its greeting.

To add a new behavior:

1. Make sure GreetingText is selected in the outline.
2. From the Palette, choose an action behavior.
   Behaviors -> Action
3. Name the action add username.

So far, the add username behavior does not actually do anything. If you look in the Details pane, you see that most of its fields are empty. You need to define what add username does, which is taking the value of the username parameter and adding it to GreetingText.

To define a new behavior:

1. Look at the details for add username.
   
   You will define this behavior by filling in its properties fields.
2. The Stimulus area at the top contains several fields. The top one reads Activate On. This means the behavior activates on an event that you specify in the remaining fields. Click on the wedge to the far right of the stimulus area.
   
   When you click this wedge, AppComposer shows you several aliases at the top of a pop-up, and a representation of the capsule outline in the lower part of the pop-up. Aliases resolve to the behavior's actor, parent or capsule, respectively. When you use aliases in defining a behavior instead of absolute paths or names, you can reuse the same behavior for other actors or capsules without having to do a lot of editing.
   One unusual feature of this window are red-colored A's next to the actor and parent aliases, and GreetingText. This notation means that those elements resolve to the actor the behavior belongs to - in this case GreetingText. These notations can be helpful if you are not sure if you can use an alias, or which one would resolve correctly for you.
3. Click on the actor alias at the top to fill in actor to the From: field.
4. Click the pop-up wedge next to the Receive field and choose WhenOutput -> whenOutput
   This means that addUsername activates when GreetingText is output by the capsule.
5. Click the wedge to the right of the Message field. You want to add the username to the end of the Hello, message, so choose appendText.
   Notice how the Data field automatically filled in: (String, String). This is the default setting for appendText, but you only want to add one string, the username parameter.
6. Click the wedge to the right of Data, and choose: (String).
7. The last field, labeled Const: determines the value of the String Data field. Since this value is given by the user, you cannot use a constant. You need to evaluate the content of a parameter instead. Click the Const: button to toggle it to Eval:.
8. Click the wedge to the right of Eval.
9. Select the capsule alias, and choose getParameter("username").
   AppComposer knows that you added a username parameter to the capsule parameter list, so it automatically includes it in your list of options.
   The Details pane should look like this:
   
   

You have just created a new behavior. As you can see, AppComposer makes this very easy. AppComposer provides you with choices that help build each field you set, and you can manually enter or edit the field contents. As long as you define all of your methods, parameters and variables somewhere in the capsule, you can use them to define behaviors.

As a result of this behavior, GreetingText can look at the content of the username parameter and add it to the end of its Hello, greeting. But so far username has no value. The servlet will receive this value from an HTML form, so you need to modify the ServletGet behavior to be able to receive it.

ServletGet responds to HTML GET requests from browsers. But since the data from the user will come in an HTML form, you need to edit ServletGet so that instead of responding to GET requests from a browser, it can respond to POST requests. Most HTML forms use POST requests to send their data to a server.

To Configure a Post Response:

1. Select ServletGet in the outline.
2. Change the Receive: setting from ServletRequest.doGet to ServletRequest.doPost.
   
3. In the outline, change the name of ServletGet to ServletPost.
   You capsule outline should look like this:
   

You have added all of the necessary behaviors and parameters to your servlet capsule. You are ready to test it now to ensure that it all works as you want it to. But how can you test this without an HTML form for a user to fill out? You have not created a form for this yet.

AppComposer's debug web server provides a tool for just this situation. You can use it to test parameters that a user or another servlet might pass to this one, even if you have not yet created an HTML front-end or the other servlets it needs to work with. The next section walks you through using the debug web server to test servlet parameters.