Microsoft Windows CE Toolkit for Visual Basic 6.0 Guided Tour

  • Article

 

Microsoft Corporation

July 27, 1999

Summary: This document will take you on a tour of the features contained in the Microsoft® Windows® CE Toolkit for Visual Basic® 6.0. You will learn how to create a simple application that is designed on a traditional Windows desktop and executed on a Windows CE device, and how to access data stored on a SQL Server™ 7.0 on a Windows NT® Server. (21 printed pages)

System Requirements

The following software applications must be installed on a machine in order to get the demo running:

  • Windows 95, Windows 98, or Windows NT 4.0 (with Service Pack 3).
  • Windows CE Services 2.2 or later.
  • Microsoft Visual Basic 6.0.
  • Windows CE Toolkit for Visual Basic 6.0.
  • ADOCE (not necessary for some Jupiter Class machines).

In addition, the following hardware is required to run the demo:

  • Base machine for running the above software.
  • Windows CE H/PC Pro ("Jupiter" Class).

This demo was written with a Windows NT 4.0 configuration (installed according to the instructions below) and a Sharp Mobilon Tripad H/PC Pro machine.

Getting Started

Setting Up the Operating System and Windows CE Services

Set up the operating system of your choice as you normally would. Install Windows CE Services 2.2. Install all other software.

  • Windows NT 4.0
  • Windows NT Service Pack 3
  • CE Services 2.2
  • Windows NT Service Pack 4
  • SQL Server 7.0
  • Visual Basic 6.0
  • Windows CE Toolkit for Visual Basic 6.0

Setting Up the Database

This guided tour requires the Northwind database found in Microsoft Office Professional or Premium Editions. Either Office 97 or Office 2000 will suffice. To find the database, open the "Find" dialog ("Start" -> "Find" -> "Files or Folders…", from the Windows Start menu) and search for "Northwind.mdb". Take note of the location of the Northwind database.

Figure 1. Locating the Northwind.mdb

Copying the Database to the Windows CE Device

With Windows CE Services 2.2, data copied to a Windows CE device will automatically be synchronized with the "master" copy of the data existing in an Access file or in a SQL Server.

To copy data from the parent machine to the Windows CE device, first establish a partnership and connect to the parent machine. For more information on how to do this, consult your Windows CE device documentation.

Once the connection is made, open the Windows Explorer and navigate to the Mobile Devices icon. Click on the connected device and import the required database tables.

  • Open the Windows Explorer.
  • Navigate to the Mobile Devices folder.
  • Click on the connected device to highlight it.
  • Select the "Tools" -> "Import Database Tables…" menu item.

Figure 2. Importing tables from Northwind.mdb

In the resulting dialog, select the Northwind Microsoft Access database you found earlier. Once the database is opened, a list of all tables is shown. After selecting the tables, the information is copied to the device and a synchronization relationship is kept.

  • Check off only the tables you wish to keep synchronized between the device and the parent machine.
  • Change the location of the database to reflect what is shown in the dialog below.

Figure 3. Changing the database location

To turn off database synchronization, simply uncheck "Tables" in the ActiveSync options dialog ("Tools" -> "ActiveSync Options…" from the Mobile Devices folder).

Figure 4. Turning off database synchronization

Benefits of Windows CE Toolkits

With the Windows CE toolkits, developers can use the programming knowledge they have accumulated throughout their careers to build applications for a whole new class of devices and hardware. Windows CE is the next frontier of Windows development and allows businesses to extend their software development to whole new markets previously unavailable to them.

With Windows CE running on Web TV, businesses can build applications for a home consumer market that would otherwise be reticent about using a traditional personal computer. With Windows CE running on an AutoPC, developers can build truly mobile applications for fleets of salespeople, executives on the go, or consumers on the road. With Windows CE running on a handheld PC, developers can expand their opportunities to include non-traditional computer users who want simplicity and ease of management of above all else. Additionally, with Windows CE running on a palm-sized PC, programmers can take advantage of a data access device that allows anyone, anywhere, to access the information needed to run a business.

Because Windows CE development is as easy as traditional Windows development, these opportunities are available to developers today, with little additional training needed. The options are limitless, and because we are just at the beginning of this new phenomenon, developers have the entire spectrum of application development at their disposal. The "killer application" for Windows CE has yet to be discovered and developers who get in on the ground floor today will have a leg up on the competition in determining just what that killer application is.

This Guided Tour will help you create a complete data-driven application that can be copied and executed on a Windows CE device. For this demonstration, we will be using the Sharp Mobilon Tripad Handheld PC (H/PC) Professional Edition. However, any H/PC Pro will do.

Developing a Windows CE Application

Starting the Windows CE Project

Building a Windows CE application in Visual Basic doesn't involve any unusual steps at all. In fact, let's just go ahead and create a new project and see what it looks like.

  • In Visual Basic 6.0, go to the "File" menu and select "New Project".

You'll notice that in the New Project dialog there are several options to choose from. Some of these options are Windows CE Forms. When building a Visual Basic application, all you need to do is select one of these Windows CE Forms, drag and drop components, and add code just as you normally would. There's no special magic or incantations to build a Visual Basic application for a Windows CE device. All of the forms, as well as debugging tools and class libraries, are installed by the Windows CE Toolkit for Visual Basic 6.0. The Toolkit is essentially an add-on to the Visual Basic environment and, in fact, requires Visual Basic 6.0 Professional Edition or greater.

  • Select "Windows CE HPC Pro Project" template in the "New" tab.

Setting the Project Properties

Once the template is selected, a project properties dialog will appear. In this dialog, you can specify all the information for how and where the project will be executed on the remote device or emulator. With all the rudimentary elements to application development, including form size, project location, and descriptive elements, the dialog will help you get up and running so that you can get to the important phases of application design and development.

For the purposes of this example, set the project's properties as shown in the dialog below.

  • Set the Form Width and Form Height to 640x400.
  • Enter text for the Project Description field.
  • Change the Remote Path to "\NorthwindCustomer.vb".
  • Set the Update Components field to "Always".

Figure 5. Setting project properties

Press OK to move on to designing the form.

Setting Up the Toolbox

After the project properties are finalized, a Visual Basic Form will appear, allowing you to visually design your application. You will start out with a blank form, as shown below.

Figure 6. Visual Basic form

Now we will need to include all of the Windows CE-specific controls in our Toolbox by importing them from the on-system libraries.

  • Right-click on the Toolbox and select "Components…"
  • In the resulting dialog, select all the components with the words "Microsoft CE" prepended to them:

Figure 7. Selecting components for the Toolbox

All of the components will now appear on the Toolbox and can be dragged and dropped from there onto the Form.

Windows CE Design Considerations

Our application will be a simple record lookup form that will allow us to select a customer and gather information about the customer. When designing the Form, we should keep in mind that the application will be run on a small device, with a moderately small screen (640 x 480 resolution). Further, many of the H/PC Pro devices have touch-screens, which can be activated either by a stylus or a touch of the finger. Therefore, we will make sure that all of our fonts are large enough to read and all buttons or sliders will be large enough to be manipulated by a finger, as well as a stylus. It is important to recognize the unique attributes of the devices for which you build applications.

Designing the Form

We will design the Form by first placing a combo box on the Form as shown below.

  • Drag and drop a Label control from the Toolbox onto the Form.
  • Drag and drop a Combo Box control from the Toolbox onto the Form.
  • Position the Combo Box and Label appropriately.
  • Set the "Style" property in the ComboBox so that it says "2 – Dropdown List".
  • Set the "Name" property on the ComboBox to "comboCustomerName".

Now we will need to flesh out the rest of the Form with Label and TextBox controls.

  • Drag and drop Label and TextBox controls from the Toolbox onto the Form.
  • Position the controls appropriately.
  • Set the TextBox control's Name property as shown below:

Figure 8. Setting the Name property of the TextBox control

In some cases, you may want to create more complex user interfaces using additional Windows CE ActiveX® controls. However, it is important to realize that not all of the functionality found on traditional Windows desktops is present in the Windows CE operating system.

  • Drag and drop a FileListBox control from the Toolbox onto the Form.
  • The following dialog box will appear:

Figure 9. Message for an unavailable control

As you can see, the Windows CE Toolkit for Visual Basic 6.0 helps you by telling when a control is unavailable on the Windows CE operating system. Because the Win32® API present on Windows CE is a subset of that found on traditional Windows desktops, the Windows CE Toolkits help tremendously by informing you of unsupported functionality.

Event Handlers for Windows CE ActiveX Controls

Once the Form is complete, we need to set up an event handler so that we can update the customer information whenever a new customer is selected. One of the beauties of Windows CE development in Visual Basic is that there is very little difference between developing traditional Windows desktops and developing Windows CE applications.

To add an event handler to the Combo Box, go to the Code Editor and select "comboCustomerName" in the "Object" dropdown and "Click" in the "Procedure" dropdown. Visual Basic will automatically jump you to the Visual Basic Code Editor in the comboCustomerName_Click function:

Figure 10. Adding an event handler

Adding Data Access Code

With Windows CE and ActiveX Data Objects for CE (ADOCE), a Windows CE device can contain a local copy of a remote ODBC data source. When the Windows CE device is connected to the "parent" computer, the database tables are automatically synchronized. New information on the database server is automatically copied to the CE device's local store, and any information changed on the CE device is uploaded to the database server. With the obvious management simplicities of the Windows CE device, this is a perfect solution for task-specific applications.

Importing ADO functionality

ADOCE functionality can be found in a separate library that is installed by the Windows CE Toolkit. To import the library into the current project, go to the "Project -> References" menu and look for the "Microsoft CE ADO Control" component.

  • Go to "Project -> References".
  • Select "Microsoft CE ADO Control (ADOCE) 2.0".

Figure 11. Importing ADOCE functionality

Setting up data access

Once again, the programming models in developing applications for the traditional Windows desktop and the Windows CE device are very similar. We've already seen how building Visual Basic Form-based applications requires little additional training. Similarly, developing ADO applications for Windows CE is no more difficult than programming desktop applications.

We must first add a few global variables. The first two are strings, one representing the SQL statement that we will execute on the database, the other the physical location of the database on the device itself:

Once the global variables are added, we need to create a global variable representing the Recordset that we will manipulate. Add the following line of code:

Notice how Visual Basic's IntelliSense® technology continues to work, even when creating a Windows CE project. That's because the Windows CE Toolkit is an add-in to the traditional Visual Basic product, allowing you to take advantage of all the features in the world's most popular development environment while you build applications for Windows CE.

Figure 12. Setting up data access

Opening the database

Opening the database is as easy as it is in desktop development. First, we need to create the Form_Load() function. You can either hand-code the function or go to the "Object" dropdown and select "Form".

Once the Form_Load() function is available, allocate the Recordset object by adding the following lines of code inside the function:

The FillCustomers function is something we will create in a moment to populate the data in the combo box control.

Now we need to open the Recordset itself so that information can be extracted from it. Change to Form_Load() function to include the new line of code:

The Open method on the Recordset object accepts five parameters: the SQL string (which we already declared as a constant), the Database name and location (which we already declared as a constant), and three integers representing read/write capability and more. For more information on the ADO "Open" command, consult the ADO for Windows CE documentation.

Populating the ComboBox

We will need to create a FillCustomers function that will be called by the Form_Load() subroutine. The FillCustomers function is responsible for traversing the rows in the Customers table and extracting the appropriate information to place in the comboCustomerName dropdown.

The first thing we need to do in the FillCustomers function is to move to the first element in the Recordset. Next, we need to create a while loop that will help us traverse the Recordset with the end-of-file state as the condition:

Inside the while loop we need to add the name of the customer to the combo box and then move on to the next row in the Recordset:

Responding to a ComboBox event

Once a customer name is selected from the combo box, the "click" subroutine will automatically be called. Within the "changed" subroutine, we will need to search the Recordset for the name selected in the combo box. Once the record containing the name is found, we can use the rest of the data in the row to fill out the remainder of the Form.

First, we need to move to the first item in the Recordset. Next, we must once again create a while loop and add some code to search the tables for the specified name. When the name is found, we should break out of the loop. Otherwise, we should continue with the loop.

Updating the text fields

To complete the application, we must add code to update the text fields on the Form with the corresponding data in the Customers table. After the end of the loop in the comboCustomerName_Click function, we need to add the following four lines of code:

textAddress.Text = rsCustomers.Fields("Address").Value
textCity.Text  = rsCustomers.Fields("City").Value
textState.Text = rsCustomers.Fields("Region").Value
textZIP.Text = rsCustomers.Fields("PostalCode").Value

Deploying a Windows CE Application

After we are finished developing the Windows CE application, we must copy it to the remote device and execute it. With the Windows CE Toolkit for Visual Basic 6.0, deploying a Windows CE application is as easy as pressing the "start" button. The Toolkit will automatically copy the application (and any needed DLLs such as Tab Strip controls and more) to the device. Further, it will launch the application on the device for us.

Running the Application

Press the Start button on the Visual Basic main menu.

  • Press the Start button.

After doing so, the Visual Basic run time, the necessary DLLs, and any controls that have yet to be installed on the device are automatically copied.

After that process is complete, the application itself is copied.

The application should automatically start on the device.

Using the Windows CE Accessories

Several Windows CE tools that enable you to go the distance with Windows CE software development are installed alongside the Windows CE Toolkits. The Windows CE Remote Zoomin application, for example, lets you take screenshots of a application as it runs on a remote device.

Figure 13. Windows CE Remote Zoomin

Debugging a Windows CE Application

The debugger in the Windows CE Toolkit for Visual Basic 6.0 can be started by selecting the "Go" item from the "Debug" menu.

  • Select "Debug->Go" from the main menu.

Figure 14. Starting the debugger

The Windows CE Toolkit for Visual Basic 6.0 Debugger

The debugger is a separate program that is launched after the "Go" menu item is selected. From within the debugger, you can set breakpoints, drag variables to the watch window, inspect the callstack, and more.

Figure 15. Inside the debugger

Setting a Breakpoint

In order to set a breakpoint, you need to view the code inside the debugger application. In this release, setting a breakpoint in the Visual Basic code editor will not affect operation of the Windows CE debugger.

  • Open the "Form1" node in the Visual Basic Forms window.
  • Double-click on the comboCustomerName_Click item.
  • The Code Editor will automatically launch.
  • Click in the gutter of the editor next to the line highlighted in the picture above.

More Complex User Interface Tasks

There are several more ActiveX controls for user interface design including tab controls, scrollbars, picture boxes, tree controls, and more. To use these controls, simply drag and drop them from the toolbox onto the Form.

Creating Tabbed Pages

In order to use the TabStrip control, you will need to create separate borderless Frame controls. When a specific tab is selected, you need to hide all Frame controls except the one corresponding to the selected tab.

Setting up the TabStrip control

For example, if we were to drag and drop a TabStrip control and add three tabs to it: "New Order", "Order History", and "Web", we would need to add three corresponding Frame controls for each: fraNewOrder, fraOrderHistory, and fraWeb.

  • Drag and drop a TabStrip control onto the Form, as shown below:

    Figure 16. Dragging a TabStrip control onto the Form

  • Right click on the TabStrip control and select "Properties"

  • Add three tabs and name them "New Order", "Order History", and "Web"

    Figure 17. Adding tabs to the control

Creating the tabbed pages

Now you need to drag and drop some Frame controls onto the Form, make them borderless, and position them on the Tab control.

  • Drag and drop a Frame control onto the Form. Be sure to drop it onto the Form and not another Frame control.

  • Go to the Frame control's property sheet and set its BorderStyle property to "0 – None".

  • Resize the Frame control as shown below:

    Figure 18. Resizing the Frame control

  • Name the Frame control "fraNewOrder".

  • Repeat two more times for controls named "fraOrderHistory" and "fraWeb".

You can drag and drop controls onto the individual Frame controls. The controls will become "children" of the Frame control, so whenever the Frame control is hidden, the controls placed on it will be hidden as well. In order to select a specific Frame, go to the Properties sheet and simply select it in the controls list dropdown:

Figure 19. Selecting a frame

Because all the Frames overlap one another, you will need to use the "Order" menu item (shown below as part of the "Format" menu) to bring a Frame to the foreground so that you can drag and drop controls onto it.

Figure 20. Bringing a frame to the foreground

Setting up tab events

Now that the frames are on the Form, we need to set up the logic so that when a specific tab is selected, the appropriate Frame control is shown. All we need to do is add some code into the TabStrip control's click method that determines what tab was selected and shows the correct Frame control.

  • Go to the Code Editor and select "TabStrip1" from the "Object" dropdown.

  • The TabStrip1_Click method is automatically created for you.

  • Add code at the beginning of the function to hide all of the Frame controls:

  • Add the following code to parse the TabStrip control's click event:

  • Now for each If statement, show the correct Frame control:

The CommandBar Control

Windows CE introduces a new kind of user interface element called a CommandBar. The CommandBar is a special menu bar that hosts not only traditional menu items, but command buttons and combo boxes as well. The CommandBar control replaces the main title bar of the Form.

Using the CommandBar control

Since the CommandBar control replaces the Form's title bar, we will need to remove all borders from the Frame itself. Then, simply drag and drop the CommandBar control onto the Form. While the control can be placed anywhere on the Form, when the application is run, the CommandBar will become the new title bar for the Form.

  • Select the main Form.

  • Go to the Properties sheet and set the "Border" property to "0 – None".

  • Drag and drop the CommandBar control onto the Form.

    Figure 21. Dragging and dropping the CommandBar control onto the form

  • Go to the Form_Load function and add a line of code to set the width of the CommandBar control:

Adding elements to the CommandBar control

To add controls to the CommandBar, use the Add method of the CommandBarControls collection. Once you add member controls to the CommandBar control, the CommandBar reacts to user input by generating events. A CommandBar control generates a specific event for each type of member control. For example, when a user selects any CommandBarButton object, the control fires the ButtonClick event. You therefore must code the event to determine which particular CommandBarButton object was selected by the user.

You can add the following types of object to your CommandBar control:

  • CommandBarButton
  • CommandBarComboBox
  • CommandBarMenuBar

For example, adding a menu to the CommandBar control involves first creating the CommandBarMenuBar object and then adding it to the Controls collection of the CommandBar control.

Then, adding the actual menus is as easy as creating the menu object, and adding elements to it.

The Windows CE Toolkit for Visual Basic 6.0 documentation includes more sample code for using the CommandBar control.

Handling CommandBar events

There is no specific event handler for the individual menu items. Instead, you must use the MenuClick event handler of the CommandBar control and parse the Key property for the correct sub-menu item:

Summary

Using the Windows CE Toolkit for Visual Basic 6.0, you can take advantage of the world's most popular development tool and use your existing skills to build and deploy compelling applications for the next generation of computing devices.