Thursday, July 23, 2009

Walkthrough: Custom Controls development for .Net Compact Framework (Episode 1)

Overview: What is this guy talking about?

In most of the projects I had, there was always the need of develop at least one custom control to provide a really good user experience. As I said before in several posts, the user experience is such a critical aspect of any mobile development, that the standard controls are never enough for fulfilling it. And this need is even beyond the lack of some desired features in the current version of Windows Mobile standard controls. Even if we would have cinematic touch scrolling or transparent backgrounds in .Net CF controls, we will highly probably still needing to develop custom controls providing the right user experience to our users, when showing specific business data or interactions that cannot been achieve with the standard controls.

Unfortunately, there is not enough guidance about how to develop a .Net CF custom control in an start-to-end tutorialish approach, a way that you can follow it from scratch, passing thru a sequence of steps that will lead you to a finished custom control, with a clear understanding of what you should take care about during the development process.

So, I decided to start a series of posts on how to develop a real-world custom control for .Net CF. My hope is that these posts will be useful for any developer who needs to develop a .Net CF custom control for a real-world application. That includes people working with me and even myself :). My goal is to be focused not only on the User Control UI elements coding, but also on its usability during the development and application support, and how this control should interact with the business elements, taking care of keeping them decoupled and testable while the control stills providing the desired UX and performance.

Does it sound good? Quite ambitious maybe? I guess YES, YES. And I’ve already spent too many typing on this overview, so let’s start.

What is a Custom Control? (Custom controls Vs. UserControls)

For who are new to controls development in .Net, there used to be a big confusion between what is a UserControl and what is a custom Control.

A UserControl is basically a UI component, which is made of other controls which can also be User Controls, and that has a design-time experience very similar to the Form’s one. A UserControl is built based on composition. Its goal is helping you to reuse a set of UI elements on more than one Form providing a consistent look & feel and usability from both the development and user experience point of view.

So, if you need to show a Customer Details section in several views, you can create a CustomerDetails user control which will include a set of labels which will be filled with the customer info in the same consistent way along your forms. For achieving that you can just create a new User Control from the “Add Item” menu, call it “CustomerDetails.cs” and in a friendly designer experience, you can drop some labels, change its properties like name, text, font, position them as you prefer, and then using the UserControl code behind, expose a Customer property and fill your labels based on it.

In contrast, a custom Control is a single control. A .Net control which is developed “from scratch” and just by coding. To make it simpler, it’s basically a class that inherits from System.Windows.Forms.Control and overrides some of the Control’s methods, like OnPaint, to provide the expected user experience.

While a UserControl is easier to develop and support, a Custom Control is lighter and faster at runtime, and it gives you the highest flexibility you can get in a .Net control, because you are free to draw whatever you want, even animations, and to handle input messages like keyboard and touch events.

Why do we need a Custom Control? (Understanding the business)

During this walkthrough, I will use an imaginary but concrete business case, because I think it’s the best way to understand the three main questions about a Custom Control:

1. Why do we need it?
2. What do we need from it?
3. How can we do it?

So, to answer the first question let’s start understanding the business case. My case study is an imaginary company that publish a worldwide Restaurant Guide, let’s call it RestoGuide. It has around 150 reviewers around the world, which should collect information about restaurants and send the results to its centralized database. To improve the process, RestoGuide has decided to implement a mobile application (RestoGuideMobile)that will be used by the reviewers to enter the information on site, with the ability to send it almost at real time updating the database for potential online queries.

By using RestoGuideMobile, the reviewer avoids taking notes on paper or recording them on tape, with the need of enter them into the RestoGuide web site later, doubling the risk of human errors. RestoGuideMobile can be used while he is in the restaurant, helping him during the process, and allowing the immediate upload to the centralized database.

Well, there is no mystery on this idea, RestoGuideMobile is just another mobile app which can make the life of its user tons easier. But for making this assertion true, we should take it to the letter. Our app should really make the life of its user tons easier. And the users will interact with our app using the forms and controls we have. Then, for achieving our goal, we should take our app UX very seriously and don’t hesitate in spent several design and development cycles on it. It should fit the business perfectly and the best way is to start with some mockups.

An application will have lots of mockups, but we’ll focus our work on one screen:


This is a mockup of the third step of the Review wizard, it let’s the user to enter the open days and rating for a given restaurant. The screen has been designed thinking in an easy way to enter the data using a mobile device. It’s easy to read and easy to change. But… is this mockup easy to implement in a Windows Mobile .Net Compact Framework application using standard controls? I think this is the answer for question 1, “Why do we need to use custom controls?” we need them for tackling some specific UX challenges, like some of the controls we can see on this mockup, and we need them because we cannot box our mind on a reduced set of controls when we design a good mobile user experience.

From the mockup, we can see at least the following custom controls:

  • WizardHeader: Could be implemented with a User Control, but it has some inline font changes that could be much easier to implement in a Custom Control, and we can get a better look too.
  • OpenDays: This will include a week days multi-selector, that would be implemented using a ListView or a set of labels in a User Control, but a custom control will be much lighter and it gives us the possibility of making it look really good.
  • RatingStars: A typical control for show/enter a rating, but which is not present in Windows Mobile. Again, it can be implemented with a UserControl with a set of images, but a custom control will give us the chance of doing it lighter and to play freely with it.

During the next posts, we’ll implement the three custom controls, and we’ll be tackling the diverse challenges along the way, like:

  • Designing the control API
  • Drawing the control elements
  • Providing a design time experience
  • Resource management
  • Building Drawing Helpers
  • Avoiding flickering (Double buffering)
  • Handling the user input
  • Animations

Well, we have lots of work to do, so stay tuned, this will have tons of fun!