Creating Reusable ASCX Panels and Components

One of the most powerful features of Iron Speed Designer is the ability to create and use reusable panels and components.  For example, a header, footer and menu panel can be included on every page of an application.  Reusable panels allow the definition of the panel in one place and pages simply refer to these panels.  Changes only need be made once to the panel and will be reflected on all pages that use the panel.  This allows you to consolidate the most common aspects of your application into one location and reuse them as often as necessary.

Reusable panels are simply fragments of a page and are generated as ASCX controls instead of ASPX pages.  Just like a page, they are configured through the Properties dialog.  Once generated they are referred to by other pages and panels via the GEN:Use code generation tag.

Reusable panels can be either completely independent or they can be dependent on the page or panel that includes them.  For example, the header panel typically is a completely independent panel containing a logo, and other images.  However, while a reusable button panel specifies the layout, but the page or panel that incorporates the button specifies the actual button label, the action to take, and the URL to go to when the button is clicked.  The immediate parent provides any additional information needed by the dependent panel.

Reusable panels can be nested as deeply as you like.  For example, a reusable button panel might be included in the reusable Footer panel that is included on each page.  There is no limitation on the number of levels of nesting.  However it is not possible to nest a reusable panel within the same panel.  For example, you cannot add a footer panel within the same footer panel; this will generate compilation errors due to the circular panel reference.

Reusable panels also provide flexibility in naming.  The names of code generation tags used within a panel will not conflict with any names within the page or panel that uses them.  The names must be unique within a page or panel, but not across multiple pages or panels.

To create a reusable panel

Step 1:  Place your reusable ASCX control file in a subfolder of your application such as \MyApp\MyASPXControls.  Make sure the file has an .ASCX extension.

Step 2:  In Iron Speed Designer, select View, Refresh to display this new file in the Application Explorer.

Step 3:  Select the newly added file in the Application Explorer and select Tools, Properties....

Step 4:  Press “Show Tree” at the bottom of the Properties dialog and select the top-most node in the tree displayed on the left.  This node will be called something like MyControl.ascx.

Step 5:  In the Control Type tab, select “Custom ASCX control”.

Step 6:  Press OK to save.

Step 7:  Build your application.

To use a reusable panel

To use a reusable ASCX panel on another page:

Step 1:  Use the Application Explorer to open the page where you want to use the panel.

Step 2:  In Design Mode, drag an Include Component from the Toolbox onto the page at the location where you want the panel.

Step 2:  Select Tools, Properties... to open the Properties dialog.  Then, select the Include Component.

Step 3:  IMPORTANT: Click the Browse button and specify the ASCX control file containing the reusable component.  Ensure that the file is correctly specified as ..\MyApp\MyASPXControls\MyControl.ascx.

Step 4:  IMPORTANT:  Press OK to save and Rebuild All.  Note that if you do not browse and save the bindings, and no code will be generated for this control.  As such, these two steps are very important.

Step 5:  Your panel should now be displayed as part of the enclosing web page with the same look and feel as the rest of your application.

Example: Creating a reusable header panel

A header is typically an independent reusable panel that can be included in every page created.  As an example, here’s how to create the reusable header panel:

Step 1:  Create a standard web page via the Application Wizard as you normally would any page.

Step 2:  In the page’s Properties dialog, select the top-level (page) node and change the Control Type to ‘Header ASCX control’.

Step 3:  Set the properties for various controls on the page as desired.  For example, you might set a Logo tag’s URL property.

The ASCX panel is now ready to be included in a page.  To include this panel on a page:

Step 1:  Using Application Explorer, open the page where you wish to add the ASCX panel.

Step 2:  In Design Mode, select the page area where you wish to add the ASCX panel.

Step 3:  Drag an Include Component from the Toolbox onto the page in the Quick Layout Spreadsheet.

Step 4:  Open the Properties dialog for the Include component and select the ASCX panel in the Display tab.

Step 5:  Build and run the application and view the generated page.

See Also

Example: Creating Button Panels