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 created by specifying an GEN:Use Type=Button tag.  Alternatively, you can also use GEN:Button as an alias for GEN:Use Type=Button.

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, URL’s 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 two layout page files for a red and a green button.

<!-- red button -->

<style type="text/css">

     a {

          color: #FFFFFF;

          font-family: Verdana;

          font-size: 10px;

          font-weight: bold;

          text-decoration: none;

          text-align: center;

          padding-left: 3px;

          padding-right: 3px;

     }

</style>

<table cellpadding="3" cellspacing="0" border="1"

          bordercolorlight="#C0C0C0" bordercolordark="#808080"

          style="border-collapse: collapse" bgcolor="#FF3300">

 <tr>

  <td><GEN:LinkButton Name="Button"/></td>

 </tr>

</table>

<!-- green button -->

<style type="text/css">

     a {

          color: #FFFFFF;

          font-family: Verdana;

          font-size: 10px;

          font-weight: bold;

          text-decoration: none;

          text-align: center;

          padding-left: 3px;

          padding-right: 3px;

     }

</style>

<table cellpadding="3" cellspacing="0" border="1"

          bordercolorlight="#C0C0C0" bordercolordark="#808080"

          style="border-collapse: collapse" bgcolor="#008000">

 <tr>

  <td><GEN:LinkButton Name="Button"/></td>

 </tr>

</table>

Step 2:  Set the Type property to Button Panel for both the red and the green button layout page files.

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

Step 3:  Create a new layout page that uses these buttons multiple times.

<div align="center">

 <table cellpadding="8" cellspacing="0" border="0">

  <tr>

   <td><GEN:BUTTON Name="PrevButton" FILE="GreenButton.html"/></td>

   <td><GEN:BUTTON Name="NextButton" FILE="GreenButton.html"/></td>

   <td><GEN:BUTTON Name="OKButton" FILE="GreenButton.html"/></td>

   <td><GEN:BUTTON Name="CancelButton" FILE="RedButton.html"/></td>

  </tr>

 </table>

</div>

Step 4:  For each button, set the button text, the button command and URL properties.

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

See Also

Building Independent Reusable ASCX Panels

Adding a Reusable ASCX Panel to a Page

Button Panels

Navigation Menu Panels (Menu Tabs)