Introduction
Devices with rich functionality, such as bar code or RFID scanners, WLAN connectivity with flexible VoIP support, or rugged form factor can be used in various scenarios over different industries. In this article, I will demonstrate how to create a simple application using Microsoft Visual Studio and Resco MobileForms Toolkit. It will use the built-in barcode reader to detect items in our custom inventory. The main purpose of this application is making the stocktaking a lot easier. The application will provide following functionality:
- Read items stored in SQL CE Server database,
- Display loaded items using Resco AdvancedList,
- Handle barcode reader input,
- Allows simple editing of a selected item using Resco DetailView,
- Save changes to the database.
Prerequisites
You will need:
- Microsoft Windows Mobile 5.0 SDK (or later) which you can download here.
- Resco MobileForms Toolkit 2010 which you can download here.
- A Symbol device with a built-in barcode reader to test the application.
- A SymbolSDK which you can download here
*Optionally you can use any WM device (or emulator) without the barcode reader functionality.
Resco MobileForms Toolkit is a set of Visual Studio controls designed for mobile devices. After installing Resco MobileForms Toolkit Volume 2010 on your computer, the controls will be automatically added to the Visual Studio’s toolbox. We will use following Resco controls and libraries in the project:
- Resco AdvancedList library for .NET CF
- Resco DetailView for .NET CF
The application can be created for both .NET Compact Framework 2.0 and .NET Compact Framework 3.5. Just download the appropriate version of Resco MobileForms Toolkit 2010.
Database Model
For the purpose of this application, I created a simple database with one table storing data of items in our inventory.
The database has six columns:
- ID string id (primary key) holding barcode id of item,
- Name stores the name of the item,
- Description a short description of the item,
- NextRevison datetime stamp of next revision of the item,
- Checked bit flag determining if the item was checked (revised),
- Image picture of the item.
(This is the first article of a series of articles to come and this data model will be extended in the future)
User Interface
The application consists of two Form objects:
- MasterForm contains list of items
- DetailsForm allows user to edit item
MasterForm
All you need to do to format and display items from the database is just one control. Using Resco AdvancedList’s powerful visual templates, you can specify exactly where and how your data should be displayed.
Data Loading and Binding
In this application, AdvancedList’s DataSource property is bound to a list of objects that are instances of the Product class.
Product class contains several properties that match the columns of our table in the database: Name, Description, NextRevision, Image, Checked and ID.
The list of items is filled in LoadData() method of MasterForm class. (You can see the code of this method and download the whole source code of this application through link that is attached at the end of the article). Now, when the items are loaded and stored in the List, all you need to do is set DataSource property of AdvancedList to this List.
Designing Templates for Items
The design of each row in the AdvancedList is controlled by a template. In the simplest case you will have one template for all items, or one “normal” and one “selected” template. The template itself consists of multiple cells. The purpose of each cell is to visualize a property of the row data.
To bind a cell to the underlying data object property, simply set its CellSource.
There are special cells for text, images, links etc. You can even create your own. Each cell can be positioned within its row and designed by changing its font, fore and background color, alignment etc.
Both a Visual Studio integrated designer and a standalone application are provided for creating templates.
Enhancing the Advanced List
The sample application can be run even on devices that do not have a barcode reader. Since without the barcode scanner there would not be a way of editing an item, I have provided a “workaround” by placing a ButtonCell into the AdvancedList template. Now I handle the ButtonClick event, where I can show the DetailsForm the same way as it is shown when the barcode reader reads the correct barcode id of an item.
Last thing that I want to demonstrate on this form is the CustomizeCell property of the cell. If you set this property true and register a method to handle the AdvancedList CustomizeCell event, you can change the appearance of this cell at the runtime. In the application, I used the same approach to show the user whether the item was checked or not. In the CustomizeCell handler I inspect the Checked property of the underlying object (that is passed to this method as a parameter) and if it is false I set the background of this cell Red.
DetailsForm
This form contains two controls, a standard PictureBox and Resco DetailView. Further, it has a property Product storing an instance of the Product class passed to this form from MasterForm. And what we want to do on this form? Edit the item, which means creating a layout for editing and that means a lot of textboxes, checkboxes, datetime pickers, labels, etc. — all in all a heap of work. Fortunately, it all can be done with Resco DetailView as simple as creating one page with editable items that matches properties of the object that is passed to DataSource property of the DetailView. We don’t need to bother with methods that will update the content of the Product object; all is handled by the DetailView on its own.
As for the AdvancedList, there is also a standalone application that allows you to design the layout of pages in the DetailView. Do note that DetailView provides a lot of functionality that is out of scope of this article, such as data validation, paging…
BarCode Manager Class
This class is a wrapper around Symbol.Barcode class and serves also as a demonstration of how easy the handling of barcode input can be. When instantiated, the inner Symbol.Barcode object is created and an event handler listening to notifications from the scanner is attached to its ReadNotify event.
In your code you can simply instantiate BarCodeMgr class, add the HandleData event so you can process inputs from the scanner. In this application, I handle the input as follows. When the data from reader is obtained, I check the list of products for the matching ID (provided as parameter of HandleData handler). When a matching product is found, it is shown using the DetailsForm.
Conclusion
As you can see, the data presentation and manipulation can be greatly simplified by using powerful controls such as the AdvancedList and DetailView. Of course there is a lot of functionality that these controls provide and which was not stated in this article. Have I noticed that the whole list of items can be touch-scrolled by a finger? Enough of words, the best way to find out how easy is creating a powerful mobile application with the Resco MobileForms Toolkit is to try it yourself.
Download the source code of this application nd find out: http://www.resco.net/developer/downloads/barcode.zip
About Resco MobileForms Toolkit
Resco MobileForms Toolkit is one of the richest and most comprehensive sets of Microsoft Visual Studio controls and libraries designed for developers of software solutions for mobile devices. In its portfolio there are controls and libraries that tackle most problems developers encounter in the mobile environment. Flexible keyboard, professional list control, powerful grid control, charting control, and scheduling control — to mention only the most frequently used ones.
For more information about Resco MobileForms Toolkit, visit http://www.resco.net/developer/mobileformstoolkit/default.aspx.
