Advanced UI Controls for .NET CF
We'll look at a great control toolkit to make your users more efficient when
working with the mobile applications that you build. It contains both enhanced
versions of the standard controls (like listview and treeview) as well as
completely new controls (like charts and ink support).
Due to new possibilities and emerging technologies, like
WPF and
Silverlight,
there is a huge focus on
UX
at the moment. Developers that take on the
challenge of creating efficient applications will see their efforts paid
off with engaged and motivated users. This is even more important for mobile
enterprise applications mainly due to the fact that the user is probably
somewhere out of the office and very often in a hurry just to get things
done. Therefore, the presentation of information must be very easy, fast,
and generally straightforward.
MobileForms Toolkit
MobileForms Toolkit from Resco is a set of user
interface controls for Visual Studio (yes, the latest version supports
Visual Studio 2008), and all of them were designed to fit the limited
space of a mobile device. The user interface is intuitive, Windows
Mobile standardized, and professional looking. The toolkit currently
contains 11 controls and new controls are being added continuously.
AdvancedTree
One of the newer additions to the toolkit is a replacement to the
standard TreeView controls called
AdvancedTree. The most interesting features are
the possibility to use templates, the powerful graphic abilities,
and the built-in data binding. The concept of templates is shared
with many of the other controls in the toolkit, and they allow you
to show the same data in different ways. You can at least have one
template when the item is collapsed and another one when the item
is expanded. Here are some sample screenshots:
Figure 1. AdvancedTree Control
The templates are built using a standard designer interface from
within Visual Studio, and have a wide range of options to customize
the layout as you want it. A template includes cells that can
display text, hyperlinks, images, or custom data.
The data-binding is very straight-forward where you bind a node in
the three to a table row from the database, and the code to
data-bind the sample shown in figure 1 looks like this:
foreach(DataRow customerRow in dataSet.Tables["Customers"].Rows)
{
BoundNode customerNode = new BoundNode(0, 1, customerRow);
advancedTree.Nodes.Add(customerNode);
DataRow[] orders = customerRow.GetChildRows("CustomersOrders");
foreach(DataRow orderRow in orders)
{
BoundNode orderNode = new BoundNode(2, 3, orderRow);
customerNode.Nodes.Add(orderNode);
DataRow[] orderDetails = orderRow.GetChildRows("OrderDetails");
foreach(DataRow orderDetailRow in orderDetails)
{
BoundNode orderDetailNode = new BoundNode(4, 5, orderDetailRow);
orderNode.Nodes.Add(orderDetailNode);
}
}
}
As you can see, the BoundNode class (defined by the control)
does much of the magic. This shows that even for fairly complex
data, the control doesn't require much coding to bind the data to
its nodes. As with the other controls in the toolkit, the
AdvancedTree control also comes with a number of samples to get you
started.
Note that the control is designed to ease navigation by preventing
horizontal scrolling with only a vertical scroll bar, and it can
be navigated only using hardware keys.
AdvancedList
This is a professional ListView-like control having many useful
features. It may contain several Row templates that are used to
display the data contained in rows, and the data is displayed
within cells that are also part of the row template. The row
templates are created during design time (Visual Studio's designer
can be used for this as well as external designer application).
By using the described row template approach a single vertical
scroll bar suffices for the user to be able to see all the
information contained in the list. AdvancedList can be used to
display images, hyperlinks, text, or custom data.
DetailView
If you want to create powerful and time-saving data input, this
is the control to use. By resembling the user interface used by
many of the applications built-in Windows Mobile, it will make
your users get up to speed faster in using your applications.
The control support labeled TextBoxes, CheckBoxes, ComboBoxes,
DateTimePickers, and other data input controls. Setting up the
control is easy using the Visual Studio designer.
You can read more about the AdvancedList and DetailView
controls in the article Efficient
List and Detail Forms in .NET CF
SmartGrid
Ever missed a powerful grid control when building your Windows
Mobile applications? The SmartGrid control may well be your
answer. The data in the grid can be manipulated using a CheckBox,
TextBox or by providing any control derived from UserControl.
The control is displayed over the edited cell and informs the
developer by firing an event that provides the data from the
edited cell to the control. Once the changes have been made,
the grid fires a new event informing a programmer that it is
time to save the changes back into its cell.
CompactChart
If you need the basic support for creating line, bar, and pie
charts, the CompactChart control may be all you need. Even if
the control is straigh-forward, it's still capable of creating
filled-region chart and doughnut chart. It can be data bound
and support XML serialization and deserialization of its layout.
InkBox
This control is designed for capturing a user's signature.
The user can draw anything using the stylus into its client
area, and the drawing can then be saved into an image.
OutlookShortcutBar
As one of several controls (se below) to help you write
applications that resemble the once built-into Windows Mobile,
this control allows you to you create a list of shortcuts to
other functions or applications within your application. The
list can be expanded or collapsed just like the shortcut bar
in Microsoft Outlook application.
OutlookWeekCalendar
When writing an application to plan appointments, meetings,
or just making notes throughout the day, this control will
really help. The description of the planned item can be
customized.
OutlookMonthCalendar
This is the corresponding control to plan things on a
monthly or yearly basis. You can customize how many months
should be displayed in a row, when displaying the year plan.
Conclusion
The described toolkit can be a great help in creating
efficient user interfaces for Windows Mobile applications.
Not having to focus so much on the details in presentation,
your time and effort can be focused on creating business
value in your applications.
Any comments?
|
