Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Designing a User Interface on a Mobile Device

3 Jan 2008 4  
This article introduces a set of sophisticated and versatile Visual Studio controls for designing a user interface on a mobile device.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

This is a showcase review for our sponsors at The Code Project. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

Introduction

Developing a mobile application is tricky. A mobile device, in contrast to a desktop computer, has a lot smaller display, low CPU performance and limited ways of user input. Designing a user interface which is clear, intuitive, comfortable to use and even Windows Mobile standardized is a piece of art. Resco provides a set of Microsoft Visual Studio controls which meet all the described criteria.

200x200_mobileformstoolkit.jpg

What Exactly is Resco MobileForms Toolkit?

MobileForms Toolkit is a set of Visual Studio graphical user interface controls. These controls were designed keeping all the mentioned attributes of mobile application development in mind. All the controls are designed specifically for mobile devices.

The whole toolkit contains the following 11 unique controls:

AdvancedList .NET

AdvancedList.png

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

AdvancedTree .NET

AdvancedTree.png

This control is designed for displaying data organized in a tree, where each individual node can be expanded or collapsed to reveal or hide the data contained in the sub-node. A single vertical scroll bar suffices again to fit all the data on the screen, which makes using the control comfortable. The data is displayed inside the cells contained in the NodeTemplate. NodeTemplates are first created during design-time. They contain cells which can display text, hyperlinks, images or custom data.

DetailView .NET

DetailView.png

This is a powerful, elegant and time-saving data input control. Creating a data input form with DetailView takes just a few minutes. Labeled TextBoxes, CheckBoxes, ComboBoxes, DateTimePickers and other data input controls are created and laid out in a single compact environment of DetailView. Furthermore, if its client area is not large enough to display all the information, you can add new pages to it containing yet other data input controls.

SmartGrid .NET

SmartGrid.png

Do you need to display data from a database in the form of a grid? SmartGrid .NET is designed just for this purpose. One can also use it to edit the data using a CheckBox, TextBox or by providing any UserControl derived object. SmartGrid displays that object over the edited cell and informs the programmer by firing an event that he should provide the data from the edited cell to the UserControl. Once the changes have been made, SmartGrid fires a new event informing the programmer that it is time to save the changes back into its cell.

CompactChart .NET

CompactChart.png

If you have a collection of data that should be presented to the user in a graphical form, the ChartControl is the right choice. You can display charts like: bar chart, cake chart, filled-region chart, line chart or doughnut chart. CompactChart .NET can also be data bound and can support XML serialization and deserialization of its layout.

InkBox .NET

This control is designed for inputting a user�s signature. The user can draw anything using the stylus into its client area. The drawing can then be saved into an image.

OutlookShortcutBar .NET

This 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's Outlook application.

OutlookWeekCalendar .NET

OutlookWeekCalendar.png

This is designed to display your planned appointments, meetings or just notes throughout the day or throughout the week. The description of the planned item can be customized.

OutlookMonthCalendar .NET

OutlookMonthCalendar.png

This displays your planned appointments, meetings or just notes throughout the month or throughout the year. You can customize how many months should be displayed in a row when displaying the year plan.

OutlookDateTimePicker .NET

This control can be used in two different styles:

  • Date and time picker � for selection of date, time or both
  • Week day picker � for a week day selection, typically used in a calendar agenda-like programs

Zip .NET

This is not a UI control, but rather a library written completely in .NET managed code. It allows the programmer to compress streams of data by using the industry standard ZIP compression. Several levels of compression can be chosen. The compressed archive can also be password protected.


All the controls mentioned so far have strong Visual Studio designer support. Some of the powerful features of Resco MobileForms Toolkit controls include:

  • XML serialization
  • Data binding
  • Delay load functionality

XML Serialization

The layout of the control can be saved during design-time into an XML file and then loaded back during run-time. This changes the whole look of the control by calling just a single method. Programmers can prepare a set of various XML templates and change the look of the control anytime. A sophisticated designer application is provided for applicable controls which can be used to create the XML templates.

Data Binding

Controls can be bound to any data source which implements either the IList or IListSource interface.

Delay Load Functionality

When this functionality is engaged, the control only loads those rows from the database which are necessary. More rows are loaded later when they are needed. This functionality allows the programmer to display the data from even a huge database really fast.

About Resco.NET

Resco is a dominant provider of developer components and tools for mobile devices running the Microsoft Windows Mobile operating system. Started with development of end-user applications which are currently the best selling, Resco moved on to creating developer components, libraries and tools that assist developer companies with designing a professional-looking, yet easy and comfortable to use interface. To find out more about Resco developer tools, click here. To find out more about Resco, click here.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here