|
||||||||||||||||
| Server-side Save | ||||||||||||||||
|
In this approach, the idea is to
exploit the fact that, when you submit a form to a zeroCode
application without associating a UDM with the form’s action
URL, the application simply ‘echoes’ the submitted data
elements along with the corresponding values. This means, for
example, that if your submitted form has an element named foo,
then the response HTML page can refer to the FreeMarker variable
${foo} to obtain the value of the form element. This is a
specific feature built into zeroCode, to support the currency of
data over multiple pages. This feature increases the
maintainability of the generated application by reducing the
extent of global variables. Here is a diagram that illustrates
the idea.
|
||||||||||||||||
|
|
|||||||||||||||
|
<html> <body> <form method="post" action="wiz2.html"> Last name:<input type=text name="lastName"><br> <input type="submit"> </form> </body> </html> |
<html> <body> You typed ${lastName}. </body> </html> |
|||||||||||||||
|
When the screen shown in at top left (created with the HTML at
bottom left) is submitted, the response at top right is obtained.
The HTML template used to produce the response is shown at bottom
right. Note that there are no UDMs needed to produce this effect.
|
||||||||||||||||
| As a more complex example, here is a three-step wizard that uses FreeMarker tags for decision-making, and uses hidden fields to propagate its data elements. | ||||||||||||||||
|
|
||||||||||||||||
|
||||||||||||||||
| The HTML templates for the three steps are shown below. Note the following: | ||||||||||||||||
| Numerical encodings are used for the ‘age group’ field in step 1, and a switch is used to decode it in step 3. | ||||||||||||||||
| Hidden fields are used in step 2 to propagate the data from step 1 forward into step 3. | ||||||||||||||||
| You can incorporate decision logic to emit different HTML based on data values, using either JavaScript (which executes on the client) or FreeMarker (which executes on the server). Both approaches are illustrated here: the JavaScript at the top of step 2 emits conditional HTML, as do the FreeMarker <if> and <switch> structures in steps 2 and 3. | ||||||||||||||||
| Step 1: | ||||||||||||||||
|
<html> <head> <title>zeroCode wizard, step 1</title> </head> <body> <h3>zeroCode wizard, step 1</h3> Please provide some identification. <form action="wizard-2.html" method="post"> <table summary=""> <tr> <td>Last name:</td> <td><input type="text" name="lastName"></td> </tr> <tr> <td>Gender:</td> <td> <table summary=""> <tr> <td><input type="radio" name="gender" value="m">Male</td> </tr> <tr> <td><input type="radio" name="gender" value="f" checked>Female</td> </tr> </table> </td> </tr> <tr> <td>Age group:</td> <td> <table summary=""> <tr> <td> <select name="ageGroup"> option value="15">15 years or younger</option> <option value="30">16 to 30</option> <option value="50">31 to 50</option> <option value="100">51 or older</option> </select> </td> </tr> </table> </td> </tr> <tr> <td colspan=2><input type=submit value="Next>>"></td> </tr> </table> </form> </body> </html> |
||||||||||||||||
| 1 |
2
|