Development | .NET Compact Framework

Developing Preview/Detail Forms using the New Advanced .NET CF Controls
Written by Radomir Vozar  [author's bio]  [read 49709 times]
Edited by Derek

         

Page 1  Page 2 

Developing Preview/Detail Forms using the New Advanced .NET CF Controls.

Most developers who have been developing their applications for mobile devices are in a situation when they must consider a changeover from the old known eVB developer tool to the new .NET Compact Framework environment. At the first glance the .NET CF supports everything that is necessary to build a robust mobile database solution displaying data in different Windows controls. The problem is that many of these controls haven’t been designed explicitly for mobile devices and that’s why they aren’t suitable for use in every situation.

In this article I would like to present an alternative way of creating preview and detail forms using third party .NET CF components named AdvancedList and DetailView (update: now part of the Resco's Mobile Forms Toolkit).

One of the main benefits of these components is their native mobile design similar to that of the Pocket PC PIM applications (e.g. Inbox, Calendar, Contacts, ).

Another major advantage is that they are easy to set-up in the Visual Studio Designer and they comprise native support connecting to SQLCE databases, which significantly decreases the necessary development time. This way you can easily create robust, colorful and database-linked forms just by clicking the property grid in the Visual Studio Designer and writing a few lines of code to load the data.

AdvancedList a Substitution for ListView and DataGrid.

The AdvancedList control is a substitute for the traditional ListView and DataGrid controls which makes more efficient use of the small display of mobile devices. Each row of the list is divided into several cells, which can be freely located within the row. Individual cells can include text, graphic or hyperlink. Every row can be of different height, so if there is a need to display more data in one row, it can be conveniently divided into several sub-rows. This technology allows you to display data in a legible form without the need to use a horizontal scrollbar, which is convenient especially for mobile devices.

The main feature of the control is the Row Template. Each Row Template defines the style to display the data in a row. It is possible to specify several different templates for every AdvancedList in a project. This provides the option of displaying different data in different ways depending on its character. This way you can define for example a more detailed view of the selected rows, or use the component as a Master-Details control, where master rows have a completely different look from the detail rows.

In addition the AdvancedList natively supports connection to SQL CE databases through its DBConnector property. Thanks to this feature, it is extremely easy to set up the entire component in the design mode. You only need one row of source code to load data into the list and you are finished!

The following picture shows the AdvancedList control displaying a list of customers in preview style, while the selected row uses a different style to display more detailed information about the selected customer.

Although the above example may look quite complex, most of the work has been done in VS .NET Designer by defining three different templates. The first one for the header row, the second one for the preview style and the third, more detailed one, for the selected customer. Each template defines appropriate data mapping for every cell. You only need to enter three lines of code to load the data using DBConnector.

'setting the ConnectionString to the NorthWind SQLCE database
AdvancedList1.DbConnector.ConnectionString = _
               "Data Source = \Program Files\DevbuzzSample\Northwind.sdf;"

'setting the CommandText
AdvancedList1.DbConnector.CommandText = "SELECT * FROM customers"

'loading data with the DbConnector
AdvancedList1.LoadData()

As you can see on the AdvancedList image above the control has yet another unique feature. Its the ability to display different kinds of cells like hyperlinks and graphics. In addition to these cell types the control also provides the corresponding events, which can be used to perform an appropriate action when the user clicks a hyperlink or a graphics. So if he or she taps e.g. an e-mail address, the application immediately displays a new message dialog box. Or if a user taps the customer name link, the application displays a customer details form.

Private Sub AdvancedList1_LinkClick(ByVal sender As Object,
     ByVal e As Resco.Controls.LinkEventArgs) Handles AdvancedList1.LinkClick

     ' Handle the link click event
     If e.DataRow.CurrentTemplateIndex = 2 Then
         Select Case e.CellIndex
             Case 0 ' Customer Name
                 ' Show detail form of the selected customer
                 ShowCustomerDetail()

             Case 8 ' E-mail
                 ' Run New Message dialog
                 CreateProcess("iexplore", "MailTo:" & e.Target, IntPtr.Zero,
                     IntPtr.Zero, False, 0, IntPtr.Zero, IntPtr.Zero,
                     IntPtr.Zero, IntPtr.Zero)

         End Select
     End If
End Sub

Next Page 

Back to .NET Compact Framework | [Article Index]