This WebSnap application demonstrates how JavaScript is used with a TDataSetAdapter component to publish the content of the country table.
Create a New WebSnap Application
File/New/Other.../WebSnap/Web Application
- Check Web App Debugger executable
- CoClass Name: CountryTable3 (to avoid a conflict with the example)
- Page Name: Home
- OK
File/Save All
- Save the unit containing a TForm as ConsoleU.pas
- Save the unit containing a TWebAppPageModule as HomeU.pas
- Save the project as CountryEditor.dpr
The application will look for the HomeU.html file in the same directory as the executable so save the unit and the project to the same directory.
Set the ApplicationTitle
- Activate the Home module by double clicking on HomeU in the project manager
- In the object inspector, set ApplicationAdapter.ApplicationTitle property to Country Report
Click on the Preview tab in the editor window. The application title is displayed at the top of the page.
Run the Application
If you would like to see what you have so far, Run the application.
Create a New WebSnap Module
File/New/Other.../WebSnap/Web Page Module
- Select PageProducer
- Page Name: Report
- OK
File/Save
- Save unit as ReportU.pas
The application will look for the ReportU.html file in the same directory as the executable so save the unit to the project directory.
Run the Application
If you would like to see what you have so far, Run the application.
Add components to the Report module
View the Object Tree View
- Activate the Report module by double clicking ReportU in the project manager
- View/Object TreeView
Add Data Aware Components
- Select the Data Access tab in the tool palette
- Drop a TTable and a TSession on the Object TreeView
- Set Session properties:
- AutoSessionName: True
- Set Table properties
- DatabaseName: DBDEMOS
- TableName: country.db
- Name: Country
- Active: True
Note that the Session component is needed because we are using BDE components (TTable) in a multithreaded application.
Add an Adapter
- Select the WebSnap tab in the tool palette
- Drop a TDataSetAdapter on the Object TreeView
- Set DataSetAdapter properties
- DataSet: Country
- Name: Adapter
The purpose of the DataSetAdapter is to expose the data in our application to server-side scripting.
Add Server- Side Scripting
View ReportU.html
- In the Project Manager, expand the ReportU node
- Double click on ReportU.html
Insert Script
Insert the following block before the </BODY> element.
<TABLE BORDER=1> <TR> <TH> Name </TH> <TH> Details </TH> </TR> <% i = 0 %> <% e = new Enumerator(Adapter.Records) %> <% for (; !e.atEnd(); e.moveNext()) %> <% { %> <% if ((i % 2) == 0) bgcolor = 'red'; else bgcolor = 'blue'; %> <% td = 'style="color: ' + bgcolor + '"' %> <TR > <TD align=center <%=td%>> <%= Adapter.Name.DisplayText %> </TD> <TD> <TABLE> <TR> <TH align=left>Capital: </TH> <TD <%=td%>> <%= Adapter.Capital.DisplayText %> </TD> </TR> <TR> <TH align=left>Continent: </TH> <TD <%=td%>> <%= Adapter.Continent.DisplayText %> </TD> </TR> <TR> <TH align=left>Area: </TH> <TD <%=td%>> <%= Adapter.Area.DisplayText %> </TD> </TR> <TR align=left> <TH>Population: </TH> <TD <%=td%>> <%= Adapter.Population.DisplayText %> </TD> </TR> </TABLE> </TD> </TR> <% i = i + 1 %> <% } %> </TABLE>Preview the Page
Select the Preview tab. If the page is blank then some errors occurred while evaluating the script. Script errors are listed in the Editor's message view.
If you haven't followed the instructions for configuring Delphi then see <%=Pages.ConfigureDelphi.Title%>
If you haven't following the instructions for configuring the Web App Debugger then see <%=Pages.TestSvr.Title%>
Run/Run
You will see a form displayed. Web App Debugger executables are COM servers. This is the console window of the COM server.
The first time that your project is run, it will register the COM object that can be accessed directly by the Web App Debugger.
Start webappdbg.exe (See Tools/Web App Debugger).
Click on the default URL link to display the serverinfo page. Serverinfo should display the name of your application.
Select on the progid link associated with your application and click Go to display the default page.