Use eVB to create a scrollable forms on your Pocket PC

Use eVB to create a scrollable forms on your Pocket PC.
Written byCarl Davis [author‘s bio]  [read 24952 times]
Edited byDerek

The PocketPC device, as other handheld devices, has very limited screen real estate for displaying information and forms. Microsoft has overcome this issue with many of their forms by implementing scrollable forms. For example, they use this technique with the contact manager entry form. This article describes a simple technique you can use to create your own scrollable forms.

Figure 1
Figure 1 shows an example application used to enter information on a product and stock level in a warehousing application. A user can enter information on an item including stock location, manufacturer, type of product, and whether it‘s available to ship or not. In our hypothetical example we have iPaqs in stock, but will not ship them since our senior executives already have their eye on them. There‘s more information than can fit on one screen, but it‘s all very closely related. To make it easier for a user to enter all the information quickly we want to give them access to all the form elements at the same time. To demonstrate the scrollable technique we‘ll implement our warehousing form.
To follow along, you‘ll need to create a form similar to the one in Figure 2. You can add whatever control you want to, but they will be placed within a frame (call it Frame1). First expand our form (called Form1) to accommodate the entire size of the frame we are creating. However, we need to make sure that the application will still fit properly on the screen; so insure that the FormResize property is set to vbFormFullSIPResize. Next we draw the frame on the screen and set the BorderStyle to vbBSNone. This eliminates the caption border and provides us a clean canvas to place our controls on. Along the side of our frame we will place a vertical scroll bar (call it Vscroll1).

Figure 2
The frame we create should be as large as the scrollable form we want to create. You‘ll notice that our sample is much larger than the display on the PocketPC (see figure 1). You should now have Frame1 that‘s as large as you‘ll need and Vscroll1 which we‘ll use to scroll the form. Finally, add the controls, such as labels and text boxes, you need on your form.
Listing1 shows the functions needed to setup the scrollable form. When the form is loaded, we call the setupScrollBar() which does the bulk of the work we need to properly size and configure the scrollbar. This subroutine first determines if the SIP keyboard is enabled. This information is used to determine the size of the scrollbar and minimum and maximum values of the control. The constants MINSCROLLSIZE and MAXSCROLLSIZE control the size of the scroll bar. When the keyboard is shown, the scrollbar is scaled down appropriately and the SmallChange and LargeChange values are updated to allow us to consistently scroll the form. Whenever the SIP‘s status changes, we execute setupScrollBar() function again. Making the scrollbar react to the size of the displayed area makes our application look polished and consistent to the experience the user expects.
Option Explicit
‘Scrollbar size with SIP shown
Const MINSCROLLSIZE = 2820
‘Scrollbar size with SIP hidden
Const MAXSCROLLSIZE = 4020
Private Sub Form_Load()
‘Set Scrollbar‘s parameters
Call setupScrollBar
End Sub
Private Sub Form_SIPChange(bSIPVisible As Boolean)
‘Recalculate the scrollbar dimensions
Call setupScrollBar
End Sub
Public Sub setupScrollBar()
‘Define the size of the scrollbar
If (Form1.SIPVisible = True) Then
‘Set size of scrollbar
VScroll1.Height = MINSCROLLSIZE
‘The maximum scroll value places bottom of frame
‘at bottom of screen
VScroll1.Max = Frame1.Height - MINSCROLLSIZE
Else
‘Set size of scrollbar
VScroll1.Height = MAXSCROLLSIZE
‘The maximum scroll value places bottom of frame
‘at bottom of screen
VScroll1.Max = Frame1.Height - MAXSCROLLSIZE
End If
‘Set minimum to zero
VScroll1.Min = 0
‘Set our increments to be ratio of current maximums
VScroll1.SmallChange = VScroll1.Max / 100
VScroll1.LargeChange = VScroll1.Max / 10
End Sub
Private Sub VScroll1_Change()
‘On scroll bar change move the frame w/r to the form
‘Frame1.Top = -VScroll1.Value
Frame1.Move 0, -VScroll1.Value
End Sub
The scrollbar is setup to have a value range from zero to our frame‘s height minus the size of the scrollbar. By decreasing the scrolling by the length of the scrollbar, the bottom of the frame will be just visible when we reach the maximum value of the scrollbar. If we do not perform the subtraction, the user will be able to scroll the bottom of the form all the way up to the top of the screen. This will leave a large white space that would be unattractive and is unnecessary.
With everything setup and ready to go, we need to handle any scrolling. The routine VScroll1_Change performs the work of moving the frame up as scrolling is performed. This function simply moves the frame at the negative value of the scrollbar. As the scrollbar is moved lower, the top of the frame moves up (and off the viewable area).
With these functions in place, we‘re ready to give the form a test run. You should be able to see the scrollbar change and scale as the SIP keyboard is shown. That‘s all there‘s to it. You can expand on this technique by adding another dimension with a horizontal scrollbar if you wish. You can use this technique with images to allow users to pan around an image.
Carl Davis
Carl is currently Vice President of Technology at Click Commerce, an industry-leading provider of private exchange software for global manufacturers. He has over ten years of experience developing and architecting software for a rich variety of systems-from complex embedded machine vision algorithms in manufacturing to Enterprise scale knowledge management systems to B2B E-Commerce Solutions. Carl‘s current interests are in small footprint platforms including eVB and Java on both the PocketPC and Palm computing platforms has released a series of PocketPC applications from his own company (www.webcommando.com) for gamers.
_xyz