Example: Creating Button Panels

Enhancing applications with standard buttons that do standard things is often a tedious and time-consuming task.  Iron Speed Designer can greatly simplify, and largely automate, this mundane task.  For example, Iron Speed Designer supports four types of buttons.  The Push Button, Link Button and Image Buttons create standard HTML buttons based on the Button, <a href> and <img> HTML tags.  A fourth type of button supported by Iron Speed Designer is a button that is created using HTML layout.  This button can be used by dragging an Include Component from the Toolbox onto your page.

You can create many different types of buttons using HTML layout and use them on your page.  For example, you can create a Red button and a Green button and use them multiple times on a single page.  The button panel file may contain the complete property settings for the button including the label text, the URL and the command to execute.  By setting the button properties completely, the button actually becomes a specific button and not reusable to create multiple buttons with different labels, URLs and commands.  To allow reusability, Iron Speed Designer supports the ability to set some properties of the button at the page or panel that incorporates the button.

To create a reusable button:

Step 1:  Create a new ASCX control by right-clicking on any node on the Application Explorer.  Rename this file to “RedButton.ascx”.

Step 2:  Create a Link button within the newly created ASCX file.  Select the first cell on the Quick Layout Spreadsheet.  In the Cell Editor enter:

“GEN:LINKBUTTON Name=”Button”/>”

Step 3:  Set these table style attributes in the Tag Attributes dialog (Right-click, Styles, Table…).

cellpadding : 3

cellspacing : 0

border : 1

bordercolorlight : #C0C0C0

bordercolordark : #808080

style : border-collpas:collapse

bgcolor : #808080

Step 4:  Set these cell style attributes in the Tag Attributes dialog (Right-click, Styles, Cell…).

color : #FFFFFF

font-family: Verdana

font-size: 10px

Font-weight: bold

text-decoration: none

text-align: center

padding-left: 3px

padding-right: 3px

Step 5:  Set the Control Type property via the Properties dialog.

Do not set the Button Text, Image file (URL) or Action properties for the Button control.

Step 6:  Build the ASCX control (Build, Build).

Your button control is ready to use.  To include this panel on a page:

Step 1:  Use Application Explorer to open the page where you wish to add the new button panel.

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

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

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

Step 5:  Build and run the application and review the buttons displayed.

See Also

Creating Reusable ASCX Panels and Components

Example: Creating Button Panels