Web Services

Since Web DataWindow technology is now used as a building block for many applications, Sybase decided to enhance this functionality and provide some much needed bug fixes. I recently met with the Web DataWindow team to demonstrate what I've been doing for my clients and to discuss some additional functionality that's needed in the Web DataWindow. I'm pleased to say that PowerBuilder 7.0.2 C3 contains many bug fixes that the community has been waiting for as well as four new features.

The Sybase staff understands how important this technology is to their customers. While I was there they fixed several bugs that have been around for some time. I provided examples and the bugs were quickly put to rest. These features were added now instead of waiting for PowerBuilder 8. If that doesn't show commitment to making a product successful, I don't know what does! Even though the development staff was very busy, they spent time with me to get the perspective of someone who's building applications for their customers.

Caution
A note of caution about the consolidated release: to guarantee that your DLLs are synced up, you need to install this release. If you received a patch from support, don't expect it to contain the entire release; it probably doesn't. Support only provides patches to solve severe problems that can't wait for the consolidated releases. However, it does create an environment in which there are different versions of DLLs on the development and production machines. Take a cautious approach and make sure you do a complete upgrade with this release. Incorrect versions of DLLs can lead to stability problems. Sybase has been working very hard to make the products stable. Each developer can make this task easier by correctly installing this release and verifying the versions of all the DLLs.

Installation
This release became available in late June 2000 and can be downloaded from the Sybase Web site, www.sybase.com. Since it's a maintenance release there's no installation program and no migration necessary. The installation procedure includes copying the PowerBuilder DLLs into the "Sybase\Shared\PowerBuilder" directory on each machine.

Overview
This article accomplishes several things. First, it identifies some bugs that have existed for some time that have now been fixed in this release. Second, it describes each new feature and provides examples on how to implement them. My intention is to allow you to easily implement these features and quickly gain performance and functionality benefits with your applications.

Bugs Fixed
Each release has bug fixes and this is no exception. While I'm not aware of all of them, you'll be glad to know that several long-term bugs have been fixed. See below for a list of these bugs.

• Checkbox edit style didn't update the database.
• SetItem in client scripting didn't work on a dropdown DataWindow.
• Clicking on a date or datetime field displayed "undefined" in the field.
• The detail-band background color didn't render correctly.
• Dropdown DataWindows fields were skipped when tabbing through the fields in Internet Explorer.

In addition to these bugs specific to the Web DataWindow, Sybase has made an effort to address the reported stability problems. I wish I could say there aren't any bugs in PowerBuilder or any of the Sybase products, but that isn't true. There are bugs in every product, bar none. To make Sybase products the best they can be, please submit any stability issues, or other bugs, to Sybase support, including either a sample or steps to re-create the problem. Like any developer, the engineers at Sybase can fix a problem quicker if they're able to re-create it.

JavaScript Caching
This is an important new feature that will significantly reduce the size of the generated HTML. It means faster generation in the component as well as screens opening faster in the client browsers. JavaScript Caching places reused code into files that are downloaded to the browser the first time they're needed. It reduces the lines of HTML generated by the component, and places references to the files into the generated HTML instead. Table 1 identifies each JavaScript file and how many lines it includes.

Adding up these numbers gives us 3,644 lines in each HTML page that's generated prior to this release. Even considering the comments and Sybase disclaimer lines, this is still a significant number of lines to be downloaded to the browser with each page.

Figure 1 shows a simple tabular DataWindow for the product table in the EAS demo database. The HTML generated for this is 98K without the JavaScript Caching turned on. The size of the HTML with caching turned on is 42K, less than half the size! Keep in mind that this is a simple DataWindow; imagine what will happen with larger, more complicated DataWindows. Figure 2 shows a real-world example of an application from one of my clients. This DataWindow is 97K without caching turned on and 25K with it on. If that doesn't demonstrate the strength of this feature, please contact me and show me a better example.

JavaScript Caching is implemented with PowerScript Modify calls to set several new HTML generation attributes. These attributes are described in Table 2.

The following are sample lines of server-side JavaScript code that makes Modify calls for each of the attributes. dwLocal is the variable that references the HTMLGenerator component.

dwLocal.Modify("datawindow.htmlgen.
resourcebase='http://localhost/articles'");
dwLocal.Modify("datawindow.htmlgen.commonjsfile='dwcomn.js' ");
dwLocal.Modify("datawindow.htmlgen.
datejsfile='dwdate.js'");
dwLocal.Modify("datawindow.htmlgen.
numberjsfile='dwnmbr.js'");
dwLocal.Modify("datawindow.htmlgen.
stringjsfile='dwstr.js'");

Appended HTML Syntax/HTML Exits
This feature allows the developer to specify HTML syntax for text, column, compute and picture controls. The syntax that's specified is appended to the generated HTML for the element. This feature provides an incredible amount of control to the generated HTML, which is what every developer wants. I refer to this as HTML Exits because the generator is providing the control to "exit" and run the HTML that I, the developer, specify.

Figures 3 and 4 demonstrate an example of this functionality. In Figure 3 the Product Description field in the first row contains red text; this occurs when the mouse is passed over the column. When the mouse isn't passing over the column, it contains black text (see Figure 4). This was accomplished with the HTML syntax for the column on the onmouseover and onmouseout HTML events, which generated the following line of HTML. Notice the onmouseover and onmouseout event syntax.

<SPAN CLASS=dwMine1A4C STYLE="position:absolute; left:1.616in; top:0.042in; width:1.718in"
onClick="{return dwMine.itemClicked(0,-1,'description');}"
onmouseover="{this.style.color='red';}" onmouseout="{this.style.color='black';}">Tank
Top</SPAN>

Once again, this is accomplished with a PowerScript Modify function call. The attribute to be set is objectname. HTML.AppendedHTML. The following code sets these events for the description column.

var lv_mod

lv_mod = "description.HTML.AppendedHTML = ' onmouseover=" + lv_quote
lv_mod += "{this.style.color=~'red~';}" + lv_quote
lv_mod += " onmouseout=" + lv_quote + "{this.style.color=~'black~';}" + lv_quote + "'"
dwLocal.Modify(lv_mod)

This feature's potential is incredible. I've implemented a technique that displays text when the mouse passes over a particular field. Consider a status field where you want to show a complete description of a status based on the value of the row. This feature can be used to call a client-side event, passing the row number that the mouse is passing over. The client-side event can manipulate HTML layers and make the text in a particular layer visible or invisible. Once you can make the call to a client-side event, you're only limited in what you can do with HTML and client-side JavaScript.

Stand-Alone HTML Syntax
This feature allows the value of text, columns or computed fields to contain user-defined HTML syntax or tags. It provides the ability to add your own tags, links, formatting and HTML syntax. A good example of this is placing HTML formatting in a text field. Prior to this new functionality, HTML syntax is escaped with override characters to make the text display as text instead of HTML.

Figure 5 demonstrates some of the syntax by adding formatting with HTML syntax. Notice the various formats. Each of these tags was stored in the field in the database. This technique allows formatting without requiring coding changes. The following syntax was used.

HTML Syntax                Description
<STRONG></STRONG>       Bolds text
<BR> Line break
<HR WIDTH=75% align=left size=8 noshade> Horizontal rule/line
<A HREF>   </A>      Link
<IMG SRC=ctp.gif>    Image

This is another feature that's turned on with a PowerScript Modify function call. The property, objectname.HTML. ValueIsHTML, accepts yes or no as the argument. The following line of JavaScript code enabled this feature in the example.

dwLocal.Modify("msgtext.HTML.ValueIsHTML='yes'")

User-Defined JavaScript File
This feature allows a developer to implement a user-defined JavaScript file, which is used to store common client-side JavaScript functions that are coded by the developer. This will help promote code reuse and will work in conjunction with the append HTML and stand-alone HTML syntax features.

Consider an application where every field calls a client-side function when the mouse enters and leaves a column. Some simple code will display an alert message for each of these events as shown below.

function ClientMouseOver()
{
alert("Mouseover event");
}
function ClientMouseOut()
{
alert("Mouseout event");
}

This code is placed into a file that will be referenced by the generated HTML. This saves the developer from coding the same routines repeatedly. For this example the file will be named html_cermak.js. The reference to this file in the generated HTML is created with a Modify function call as shown below.

<SCRIPT LANGUAGE="JavaScript" SRC="http://localhost/articles/html_cermak.js"></SCRIPT>

The Modify function call to create this SRC reference uses the HTMLGen.UserJSFile property of the DataWindow.

"DataWindow.HTMLGen.UserJSFile='html_cermak.js' "

As stated previously, this feature works in conjunction with the appended HTML or stand-alone HTML syntax features. This example uses appended HTML syntax to call the ClientMouseOver and ClientMouseOut events from the description column. It calls these client-side events as the mouse passes over and out of the description column. These events are coded in the html_cermak.js file. The appended HTML syntax to call these events is shown below.

lv_mod = "description.HTML.AppendedHTML=' ~t" + lv_quote
lv_mod += " onmouseover={ClientMouseOver();} onmouseout={ClientMouseOut();} "
lv_mod += lv_quote + " ' "
dwLocal.Modify(lv_mod)

Conclusion
These new features are exactly what's needed to make the Web DataWindow a more robust, scalable solution. As I worked with the DataWindow development team, what impressed me most was how receptive they were to my feedback. This feedback included functionality as well as a time frame. These features were initially scheduled to be part of the Maui release. The development and management teams understood the importance of this functionality and made it a priority to get it into this release.

If you'd like a copy of this code along with the DataWindow objects, please e-mail me and I'll make it available. Because this example uses the EAS demo database, it's easy to make this example work on any machine. In the future I'll make the code for every article available for download on our Web site, www.ctpartners.com.

If you have any ideas on future articles about the Web DataWindow, please e-mail and I'll do my best to write about it. If you have a question about a technique, please contact me. Chances are that others have the same question. In addition, please pass along any comments you have on this new and exciting feature of EAStudio.

See you at TechWave!