Using the MenuBar Control in Your Pocket PC Applications Created with eMbedded Visual Basic

  • Article

 

Using the MenuBar Control in Your Pocket PC Applications Created with eMbedded Visual Basic

Odyssey Software, Inc.

Microsoft eMbedded Visual Basic includes a rich set of Microsoft ActiveX Controls that allow you to easily build professional user interfaces for your Pocket PC—based applications. The challenge is how to design an effective user interface on a stylus-driven device with a small screen and no keyboard. Using the MenuBar control is one way to make the most effective use of all available screen real estate and create a consistent user experience.

Applies to:
   Microsoft Windows Powered Pocket PC 2000
   Microsoft eMbedded Visual Basic

The gray MenuBar at the bottom of the Pocket PC screen appears so the user has access to the Supplementary Input Panel (SIP). It is also available to hold application-specific menus and buttons so that they don't take up room and clutter the remainder of the screen layout. You can make use of the MenuBar from eMbedded Visual Basic through the MenuBar ActiveX Control.

Getting Started

First, you must add the MenuBar control to your project. To add the MenuBar ActiveX Control to your project, first select Components from the Visual Basic Project menu. Then use the Components dialog box to select the control labeled "Microsoft PocketPC MenuBar Control 3.0" and tap OK. The icon for the MenuBar control will now appear in the toolbox.

Note:   Once you have added an ActiveX Control to a project by using either the Components dialog box or the References dialog box, eMbedded Visual Basic automatically downloads the control with the run-time files when you run your application. A control must be downloaded before it can be used.

Next, you must add the MenuBar control to your form. To add the MenuBar control to your form, first open the form in the integrated development environment (using the Object command in the View menu, or the View Object button in the Project Explorer window). Then tap on the MenuBar Control shown in the toolbox. Using the mouse, move the pointer to the location on the form where the control is to be anchored. Tap and drag the mouse pointer until the control is the size you desire. The design-time placement or size of the MenuBar control doesn't matter because it will always appear at the bottom of the Pocket PC screen at run time.

Designing Menus

Now you are ready to add application-specific menus and buttons to the MenuBar. By default, the MenuBar control automatically creates a "New" button for you. If you do not desire a "New" button in your application, you can remove the "New" button from the MenuBar by setting the "NewButton" design-time property to false.

Because the MenuBar control does not have a Property Sheet designer to create menu and button entries, you will need to write code or programmatically create the menu entries you need. The "Form_Load" code example below shows how to create "File" and "Edit" menus.

Private Sub Form_Load()

    Dim mnuFile As MenuBarMenu
    Dim mnuEdit As MenuBarMenu
 
    Set mnuFile = MenuBar1.Controls.AddMenu("File", "mnuFile")
    mnuFile.Items.Add 1, "mnuFileOpen", "Open"
    mnuFile.Items.Add 2, "mnuFileAdd", "Add"
    mnuFile.Items.Add 3, "mnuFileSave", "Save"
 
    Set mnuEdit = MenuBar1.Controls.AddMenu("Edit", "mnuEdit")
    mnuEdit.Items.Add 1, "mnuEditCut", "Cut"
    mnuEdit.Items.Add 2, "mnuEditPaste", "Paste"
 
End Sub

Figure 3: MenuBar.

Note that in the AddMenu method, the first parameter ("File") is the text displayed on the menu and the second parameter ("mnuFile") is the key value. This key value is used to determine which menu was selected in the MenuClick event handler. These parameters are flipped following a menu index in the Add method of the MenuBarMenu.Items collection.

Handling Menu Events

You should then place code to be executed by each menu choice you added (I call these "handlers") in the MenuClick event procedure of your MenuBar object. The key defined when you created the menus will be used as the case value.

Private Sub MenuBar1_MenuClick(ByVal Item As MenuBarLib.Item)
 
    Select Case Item.Key
        Case "mnuFileOpen"
        ' Open procedure code  here.
 
        Case "mnuFileAdd"
        ' Add procedure code here.
 
        Case "mnuFileSave"
        ' Save procedure code here.
 
        Case "mnuEditCut"
        ' Cut procedure code here.
 
        Case "mnuEditPaste"
        ' Paste procedure code here.
 
        ' etc...
    End Select
 
End Sub

Now Let's Add Buttons

You can also include MenuBar buttons using predefined system icons.

These MenuBar buttons must be defined, along with any spacers, in the order you want them to appear on the MenuBar. Place the following code into the Form_Load defined previously to create Configure and Print buttons.

    Dim btnSpacer as MenuBarButton
    Dim btnConfig as MenuBarButton
    Dim btnPrint as MenuBarButton
 
    ' Add a spacer
    Set btnSpacer = MenuBar1.Controls.AddButton
    btnSpacer.Width = 80
    btnSpacer.Style = mbrSeparator
 
    ' Config Button - set image to #11 from system icons
    Set btnConfig = MenuBar1.Controls.AddButton("btnConfig")
    btnConfig.Image = 11
    btnConfig.Style = mbrDefault
 
    ' Print Button - set image to #15 from system icons
    Set btnPrint = MenuBar1.Controls.AddButton("btnPrint")
    btnPrint.Image = 15
    btnPrint.Style = mbrDefault
 
    ' Once the menus and buttons have been added to the MenuBar,
    ' you should release the objects
    Set mnuFile = Nothing
    Set mnuEdit = Nothing
    Set btnSpacer = Nothing
    Set btnConfig = Nothing
    Set btnPrint = Nothing

Figure 5: MenuBar with icons.

Note that setting the button Style to mbrCheck creates a button that will stay "pressed" until you tap it again. Also remember to add to your MenuClick event procedure handlers for each button, using what you passed as a parameter to the AddButton as the case value.

Adding User-Defined Buttons

If you wish to use images other than the predefined system icons, you can create your own 256-color bitmaps for buttons. I have created bitmaps for indicating "Next" and "Previous" screen navigation, which I have added to my project as Related Documents.

You will need to make use of the ImageList control, so add "Microsoft CE ImageList Control 3.0" to your Components list.

Once you have placed the ImageList control onto your form, you can then use the following code to set it to the proper size, load the bitmaps into the ImageList, and then associate that ImageList with the MenuBar control.

   ' set image size 
   ImageList1.ImageHeight = 16
   ImageList1.ImageWidth = 16
 
   ' add your images
   ImageList1.Add App.Path & "\Properties.bmp"
   ImageList1.Add App.Path & "\Prev.bmp"
   ImageList1.Add App.Path & "\Next.bmp"
   ImageList1.Add App.Path & "\Zoom.bmp"
 
   ' tell the menubar to use the imagelist
   MenuBar1.ImageList = ImageList1.hImageList

At this point, you can use the same code you used for creating buttons with the predefined system icons, except now the Image index will be the bitmaps you added to the ImageList. In our example, we could add the Previous and Next buttons:

   ' Prev Button - set image to #2 from user defined icons
   Set btnPrev = MenuBar1.Controls.AddButton("btnPrev")
   btnPrev.Image = 2
   btnPrev.Style = mbrDefault
   ' Next Button - set image to #3 from user defined icons
   Set btnNext = MenuBar1.Controls.AddButton("btnNext")
   btnNext.Image = 3
   btnNext.Style = mbrDefault

Handling Button Events

Fortunately, menu button taps are handled in the same way that the text menus are in most cases. However the ButtonClick event is an exception. To determine which menu button was pressed (or tapped), refer to the key values that were specified in the AddButton method when the menu buttons were set up (as is the case in the code below).

Private Sub MenuBar1_ButtonClick(ByVal Button As MenuBarLib.MenuBarButton)
 
   Select Case Button.Key
      Case "btnPrev"
      ' Prev button procedure code here.
        
      Case "btnNext"
      ' Next button procedure code here.
 
      ' etc...
   End Select
 
End Sub

Summary

Developing Visual Basic applications for the Pocket PC requires sensitivity to the smaller screen size and limited input methods to ensure a positive user experience. Fortunately, the development tools provide access to the SIP so that developers can build application-specific menus and buttons while removing screen clutter. Using the MenuBar control as described, your applications will maximize the usability and screen real estate on the Pocket PC -- an important step in creating professional user interfaces for your application.