|
Use eVB to create display and edit forms for your Pocket PC. The Pocket PC is an ideal platform for carrying information around that you need to review often and occasionally edit. This leaves a developer with a dilemma - do I optimize the display for entry or for displaying information. Microsoft solved this problem for the contacts function by having two screens. Unfortunately, the screens are completely different and editing requires the user to scroll through all the fields. I‘ve found that there is an alternative. This article presents a simple technique to create eVB forms that allow users to edit information without jumping to another screen.
The example in Figure 1 shows a hypothetical screen designed to display statistics for a football player. This might be something a fantasy football fan would keep handy to compare his or her players with friends. The important thing to note (besides the fact the player is a very good running back) is that there is a lot of information crammed on the screen and it is laid out to optimize it‘s utility to the viewer. All of the text display elements in this example are Label controls. To allow the user to update the information on this player, I want to allow them to tap and edit without jumping to an entirely different layout or form. Using a few simple steps we can allow the user to tap on any of the fields and edit it.
By manipulating and repositioning controls we can make a text box, combo box, or other control element appear ready for input from the user without leaving the screen. Figure 2 shows how the application responds when the user taps on the player‘s name "Ed V. Barber" (his friends call him edVB). The text box appears with the name highlighted. Once the user taps on a different part of the form or the "OK" button the text box disappears.
To demonstrate how this is accomplished, I‘ll use a simple text box and one of our fields on the player statistics form. However, the routines provided are easily modified to work with combo boxes, check boxes, or other controls. To follow along create a form with the following controls: a Text Box named txtEntry and a command button named cmdOK with a caption of "OK", a Frame called Frame1, and finally two labels called lblNameDisplay and lblNameHeader which are placed into Frame1. lblNameHeader is the label that say "Name:" and lblNameDisplay will contain our information (edVB‘s name). Listing 1 on the next page shows the functions we need to handle moving and displaying the list box. Option Explicit Const MINENTRYSIZE = 450 ‘ Minimum text box size Public lblCurrent As Label ‘ Disable an existing text box ‘ Enables text box, called by Mousedown event on Label ‘ Places the OK button in the proper location The first thing you‘ll notice is that the enableTextBox() function requires both Label and Frame references. It‘s obvious we‘ll need to keep track of which Label was selected so we can update it as the user enters new text. However, the frame requires some explanation. For this technique to work, the txtEntry text box and "OK" button must appear on top of everything on the form. This is accomplished using the Zorder property of the controls. Instead of changing every control‘s Zorder property that might be underneath the txtEntry and cmdOK, everything is placed in a Frame. Since the Frame‘s Zorder attribute affects every control it contains, this provides a much more convenient method of managing getting our text box to come out on top. The listing also shows how we determine where to place the control by using the coordinates of the Label and it‘s position in the frame. This assumes the txtEntry and cmdOK Command Button are not part of the frame and reside on the main form. I recommend this since it allows us to use a single set of controls to support a large number of frames in the application. I have an application where there are 9 frames where on is made visible based on the task the user is performing. Reusing entry fields saved significant time. The enableTextBox() routine also makes the width of txtEntry the same as the label it will lay on top of. However, I‘ve added a minimum size requirement. Text Boxes have borders that take up space or you might use a larger font for the input characters. Thus for narrow sets of text, like the Q1 score on edVB‘s statistics sheet, we might be able to see only one character! A minimum length insures we‘ll always have a couple of characters visible in the Text Box. Once txtEntry is moved to the new position and we‘ve copied the contents from the label‘s caption, the routine sets the selected text to everything in the field. This is important because it allow the user to quickly change the entire contents of the Text Box without first selecting it. We also call a routine placeTextEntryOK that determines where to place the OK button on the form. This routine checks if there is enough room for the cmdOK button on the right-hand side of the screen. This allows us to place our labels anywhere and as close to the edges as we desire without make allowances for a button that will appear later. The disableTextBox procedure is provided to remove the Text Box and OK button from the display area and return the Frame to its prior Zorder state. As you add more controls that use this technique, you should have each "enable" routine call all the other control‘s "disable" routines (i.e. your enableComboBox() should call disableTextBox() prior to setting up it‘s controls) The events on txtEntry and cmdOK (shown in Listing 2) are very simple. We keep the caption updated as changes are made and remove the controls when either the text box loses focus or OK is selected. Listing 2 Private Sub txtEntry_Change() Private Sub txtEntry_LostFocus() Now that we have all the supporting routines setup, it is a very simple matter to enable one of labels for editing. Listing 3 shows two of our labels used for the name of our player. One is the descriptor "Name:" and the other holds the actual content (edVB‘s name). Listing 3 Private Sub lblNameDisplay_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single) Private Sub lblNameHeading_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single) By attaching the action of enabling the entry field and button to both the descriptive label and contents we give the user flexibility. Some users will naturally select the label and others will tap on the content, we can handle both. Now with everything in position, when the user taps on the player‘s name, a text box will appear in the correct position. The technique described provides a simple to implement mechanism that is easily enhanced to include other types of controls and other command buttons. I‘ve personally added buttons to increment and decrement, toggling between two values, and combo boxes with a great deal of success. Carl Davis |
|
|
