WebSpeed
Developer’s Guide


Managing Dynamic Pages with Forms

You can use embedded SpeedScript to manage GET and POST requests for forms. The browse.html template provided in install-path/src/web2/template shows how you can do this. By default, this template generates a Web object that browses the Customer table of the Sports2000 database, using SalesRep as a query filter.

You can also generate a copy of browse.html by choosing File New Report Template in the AppBuilder.

Defining Local Data and Getting Input

The following sections describe several sections of this template. A <SCRIPT> tag introduces the first SpeedScript references in the HTML body (edited for brevity):

browse.html
<HTML>
   .
   .
   .
<SCRIPT language="SpeedScript">

  /* Modify the "&SCOPE-DEFINE..." lines to customize this browse. */

  &SCOPED-DEFINE Query-Table    Customer  
  &SCOPED-DEFINE Query-Field    Name    
  &SCOPED-DEFINE Query-Index    Name
  &SCOPED-DEFINE Filter-Field   Salesrep
  &SCOPED-DEFINE Display-Fields "<TR><TD>" Name "</TD><TD>" 
    Cust-num "</TD></TR>"
  &SCOPED-DEFINE Result-Rows    10  DEF VAR jumpto-value AS CHAR NO-UNDO.
  DEF VAR {&Filter-Field}-key AS CHAR NO-UNDO.
  DEF VAR repo-to AS INTEGER NO-UNDO.
  DEF VAR i-count AS INTEGER NO-UNDO.
  DEF VAR JumpForm AS CHAR NO-UNDO.
  DEF VAR TmpUrl AS CHAR NO-UNDO.
  DEF VAR DelimiterField AS CHAR NO-UNDO.

  /* Get all the fields from the input */
  ASSIGN
    JumpForm = get-field("NoJumpForm":U)
    jumpto-value = get-field("jumpto-name":U)
    repo-to = INTEGER(get-field("repo-to":U)) NO-ERROR.
    {&Filter-Field}-key = get-field("{&Filter-Field}":U).

  /* Display "Jump To" Form.  This form will not be displayed if
     "NoJumpForm=yes" requested */
  IF JumpForm eq "":U THEN DO:
</SCRIPT> 

Here, the file defines the local Web object environment, including customizable preprocessor definitions. Several calls to the get-field API function return user input for each request. Of particular interest is the get-field("NoJumpForm":U) call that returns a URL query string value. This initial script section terminates by testing this value to determine whether to generate a form to output on the next request. Note that the SpeedScript terminates with a DO statement header, thus beginning a SpeedScript DO block.

Defining Forms

Next comes an HTML form section that includes embedded SpeedScript expression escapes. This “Jump to” form allows the user to specify a starting Customer Name other than the default (the first) in alphabetical order:

browse.html
<FORM ACTION="‘SelfURL‘" METHOD="POST" NAME="JumpForm">
    <INPUT TYPE="hidden" NAME="repo-to" VALUE="-1000"><INPUT
    TYPE="hidden" NAME="sales-rep"
    VALUE="‘{&amp;Filter-Field}-key‘"><P><!--webbot
    BOT="HTMLMarkup" STARTSPAN --><CENTER><!--webbot BOT="HTMLMarkup"
    ENDSPAN --><STRONG>Jump to: <INPUT TYPE="text" SIZE="20"
    NAME="jumpto-name" VALUE="‘jumpto-value‘"><INPUT
    TYPE="submit" NAME="submit-jumpto" VALUE="Submit"> <!--webbot
    BOT="HTMLMarkup" STARTSPAN --></CENTER><!--webbot BOT="HTMLMarkup"
    ENDSPAN --></STRONG></P>
    <HR>
</FORM> 

NOTE: The <!--webbot ... --> comments are added to work around certain defaults enforced by Microsoft FrontPage. For more information, see the Microsoft documentation on FrontPage.

SelfURL is a WebSpeed global variable provided in install-path/src/web/method/cgidefs.i that contains the URL of this Web object, relative to the server root directory. {&amp;Filter-Field}-key is a local Web object variable (defined earlier) that specifies the filter for a database query. The embedded SpeedScript preprocessor changes ’&amp;’ to ’&’ so a legal SpeedScript preprocessor reference ({&Filter-Field}) appears in the Web object source code. Finally, jumpto-value is the most recent Customer Name specified by the user to start the query.

Note that the embedded SpeedScript preprocessor turns this entire HTML form section into SpeedScript statements that appear in the DO block started earlier.

Managing SpeedScript Blocks and Conditional Execution

The next section is a small script section that begins by closing this DO block:

browse.html
<SCRIPT language="SpeedScript">
  END. /* Close of "IF JumpForm eq "":U THEN DO:" */

  /* Display "Results List" if "Jump To" Form posted or
     "NoJumpForm=yes" requested */
  IF repo-to ne 0 OR JumpForm ne "":U THEN DO:
</SCRIPT>

<P ALIGN="center"><STRONG>Results List:</STRONG></P>
<DIV ALIGN="center"><CENTER>

<TABLE BORDER="2"> 

This script section ends by starting another DO block if the Web object is either handling a POST from the form or running without generating the form. Note that the “Jump to” form includes hidden fields, including repo-to with a nonzero value to indicate that the form was displayed and the user is submitting it to return a query. This DO block begins with HTML preprocessed into SpeedScript to start a centered HTML table that handles the query output 10 items (Result-Rows) at a time.

The next script section includes the actual query code included in the DO block to resolve, reposition, and output the query rows, based on user input. To simplify embedded SpeedScript interaction between SpeedScript and HTML, this SpeedScript code also includes the necessary HTML to specify each row of the HTML table for the query. The table row is specified by the preprocessor reference {&Display-Fields}, which is defined in the first script section of the embedded SpeedScript file. (The actual query resolution and output is beyond the scope of this description. For more information, see the install-path/src/web/browse.html template.)

Following the query resolution and output section is another mixture of HTML and embedded SpeedScript code that concludes the query DO block:

browse.html
</TABLE>
</CENTER></DIV><SCRIPT LANGUAGE="SpeedScript">
    /* If Not the End of the Query, Increment Reposition pointer
       for Navigation.  If End of Query, force Query to start from
       beginning */
    IF AVAILABLE {&Query-Table}
      THEN repo-to = CURRENT-RESULT-ROW("Browse-Qry":U) + 1.
      ELSE repo-to = -1.

  END. /* Close of "IF repo-to ne 0 OR JumpForm ne "":U THEN DO:" */

  /* Display Navigation Links unless we are waiting for the very 
     first "Jump To" to be submited */
  IF repo-to ne 0 THEN DO:
    TmpUrl = url-format(?,’jumpto-name,{&Filter-field},NoJumpForm’,?).
    IF INDEX(TmpUrl,"?") > 0
      THEN DelimiterField = ?.
      ELSE DelimiterField = "?".
</SCRIPT> 

This section also starts another DO block that begins by setting up the initial contents of the URL query string for any following request driven by a navigation panel (yet to be output).

Building URL Query Strings and Closing Out the Page

The final section completes the last DO block by sending out the navigation panel at the end of the Web page:

browse.html
<DIV
ALIGN="center"><CENTER>

<TABLE BORDER="2">
  <TR>
      <TD><A
      HREF="‘TmpUrl%20+%20url-field(’repo-to’,’1’,DelimiterField)‘"
      onmouseover="window.status=’First ‘{&amp;Result-Rows}‘’;return true"
      onmouseout="window.status=’’;return true"><IMG
      SRC="/webspeed/images/first-au.gif" BORDER="0" WIDTH="16"
      HEIGHT="16"></A></TD>
      <TD><A
      HREF="‘TmpUrl%20+%20url-field(’repo-to’,string(repo-to%20-%20({&amp;
        result-rows}%20*%202)),DelimiterField)‘"
      onmouseover="window.status=’Prev ‘{&amp;Result-Rows}‘’;return true"
      onmouseout="window.status=’’;return true"><IMG
      SRC="/webspeed/images/prev-au.gif" BORDER="0" WIDTH="16"
      HEIGHT="16"></A></TD>
      <TD><A
      HREF="‘TmpUrl%20+%20url-field(’repo-to’,string(repo-to),
        DelimiterField)‘"
      onmouseover="window.status=’Next ‘{&amp;Result-Rows}‘’;return true"
      onmouseout="window.status=’’;return true"><IMG
      SRC="/webspeed/images/next-au.gif" BORDER="0" WIDTH="16"
      HEIGHT="16"></A></TD>
      <TD><A
      HREF="‘TmpUrl%20+%20url-field(’repo-to’,’-999’,DelimiterField)‘"
      onmouseover="window.status=’Last ‘{&amp;Result-Rows}‘’;return true"
      onmouseout="window.status=’’;return true"><IMG
      SRC="/webspeed/images/last-au.gif" BORDER="0" WIDTH="16"
      HEIGHT="16"></A></TD>
  </TR>
</TABLE>
</CENTER></DIV><SCRIPT LANGUAGE="SpeedScript">
  END. /* Close of "IF repo-to ne 0 THEN DO:" */
</SCRIPT>
</BODY>
</HTML> 

The onmouseover and onmouseout references specify JavaScript event handlers.

The navigation panel is built from an HTML table that includes GIF buttons associated with anchors back to this Web object. Each anchor contains a URL query string that specifies how to reconstruct and navigate the most recent query. The query DO block described earlier interprets this information. Note the use of %20 to enter spaces into each embedded SpeedScript expression escape that specifies a URL query string. This is inserted by the authoring tools and specifies the space that is required around SpeedScript string (+) and arithmetic (-) operators used to construct the query string. The embedded SpeedScript preprocessor replaces these with actual spaces in the Web object source code. Finally, a small script section terminates the navigation panel DO block followed by the final HTML tags.

From this description, you can see that an embedded SpeedScript file can generate practically any variety and size of Web page imaginable. In this sense, an embedded SpeedScript Web page can be seen to shrink and expand as it responds to user input and generates database output. With the basic input/output logic written, you can then make any adjustments to account for the server-side realities of Web object execution.


Copyright © 2004 Progress Software Corporation
www.progress.com
Voice: (781) 280-4000
Fax: (781) 280-4095