Integrating Third-Party Controls with the Database

A more complex example of a third-party control is a tree control similar to the one used within Iron Speed Designer or in Windows Explorer. In the context of a database intensive web-application, such a tree control is only useful when integrated with the underlying data. Iron Speed Designer allows such controls to be integrated into applications, making it easy to leverage that integration in new applications once the set-up is complete.

This example shows how to integrate a third-party tree control with an Iron Speed Designer application. The tree control is initialized with data from the database and the navigation URL’s are set based on the Id’s of the records retrieved from the database.

The integration of third-party controls can be accomplished in many different ways. In this example, the integration is accomplished by writing Visual Basic code and including it in HTML layout page file. This code will be included in the generated ASPX page and executed on the server to create the tree control.

This sample also uses a frame based window to show a top frame and a left and a right frame within the bottom frame for an application.

The Tree View displayed in this example is a third-party control built by obout, Inc. They can be found at:

http://www.obout.com

This example for the tree control is based on frames – the top frame shows a logo, the bottom frame is split into a left and right frame. The left frame shows the tree control and the right frame shows the selected node.

This example is built using Visual Basic code in the ASPX page to show how it can be done. You can also create similar code in the Visual Basic code-behind file if you like.

Step 1: Create the ASPX files necessary to display the frame based window. This file specifies the top frame, a left side frame and the right frame to display the selection from the left frame. This file is created directly as ASPX pages and stored in the ThirdPartyTreeView folder under your application’s folder.

The ViewFrame.aspx is the main window and it contains references to the top frame and the left and right frame. The top frame points to ViewHeader.aspx and the left frame of the bottom points to ViewTree.aspx. The right frame is initially set to blank to not display anything.

</frameset>

Step 2: Create the page for the top portion of the frame. The ViewHeader.aspx file is generated by Iron Speed Designer from a HTML layout page file containing a logo. The HTML layout page is placed in the …\<Application>\ThirdPartyTreeView folder. The body HTML tag is set to “no” so the header portion does not scroll. Set the logo tag’s Image property to an appropriate image.

<tr>

<GEN:Image Name="Logo"/>

</td>

</tr>

</table>

</body>

Step 3: Create the page to display the tree view on the left frame. This page is created as a HTML layout page file with Visual Basic code as shown here.

<%@ Import Namespace="obout_ASPTreeView_Pro_NET" %>

Public Function CreateTree() As String

Dim oTree As New obout_ASPTreeView_Pro_NET.Tree()

oTree.ShowIcons = False

oTree.TreeIcons_Path = "/Designer/Images"

oTree.Add(Nothing, "root", "Products by Categories")

Dim html

Dim catRecords As ArrayList = CategoriesAccess.Instance.GetList( _

Nothing, _

0, 20, Nothing)

Dim prodCatFk As BaseClasses.Data.ForeignKey = _

ProductsAccess.Instance.TableDefinition.GetForeignKey( _

ProductsAccess.Instance.CategoryIDColumn)

Dim catRecord As CategoriesRecord

For Each catRecord In catRecords

Dim catId As String = "catId" & catRecord.GetString(CategoriesAccess.Instance.CategoryIDColumn)

Dim catName As String = catRecord.CategoryName

oTree.Add("root", catId, catName)

Dim f As New BaseClasses.Data.ForeignKeyValueFilter( _

prodCatFk, _

catRecord.GetID(), _

BaseClasses.Data.BaseFilter.ComparisonOperator.Equals)

Dim prodRecords As ArrayList = ProductsAccess.Instance.GetList( _

f, _

Nothing, _

0, 20, Nothing)

Dim prodRecord As ProductsRecord

For Each prodRecord In prodRecords

Dim prodId As String = prodRecord.GetString(ProductsAccess.Instance.ProductIDColumn)

Dim prodName As String = prodRecord.ProductName

html = "<a href='ShowProductRecord.aspx?Products=" & prodId & "' target='RightFrame'>" & prodName & "</a>"

oTree.Add(catId, "prodId" & prodId, html)

Return oTree.HTML()

End Function

</script>

<tr>

<td>

<ASP:Label id="iTree" runat=server text="<%# CreateTree() %>" />

</td>

</tr>

</table>

At the bottom of the file, the Tree View is displayed as an ASP:Label as recommended by the developer of the tree control. The text of the label is specified by the CreateTree function.

<tr>

<td>

<ASP:Label id="iTree" runat=server text="<%# CreateTree() %>" />

</td>

</tr>

</table>

The CreateTree function first initializes the tree control, sets some options and creates the root node of the control:

Public Function CreateTree() As String

Dim oTree As New obout_ASPTreeView_Pro_NET.Tree()

oTree.ShowIcons = False

oTree.TreeIcons_Path = "/Designer/Images"

oTree.Add(Nothing, "root", "Products by Categories")

…

Next, the CreateTree function defines an array of all categories by using the CategoriesAccess class generated by Iron Speed Designer. This class is generated when you use the Categories table and build the application. There is no additional filter criteria specified, and as currently implemented, it only retrieves the first 20 records.

Dim catRecords As ArrayList = CategoriesAccess.Instance.GetList( _

Nothing, _

0, 20, Nothing)

A foreign key is created by specifying the foreign key relationship from the Products table to the Categories table.

Dim prodCatFk As BaseClasses.Data.ForeignKey = _

ProductsAccess.Instance.TableDefinition.GetForeignKey( _

ProductsAccess.Instance.CategoryIDColumn)

Next, the code iterates over the categories records retrieved in the catRecords array list. A category node is added to the tree control. The parent of this category node is the root node.

Dim catRecord As CategoriesRecord

For Each catRecord In catRecords

Dim catId As String = "catId" & catRecord.GetString(CategoriesAccess.Instance.CategoryIDColumn)

Dim catName As String = catRecord.CategoryName

oTree.Add("root", catId, catName)

The foreign key created earlier is transformed into a filter that can be used to retrieve the products that match this key.

Dim f As New BaseClasses.Data.ForeignKeyValueFilter( _

prodCatFk, _

catRecord.GetID(), _

BaseClasses.Data.BaseFilter.ComparisonOperator.Equals)

The next step is to create an array list of products for the current category within the For loop. Currently, this list only shows the first 20 products belonging to the category. You can increase this count to a very large number to retrieve all products. The GetList function for the RecordAccess class is used to create an array list.

Dim prodRecords As ArrayList = ProductsAccess.Instance.GetList( _

f, _

Nothing, _

0, 20, Nothing)

Dim prodRecord As ProductsRecord

For each of the products found for the category, an HTML link is created and the product is added to the tree with the parent as the category.

For Each prodRecord In prodRecords

Dim prodId As String = prodRecord.GetString(ProductsAccess.Instance.ProductIDColumn)

Dim prodName As String = prodRecord.ProductName

html = "<a href='ShowProductRecord.aspx?Products=" & prodId & "' target='RightFrame'>" & prodName & "</a>"

oTree.Add(catId, "prodId" & prodId, html)

Return oTree.HTML()

End Function

Step 4: Place the ASP Tree View DLL’s in the Bin folder of the application. The Tree View uses two DLL’s to work.

obout_ASPTreeView_Pro.dll

obout_ASPTreeView_Pro_NET.dll

The DLL names may be different if you purchased a different type of Tree View control from obout, Inc. You will need to change the example if you purchased a different control. Please see the documentation for the ASP Tree View control for more details on how to customize this control to display different types of trees.

Step 5: Build and run the application.

Step 6: Open the page to view the third-party tree control.

http://localhost/Tutorial/ThirdPartyTreeControl/ViewFrame.aspx

Please see the documentation for the tree control for more details on how to customize this control.

Integrating Third-Party Controls with the Database

See Also