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 created as ASCX controls instead of ASPX pages.  Just like a page, they are configured through the Property Sheet.  Once created 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, the page or panel incorporating the button specifies the actual button label, the action to take, and the destination URL.  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 cause 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:  In the Application Explorer, select the newly added file and select the top page-level panel.

Step 4:  In the Property Sheet, change the “Page type” property to “Custom ASCX control”.

Step 5:  Press OK to save.

Step 6:  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 Layout Editor, drag an Include ASCX Component from the Toolbox onto the page at the location where you want the panel.

Step 3:  IMPORTANT: Configure the newly added component via the Property Sheet:

Step 4:  IMPORTANT:  Rebuild your application (Build, Rebuild All).  This creates the associated code for the newly added control.

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 Application Explorer, select the newly added file and select the top page-level panel.

Step 3:  In the Property Sheet, Page section change the “Page type” property to ‘Header ASCX control’.

Step 4:  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 Layout Editor, navigate to the page area where you wish to add the ASCX panel.

Step 3:  Drag an Include ASCX Component from the Toolbox onto the page and select the newly added control.

Step 4:  In the Property Sheet, set the ‘ASCX file path’ property to the newly created header panel file.

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

See Also

Example: Creating Button Panels