Borland Delphi 2005 and ASP.NET Enhancements

By: Bob Swart

Abstract: This tutorial demonstrates the ASP.NET enhancements in Borland Delphi 2005, including the new deployment capabilities and Web designer, and enhancements to the DB Web controls and debugger support.

Project Manager

HTML Designer and Controls

HTML Tag Editor

Structure View

DB Web Controls

Data Explorer and Alter Tables

DataSync and DataHub with ASP.NET

DB Web Controls

DbWebNavigationExtender

DBWebAggregateControl

DbWebSound and DbWebVideo

Debugging

Deployment

Conclusion

by Bob Swart, Bob Swart Training & Consultancy

    Introduction

In this tutorial, we'll use Delphi 2005 to build, debug and deploy an ASP.NET Web forms application, demonstrating the new features and enhancements in Delphi 2005 for ASP.NET projects. There will be one example application, starting right here, that will be used to demonstrate all new features.

- To build the example ASP.NET project, start Delphi 2005

- Do File | New and select "ASP.NET Web Application - Delphi for .NET"

- Enter "WebAppTutorial" as name, which will produce a new ASP.NET project in the c:inetpubwwwrootWebAppTutorial directory, as specified below:


New ASP.NET Web Application dialog

*Note that by default Internet Information Server (IIS) is used. However, Delphi 2005 also supports the free Cassini Web Server. Feel free to use Cassini, but refer to the online help to install and use this open source Web server.

From the readme:

If IIS is installed after the .NET Framework, ASP.NET must be registered with IIS by choosing Start > Run and entering the following command:

  %comspec% /K %windir%microsoft.netframeworkv1.1.4322aspnet_regiis.exe -i

Otherwise, attempting to run an ASP.NET application in the IDE will result in the error Unable to start debugging on the Web server. Unable to attach to ASP.NET worker process (typically for aspnet_wp.exe or w3wp.exe)

- Click on OK to generate the WebAppTutorial ASP.NET Web forms project.

This will create a new WebAppTutorial project with one ASP.NET Web form called WebForm1.aspx.

    Project Manager

The Delphi 2005 Project Manager has a number of new ASP.NET specific features, including a connection with the Object Inspector, built-in support to create new folders or add other files, and a deployment node (which will be covered in detail at the end of this tutorial).

- Check out Project Manager, which should display the project structure as shown below:


Project Manager for ASP.NET Project

If you select a node in the Project Manager, then the Object Inspector will display information regarding the specific node. Specifically, for the code behind assembly as well as the source files, you can see the File Name and Full Path properties.

- Click on the WebForm1.aspx file in the Project Manager. The Object Inspector will display the File Name (WebForm1.aspx) as well as the Full Path. The latter will be grey, indicating that you cannot edit it.

- Change the value of the File Name property from WebForm1.aspx to WebForm42.aspx.

This action will change the filename of the ASP.NET Web Form to WebForm42.aspx. Note that the internal references (in WebForm42.pas as well as WebForm42.aspx) will also be changed and kept in sync.

Another connection between the Object Inspector and the Project Manager will be covered in the Deployment section of this tutorial (which will also cover the Deployment node in the Project Manager, which can hold deployment configuration settings).

More useful at this time, is the ability to create new directories right from the project manager.

- Right-click in the Project Manager on the WebAppTutorial.dll node, and select the New menu, which has two submenus: Folder and Other.

With New | Folder you can create a new subdirectory (under the current c:inetpubwwwrootWebAppTutorial directory), and with New | Other you can add new ASP.NET or other Delphi files (class, unit, etc.) to your project:


Delphi 2005 Object Repository showing new ASP.NET Files

- Select the "Folder" choice of the "New" pop-up menu, and give the new folder the name "private".

The Project Manager now shows a new node in the hierarchy, with the private folder.


Project Manager for ASP.NET Project

In order to add pages to the private directory, you can select it and then right-click to add new ASP.NET Web Pages, or you can drag existing files from the WebAppTutorial.dll project and drop them inside the private node. In short, when you right-click on the private folder node, you can add a new Folder or Other files again. This can be useful, for example when you want to group pages together (where you can also secure them all at once).

If you've accidentally added a folder or file you don't want, you can always right-click on it and delete it from the Project Manager (that will also delete the file or folder from disk). All without having to leave the Delphi 2005 IDE.

We will not add any more files to the private directory, but will continue to work with the ASP.NET Web Form starting with the HTML designer and HTML controls.

    HTML Designer and Controls

The Delphi 2005 HTML Designer is enhanced compared to Delphi 8 for the Microsoft .NET Framework, and so is the way that we can work with the simple HTML elements.

- Starting with the HTML elements, place a Button and TextBox from the HTML elements category of the Tool Palette on the ASP.NET Web Form.

It's now possible to turn these (and all other) HTML elements into true server controls by adding the runat="server" attribute to them.


HTML Designer and HTML elements "Run As Server Control"

- Right-click on the HTML TextBox element, and select "Run As Server Control".

- Right-click on the HTML Button element, and select "Run As Server Control".

As a result, the ASP.NET Web Form declaration will now have server control editions of the HTML elements. And the controls themselves will have the runat="server" as well as an id="..." attributes added to their tag.

- Select the TextBox element, go to the Object Inspector and enter "Hello" as value for the value property.

    HTML Tag Editor

Apart from the Object Inspector, which can be used to edit individual attributes, the Delphi 2005 HTML Tag Editor now lets you edit the entire tag (not just the inner HTML as before).

- Click on the value attribute for the TextBox element in the HTML Tag Editor, and change the value from "Hello" to "Hello Delphi 2005" (see screenshot below).


Delphi 2005 HTML Tag Editor

The HTML tag editor can be used to edit most HTML tags, with the exception of body, tbody, tr, caption, and tfoot.

    Structure View

The Delphi 2005 Structure View (in the upper-left corner of the IDE) shows the hierarchy of the HTML in the .aspx page. You can double-click on nodes in the Structure View to be taken to the corresponding HTML code snippet in the Code Editor.

- Click on the WebForm42.aspx tab at the bottom of the code editor so the HTML view is shown.

For the current example, the Structure View is as follows:


HTML Structure View

- Double-click on elements in the HTML Structure View, and note that you'll be taken to the start of the corresponding HTML tag in the HTML Code Editor.

Apart from simple HTML elements, there are more powerful controls, including Borland's own DB Web controls.

    DB Web Controls

Delphi 2005 introduces four new DB Web controls. Note that the DB Web controls are only available in the Enterprise or Architect edition of Delphi 2005.

- Go to the Data Explorer (in the upper-right corner of the IDE)

- Select the InterBase provider, and create a new connection or modify the default connection to point to the Employee.gdb database (by default installed in the C:Program FilesCommon FilesBorland SharedData directory).

- Open the connection, and also the Tables node, so you see all tables inside the InterBase Employee.gdb database.


Delphi 2005 Data Explorer

For two of the new DB Web controls to be demonstrated, we need to add one or two fields to a table. These new fields will hold audio (sound) and video links - not the actual contents, but filenames where a sound or video file can be located.

    Data Explorer and Alter Tables

Fortunately, altering tables directly from the Data Explorer is also a new feature added to Delphi 2005.

- Select the EMPLOYEE table, right-click on it and select "Alter Table".

This gives you a new page in the designer where you can view the EMPLOYEE table record structure, and can make changes to it. Initially, the design is as follows:


Delphi 2005 Table Design for EMPLOYEE

- Go to the last line, and enter the name AUDIO. The Data type will get the value CHAR by default, but change this to VARCHAR, and set the Precision (size) to 128.

- Add another field called VIDEO with a Data type of VARCHAR, and Precision (size) of 128 again.


Delphi 2005 modified Table Design for EMPLOYEE

- Right-click on the Table Design view, and select "Show DDL", which will be as follows:

ALTER TABLE EMPLOYEE ADD AUDIO VARCHAR(128), ADD VIDEO VARCHAR(128)

- Right click on the Table Design view, and select "Execute DDL".

The table EMPLOYEE has now been extended with two fields: AUDIO and VIDEO. We will fill them and use them in a minute.

First, we need to make sure that the EMPLOYEE table can be used by the ASP.NET project.

- Select the EMPLOYEE table in the Data Explorer, and drag it onto the ASP.NET Web Form.

As a result, you will now see a BdpConnection and a BdpDataAdapter component in the non-visual component area of the HTML designer. The BdpConnection is responsible for the connection to the InterBase Employee.gdb database, while the BdpDataAdapter connects to the EMPLOYEE table in this database.

    DataSync and DataHub with ASP.NET

With Delphi 8 for .NET, we could start the Data Adapter Configuration dialog, edit the SELECT, INSERT, UPDATE, and DELETE commands, get a preview of the data, and specify if the result of the SELECT statement should be placed in a new or existing DataSet (or none at all). However, new in Delphi 2005 is now also the ability to use a DataSync and DataHub (see the Delphi 2005 RAD for ADO.NET tutorial for more information), which can also be used in combination with ASP.NET.

- Place a DataSync component (from the Borland Data Provider category of the Tool Palette) on the WinForm. Note that it will also appear on the non-visual components area of the HTML Designer.

- Click on the DataSync component to select it, and in the Object Inspector click on the ellipsis next to the (Collection) value of the Providers property in order to start the Providers Collection editor.

- In the DataProvider Collection Editor, click on the Add button to add a new DataProvider in the Members listbox.

- Open the drop-down combobox for the DataAdapter property, and select BdpDataAdapter1.

- Change the name of the new DataProvider from DataProvider1 to dpEmployees.

- Change the TableName property from DataProvider1Table to dpEmployeesTable.

- Open the drop-down combobox for the UpdateMode property, and select your preferred way to update the data: Key, All or Changed.


Delphi 2005 DataProvider Collection Editor

- Click on OK to close the DataProvider Collection Editor for the DataSync component.

- Place a DataHub component (from the Borland Data Provider category of the Tool Palette) on the WinForm.

- Point the DataPort property of the DataHub component to DataSync1 (the DataSync component).

The DataHub is now connected to the DataSync component. But it needs a new DataSet to store the DataTables that are retrieved from the DataProviders in the DataSync component.

- Place a new DataSet component (from the Data Components category of the Tool Palette) on the WinForm.

- Point the DataSet property of the DataHub component to dataSet1 (the new DataSet component).

- Set the Active property of the DataHub to True.

This will fill the DataSet component with the DataTables that are provided by all DataProviders. For this particular example, the DataSet will be filled by only one DataTable, with a name that you specified in the DataProvider Collection Editor, namely dpEmployeesTable.

This table will now be used by the DB Web controls.

    DB Web Controls

The four new DB Web controls are DbWebAggregateControl, DbWebSound, DbWebVideo and DbWebNavigationExtender. Before we can use any of them, we need to place a DbWebDataSource as "connector" between the datatable and the other DB Web controls.

- Place a DbWebDataSource component from the DB Web category on the Web Form. It will appear next to the other non-visual components.

- Point the DataSource property of the DbWebDataSource component to dataSet1 (and not directly to dpEmployeesTable).

We can now place other DB Web controls, like the DbWebGrid control.

- Place a DbWebGrid on the Web Form (you may want to remove the TextBox and Button html elements that are no longer used at this time).

- Connect the DBDataSource property of the DbWebGrid component to DbWebDataSource1.

- Connect the TableName property of the DbWebGrid component to dpEmployeesTable.

This will show live data at design-time in the DbWebGrid (with the Active property of the BdpDataAdapter still set to False - it's now the DataHub that's responsible for fetching the data).


ASP.NET Web Form with live data in DbWebGrid

    DbWebNavigationExtender

Using Delphi 8 for .NET, you can now place a DbWebNavigator control to navigate through the records and send changes back to the database (using the ApplyToServer button). With Delphi 2005, it's also possible to use regular ASP.NET Buttons and extend them with navigational capabilities (by assigning navigation actions to them). This is facilitated by the DbWebNavigationExtender component.

- Place a DbWebNavigationExtender component from the DB Web category on the Web Form. This is again a non-visual component, and does not have to be connected to any other component (it will extend components, so that they are made DB Web aware).

- Place a normal Button from the Web Controls category on the Web Form, and note that this Button has a DbWebControl category in the Object Inspector, with three properties: DataSourceAction, DBDataSource, and TableName.

- Select DbWebDataSource1 as DBDataSource, dpEmployeesTable as TableName, and MoveNext as DataSourceAction.

- Change the Text property of the Button to Next.

This is a normal Button, which has just been extended with DbWebNavigation capabilities. Apart from MoveNext, you can also select MovePrev, MoveFirst, MoveLast, Cancel, Update, Delete, Insert, Apply, Refresh, Undo, UndoAll or None.

- Add other regular Button and change its Text property to Apply.

- Select DbWebDataSource1 as DBDataSource, dpEmployeesTable as TableName, and Apply as DataSourceAction of the Button component.

Although this Button will perform the Apply action, we need to write a little bit of code to actually send the updates to the database table.

Similar to when using the DbWebNavigator component, we must implement the OnApplyChangesRequest event handler of the DbWebDataSource component.

- Select the DbWebDataSource component, go to the Events tab of the Object Inspector, and double-click on the ApplyChangesRequest event. Write the following code in the event handler:

procedure TWebForm1.DBWebDataSource1_OnApplyChangesRequest(sender: System.Object;
  e: Borland.Data.Web.WebControlEventArgs);
begin
  DataSync1.SaveData(DataSet1);
end;

This single line of code will send all changes to the database.

    DBWebAggregateControl

The DbWebAggregateControl can be used to display aggregate values of columns from a dataset. Available aggregate operations include Avg, Count, Min, Max, and Sum.

- Place a DbWebAggregateControl on the ASP.NET Web Form.

- Connect the DBDataSource property of the DbWebAggregateControl component to the DbWebDataSource.

- Connect the TableName property of the DbWebAggregateControl component to dpEmployeesTable.

The AggregateType has been set to Avg by default. This means that the ColumnName property will by default only show columns that are "averageable" (i.e. numeric types). For the EMPLOYEE table, those columns are EMP_NO, JOB_GRADE, and SALARY.

- Select SALARY as field for the ColumnName property of the DbWebAggregateControl component.

You will now immediately see a value of 2750534.95238095 in the editbox for the DbWebAggregateControl component.

*Note that the ColumnName property is cleared when you select a different value for the AggregateType property of the DbWebAggregateControl component. You can set AggregateType to Avg, Count, Min, Max, or Sum. Avg and Sum only work on numerical fields, Min and Max also work on String fields, and Count works on all fields (and simply returns the number of records).

    DbWebSound and DbWebVideo

The DbWebSound and DbWebVideo components can be used to add audio and video to your ASP.NET applications, where the audio and video files are obtained through a dataset. The DbWebSound component supports .wav, .mp3, .wma, and other sound formats. Like the DbWebSound component, the DbWebVideo component also uses the media player (if installed on your system), and supports the .mpg and .avi formats. They both connect through a DbWebDataSource to fields from a dataset. The fields that the DbWebSound and DbWebVideo components connect to do not have to contain the binary audio or video files themselves, but can simply hold a path to the location of these files.

- Since we already altered the EMPLOYEE table with two new fields: AUDIO and VIDEO, we should first use the existing ASP.NET application (the way it currently is) to enter some existing audio and video fully qualified filenames in the DataGrid.

   Tip: The Windows' Media directory contains a collection of .wav files.

Once the AUDIO and/or VIDEO fields of the EMPLOYEE table are filled with fully qualified filenames for sound and video files, we can demonstrate how they work (note: this assumes that a media player has been installed as well).

- Place a DbWebSound component on the ASP.NET Web Form.

- Point the DBDataSource property of the DbWebSound component to the DbWebDataSource component.

- Point the TableName property of the DbWebSound component to dpEmployeesTable.

- Point the ColumnName property of the DbWebSound component to the AUDIO column.

The DbWebSound control will be represented by the default media player. There are a number of additional properties that control the way the DbWebSound component operates. If you set the AutoStart property to True, then the control will start to play right away. The Loop property can be used for a continuous playback of the audio file.

*Note that apart from playing audio files, the media player itself can also be used to play video files of course. So if you wish, you can also use the DbWebSound control to play .mpg, .mpeg and .avi files.


Click to see full-sized image

DbWebSound control playing a .mpg file at runtime

The DbWebVideo produces the following tag at runtime:

  <image dynsrc="c:1.mpg" loop="-1" start="FILEOPEN"></image>

which requires that the browser supports the <image dynsrc> tag. While on the other hand the DbWebSound produces a more general supported tag at runtime:

  <embed src="c:1.wav" autostart="true" loop="false"></embed>

So if the DbWebVideo control doesn't work, then you can use the DbWebSound control instead.

    Debugging

Delphi 2005 offers a completely new approach to debugging ASP.Net applications. This is done by the Borland.dbkasp.dll - a HttpModule, providing improved debugging of ASP.NET applications.

During installation of Delphi 2005, the Delphi 2005 installation program requests permission to update your machine.config file with Borland debugger information.


Delphi 2005 Installation Question

If you answered No to this question, then there are two ways to still enable the Borland.dbkasp.dll. First of all, you can manually edit the web.config file of each ASP.NET project. Delphi 2005 places a httpModules node in the web.config file, with the actual contents in comments, as shown below:

<httpModules>
<!-- BORLAND DEBUG KERNEL
  The httpModule Borland.DbkAsp.DbkConnModule is required for debugging under IIS.
  This module may be installed in web.config or machine.config, but not both.
  Move the following line outside this comment to install.
<add name="DbgConnect" type="Borland.DbkAsp.DbkConnModule,Borland.dbkasp,Version=9.0.0.1,
  Culture=neutral, PublicKeyToken=b0524c541232aae7"/>
-->
</httpModules>

- If you answered No to the question that would modify the machine.config file, then you now need to uncomment the contents of the httpModules section in your web.config file.

*Note that for the Delphi 2005 debugging support, the Borland.dbkasp.dll should be specified either in the machine.config or in the web.config file, but not in both.

- If you want to verify the contents of the machine.config file, then edit machine.config from %SystemRoot%Microsoft.NETFrameworkv1.1.4322CONFIG.

   The following entry should be placed in the <assemblies> section:

<add assembly="Borland.dbkasp, Version=9.0.0.1, Culture=neutral,
   PublicKeyToken=b0524c541232aae7" />

   as well as the following entry in the <httpModules> section:

<add name="DbgConnect"
  type="Borland.DbkAsp.DbkConnModule,Borland.dbkasp,Version=9.0.0.1,
  Culture=neutral, PublicKeyToken=b0524c541232aae7" />

    Deployment

As we saw at the start of the ASP.NET Web Application, Delphi 2005 now shows a special Deployment node in the Project Manager for ASP.NET projects. Here we can specify deployment options.

- Right-click on the Deployment node in the Project Manager and select "New ASP.NET Deployment" to get the Deployment View.


ASP.NET Deployment View

If you have used the Borland Data Provider, then the list of files to deploy is not complete. To get a complete list, open the References node of your ASP.NET Web Application. This node lists all assemblies that are required for your project, which include Borland.Data.Common.dll, Borland.Data.DataSync.dll, Borland.Data.Provider.dll, and Borland.Data.Web.dll. Only the latter is already included in the list of assemblies to deploy.


Project Manager - References

- Select the Borland.Data.Common.dll assembly, right-click on it and select "Copy Local". This will make sure that it's copied to the project directory (from where it can be deployed) after the next compilation.

- Select the Borland.Data.DataSync.dll assembly. Apart from right-clicking on it, you can also directly set the Copy Local property in the Object Inspector to True.

- Do the same thing with the Borland.Data.Provider.dll

- Now, recompile the WebAppTutorial project, which will copy the missing Borland assemblies to your project's Bin directory.

This will immediately update the Deployment View with the new assemblies. However, before you deploy, there's one more assembly missing: the one related to the actual database that we're using. In this case Borland InterBase. And the missing assembly is specified in the ConnectionString of the BdpConnection component. It's Borland.Data.InterBase.dll. The easiest way is just to add this assembly to your project and set Copy Local to True.

- Right-click on the Reference node and select "Add Reference".

- In the Add Reference dialog, select the Borland.Data.InterBase.dll assembly (make sure to select version 2.0.0.0 which belongs to Delphi 2005 - there can be several different versions on your system).

- Double-click on the Borland.Data.InterBase.dll in order to add it to the bottom half of the Add Reference dialog (see screenshot).


Add Reference - Borland.Data.InterBase.dll

- And finally click on OK to actually add the Borland.Data.InterBase.dll assembly to the WebAppTutorial project.

- Set the Copy Local property of the Borland.Data.InterBase.dll assembly to False.

- Recompile the WebAppTutorial project.

You will now have a complete view of all files that are needed to deploy the WebAppTutorial ASP.NET Web application. Time to select a target to deploy to. The Deployment View can be used to connect to either a directory (local or on a network) or an FTP target.

- Open the drop-down combobox for the Destination field, and select a Folder Location as deployment target. Specify a directory that is registered with IIS as a virtual directory and has at least scripting rights.

The Deployment View will now show both the local files (from the project directory) and the remote files (from the directory or FTP location), and gives you the option to deploy the entire project in one click.


Click to see full-sized image

ASP.NET Deployment View - Ready to Deploy

The buttons in the upper-left can be used to refresh the display, deploy all new or modified files, delete all remote files that are not in the current project, and show all ignored files. This means that in practice, a click on the second button from the left will deploy your project.

- Click on the second button from the left to deploy the project to the deployment location.

When you close the Deployment View, you can save it. This will ensure that you can open the same view and re-deploy your files with just one click again. Very helpful.

    Conclusion

In this tutorial, you have seen how to use Delphi 2005 to build, debug and deploy an ASP.NET Web forms application. Among the new features, you have experienced the new HTML designer, HTML elements, four new DB Web controls (DbWebNavigationExtender, DbWebAggregateControl, DbWebSound and DbWebVideo), ASP.NET Debugging and finally Deployment. As related topic, you've seen how to alter the structure of database tables using the Data Explorer, and how to connect the DataSync and DataHub to the DbWebDataSource component in ASP.NET Web Applications.


Server Response from: ETNASC03