Generating HTML

You can use the data in a DataWindow object to create HyperText Markup Language (HTML) syntax. Once the HTML has been created, you can display it in a Web browser.

Techniques you can use

You can use any of several techniques to generate HTML from a DataWindow object.

In a painter

In both the DataWindow painter and the Output view in the Database painter, you can save retrieved data in HTML format. To do this in the DataWindow painter, select File>Save Rows As from the menu. In the Database painter, open the Output view, then select Rows>Save Rows As from the menu. In both painters, specify HTML Table as the format for the file.

In your application code

You can obtain an HTML string of the DataWindow presentation and data from the Data.HTMLTable property. You can save the string in a variable and modify the HTML with string manipulation operations. In PowerBuilder, you can also use the FileOpen and FileWrite functions to save the HTML to a file.

The HTMLTable property has its own properties which you can set to control the HTML attributes and style sheet associated with the Table HTML element.

PowerBuilder only

In PowerBuilder, there are two more techniques available to you. You can:

  • Call the SaveAs method to save the contents of a DataWindow directly to a file on disk. To save the data in HTML format, you need to specify HTMLTable as the file type when you call SaveAs.

  • Call the GenerateHTMLForm method to create an HTML form from data contained in a DataWindow control or DataStore whose DataWindow object uses the Freeform or Tabular presentation style.

Choosing presentation styles

Some DataWindow presentation styles translate better into HTML than others. The following presentation styles produce good results:

Tabular
Group
TreeView
Freeform
Crosstab
Grid

The Composite, Graph, RichText, and OLE 2.0 presentation styles produce HTML output that is based on the result only, and not on the presentation style. DataWindows that have overlapping controls might not produce the expected results. Nested reports are ignored; they are not included in the generated HTML.

Example

This example illustrates how you might use DataWindow-generated HTML in an application.

The key line of code gets the HTML from the DataWindow by referring to its HTMLTable property. In PowerBuilder, you can use the Describe method or a property expression.

PowerBuilder

ls_htmlstring = dw_1.Object.DataWindow.Data.HTMLTable

The complete example that follows is implemented in PowerBuilder.

The window below displays customer data in a tabular DataWindow object. By pressing the Browse button, the user can translate the contents of the DataWindow object into HTML format and invoke a Web browser to view the HTML output. By pressing the Select Browser button, the user can tell the application which Web browser to use:

A sample titled Customer Form is shown with four columns of data: customer ID, First Name, Last Name, and Company Name. To the right of the data are two buttons, Select Browser and Browser. A second sample screen displays the same content in a Netscape window titled Data Window - c_cust list - Netscape. Below a standard Netscape menu bar and toolbar is displayed the location of the sample file d_custlist dot htm.

Script for the Select Browser button

The script for the Select Browser button displays a dialog box where the user can select an executable file for a Web browser. The path to the executable is stored in is_Browser, which is an instance variable defined on the window:

String ls_BrowserName
Integer li_Result

// Open the dialog to select a browser.
li_Result = GetFileOpenName("Select Browser",  &
      is_Browser, ls_BrowserName,  &
      "exe", "Executable Files (*.EXE),*.EXE")

IF li_Result = -1 THEN
      MessageBox("No Browser", "No Browser selected")
END IF

Script for the Browse button

The script for the Browse button creates an HTML string from the data in the DataWindow by assigning the Data.HTMLTable property to a string variable. After constructing the HTML string, the script adds a header to the HTML string. Then the script saves the HTML to a file and runs the Web browser to display the output.

String ls_HTML, ls_FileName, ls_BrowserPath
Integer li_FileNumber, li_Bytes, 
Integer li_RunResult, li_Result

// Generate the HTML.
ls_HTML = dw_1.Object.DataWindow.Data.HTMLTable
IF IsNull(ls_HTML) Or Len(ls_HTML) <= 1 THEN
      MessageBox ("Error", "Error generating HTML!")
      Return
ELSE
      ls_HTML ="<H1>HTML Generated From a DataWindow"&
         + "</H1><P>" + ls_HTML
END IF

//Create the file.
ls_FileName = "custlist.htm"
li_FileNumber = FileOpen(ls_FileName, StreamMode!, &
      Write!, LockReadWrite!, Replace! )

IF (li_FileNumber >= 0) THEN   
      li_Bytes = FileWrite(li_FileNumber, ls_HTML)
      FileClose(li_FileNumber)
      IF li_Bytes = Len(ls_HTML) THEN   
         // Run Browser with the HTML file.
         IF Not FileExists(is_Browser) THEN
            cb_selbrowser.Trigger Event Clicked()
            IF NOT FileExists(is_Browser) THEN
               MessageBox("Select Browser", "Could & 
                  not find the browser.")
               RETURN
            END IF
         END IF
         li_RunResult = Run(is_Browser + " file:///"+&
            ls_FileName)
         IF li_RunResult = -1 THEN   
            MessageBox("Error", "Error running browser!")
         END IF
      ELSE
         MessageBox ("Write Error", &
            "File Write Unsuccessful")
      END IF
ELSE
      MessageBox ("File Error", "Could not open file")
END IF

Controlling display

You control table display and style sheet usage through the HTMLTable.GenerateCSS property. The HTMLTable.GenerateCSS property controls the downward compatibility of the HTML found in the HTMLTable property. If HTMLTable.GenerateCSS is FALSE, formatting (style sheet references) is not referenced in the HTMLTable property; if it is TRUE, the HTMLTable property includes elements that reference the cascading style sheet saved in HTML.StyleSheet.

This screen shows an HTML table in a browser using custom display features:

HTMLTable.GenerateCSS is TRUE

If the HTMLTable.GenerateCSS property is TRUE, the HTMLTable element in the HTMLTable property uses additional properties to customize table display. For example, suppose you specify the following properties:

HTMLTable.NoWrap=Yes
HTMLTable.Border=5
HTMLTable.Width=5
HTMLTable.CellPadding=2
HTMLTable.CellSpacing=2

Describe, Modify, and dot notation

You can access these properties by using the Modify and Describe PowerScript methods or by using dot notation.

The HTML syntax in the HTMLTable property includes table formatting information and class references for use with the style sheet:

<table cellspacing=2 cellpadding=2 border=5 width=5>
 <tr>
 <td CLASS=0 ALIGN=center>Employee ID
 <td CLASS=0 ALIGN=center>First Name
 <td CLASS=0 ALIGN=center>Last Name
 <tr>
 <td CLASS=6 ALIGN=right>102
 <td CLASS=7>Fran
 <td CLASS=7>Whitney
</table>

HTMLTable.GenerateCSS is FALSE

If HTMLTable.GenerateCSS is FALSE, the DataWindow does not use HTMLTable properties to create the Table element. For example, if GenerateCSS is FALSE, the HTML syntax for the HTMLTable property might look like this:

<table>
 <tr>
 <th ALIGN=center>Employee ID
 <th ALIGN=center>First Name
 <th ALIGN=center>Last Name
 <tr>
 <td ALIGN=right>102
 <td>Fran
 <td>Whitney
</table>

Merging HTMLTable with the style sheet

The HTML syntax contained in the HTMLTable property is incomplete: it is not wrapped in <HTML></HTML> elements and does not contain the style sheet. You can write code in your application to build a string representing a complete HTML page.

PowerBuilder example

This example sets DataWindow properties, creates an HTML string, and returns it to the browser:

String ls_html
 ds_1.Modify  &
 ("datawindow.HTMLTable.GenerateCSS='yes'")
 ds_1.Modify("datawindow.HTMLTable.NoWrap='yes'")
 ds_1.Modify("datawindow.HTMLTable.width=5")
 ds_1.Modify("datawindow.HTMLTable.border=5")
 ds_1.Modify("datawindow.HTMLTable.CellSpacing=2")
 ds_1.Modify("datawindow.HTMLTable.CellPadding=2")
 ls_html = "<HTML>"
 ls_html +=  &
       ds_1.Object.datawindow.HTMLTable.StyleSheet
 ls_html += "<BODY>"
 ls_html += "<H1>DataWindow with StyleSheet</H1>"
 ls_html += ds_1.Object.DataWindow.data.HTMLTable
 ls_html += "</BODY>"
 ls_html += "</HTML>"
 return ls_html

This technique provides control over HTML page content. Use this technique as an alternative to calling the SaveAs method with the HTMLTable! Enumeration.

Calling the SaveAs method

As an alternative to creating HTML pages dynamically, you can call the SaveAs method with the HTMLTable! Enumeration:

ds_1.SaveAs  &
       ("C:\TEMP\HTMLTemp.htm", HTMLTable!, TRUE)

This creates an HTML file with the proper elements, including the style sheet:

<STYLE TYPE="text/css">
 <!--
 .2 {COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:9pt "Arial", sans-serif;TEXT-DECORATION:none}
  
 .3{COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:8pt "MS Sans Serif", sans-serif;TEXT-DECORATION:none}
  
 .3{COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:8pt "MS Sans Serif", sans-serif;TEXT-DECORATION:none}
 -->
 </STYLE>
  
 <TABLE nowrap cellspacing=2 cellpadding=2 border=5 width=5>
 <tr>
       <td CLASS=2 ALIGN=right>Employee ID:
       <td CLASS=3 ALIGN=right>501
 <tr>
       <td CLASS=2 ALIGN=right>Last Name:
       <td CLASS=3>Scott
 <tr>
       <td CLASS=2 ALIGN=right>First Name:
       <td CLASS=3>David
 <tr>
       <td CLASS=2 ALIGN=right>Status:
       <td CLASS=3>Active
 </TABLE>

Displaying DataWindow objects as HTML forms

The GenerateHTMLForm method creates HTML form syntax for DataWindow objects. You can create an HTML form that displays a specified number of columns for a specified number of rows. Note the following:

  • You create HTML form syntax by calling the GenerateHTMLForm method for the DataWindow control or DataStore

  • The GenerateHTMLForm method creates HTML form syntax for the detail band only

  • Embedded nested DataWindows are ignored; they are omitted from the generated HTML

Presentation styles

Although the GenerateHTMLForm method generates syntax for all presentation styles, the only styles that create usable forms are Freeform and Tabular.

The following HTML page shows a freeform DataWindow object converted into a form using syntax generated by the GenerateHTMLForm method:

A sample Internet Explorer browser window displays a form that contains three text input elements that are labeled employee ID, Last Name, and First Name, and three radio input elements for indicating status. They are labeled Active, Terminated, and On Leave, and the Active button is selected.

Edit style conversion

The GenerateHTMLForm method converts column edit styles into the appropriate HTML elements:

Column edit style

HTML element

CheckBox

Input element specifying TYPE=CHECKBOX

DropDownDataWindow

Select element with a single Option element

DropDownListBox

Select element with one Option element for each item in the DropDownListBox

Edit

Input element specifying TYPE=TEXT

RadioButton

Input element specifying TYPE=RADIO


Generating syntax

To generate HTML form syntax, you call the GenerateHTMLForm method:

instancename.GenerateHTMLForm ( syntax, style, action { , startrow, endrow, startcolumn, endcolumn { , buffer } } )

The method places the Form element syntax into the syntax argument and the HTML style sheet into the style argument, both of which are passed by reference.

Static texts in freeform DataWindow objects

All static texts in the detail band are passed through to the generated HTML form syntax. If you limit the number of columns to be converted using the startcolumn and endcolumn arguments, remove the headers from the detail band for the columns you eliminate.

Here is an example of the GenerateHTMLForm method:

String   ls_syntax, ls_style, ls_action
 String   ls_html
 Integer li_return
 ls_action =  &
       "/cgi-bin/pbcgi60.exe/myapp/uo_webtest/f_emplist"
 li_return = ds_1.GenerateHTMLForm  &
       (ls_syntax, ls_style, ls_action)
 IF li_return = -1 THEN
       MessageBox("HTML", "GenerateHTMLForm failed")
 ELSE
       // of_MakeHTMLPage is an object method,
       // described in the next section.
       ls_html = this.of_MakeHTMLPage  &
          (ls_syntax, ls_style) 
 END IF

After calling the GenerateHTMLForm method, the ls_syntax variable contains a Form element. Here is an example:

<FORM ACTION=
       "/cgi-bin/pbcgi60.exe/myapp/uo_webtest/f_emplist" 
       METHOD=POST>
 <P>
 <P><FONT CLASS=2>Employee ID:</FONT>
 <INPUT TYPE=TEXT NAME="emp_id_1" VALUE="501">
  
 <P><FONT CLASS=2>Last Name:</FONT>
 <INPUT TYPE=TEXT NAME="emp_lname_1" MAXLENGTH=20 VALUE="Scott">
  
 <P><FONT CLASS=2>First Name:</FONT>
 <INPUT TYPE=TEXT NAME="emp_fname_1" MAXLENGTH=20 VALUE="David">
  
 <P><FONT CLASS=2>Status:</FONT>
 <INPUT TYPE="RADIO" NAME="status_1" CHECKED CLASS=5 ><FONT CLASS=5 >Active
  
 <P>
 <INPUT TYPE="RADIO" NAME="status_1" CLASS=5 >
 <FONT CLASS=5 >Terminated
  
 <P>
 <INPUT TYPE="RADIO" NAME="status_1" CLASS=5 >
 <FONT CLASS=5 >On Leave
 <P>
 <P>
 <BR>
 <INPUT TYPE=SUBMIT NAME=SAMPLE VALUE="OK">
 </FORM>

The ls_stylesheet variable from the previous example contains a Style element, an example of which is shown below:

<STYLE TYPE="text/css">
 <!--
 .2{COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:9pt "Arial", sans-serif;TEXT-DECORATION:none}
  
 .3{COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:8pt "MS Sans Serif", sans-serif;TEXT-DECORATION:none}
  
 .5{COLOR:#000000;BACKGROUND:#ffffff;FONT-STYLE:normal;FONT-WEIGHT:normal;FONT:8pt "MS Sans Serif", sans-serif;TEXT-DECORATION:none}
 -->
 </STYLE>

Unique element names

The GenerateHTMLForm method creates unique names for all elements in the form (even when displaying multiple rows in one form) by adding a _nextsequentialnumber suffix.

Creating an HTML page

To use the syntax and style sheet returned by the GenerateHTMLForm method, you must write code to merge them into an HTML page. A complete HTML page requires <HTML> and <BODY> elements to contain the style sheet and syntax.

One way to do this is to create a global or object function that returns a complete HTML page, taking as arguments the Form and Style elements generated by the GenerateHTMLForm method. Such a function might contain the following code:

 // Function Name: of_MakeHTMLPage
 // Arguments: String as_syntax, String as_style
 // Returns: String
 //***********************************
 String    ls_html
 IF as_syntax = "" THEN
       RETURN ""
 END IF
  
 IF as_style = "" THEN
       RETURN ""
 END IF

 ls_html = "<HTML>"
 ls_html += as_style
 ls_html += "<BODY>"
 ls_html += "<H1>Employee Information</H1>"
 ls_html += as_syntax
 ls_html += "</BODY></HTML>"
 RETURN ls_html