Changing the Placement of the Function Keys

This document explores how to change the location of the "function keys," or rather the buttons that represent them, in a Wings application. Much of the way that Wings displays the buttons is determined in the Master Page and the CSS, so developers new to .NET will want to familarize themselves with those concepts before diving into this process.

The way Wings websites display the F-keys is controlled by with the following style in Theme.css:

.DdsKey { 
	  width: 146px; 
	  border: none; 
	  padding-right: 14px; 
	  padding-bottom: 10px; 
	  color: #000000; 
	  font-family: 'Segoe UI' , Arial; 
	  font-weight: bold; 
	  font-size: 8.5pt; 
	  text-decoration: none; 
	  text-align: right; 
	  text-transform: uppercase;
	  background-position: right top; 
	  background-color: Transparent; 
	  background-image: url(Images/button_icon.png ); 
	  background-repeat: no-repeat; 
	  cursor: pointer; 
	}

As well as in the mdf:DdsFile control in the code behind the Wings page (this file varies depending on the Dds file Wings is converting it from, but a simple example would look like the following):

<asp:Content
  ID="FileContent1"
  runat="server"
  ContentPlaceHolderID="FKeyPH">
	<mdf:ddsfile
	 id="CUSTDSPFControl"
	 runat="server"
	 FuncKeys="F3 
	 'Exit' 03;"
	 BannerStyle="Vertical"
	 DisplayErrorMessages="False"
	 SrcDdsCcsid="37"
	/>

It's possible to move the function keys into a horizontal row at the top of the main section of the page (emulating the look of many .NET apps and browsers) by just adding an attribute of float: left to .DdsKey in theme.css and changing the BannerStyle property in the ddsfile to "Horizontal". However, this is likely to leave some issues, as the .DdsKey default style has been optimized for a vertical banner. Specificially, the width of the buttons representing the function keys may cause them to be displayed in several rows, resulting in a cluttered look.

To reduce this unpleasantness, you can start by modifying (or completely deleting) the width: attribute from the .DdsKey style. Another useful measure is changing font-weight: from bold to normal, or deleting that element as well. Likewise, the text-align: right; style may improve the layout by centering the text in the buttons. So a Theme.css customized for a horizontal toolbar may look more like:

.DdsKey { 
	  border: none; 
	  padding-right: 14px; 
	  padding-bottom: 10px; 
	  color: #000000; 
	  font-family: 'Segoe UI' , Arial; 
	  font-size: 8.5pt; 
	  text-decoration: none; 
	  text-transform: uppercase;
	  background-position: right top; 
	  background-color: Transparent; 
	  background-image: url(Images/button_icon.png ); 
	  background-repeat: no-repeat; 
	  cursor: pointer; 
	}

With a DdsFile that resembles:

<asp:Content
  ID="FileContent1"
  runat="server"
  ContentPlaceHolderID="FKeyPH">
	<mdf:ddsfile
	 id="CUSTDSPFControl"
	 runat="server"
	 FuncKeys="F3 
	 'Exit' 03;"	 BannerStyle="Horizontal"
	 DisplayErrorMessages="False"
	 SrcDdsCcsid="37"
	/>

Change the Order of Function Keys

Developers can also set the order of the function keys in the banner on the page, by setting the MonarchDdsFileKeyOrder key. The key takes values of Enter, Fx, or F1 through F24, representing the available function keys, while Fx renders every function key from F1-F24 which isn't mentioned elsewhere. This allows convenient constructions such as F3, Fx, F7 which would render as "F3, F1, F2, F4, F5, F6, F8, F9 ... F24, F7." The setting defines a global (application-wide) key-order style; it does not allow specifying a unique order for a particular record (or page).

The values provided below are merely an example, the "F12,F6,F11,F4,F3,Enter" keys correspond to the 'Enter', 'Exit', 'Prompt', 'New', 'Delete' and 'Cancel' buttons on the Customer Maintenance screen for Iron Monger. When the settings below are applied, the order presented will be will be: 'Cancel', 'New', 'Delete', 'Prompt', 'Exit' and 'Enter.'

Note: This is a runtime feature. The Web Form designer does not show the overriden key order (Web.config is not available at design time).

<appSettings file="AppSettings.Config">
    <add key="MonarchMessageFileFolder" value="~\MessageFiles\" />        
    <add key="MonarchSpecialCharReplacements" value="@=_at_, #=H_lb_, $=_usd_" />
    <add key="MonarchDspFileLibl" value="MyLibrary, DspFiles/ARlib, Views/*" />

    <add key="MonarchDdsFileKeyOrder" value="F12,F6,F11,F4,F3,Enter"/>

</appSettings> 

The value may be one of the following: