This WebSnap application demonstrates how to use WebSnap wizards, components, and designers to build an application that edits the content of the Country table.
Create a New WebSnap Application
File/New/Other.../WebSnap/Web Application
- Check Web App Debugger executable
- CoClass Name: CountryEditor3 (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 to Country Editor
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 AdapterPageProducer
- Page Name: CountryTable
- OK
File/Save
- Save unit as CountryTableU.pas
The application will look for the CountryTableU.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 data components to the CountryTable module
View the Object Tree View
- Activate the CountryTable module by double clicking CountryTableU in the project manager
- Choose View/Object TreeView main menu command
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.
Specify a key field
The Name field in the country table can be used to identify a record.
- Select the Country TTable component in the Object Tree View (you may need to expand the Session and DBDemos node to find the country.db node) . Right click and choose the Fields Editor... popup menu command.
- Right click on the Fields Editor window and choose the Add All Fields command
- Select the Name field from the list of added fields
- In the Object Inspector, expand the ProviderFlags property.
- pfInKey: True
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.
Create a grid displaying data from the Country table
AdapterPageProducer components are used to dynamically generate HTML forms and grids display Adapter fields and executing Adapter actions.
View the Object Tree View
- Activate the CountryTable module by double clicking CountryTableU in the project manager
- Choose View/Object TreeView main menu command
Add a grid
- In the Object Tree View for CountryTable, right click on WebPageItems
- Select the New Component... popup menu command
- Select AdapterForm then click OK. AdapterForm1 will appear in the Object Tree View
- Right click on AdapterForm1
- Select the New Component... popup menu command
- Select AdapterGrid then click OK. AdapterGrid1 will appear in the Object Tree View.
- Set AdapterGrid1 properties
- Adapter: Adapter
- Preview the Page by clicking on the Preview tab at the bottom of the code editor window.
- Use the HTML Script tab to view the JavaScript generated by the WebSnap components.
Run the Application
If you would like to see what you have so far, Run the application.
Add editing commands to the grid
Add Buttons
- In the Object Tree View for CountryTable, select the AdapterGrid by expanding WebPageItems
- Right click on AdapterGrid1
- Select the Add All Columns popup menu command
- Right click on AdapterGrid1
- Select the New Component... popup menu command
- Select AdapterCommandColumn in the list then click OK
- Right click on AdapterCommandColumn1 and choose the Add Commands... popup menu command
- Multiselect the DeleteRow, EditRow, and NewRow commands then click OK.
- Preview the Page by clicking on the Preview tab at the bottom of the code editor window.
Run the Application
If you would like to see what you have so far, Run the application. The Edit and Insert buttons won't work. Delete will work.
Add an edit form
File/New/Other.../WebSnap/Page Module
- Select AdapterPageProducer
- Page Name: CountryForm
- Published: False
- OK
File/Save
- Save unit as CountryFormU.pas
The application will look for the CountryFormU.html file in the same directory as the executable so save the unit to the project directory.
Use the CountyTableU unit
Add CountryTableU to the uses list so that this module will have access to the Adapter component.
- Choose the File/Use Unit... main menu command
- Select CountryTableU from the list then click OK.
View the Object Tree View
- Activate the CountryForm module by double clicking CountryFormU in the project manager
- Choose View/Object TreeView main menu command
Add input fields
- In the Object Tree View for CountryForm, right click on WebPageItems
- Select the New Component... popup menu command
- Select AdapterForm then click OK. AdapterForm1 will appear in the Object Tree View
- Right click on AdapterForm1
- Select the New Component... popup menu command
- Select AdapterFieldGroup then click OK. AdapterFieldGroup1 will appear in the Object Tree View.
- Set AdapterFieldGroup properties
- Adapter: CountryTable.Adapter
- Preview the Page by clicking on the Preview tab at the bottom of the code editor window (In some cases the Preview is not updated correctly, click on the Code tab and the back on the Preview tab).
Add buttons
- In the Object Tree View for CountryForm, right click on AdapterForm1
- Select the New Component... popup menu command
- Select AdapterCommandGroup then click OK. AdapterCommandGroup1 will appear in the Object Tree View.
- Set AdapteCommandGroup1 properties
- SiteComponent: AdapterFieldGroup1
- Right click on AdapterCommandGroup1
- Select the Add Commands... popup menu command.
- Multiselect the Cancel, Apply, and Refresh Row commands then click OK.
- Preview the Page by clicking on the Preview tab at the bottom of the code editor window (In some cases the Preview is not updated correctly, click on the Code tab and the back on the Preview tab).
Set Adapter Mode (optional)
You may notice that the preview for CountryForm displays static text field values rather than input controls, and that the Apply and Cancel buttons are not displayed. This happens because the TDataSetAdapter is in browse mode, by default. You can change the mode using the following steps. These steps are optional because, when the application is running, the TDataSetAdapter mode will be changed to edit when the Edit action is executed.
- In the Object Tree View for CountryForm, expand AdapterForm1 to show AdapterFieldGroup
- Select AdapterFieldGroup
- Set AdapteFieldGroup property
- AdapterMode: Edit
Link form actions to the grid page
Specify which page to display when a command is executed by pushing a button on a form.
- In the Object Tree View for CountryForm, expand AdapterForm1 until CmdCancel, CmdApply, and CmdRefreshRow are shown
- Set CmdCancel property
- PageName: CountryTable
- Set CmdApply property
- PageName: CountryTable
Link grid actions to the form page
Specify which page to display when a command is executed by pushing a button in a grid row.
- In the Object Tree View for CountryTable, expand AdapterGrid1 until NewRow, EditRow, and DeleteRow are shown
- Set CmdNewRow property
- PageName: CountryForm
- Set CmdEditRow property
- PageName: CountryForm
Run the Application
If you would like to see what you have so far, Run the application. All the buttons will work. However, there will be no indication of database errors, such as invalid type. For example, try adding a new country with an invalid value (e.g., 'abc') in the Area field. One other issue is that the RefreshRow button will show when inserting a new record.
Add error reporting
Add AdapterPageProducer components that will display database errors that occur while editing the Country table.
Add error support to the grid
- In the Object Tree View for CountryTable, select AdapterForm1 by expanding WebPageItems
- Right click on AdapterForm1
- Select the New Component... popup menu command
- Select AdapterErrorList in the list then click OK
- Move AdapterErrorList1 above AdapterGrid1 by dragging it, or using the up arrow in the Object Tree View toolbar.
- Set AdapterErrorList1 properties
- Adapter: Adapter
Add error support to the form
- In the Object Tree View for CountryForm, select AdapterForm1 by expanding WebPageItems
- Right click on AdapterForm1
- Select the New Component... popup menu command
- Select AdapterErrorList in the list then click OK
- Move AdapterErrorList1 above AdapterFieldGroup1 by dragging on using the up arrow in the Object Tree View toolbar.
- Set AdapterErrorList properties
- Adapter: CountryTable. Adapter
Test error reporting
Database errors will raise an exception in the running application. The exceptions are caught by the TDataSetAdapter and displayed on the page by the TAdapterErrorList. When running a web application from the Delphi, the exceptions may be reported by Delphi. To disable exception reporting, uncheck Tools/Debugger Options/Language Exceptions/Stop on Delphi Exceptions.
Grid Errors
- Run the application and browse to the CountryTable page.
- Start up another instance of your browser and browse to the CountryTable page.
- Click the DeleteRow button on the first row in the grid.
- Without refreshing the second browser, click the DeleteRow button on first row in the grid.
- You should see an error message displayed above the grid.
Form Errors
- Run the application and browse to the CountryTable page.
- Click on the EditRow Button
- You should see the CountryForm page
- Change the area field to 'abc'
- Click the Apply Button
- You should see an error message displayed above the first field
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.
Click on the default URL link to display the serverinfo.exe page. serverinfo should display the name of your application.
Select on the progid of your application and click Go to display the default page.