Creating Mobile Solutions for Visual FoxPro Developers 

 

Cathi Gero
Prenia Corporation (prenia.com)

May 2003

Applies to:
   Microsoft® Visual Studio® .NET 2003
   Microsoft® Visual FoxPro® 8.0

Summary: Learn about the ASP.NET Mobile Controls and how they enable you to build a Web-based presentation layer for your Visual FoxPro application that targets multiple mobile devices. (12 printed pages)

Contents

Overview
Challenge
Solution
How ASP.NET Mobile Controls Work
ASP.NET Mobile Controls
Working with Data
Extending Your Visual FoxPro Applications
Conclusion

Overview

Wireless and mobile solutions are becoming an important focus for many companies. As a Visual FoxPro developer, you can extend your existing applications to expose information to be rendered on these mobile devices. Building applications for mobile devices mirrors how applications are written for the desktop. When developers build desktop applications today, they use server development or client development to create the desktop experience. Therefore, you have a user interface that is projected from a server or a user interface that runs on the client. The client can be either a browser or a rich client.

The Compact Framework is the client version. It's just like a Visual FoxPro application that runs on a desktop. The Compact Framework enables the development of rich-client applications with controls that are run on the device. You get integration with assets on the operating system, whether it's the capability to make phone calls directly inside your applications or integrating with Pocket PC assets, such as SQL Server CE and Pocket Outlook. You can also write applications that work offline because the code actually lives on the device.

ASP.NET Mobile Controls, formerly called the Mobile Internet Toolkit (MMIT) as an add-on to Visual Studio .NET 2002, are integrated with the Visual Studio .NET 2003 development environment including a PocketPC emulator utility. ASP.NET Mobile Controls allow developers to create Web pages and content that easily targets various types of mobile devices, including mobile phones, PDAs, and pagers. Not only are ASP.NET Mobile Controls integrated within Visual Studio .NET 2003, they also act as an extension to the core ASP.NET development toolset. This white paper focuses on how to build mobile solutions for servers using the ASP.NET Mobile Controls that build upon applications written using Visual FoxPro.

Challenge

A Visual FoxPro developer just starting to build a mobile Web site faces many new complexities. Most Visual FoxPro developers have already gone through the debate about screen resolution, cookies, and other issues.

When you begin looking at the number of devices you have to deal with in the mobile space, you face the gamut from a two-line, text-only mobile phone to a rich Pocket PC. You then move on to the RIM Blackberry devices and the DoKoMo devices in Japan. Suddenly, you are dealing with a whole new host of issues and new markup languages. For example, the Pocket PC supports HTML; mobile phones in the U.S. and Europe primarily support WML or Wireless Markup Language; and the DoKoMo phones in Japan support CHTML or Compact HTML. Moreover, if all the various markup languages aren't enough, you have different screen size resolutions and pagination for the different screen sizes; and browser implementations of the various markup languages—particularly WML—are incredibly diverse. Therefore, a developer must find a way to code to every browser that supports WML to actually make sure a site works on all devices.

Solution

ASP.NET Mobile Controls enable you to build another presentation layer to expose Visual FoxPro application information (see Figure 1). You build one presentation layer for the desktop and another presentation layer for mobile devices. The one great thing about this is that you're still using the same middle-tier business logic for both of these presentation layers. ASP.NET Mobile Controls provide the controls you need to build the mobile device presentation layer. They are also integrated into the Visual Studio .NET IDE so you get the same drag-and-drop environment (see Figure 2). Because the designer is part of Visual Studio .NET, you have the full debugging capabilities that you have for standard ASP.NET Web applications. You can use any of the programming languages available in Visual Studio .NET to create a wireless application.

Figure 1   ASP.NET Mobile Controls leverage ASP.NET to empower developers to build mobile Web applications and sites that target multiple mobile devices.

Click here for larger image

Figure 2   ASP.NET Mobile Controls integrate with the Visual Studio .NET development environment for ease of use.

ASP.NET Mobile Controls also support built-in pagination, which is the capability to group data automatically, depending on the capabilities of the device. You can use the built-in paging properties in ASP.NET Mobile Controls, or you can define custom pagination. For example, if a WAP phone supports only five lines of data display, ASP.NET Mobile Controls automatically create next and back options so the user can more easily move through the dataset.

How ASP.NET Mobile Controls Work

ASP.NET Mobile Controls are an extension to ASP.NET. ASP.NET Mobile Controls are built on top of the .NET Framework and ASP.NET. The controls are actually inherited from the ASP.NET Web Forms controls (see Figure 3).

Figure 3   The ASP.NET Mobile Controls are inherited from the ASP.NET Web Forms controls.

In steps:

  1. A Web client requests a Web page.
  2. The request travels over the Internet and is received by IIS.
  3. It is then handled by the .NET Framework.
  4. The requested page is compiled by ASP.NET.
  5. ASP.NET Mobile Controls handle any mobile device requirements.
  6. The page is then returned to the client.

ASP.NET Mobile Controls evaluate the device capabilities at run time. For each of the controls that have been placed on the mobile page, there is a corresponding adapter that renders markup appropriate for that device. Therefore, you lay out functional pieces in the form of controls on the page. Then when the request comes in, an adapter is selected that renders that functionality for that device (see Figure 4). For example, the calendar on a rich device can be displayed with table layout and provide a fairly rich experience for selecting dates by selecting pieces from the table. Alternatively, on a small mobile phone, that display is altered to select the month and then select the week from that month. All you have to do is take the mobile calendar, place it on the page, and the runtime takes care of the rest based on what the device can handle.

Figure 4   The ASP.NET Mobile Controls generate different output for various devices automatically.

Device Emulators

Device emulators provide an affordable and feasible means of first-level testing for mobile Web applications. You can test a mobile Web application from your desktop PC, verifying the basic look and feel, site navigation, core functionality, and your expectations from the Web site using the emulators. A generic PocketPC emulator is included in Visual Studio .NET 2003. For a listing of additional emulators that can be used with ASP.NET Mobile Controls, refer to the Microsoft Knowledge Base article 320977.

ASP.NET Mobile Controls

There are many controls that you can use to develop your Mobile applications. Table 1 shows a listing of all controls and how they relate to Web Forms and Visual FoxPro controls.

Table 1   A comparison of controls for Web Forms, mobile Web Forms, and Visual FoxPro

Web Forms control Mobile control Visual FoxPro control
AdRotator AdRotator [no equivalent control]
Button, ImageButton, LinkButton Command Command Button
Calendar Calendar ActiveX Calendar
[no equivalent control] PhoneCall [no equivalent control]
CompareValidator CompareValidator [no equivalent control]
CustomValidator CustomValidator [no equivalent control]
DataList, Repeater List List Box
DataGrid ObjectList Grid
[no equivalent control] DeviceSpecific [no equivalent control]
[no equivalent control] Form Form
Image Image Image
Label Label Label
Hyperlink Link Hyperlink Button, Hyperlink Image, Hyperlink Label
Panel Panel Container
RangeValidator RangeValidator [no equivalent control]
RegularExpressionValidator RegularExpressionValidator [no equivalent control]
RequiredFieldValidator RequiredFieldValidator [no equivalent control]
CheckBox, CheckBoxList, DropDown, DropDownList, ListBox, RadioButton, RadioButtonList SelectionList Check box, Combo Box, List Box, Option Buttons
[no equivalent control] StyleSheet [no equivalent control]
Table [no equivalent control] [no equivalent control]
TextBox TextBox Edit Box, TextBox
[no equivalent control] TextView Edit Box
ValidationSummary ValidationSummary [no equivalent control]

Container Controls

Container controls are parents to other controls, They provide developers with an easy way to organize groups of controls on their pages. The two container controls that are available for mobile applications are the Form and the Panel. You need to have the Form control on a page for other mobile Web Forms controls to work because none of the functionality offered by other controls is available outside a <mobile:Form> tag set. The Panel control is also a container control; however, this control must also be nested within a Form control.

The Form control can contain as many controls as the developer wants to use. However, keep in mind the display limitations of the different devices . The runtime treats each Form as a separate unit and does not send more than one Form to the client at the same time. In Web Forms, you transfer to different Web pages; in mobile Web Forms, you transfer to different Forms. All the Forms are contained on one Web page. To transfer to another Form, you set the property ActiveForm to the name of the form in which to transfer:

ActiveForm = Form2

The Panel control provides a container, similar to the Container control in Visual FoxPro, that can be used to group multiple controls. By doing this, you can use a single control for displaying, hiding, enabling, or disabling a set of controls. You can also apply styles to the Panel that are inherited by child controls. Another useful application of the Panel control is that it can act as a placeholder for dynamically created controls.

Text Display Controls

The Label, TextBox, and TextView controls can be used to display text to the client.

The Label control is used only to display text to the client. The text is read-only, and the control does not provide many properties or events to configure.

The TextBox control provides single-line input of data by the client. It can be used to display or collect text or to mask characters to act as a password data entry.

The TreeView control is exclusive to ASP.NET Mobile Controls. It allows for the display of multilined text to render large amounts of text. It also supports a small set of markup tags for bold, italic, page break, paragraph, and anchoring. In addition, the TreeView control supports pagination.

List and Selection Controls

The list and selection ASP.NET Mobile Controls include the List, SelectionList, and ObjectList controls. Use these controls so that the client can choose from a group of options and display information in a grid. Mobile devices are very limited in memory, screen size, and data entry capability. It can take quite a long time to enter your name and contact information into a mobile phone browser or a PDA. Therefore, it is very important to assist the user in creating items to choose from and limiting the amount of typing. Using the List and SelectionList controls is very useful in providing this functionality.

The List control can be used to present a short list of options for users. It can be rendered either as a static list or an interactive list. A static list is used for listing items that the user can only view, not choose. An interactive list is used so that the user can make a selection and navigate the user interface. The items can be decorated with numbers or bullets, and this control supports pagination.

<mobile:List id="lstProduce" runat="server"
 Decoration="Bulleted">
   <Item Value="1" Text="Apple"></Item>
   <Item Value="3" Text="Banana"></Item>
</mobile:List>

The SelectionList control is used to provide a short list of options. This control does not support pagination, so it can't display on more than one page at a time. The SelectionList control supports multiple selection options and can be rendered as a list box, multiple selection list box, combo box, radio buttons, or check box.

<mobile:SelectionList id="slstProduce" 
 runat="server" SelectType="Radio">
 <Item Value="1" Text="Onion"></Item>
 <Item Value="2" Text="Celery"></Item>
</mobile:SelectionList>

The ObjectList control is similar to the DataGrid in Web Forms and the Grid control in Visual FoxPro. This control can be used to display multiple fields. It must be associated with a data source and can associate multiple commands with each object inside the control. For a sample display of this control, see Figure 5.

<mobile:ObjectList id="objlstProduce" runat="server" 
   LabelField="ProductName" DataMember="Products" 
   DataSource="<%# Products1 %>"></mobile:ObjectList>

Figure 5   Sample output of the ObjectList control

Table 2 shows a comparison between the list and selection controls.

Table 2   A comparison between the various list and selection controls

  List SelectionList ObjectList
Databound Optional Optional Required
Pagination Yes No Yes
Decoration None, Bulleted, Numbered Dropdown, ListBox, Radio Button, CheckBox, and MultiSelect Only with Customization
Interactive Optional Yes Optional
Similar ASP.NET Control Datalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, and DropDownList Datagrid

Transfer Controls

ASP.NET Mobile Controls provide several controls used for transfer or navigation: the PhoneCall control, the Link control, and the Command control. The PhoneCall control is exclusive to ASP.NET Mobile Controls and generates markup for automatically calling or displaying phone numbers. You can use this control to develop a form that lists different names so that the client can have the phone device automatically dial the number assigned.

The Link control provides a text-based hyperlink to another form on the mobile page or any URL. This control also supports the SoftKey—available on many mobile phones as an extra shortcut navigation key—by setting the SoftkeyLabel property (see Figure 6).

<mobile:Link id="lnkfrmResults" runat="server" 
href="#frmResults">Go to Results</mobile:Link>

Figure 6   The SoftKeys on a mobile phone

The Command control is similar to the CommandButton in Visual FoxPro and is considered a more flexible control than the Link control. The Command control is rendered differently, based on the capabilities of the device. For mobile phones, it is usually rendered as a text-based label and is similar to the Link control. However, on more functional PDAs, it is rendered in HTML. This control also supports SoftKeys.

<mobile:Command id="cmdSelectProduct" runat="server" 
softkeylabel="Next">Select Product</mobile:Command>

Image Display Controls

The Image control and AdRotator control are the image display controls provided by ASP.NET Mobile Controls. The Image control is used to embed images into mobile pages and also to create navigation capabilities. If images are not supported on the requesting device, alternate text is shown.

<mobile:Image id="imgPic" runat="server" ImageUrl=
 "winpro.gif" href="https://www.microsoft.com" 
 AlternateText="Windows 2000"></mobile:Image>

The AdRotator control displays advertisement banners on a Web form. The displayed ad is randomly changed each time the form is loaded or refreshed. This control uses an XML file to retrieve its contents to display.

Calendar Control

The Calendar control is a very rich class that can be used when gathering or keeping track of date-based data. The control renders itself differently based on the device that is being used (see Figure 7). There are many properties that can be set to control how the calendar is displayed.

Figure 7   The Calendar control renders differently based on the type of device.

Validation Controls

ASP.NET Mobile Controls provide various controls that can be applied to validate data used on the mobile page. These controls automatically validate data of the control to which they are assigned. If the data does not pass validation, the controls display a customizable error message to the client. See Table 3 for a listing of these controls and when to use each one.

Table 3   A listing of all the validation controls available for mobile pages

Name Function
CompareValidator Compares two values
CustomValidator Provides custom validation
RangeValidator Validates a range
RegularExpressionValidator Validates an expression
RequiredFieldValidator Validates required data
ValidationSummary Displays a validation summary

Working with Data

Data access is a vital part of any application. There are very few Visual FoxPro applications that don't require the use of data. Mobile applications must also access dynamic data. The .NET Framework includes a set of data access namespaces and classes called ADO.NET. ASP.NET uses ADO.NET to implement its data handling. ADO.NET is specifically designed to optimize data access using either OLE DB or XML. The object model (see Figure 8) is similar to that of ADO and consists of a Connection object (that provides connectivity to a data source) and a Command object (that executes commands on the database to return or modify data, run stored procedures, and so on). In addition, you can use ADO.NET as a robust, hierarchical, disconnected data cache to work with data offline. Use the central disconnected object, the dataset, to sort, search, filter, store pending changes, and navigate through hierarchical data. When designing mobile applications, you can access data using two different approaches: using the Visual FoxPro OLE DB provider to access the tables directly or to direct the mobile application call a Visual FoxPro COM object that retrieves the data and returns XML.

Figure 8   ADO.NET object model

Using the Visual FoxPro OLE DB Provider for Direct Data Access

Developers can use the Visual FoxPro OLE DB provider to access the tables directly and bind them to controls so that they can be displayed and modified in a mobile form. The OLE DB provider implements a set of COM interfaces that allows access to the data in a standard row/column format. The OLE DB provider supports the Visual FoxPro database events. You can call stored procedures (even those that require parameters), and access triggers, rules, and default values in the database container. In Visual FoxPro 8.0, the OLE DB provider is enhanced to provide even greater compatibility with ADO.NET. The following code example shows how to retrieve records from a customer's Visual FoxPro table and display the results in a List control.

Dim connStr As String = "Provider=VFPOLEDB.1;Data Source=" & _
    "C:\SAMPLES\DATA\TESTDATA.DBC"

Dim strSQL As String = "SELECT * FROM Customer"
Dim oda As New OleDbDataAdapter(strSQL, connStr)
Dim ds As New DataSet()

oda.Fill(ds, "CustomerInfo")

'Assign DataSet to List control
lstCountry.DataTextField = "Country"
lstCountry.DataValueField = "Country"
lstCountry.DataSource = ds
lstCountry.DataBind()

The same functionality can be used to access SQL Server data (version 7.0 and later) using the ADO.NET SQL Client Data Provider. The provider implements the same base classes as the OLE DB provider. The following code is the preceding example using SQL Server data.

Dim connStr As String = "Data Source=(local);" & _ 
    "Initial Catalog=Northwind;" & _
    "Integrated Security=SSPI;" & _
    "Persist Security Info=False"

Dim strSQL As String = "SELECT * FROM Customers"
Dim oda As New SqlDataAdapter(strSQL, connStr)
Dim ds As New DataSet()

oda.Fill(ds, "CustomerInfo")

'Assign DataSet to List control
lstCountry.DataTextField = "Country"
lstCountry.DataValueField = "Country"
lstCountry.DataSource = ds
lstCountry.DataBind()

Using Visual FoxPro COM Objects for Data Access

Visual FoxPro is a great tool for building middle-tier components based on its data access and string manipulation. It provides developers with the capability to create component-based software applications. Visual FoxPro 8.0 introduces new features for even greater control when working with data inside your COM objects.

Visual FoxPro 8.0 provides enhancements to XML support—in particular, increased compatibility with Visual Studio .NET datasets and diffgrams. The XMLAdapter class supports hierarchical XML format that improves the capability of Visual FoxPro to interoperate with XML produced from and written to .NET datasets. Visual FoxPro 8.0 can read from and write to hierarchical XML and convert it to separate native cursors. When the XML is hierarchical, but does not represent a collection of related tables, it uses one table that represents the result of a multitable SQL Join command. Only one Visual FoxPro cursor is created.

* VFP Sample XMLAdpater Code

&& Create XMLAdapter
oXMLAdapter = NEWOBJECT("XMLAdapter")

&& Set XML type to be Diffgram
oXMLAdapter.IsDiffgram = .T.
      
&& Add cursor with schema information
oXMLAdapter.AddTableSchema(customers)
oXMLAdapter.AddTableSchema(orders)
      
&& Export tables to hierarchial XML
oXMLAdapter.ToXML("cXML")

Return cXML

The following is a code example written in Visual Basic .NET that shows how to call the Visual FoxPro COM object.

' VB .NET Sample Code Calling VFP COM Object

' Call VFP COM object
Dim oCustomer As New Customer()

' Call method of COM object to fetch data
Dim cXML As String
cXML = oCustomer.GetData()

' Read XML into a DataSet
Dim ds As New DataSet()
ds.ReadXml(New StringReader(cXML))

Extending Your Visual FoxPro Applications

When Visual FoxPro developers use the ASP.NET Mobile Controls, they can leverage existing applications to reach new users. Information can be extracted from the application and rendered on mobile devices to enable users who cannot access the information they are seeking. For example, sales managers on the road that need sales figures for each of their stores. In this situation, they can use an Internet-enabled mobile phone or Pocket PC to access an ASP.NET mobile Web site that delivers sales information to their mobile devices. The managers control when they access the sales figures. They do not rely on someone from the home office to provide the information through a fax or telephone. The Visual FoxPro information can be retrieved through direct data access using the OLE DB provider or business objects using COM. By using ASP.NET Mobile Controls, you can give the power to users to decide when and where they want information, without having to run the Visual FoxPro application.

Conclusion

As the availability of mobile-device technology and high-speed wireless networks increases, consumer demand for mobile-based content and features to expand Visual FoxPro applications also increases. As a result, you can leverage the power of ASP.NET Mobile Controls to provide information to consumers through reliable, mobile Web applications. ASP.NET Mobile Controls offer developers an infrastructure to build robust applications that integrate with the look and feel of existing systems. They have a great potential to influence the way people deal with information and the environments within which it can be accessed and used.

© Microsoft Corporation. All rights reserved.