Step 4: Defining a Layout 
Step 4: Defining a Layout
Prerequisites
Procedure
To create the layout for the first template (
INITIAL ), insert the following form definition between the <body> and</body> tags:<!-- Form definition --> <form ACTION=" `wgateURL()` " METHOD="POST"><br> <table> <tr> <td>From   </td> <td><INPUT TYPE="TEXT" NAME="FromCity" Value="FRANKFURT"></td> <td>   Country   <INPUT TYPE="TEXT" NAME="FromCountry" Value="DE"SIZE=2 MAXLENGTH=2> </td> </tr> <tr> <td>To   </td> <td><INPUT TYPE="TEXT" NAME="ToCity" Value="NEW YORK"></td> <td>   Country   <INPUT TYPE="TEXT" NAME="ToCountry" Value="US" SIZE=2 MAXLENGTH=2></td> </tr> <tr> <td colspan=3> <br> <br> <!-- To raise a Flow Logic event clicking on the button --> <INPUT TYPE="SUBMIT" NAME="~Event" VALUE="Flights"> </td> </tr> </table> </form> |
To create the layout for the first template (
RESULTS ), insert the following source text between the <body> and</body> tags:<!-- BAPI RETURN message in case of error --> `if ( RETURN-TYPE == "E" )` `RETURN-MESSAGE` `else` <br> Flights from `FromCity` ( `FromCountry` ) to `ToCity` ( `ToCountry` ):<br> <br>`end` <!-- Listing output data --> <table border=0 cellspacing=0> <tr> <th>Flight ID</th> <th>Flight</th> <th>Flight date</th> <th>Departure time</th> </tr> `repeat with I from 1 to FLIGHTLIST-CARRID.dim` <tr> <td width=40 align=center> `FLIGHTLIST-CARRID[i]` </td><td width=60 align=center> `FLIGHTLIST-CONNID[i]` </td><td width=80 align=center> `FLIGHTLIST-FLDATE[i]` </td><td width=80 align=center> `FLIGHTLIST-DEPTIME[i]` </td></tr> `end` </table> |
Result
You have defined a simple representation of the interface for the two templates (without dialog logic) using HTML and HTMLBusiness.
In the next lesson:
Step 5: Implementing the Flow Logic