A lot of hoopla has surrounded the Web DataWindow, and it's actually well deserved. Not so long ago PowerBuilder critics claimed that PB would never make it to the Web because it was designed mainly for building client/server applications. I had my own doubts back then, but with the Web DataWindow much of the power of PowerBuilder is now available on the Web. This allows PB developers to build Web sites for dynamic publishing and e-commerce transactions with relative ease.

Many articles have demonstrated the features of Web DataWindows, with examples of how to include them in HTML pages. Most of the examples are coded manually in JavaScript rather than PowerSite, Sybase's HTML development environment. As we'll see later, there are currently some advantages to that; however, most developers I encounter have little or no experience with Web development, particularly with HTML and scripting. This article is for them.

We're going to do things the easy way, using the Sybase HTML DataWindow DTC in PowerSite. Not only is this the easy way, but it's also the way Sybase would like us to build Web DataWindows now and in future versions of EAStudio. Sybase's goal is to make Web development as easy as developing in PowerBuilder. And from that viewpoint, the Sybase HTML DataWindow DTC is the HTML equivalent of PowerBuilder's DataWindow control.

Overview
For starters, let's begin with basically the same architecture diagram you see with every Web DataWindow article (see Figure 1). We'll need this as a frequent point of reference.

We're going to build a few Web pages in PowerSite using the Sybase HTML DataWindow DTC, and we'll deploy them to PowerDynamo. Here's how those Web pages will end up in our browser:

1. Enter the local Web site's URL in the browser.
2. The PowerDynamo Personal Web Server (PWS) parses the request and redirects it to PowerDynamo.
3. PowerDynamo executes the JavaScript inserted into our Web page by the Sybase HTML DataWindow DTC. (The JavaScript relies heavily on an included script, ObjMod.ssc, otherwise known as the PowerSite Object Model. Details to follow.)
4. The JavaScript instantiates the HTML Generator component in Jaguar.
5. The HTML Generator component retrieves the DataWindow's data, generates the HTML for the Web DataWindow and sends the HTML back to PowerDynamo.
6. PowerDynamo sends the page's HTML back to the Web server.
7. The Web server sends the page's HTML back to the browser.

The simple Web site consists of three pages. The first page is an HTML frameset, which is split vertically and contains two frames. The left frame holds our second page, which displays a list of departments. The department name is formatted as a hyperlink to the right frame, which displays the third page - a list of employees in that department. To create this Web site we'll use several EAStudio components: Adaptive Server Anywhere, PowerDynamo, Jaguar CTS, PowerSite and PowerBuilder. While this is a relatively simple site, we'll be starting from scratch, much like creating a new application in PowerBuilder. If you haven't done this before, it may seem like a lot of setup steps, but after your first couple of sites it'll seem quite simple. We'll start by creating a new Web site in PowerDynamo.

Setting Up PowerDynamo
Open Sybase Central and select "Tools | Connection Profiles---" Click "New---" to create a new connection profile. Name the profile DW-DTC and select PowerDynamo 3.0 as the profile type, then click OK. From the Connection Profile dialog select the ODBC data source named EAS Demo DB V3. (If you don't see it in your list of ODBC data sources, cancel out of the dialog and go to the ODBC Data Source Administrator to create a system data source for the EAS demo database.) Enter the standard Adaptive Server Anywhere user ID and password ("dba" and "sql"), then click OK. You should now see DW-DTC in your list of connection profiles. Click Connect. The EAS demo database should start up and you should see the DW-DTC site in Sybase Central (see Figure 3). (Note: The standalone Adaptive Server Anywhere engine frequently runs out of database connections when you're trying to build Web DataWindows, so I start up the server engine. Copy the Network Server Sample shortcut installed with ASA and change it to use the EAS demo database.)

We've just created a Web site to be stored in an Adaptive Server Anywhere database. That's a rather unusual concept; most Web sites are stored on the Web server's file system. PowerDynamo can access Web sites stored in databases as well as in the file system. The advantage is that we can use database replication to replicate the site to another Web server - perhaps even to an occasionally connected user's laptop.

At this point we still have one more thing to do before our Web site will be accessible via PowerDynamo. We must create a PowerDynamo mapping. Expand the Utilities ---> Configuration section of the PowerDynamo tree. Select Mappings, then double-click on "Add Mapping." Name the mapping "/DW-DTC" and click on Browse to select the connection profile we just created. You should now see the mapping in Sybase Central (see Figure 4). This mapping is how we'll refer to our Web site in the browser. As a matter of fact, we can now access our empty Web site from our browser!

You'll need to start the PowerDynamo Personal Web Server first. Select Utilities under the PowerDynamo tree in Sybase Central, and double-click on the Personal Web Server in the right pane. You should see the PWS icon in the tray on your task bar. Now open up a browser and type in the local URL: http://localhost/DW-DTC (see Figure 5).

Creating Web Pages in PowerSite
Now that we have an empty Web site to target, we're almost ready to begin creating some Web pages in PowerSite. But first we need to create a PowerSite workspace and a project that can deploy to our Web site. The first time you start PowerSite you'll be prompted to create a workspace, a file in which you can store your personal settings, as well as create projects in the Component Manager (see Figure 6). (This concept looks to be important: at TechWave last August Sybase claimed that workspaces would be incorporated into both PowerBuilder and PowerJ in the Maui release later this year.)

After you Click on Create New Workspace, you'll be prompted to create a local or remote workspace. Select Local Workspace and click OK to open the Local Workspace Wizard. Use the chart in Table 1 to fill in the options for the wizard. (Read PowerSite's InstaHelp for more information regarding the Component Manager.)

Because the final checkbox (Open Project Wizard) was checked, the Project Manager dialog should now be open (otherwise, select Project | Projects... from the menu). We need to create a new project that can deploy Web pages to the Web site. Click New, which will open the Blank Project Wizard. Use the chart in Table 2 to fill in the options for the wizard.

When you're finished with the Blank Project Wizard, you'll be prompted to run the Security Manager. Because you're accessing a local Component Manager, there's no reason to secure the project's components, so select No. When finished, the project view should display the Dw-dtc project (see Figure 7).

Now we have an empty project to go with our empty Web site. But two setup steps remain before we can create and deploy our Web pages. First we have to set up our project deploy so we can deploy to the Web site, as follows.

1. Right-click the DW-DTC project and select Deploy Setup as in Figure 7.
2. In the project deployment setup dialog click New to create a new deploy.
3. Enter "DW-DTC" as the deployment name.
4. Select PowerSite Dynamo Deployment Controller as the controller.
5. Click Configure to configure the Dynamo deployment controller.
6. On the Get tab select "Disk if Checked Out."
7. On the Put tab click Edit to select an application server.
8. In the application server dialog select the /DW-DTC PowerDynamo mapping you created previously. Then click OK.
9. Back on the Put tab, check the "Don't Ask for Deployment Destination," then click OK.
10. Back in the deployment setup dialog, check the box to the left of the DW-DTC deploy to make it the default deploy. Then click OK.

Finally, we need to set up a database connection to the EAS demo database for our Web DataWindows. Follow the steps below.

1. Select Project | Database Connections from the menu.
2. From the database connections dialog click New.
3. From the Select Data Source dialog select the Machine Data Source tab.
4. Select the same EAS Demo DB V3 data source we used to set up PowerDynamo. Then click OK.
5. In the Database Connection Properties dialog name the connection "EAS Demo DB V3." Then click OK to close the Database Connection Properties dialog.
6. Click OK to close the Database Connections dialog.

An important note on the database connection name: it must match an ODBC DSN that's defined on the server machine where Jaguar will run.

Home Page
We're now ready to create and deploy Web pages. Let's start by creating the HTML frameset that'll be our home page. Right-click Dw-dtc in the project view and select New. On the Files tab of the New dialog select Frame Set and click OK. Follow the steps below to fill out the Frame Set Wizard.

1. Enter "Home" as the file name, then click Next.
2. Click Split Vertically.
3. Name the left-hand frame "left" and the right-hand frame "right." Click OK.
4. Type in the URL of Departments.htm for the left frame. (Don't specify a page for the right frame.)
5. Click Next to move to the summary page.
6. Click Finish to close out the wizard.

When finished, you'll end up on the Page tab of the PowerSite HTML editor. If you haven't used PowerSite for HTML editing before, you should look at the Source, Structure and Preview tabs. Note that at this point the Preview tab will display a vertically split frameset, and the left frame will display a page error because we haven't yet created the departments page. That comes later.

Part 2 of this article will discuss the employee page, the department page, how to deploy the Web site and some little-known gory details!

Published January 1, 2000 – Reads 5,364
Copyright © 2000 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.