Navigation Menu Panels (Menu Tabs)

One of the most useful features of Iron Speed Designer is the ability to define a menu for your entire application and use it on every page. The Menu is dependent on the page to determine the currently highlighted menu item. To create a menu, first create two layout page files – one to display the normal unselected state and the other to display the highlighted state. Next create a menu panel that includes all of the menu items you would like to display in the application and finally include the menu panel on a page.

The menus can be created using links or images. Depending on your preference, you can use either of the two code generation tags. Note: Iron Speed Designer requires the name of the code generation tag to be “Button”.

Step 1: Create a layout page file for the normal unselected menu item. This layout page file defines a generic menu item. The name of the code generation tag must be Button. The NormalMenu style sheet class is specified for displaying the menu. This class is defined in the Menu layout page file so that it is included only once per page.

<table width=140 height=14 bordercolorlight="#FFFFFF" bordercolordark="#C0C0C0"

border="1" bordercolor="#111111"

cellpadding="0" cellspacing="0" style="border-collapse: collapse">

<tr>

<GEN:LinkButton Name="Button"/>

</td>

</tr>

</table>

Step 2: In the page’s Properties dialog, select the MenuItemNormal.html node of the tree and set the layout Type to Button Panel.

Tag Property	Setting
File Name	MenuItemNormal.html
Type	Button Panel
Page Title	MenuItemNormal

Step 3: Select the Button node of the tree to specify the default properties for the tag. Do not make any changes to the properties since they will be overridden by the Menu panel.

Step 4: Create a layout page file for the selected menu item. This layout page file defines a generic menu item for the selected menu item and is only necessary if a different look is to be provided for the current menu or tab. If there is no difference between the current menu and the other menus, then there is no need for this layout page file.

The name of the code generation tag must be Button. The SelectedMenu style sheet class is specified for displaying the menu. This class is defined in the Menu layout page file so that it is included only once per page.

<table width=140 height=14 bordercolorlight="#FFFFFF" bordercolordark="#C0C0C0"

border="1" bordercolor="#111111"

cellpadding="0" cellspacing="0" style="border-collapse: collapse">

<tr>

<GEN:LinkButton Name="Button"/>

</td>

</tr>

</table>

Step 5: In the page’s Properties dialog, select the MenuItemSelected.html node in the tree and set the layout Type to Button Panel.

Tag Property	Setting
File Name	MenuItemSelected.html
Type	Button Panel
Page Title	MenuItemSelected

Step 6: Select the Button node of the tree to specify the default properties for the tag. Do not make any changes to the properties since the Menu panel will override them.

Step 7: Now create a layout page file for the menu for your application. This layout defines the specific menu items needed in your application. The individual menu items are specified using a GEN:Button code generation tag. If a different style is required for the selected menu item, then two GEN:Button tags must be used for each menu. Iron Speed Designer automatically hides one of them based on the currently selected menu item. By convention, the name of the highlighted menu item must be exactly the same as the normal menu item except for a suffix of Hilited

The styles for the SelectedMenu and NormalMenu classes are specific to the A href HTML tag and are specified here. One of the most common mistakes developers make is to specify the same style name within each of the panel files. Browsers do not differentiate between panels – since they receive one HTML file. As such, if the same style is defined multiple times, the last definition is used. This results in the selected and unselected menu items looking similar.

.SelectedMenu a {

color: #FFFF00;

font-family: Verdana;

font-size: 10px;

font-weight: bold;

text-decoration: none;

text-align: center;

padding-left: 3px;

padding-right: 3px;

}

</style>

.NormalMenu 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>

<tr>

<td>

<GEN:BUTTON Name="Customers" File="MenuItemNormal.html"/>

<GEN:BUTTON Name="CustomersHilited" File="MenuItemSelected.html"/>

</td>

</tr>

<tr>

<td>

<GEN:BUTTON Name="Employees" File="MenuItemNormal.html"/>

<GEN:BUTTON Name="EmployeesHilited" File="MenuItemSelected.html"/>

</td>

</tr>

<td>

<GEN:BUTTON Name="Suppliers" File="MenuItemNormal.html"/>

<GEN:BUTTON Name="SuppliersHilited" File="MenuItemSelected.html"/>

</td>

</tr>

<tr>

<td>

<GEN:BUTTON Name="Products" File="MenuItemNormal.html"/>

<GEN:BUTTON Name="ProductsHilited" File="MenuItemSelected.html"/>

</td>

</tr>

</table>

Step 8: In the page’s Properties dialog, select the Menu.html layout node and set the Type to Menu Panel.

Tag Property	Setting
File Name	Menu.html
Type	Menu Panel
Page Title	Menu

Step 9: Configure each of the menu item (button) tags and provide the menu text (button text), the button command and the URL. This must be done for both the normal and the highlighted menu items.

Tag Property	Setting
Code generation tag	Customers CustomersHilited
Button Text	Customers
Button Command	Redirect
URL	ShowCustomersRecord.aspx
URL Parameters

Both normal and highlighted menu items are visible by default when you add them to the layout page file and set their data binding properties. To hide the highlighted menu items, add a pass-through attribute of "Visible" with the value "False". Pass-through properties are set on the Properties tab of the tag’s Properties dialog.

Step 10: Once the menu panel has been created, it can now be incorporated into a page using the GEN:Use code generation tag. In this example, the PageWithMenu.html layout page file includes the menu panel and the products from the database.

<GEN:Use Name="Header" File="HeaderPanel.html"/>

<br>

<table>

<tr>

<GEN:Use Name="Menu" File="Menu.html" Type="Menu" />

</td>

<GEN:Table Name="Products">

<table cellpadding="5" style="border-collapse: collapse" border="1"

bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">

<GEN:ItemTemplate>

<td>

<GEN:FieldValue Name="ProductId" />

</td>

<td>

<GEN:FieldValue Name="ProductName" />

</td>

<td>

<GEN:FieldValue Name="UnitPrice" />

</td>

<td>

<GEN:FieldValue Name="UnitsInStock" />

</td>

<td>

<GEN:FieldValue Name="Discontinued" />

</td>

</tr>

</GEN:ItemTemplate>

</table>

</GEN:Table>

</td>

</tr>

</table>

Step 11: In addition to the other tags, the Menu panel must also be bound. To highlight the menu, use the HiliteSettings pass-through attribute to specify the name of the code generation tag that represents the current page. For example, if the current page is the Show Products Record page and it corresponds to the Products code generation tag, the HiliteSettings pass-through attribute must be set to Products.

By setting the HiliteSettings pass-through attribute to the name of the code generation tag that corresponds to the current page, the application will display the highlighted menu for products and the normal menu for all other menus. The application performs this by setting the Visible pass-through attribute of the tag to False (to hide the normal menu item) and sets the highlighted tag’s Visible pass-through attribute to True. The highlighted tag’s name is determined by appending a suffix of Highlighted.

Tag Property	Setting
HiliteSettings	Products

Navigation Menu Panels (Menu Tabs)

See Also