Development | .NET Compact Framework

RESCO MobileSales .NET – a modern way of creating mobile UI
Written by Radomir Vozar  [author's bio]  [read 15911 times]
Edited by Derek

   

Page 1 

MobileSales .NET – a modern way of creating mobile UI

The user interface is an integral part of each business software application and in many cases a quality user interface plays the key role in success and popularity of the application. The main goal of this article is to show a modern way of developing stylish and easy-to-use interfaces for mobile sales force automation applications in Microsoft Visual Studio .NET and .NET Compact Framework.

Even though Microsoft Visual Studio .NET provides developers with a reasonable environment for smart device application development, the standard controls included with it have been designed for the desktop environment and using them in mobile application projects can be tedious and sometimes problematic.

Stylish customers list

The first thing I’m going to create is a form containing a list of customers.

This seems like an easy task. The corresponding table contains contact data, such as company name, address, telephone, etc., so I only need to display this information in the list. The problem is that the screen width of Pocket PC devices is just 240 pixels wide, so there is not enough space to show all the information in one row.

The solution is to use the Resco AdvancedList .NET control. It allows me to define custom row templates of greater height, so I can conveniently distribute customer related data represented as text cells across the row.

Moreover, I can define one row template for the preview row and a second one (containing more detailed information) for the selected row.

As you can see from the picture above, this form shows all important customer data without the need for a horizontal scrollbar, which consumes screen real estate as well as making the form layout confusing.

In addition, the AdvancedList .NET control ensures the selected row can provide additional functionality which makes the form even more intuitive. In this case I have used the Link type cell (company name), which is used for redirection to a customer detail form and two Image type cells containing Delete and Basket buttons to allow the user to perform those respective actions. You have the option of placing any other buttons; such as Sales report, Open bills, etc.; on the selected row template as well.

To make the form look more attractive you could also use an Image cell containing a specific color gradient as the row background.

Similar techniques also apply to other list forms, like the list of products and orders, where I placed the Resco OutlookCalendar .NET control to allow easy navigation between week days.

Standardized detailed forms

Although the AdvancedList allows us to display all important data, but it doesn’t natively support data modification. To do this we need to use another form and the powerful Resco DetailView .NET control. This control supports all standard simple edit controls, in addition to providing a standardized and consistent look and feel to your application.

All I need to do now is to link all items to a corresponding data column and let the DetailView .NET take care of data editing.

Order processing

There are many ways to design an ordering form, here is one example.

I have divided the form into three parts - Order header, Order details and Signature and I placed every part on a separate tab of the TabControl.

The first one contains order header related data and the whole tab consists basically of the DetailView .NET control, which allows data editing through the respective edit controls.

The second tab provides for entering of order details, again implemented using the AdvancedList .NET control to fill the entire tab. The control displays specific order details, such as the product name, its current price and ordered quantity. Entering/editing of order details can be performed directly in the selected row, which contains special editable cells for product selection (showing the Product list form) and quantity editing (showing the TextBox control). This behavior together with the delete button located directly within the selected row makes the form very intuitive and easy to use.

The third tab contains only the Resco SignatureBox .NET control, allowing the user to insert a customer signature.

Outlook-like main screen

The main form of the application behaves like an Outlook navigation bar providing easy access to all modules of the application and any other applications which you may use in the process. The main screen consists of the Resco OutlookShortcutBar .NET control containing three groups of shortcuts:

• Modules — application modules such as Customers, Products and Orders
• Pocket Outlook — Calendar, Contacts, Inbox, Notes, Tasks
• Other — other applications such as Internet Explorer, File Explorer, Calculator

In conclusion

I hope the above examples have given you some ideas on how you can use the MobileForms Toolkit as a suite of powerful .NET controls to give your mobile application a stylish and intuitive user interface.

Click here to learn more about the Resco MobileForms Toolkit or download the free evaluation version.

The MobileSales sample together with the Visual Basic source code is included in the MobileForms Toolkit Professional Edition.

Back to .NET Compact Framework | [Article Index]