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.
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