Independent Third-Party Controls

Including an independent third-party control within a page you create is fairly simple. You can embed any control in the HTML layout page and it will be passed through to the generated page un-altered. This allows you to incorporate any ASPX control or even VBScript into your layout page file. Iron Speed Designer only pays attention to the GEN: code generation tags and only replaces those tags with controls built upon the BaseClasses. This control is an independent control since it does not use any data from the database, utilize any code generation tags or use any of the code generated by Iron Speed Designer.

In the example below, a third-party menu control has been incorporated into the layout HTML page. The third-party menu control used in this example is from ComponentArt. This third-party menu control allows you to incorporate many different types of menus into your application with ease. The third-party menu is available at:

http://www.ComponentArt.com

Some sample menus and tabs available from ComponentArt are:

The ComponentArt third-party control works by putting an ASP control in your layout page file and specifying the list of menu items in a separate XML file. The following steps allow you to integrate an independent third-party control into pages created with Iron Speed Designer.

When you integrate the ComponentArt third-party control, you will need to create your own menu outside of Iron Speed Designer. The menu is not updated by Iron Speed Designer when new pages are added.

Step 1: Install ComponentArt for your application by copying the ComponentArt.Web.UI.dll into the Bin directory of your application.

You may also need to place the Client-Side scripts of ComponentArt into your application’s folder. To do this using Windows Explorer, locate the client-side scripts for the ComponentArt controls. By default, these scripts are installed in this folder:

C:\Program Files\ComponentArt\Web.UI 2.0\client_scripts\componentart_webui_client

Select the componentart_webui_client folder, drag it to your Web project and drop it into the root directory of your application folder, e.g.:

C:\MyApp

Note: This procedure may not be necessary if the componentart_webui_client directory is already installed in the root of your Web site. In that case, the ComponentArt controls will find the scripts without any additional settings. Please see the installation instructions for ComponentArt in the documentation provided with the component.

Step 2: Create an HTML layout page file for the reusable panel called ThirdPartyMenu.html. Include the HTML shown below in this file, and place this file in a folder called Menus in your application’s folder.

This layout page file contains a @Register directive to register the ComponentArt followed by a reference to the control. The reference includes a further reference to the MenuData.xml file containing the list of menus and a path to the Images subdirectory.

<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>

<ComponentArt:Menu id="Menu1"

SiteMapXmlFile="../Menus/menuData.xml"

ImagesBaseUrl="../Menus/images/"

runat="server"

</td>

</tr>

</table>

Step 3: Copy MenuData.xml, MenuStyle.css and the Image subdirectory to the Menus directory under your application’s folder.

The MenuData.xml, MenuStyle.css and the Images subdirectory are located in the ComponentArt’s Live Examples folder such as:

C:\Program Files\ComponentArt\Web.UI 2.0\live_examples\menu\design\multicolor3d

You can select a different design other than multicolor3d by copying the MenuData.xml, MenuStyle.css and the Images subdirectory from any of the design subdirectories such as

C:\Program Files\ComponentArt\Web.UI 2.0\live_examples\menu\design\basic_horizontal

C:\Program Files\ComponentArt\Web.UI 2.0\live_examples\menu\design\ms_windowsXP

Step 4: Modify MenuData.xml to add your own menu items. A sample MenuData.xml file is shown below. Change the Text and NavigateURL properties of each item to design your menu. The NavigateURL could be a relative URL such as /MyApp/Products/ShowProductsTable.aspx.

</item>

</item>

</SiteMap>

Step 5: Go to Iron Speed Designer’s Application Explorer and click the Refresh button on the toolbar to see the newly created Menus folder. Select the ThirdPartyMenus.html file and click the Page Properties button from the toolbar to display the Page Properties dialog. On the Bindings tab, change the Component Type to a Menu ASCX control. Click OK to save the Properties.

By changing the ThirdPartyMenus.html and changing its Component Type to an ASCX, you can now include this into all your pages as a reference instead of duplicating this control on every page.

Step 6: Go to each of the pages created by Iron Speed Designer and change the menu control to use your newly created ThirdPartyMenus.html instead of the menu created by Iron Speed Designer. To do this, select each file, click on the Page Properties toolbar button to display the Page Properties dialog and select the Menu node in the tree on the left. On the Display tab, browse to the Menus subdirectory under Source and pick ThirdPartyMenus.html.

Repeat this procedure for each of the pages created.

Step 7: Build and run the application.

Step 8: Open the page to view the third-party menu.

http://localhost/Tutorial/ThirdPartyMenus/PageWithThirdPartyMenu.aspx

Note: You can modify the MenuData.xml to add or delete menu items and change the URLs pointed to by each of the individual menu items. Please see the documentation for the ComponentArt control for more details on how to customize this control. The menu names and URLs are not automatically created by Iron Speed Designer; they are changed by updating the MenuData.xml file.

Independent Third-Party Controls

See Also