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 Mobile RPG application. Much of the way that .aspx pages display 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 websites display the F-keys is controlled by with the following code 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 element in the code behind the page (this file varies depending on the Dds file Mobile RPG 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 element 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 style. 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: 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 code 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"
	/>