Webster+ How To Tutorials

How to Create a Webster+ Web Page Using a Text File

This tutorial explains how to create the Webster+ Web page shown below using short codes saved in a simple text file. Sample code is provided, followed by a line-by-line explanation.

Create the text file as follows:

Open a text editor, such as Notepad.

Copy and paste the following code:

     [ttl]Client File[/ttl]
     [form program=MyProg]
     Client ID:
     [input ClientID$ format="000000" tip="Enter Client #" event=FindClient]

     Name:
     [input Name$ len=30]

     Address:
     [input Address$ len=30]

     Address:
     [input City$ len=30]

     Balance:
     [input Balance format="-###,##0.00"]

     [button event=Save text="Save"]
     [button event=Delete text="Delete"]
     [/form]

Save this as a .txt file (e.g. HowTo.txt).

Code Explanation

This table explains each line of the above code:

Line	Description
[ttl]Client File[/ttl]	The [ttl]…[/ttl] short code sets the window or screen title to "Client File". If no HTML <title> tag exists on the page, the first [ttl] contents will be used. The contents of the short code will be displayed using the HTML class of 'fm_ttl', which by default is bold, larger (120%) font in a gray rectangle.
[form program=MyProg]	The [form] short code defines the beginning of the form container. When the form data is submitted, it will be passed to the specified program. The short code option [program=MyProg] defines the specified program, which can be a string variable or a quoted value.
Client ID:	"Client ID:" is the label. This label, along with the other prompts or labels below, could also have used the [show] short code and could have been entered in the format [show "Client ID:"].
[input ClientID$ format="000000" tip="Enter Client #" event=FindClient]	The *[input var…]* short code inserts an input field. The value of *var* specifies the related variable to receive and set the current value of the input. The short code option format="000000" enforces a 6-digit numeric input (leading zeros likely applied). The short code option tip="Enter Client #" provides a Help tooltip. The short code option event=FindClient triggers a lookup action when the user completes this field (e.g. presses Enter) to load the client's data.
Name: Address:	"Name:" and "Address:" are the labels.
[input Name$ len=30] [input Address$ len=30] [input City$ len=30]	The *[input var…]* short code inserts an input field. The short code option len=## sets the maximum length on the input to ## characters.
Balance:	"Balance:" is the label.
[input Balance format="-###,##0.00"]	The *[input var…]* short code inserts an input field. The short code option format="-###,##0.00" defines the displayed format for a currency or decimal value, including negative signs, thousands separators (comma), and exactly two decimal places.
[button event=Save text="Save"] [button event=Delete text="Delete"]	The short code option event=Save triggers the Save function in the MyProg program, typically writing the form data to a database. The event=Delete triggers the Delete function in the MyProg program, removing the current client's record.
[/form]	The [/form] short code defines the end of the form container.

Display in Webster+ (*obj/webbind Logic)

Webster+ can refer to this text file in the same manner as an HTML page. The URL can set pg $ equal to the text file name (e.g. pg$=HowTo.txt), as shown below. You can also define a link in Webster+ Setup with an Action of Webpage and an Associated Name of the text file name (e.g. HowTo.txt).

The *obj/webbind logic will automatically add this template in the "page Contents" section at run time.

          <!DOCTYPE html>
          <html lang="en">
          <head>

        <title>Client File</title>   (webbind converts [ttl]Client File[/ttl])

          </head>
          <body>…

          <div id="pageContents"><div><p>

          … (the text file is inserted here)

          </body>
          </html>

Webster+ How To Tutorials

Code Explanation

Display in Webster+ (*obj/webbind Logic)

See Also