Mobile PractiCEs

Fleux-powered KitchenPal won second prize in Microsoft embeddedSPARK competition

2011-07-08T11:00:00.001-03:00

Congrats to Gianni Rosa Gallina for a fantastic project called “KitchenPal”. It won the second prize in the latest version of the former “Sparks Will Fly” contest, created by Microsoft aiming academics, developers and hobbyists currently called embeddedSPARK.

Gianni did a great work making Fleux work in a Windows Embedded Compact 7 device, adding some great controls and features, and what is even better, his KitchenPal project looks pretty amazing. Watch the video

Sources:
http://www.microsoft.com/Presspass/Features/2011/jun11/WENC06-24EmbeddedSpark.mspx
http://www.windowsfordevices.com/c/a/News/Microsoft-announces-winners-in-embeddedSPARK-2011-competition/

Fleux is coming. Video Preview

2010-11-16T16:42:00.001-03:00

Fleux.Net is a new open source project I published in CodePlex, the open source portal from Microsoft. It includes some of the UX elements I was working on recently, and it’s also an evolution of the UI engine I used for the world cup app.

For further information, you can go to the project portal at http://fleux.codeplex.com/ and play with the latest source code.

It’s a .Net Compact Framework c# development initiative, where I’m trying to share some of my UI dev experience with other Windows Mobile developers.

Fleux is coming. If you want to contribute to the project, or if you want to use Fleux to power your project UI, feel free to contact me at jose@mobilepractices.net.

Do you want to be part of it?

Fleux sample app running on HTC HD2

Welcome Franco!

2010-10-22T16:37:00.001-03:00

I know it’s not new if I say that I was very busy lately. But this time my typical “free time” was occupied by what is the most important part of my life: my family. My second son, Franco, was born on October, 8th, and we all: his mom, his brother, and of course his dad, are extremely happy with the new member.

Thank you Franco for making all of us so happy!

World Cup 2010 Application for Windows Mobile: The panoramic UX proof of concept is here!

2010-06-03T22:46:00.001-03:00

I’m glad to introduce you this small World Cup 2010 application for Windows Mobile, which has been entirely developed using the Compact Framework applying some UX concepts from Windows Phone 7 panoramic UI and spikes on fluent UI I recently worked on.

This app requires a touch-screen device with Windows Mobile and the Microsoft .Net Compact Framework 3.5.

As this is just a proof of concept, you can download it for free following the links bellow:

New version v.0.3.beta available!

English

Español

Deutsch

Portuguese (NEW!)

Brazilian Portuguese (NEW!)

Français (NEW!)

Chinese (NEW!)

Features

The features included are:

64 matches with detailed info which can be browsed by group, date or play off stage.
8 Groups details.
Play-offs chart
Manual update on-line which will got the following:
- World Cup news directly from the FIFA.Com News RSS feed, including pictures and links for full reading in your browser.
- Results for finished matches.

The application can run in almost any Windows Mobile 5.x, 6.x touch screen device. It automatically scales according to your screen size and resolution.

I’ll continue posting about the technology around this app. Stay tuned!

Fixes on v.0.1:

Fixes an issue while parsing dates on some localized versions of Windows Mobile (i.e. Danish, German ROMs) which was preventing the app to run.
Recovery screen if any data inconsistence is detected after update. This is a very weird case, but the app will let you update and get a new set of data if needed.
News screen support for longer text resizing accordingly.

Fixes on v.0.2.beta:

This version downloads the news directly from the Feeds sources, getting a faster connectivity and fresh information from FIFA.com.
Calendar shows July 12th for time zones where the final match will be played that day.
Small visual changes on Calendar.
Play-Offs: Fix on the games chart, which was showing a confusing wrong line-connection for Semi-Finals. The data was correct, but the lines were wrong. This version fixes that.
In some devices or orientations, the Play-offs chart was truncated. That issue is also fixed on this version.

Fixes on v.0.3.beta:

All the v.0.2.beta fixes/changes.
This version doesn’t show the Recovery Page.
Fixes an issue for v.0.2. on a clean installation when the Images folder wasn’t on the XmlData folder.
Includes a new “Today section” allowing you to see the games for today at a glance.

Localization:

This version is published in ~~four~~ seven languages: English, Spanish, Portuguese, Brazilian Portuguese, French, Chinese and German.
Let me say thanks to Marcus Bauer, Matthias Engler, Carlos Paulo, Ayrton Vasconcelos, Thomas Michiels, Nick Käser and Kenn Zhang for their help on translations.

Quick Troubleshooting:

If the app crashes on your device, please email me (jose@mobilepractices.net) the “errorfound” file located on the xmlData folder. That file has the error log so I can see what the problem was. This file will be deleted if you have a successfully synchronization, so please make a copy before sync.
The small portion of the next section visible at the right is intentionally there, to invite you to continue exploring the panorama.
I got some reports where the problem was related to the device running low of resources (even if it has lots of memory). This issue was mostly reported on Omnia II devices. I recommend you to take a look at the processes that are running on your device. A soft reset would help on those cases.
If you think the app is showing wrong times for the matches, please check if your device has the right time zone configured. If that’s not the issue, feel free to send me an email.
Any other issue you may have, don’t hesitate to contact me, because this piece of software is validating a UX engine that should be stable enough to be widespread reusable.

Update (6/19/2010):

Wow! The proof of concept was an incredible success. I got an amazing feedback and the awesome quantity of 35.000+ downloads. This was definitely the kind of feedback I was looking for.

If you have read my blog posts, you should be aware that this is just a UX Proof of concept, and of course, I didn’t expect such a huge amount of downloads ;).

I’ve changed the host server and the updating mechanism, so the client can consume the news feed directly from its original source (i.e. FIFA.com), keeping you with fresher news and simplifying the updating process.

I strongly recommend you to install v.0.3 if you’re still using v.0.1.

Thanks for such a wonderful feedback!. Do you still interested on the technology behind this app?? Maybe you should start thinking on what application can you develop with this kind of UX, or maybe just how can you re design your existing app to provide a fluid experience. Stay tuned!

UX Proof of concept: Developing panorama applications in .Net CF. World Cup Application

2010-05-29T20:56:00.001-03:00

You have probably already seen a bunch of really cool applications demoed as part of the Windows Phone 7 momentum following a chrome-less and fluent approach getting a very rich user experience browsing information that Microsoft has called “Panorama Applications”. In the “UI Design and Interaction Guide for Windows Phone 7 Series” document, panoramic applications are described as applications that “offers a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen. These inherently dynamic application use layered animations and content so that layers smoothly pan at different speeds, similar to parallax effects”.

I really like the way the information flows along a panorama application. That’s a great approach for browsing data in a mobile application, and it’s perfectly suitable in many use cases.

If this is such a great approach, why aren’t we already developing Panorama Application for Windows Mobile? Maybe, because the task is not that easy without Silverlight and Blend for helping us. But I’m totally convinced that a Windows Mobile application can provide such a great user experience, it’s just a matter of developing the right custom controls, and that’s the tricky part. That said, I included some Panorama application concepts as part of my usual UX spikes that fills the little free time I have. It was basically a set of touch friendly controls, responsive and smoothly animated, supporting kinetic scrolling all around, alpha blending, transitions and so on.

While I was working on that, one of the world biggest sport events start was getting really close: The FIFA Soccer World Cup South Africa 2010. And as a big soccer fan, I was really interested on it. I wanted to start following the tournament from my mobile device as well as from my laptop. But unfortunately, I didn’t find any world cup app on the Windows Mobile Marketplace. I did some research on the web, because WinMo users still can download a .cab installer from the web, and just install it on the device, but I didn’t find anything meeting my expectations though.

But I’m a mobile applications developer and my free time development spikes were needing a bounded focus. Building a world cup app was a very good case study for validating the UX development I was working on. A panoramic approach for a World Cup app sounded great to me. So I decided to align my spikes targeting a World Cup Panorama Application, trying to keep it as simple as possible features-wide, but validating the panoramic approach in a .Net Compact Framework application. It was risky, as far as I didn’t have to much time for it (I had less than five weeks before the world cup starts, and this is just my pet project).

Now, we’re only 13 days away from the World Cup first match, and the application is in very good shape. I recorded a small video to show you how it feels in action, running on my Samsung Epix.

If you’re a soccer fan, and you have a Windows Mobile device, I bet you want it on your phone!. It will be available for downloading before the world cup starts. That means I’ll publish it on my blog as a free download, during next week.

The requirements are .Net Compact Framework 3.5, and a touch-screen Windows Mobile device.

If you’re a Windows Mobile developer, you’ll probably find this app very interesting. I hope we start seeing lots of Panorama Applications not only in Windows Phone 7, but also in Windows Mobile 6.x. If we have the ability to build such kind of UX in .Net CF, our applications eco system will be better for sure.

Stay tuned! This story has just begun.

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

2009-07-23T00:02:00.001-03:00

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!

Mobile Application Blocks new Community Drop (05-21-2009) available for download.

2009-05-22T11:22:00.001-03:00

I’ve just uploaded the latest drop of the Microsoft Patterns & Practices Mobile – Mobile Application Blocks to the CodePlex site.

This new Community Drop (05-21-2009) includes the following changes:

All the SQL CE references have been updated targeting to SQLCE 3.5 SP1 (3.5.1.0)
The ConfigSectionEncrypt sample tool which can be used to encrypt configuration sections has been ported and included on this drop.
For each block we've created separate projects for .Net CF 3.5 and 2.0. So you currently will find projects named:
- <BlockProjectName>.csproj - Targeting .Net CF 3.5
- <BlockProjectName>.20.csproj - Targeting .Net CF 2.0
ContainerModel Block performance improvements and code simplifications.
Readme.htm file included with basic information about the project and online resources.

Notice that even the blocks were ported thinking on .Net CF 3.5, they still being compatible with .Net CF 2.0 and in fact, most of the blocks source code on previous drops were targeting 2.0. In this version we’ve cleaned up things and you have specific projects for each version.

The other main change is the inclusion of the ConfigSectionEncrypt tool which was absent on previous drops. It’s a great sample and companion for working with the Configuration Block using Encrypted Sections. It was just a straight port at this time, and probably the tool’s UI is not the most intuitive you have seen. So, I’ll try to clarify how to use it in future posts.

About the installation, I recommend you to remove any previous version of the blocks before installing this, and, if you’re installing the blocks for first time, please double check our Requirements Page.

VS2008 Add New Project: Smart Device Unit Testing Project? A simple project template that would make things easier

2009-05-14T15:43:00.001-03:00

Are you tired of the “Create Unit Test” wizard as the only way to create a Smart Device Unit Testing Project? Don’t you feel comfortable with the alternative of edit a Compact Framework Class Library project file changing Guids to convert it into a Unit Testing project? Well, let me try to help you with this smart device unit testing project template that maybe fits your needs.

SmartDeviceUnitTestingProject (8KB)

You can put this zip file into the “%userprofile%\Documents\Visual Studio 2008\Templates\ProjectTemplates” folder, and it will appear as a new option under “My templates” when you try to create or add a new project into your solution:

Much better! At least IMO ;). Enjoy!

Q4Tech Mobile Updater Application Block is now part of Mobile Contribute

2009-04-29T10:55:00.001-03:00

Q4Tech has moved its open source Mobile Updater Application Block as part of the Mobile Contribute Project at CodePlex, under the MS-PL license.

The block hasn’t been upgraded yet, and it stills targeting VS 2005, .Net CF2.0 and WM 5.0, but it was definitely a good move, and being in a community contribution project we can expect seeing it alive for a long time and hopefully we will see an updated updater soon ;)

Using Balsamiq Mockups to design a Windows Mobile app UX

2009-04-24T11:22:00.001-03:00

UPDATE (7/17/2012): Please use this link for downloading the template.

As you probably already know, or are just about to realize, the success of any mobile application mostly depends on the user experience it provides. Besides how functional is a device which can be easily transported with you, the reduced size and autonomy required makes it a resources constrained machine not only in terms of processor, battery life and memory, it’s constrained also in terms of screen size and user interaction capabilities.
In fact, most of the mobile applications should interact with users without a mouse, a full sized hardware keyboard or even without any hardware keyboard at all. What’s worst, the apps should show the information and allow input in a very small screen. If you take in account that the scenario is even more complex because your UI would need to target several form factors and orientations, the UX design is something that you should be focused on and work on very seriously from the beginning of your development.
A great way to get the feeling of a UX before of building it is drawing mockups. You can do it by hand or using some tools around there, like Microsoft Office Visio and some custom stencil add-ins available on the web.
One tool I really like is Balsamiq Mockups. You can build mockups having a relaxed hand-drawn look’n feel which is great for sending a clear UX message without the noise of design specific elements like icons and so on. This way, the customer knows that you’re showing a just a mockup, not screenshots, and at the same time he gets clearly what is the UX you’re proposing.
A sample mockup of a login screen with the keyboard open can look like this:

And an Outgoing Orders list screen can look like this:

Really cool stuff, isn’t it? You can understand clearly what are the space constraints in your design and how the user should interact with the UI elements. Building a mockup you’re actually designing the real full User eXperience for your app.
Unfortunately, Balsamiq doesn’t include Windows Mobile mockups templates out of the box. But I did the homework, and included the template I built for default WM Professional Edition into their MockupsToGo templates site.
You can have a look at it and download it following this link: ~~Windows Mobile Professional Edition Mockups.~~ (The old link doesn't work anymore, please use this for download it.)
I’ll add some extra form factors later so we can build mockups for square screen and Standard Edition also.
I really like this tool, but I should also say that there are a couple of things that I don’t like about Balsamiq:

It relies on Adobe Air
It doesn’t have any freehand drawing tool.
It lacks of some basic UI and annotation elements.

The good news is that it stills growing up, and having custom templates you can use it as a great mocking tool for windows mobile applications.
Hope you find it as useful as I do!

How to convert an existing Smart Device project into a Smart Device Unit Testing Project

2009-04-22T22:20:00.001-03:00

Since I posted about Smart Device Unit Testing using the integrated Visual Studio 2008 Testing Framework, I got a couple of questions regarding how to convert an existing project to a Smart Device Unit Testing Project. Well, let me try to help with the port on this post.

1. It must be a .Net Compact Framework 3.5 project

First of all, a Smart Device Unit Testing Project is a .Net Compact Framework 3.5 Class Library project. So, you may need to upgrade your project to the latest .Net CF version (In Solution Explorer right click your project and select Upgrade Project).

2. Add Visual Studio Testing Framework References

Right click on References folder and select “Add Reference”. Switch, if you’re not already in, to the Browse tab and enter the path of the UnitTestFramework assembly for smart devices which typically is on

 C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\PublicAssemblies\Microsoft.VisualStudio.SmartDevice.UnitTestFramework.dll

3. Include the Smart Device Unit Testing TypeGuids

Open the project source code. You’ll need first to unload the project by right clicking on it and selecting "Unload Project”. Next, please right click on it again and select "Edit Project File”.
The .csproj project file is an xml file containing project definitions. Please look for the <ProjectTypeGuids> element, and replace it with the following:

 <ProjectTypeGuids>{73A5A715-AF05-47af-9C33-47A864AF9AE7};{3AC096D0-A1C2-E12C-1390-A8335801FDAB};{4D628B5B-2FBC-4AA6-8C16-197242AEB884};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>

Save the file and right click on your project again and select “Reload Project”. If Visual Studio asks for your confirmation please select Yes.

4. Add a Test Run Configuration File

Now your Smart Device project has been turned into a Smart Device Unit Testing Project. But you need to define at least one .testrunconfig file targeting the emulator or an actual device to run your tests. If you are not familiar with how to add a test run configuration file, please take a look at this post.

5. Make your tests build and start running them!

It’s time to build your code… and just run the tests on the target platform of your choice!.

Piece of cake! Isn’t it? ;)

What’s new on the Mobile Application Blocks Community Drop (03-31-2009)?

2009-04-17T11:59:00.001-03:00

It was two weeks ago, but we have a new community drop on the CodePlex site for the Mobile Application Blocks.

This new community drop includes the return of the Subscription Block as part of the project. It hasn’t been included on the previous drop but it was ported and included now.

The other major change was the integration of great updates from the Microsoft Dynamics Mobile product team. They did several wonderful improvements around the Configuration Block, the Connection Monitor Cell Connection, Subscription Block, Endpoint Catalog and the Disconnected Agent. Those improvements have been integrated in our code base in a TDD approach.

One interesting addition was the IWSCredentialService interface as part of the Disconnected Agent Block. This is a side effect of an new abstraction on the Endpoint Catalog.

The Endpoint Catalog is the responsible to provide information required to access a logical endpoint as the URL address and authentication related data depending on an specified network name. E.g. you may need to consume a web service and for your application this web service can be identified with a logical name such as “ProductsService”. That web service can require different URL addresses and even different credentials for different networks, so if you’re connected to the internet you may need to use:

URL: “http://mycompany.com/services/productsservice/”
Username: joe.mycompany.com
Password: xxxxxx

But if you’re connected to the intranet, you can access it directly using the following information:

URL: “http://services/productsservice/”
Username: joe
Password: xxxxxx

The Endpoint Catalog used to address this issue by providing a catalog with default configuration and specific configuration by network name for a logical endpoint name. This configuration information used to include the address and credentials (username, password and optionally the domain). This information is retrieved from the configuration file, which can be encrypted to keep your data safe.

That approach was good, but it carries on with two issues:

1. We don’t have a clear entry point to inject a service that can ask the user for credentials if needed.

2. We don’t have a way to reuse credentials for several endpoints or networks.

To address both issues, the Dynamics Mobile group has included a new abstraction of the credentials resolution, defining that the endpoint catalog won’t include the authentication details anymore, but only an account name. So, you can now specify that your endpoint configuration from the internet is:

URL: “http://mycompany.com/services/productsservice/”
AccountName: “MyInternetAccount”

And we can point several endpoint configurations to reuse the same account by using the same account name.

At the same time, when we need to inject i.e. the actual credentials into the web service proxy, we can use a Credential Service to resolve this account name to actual credentials.

This is what we’ve included as part of the Disconnected Agent. A new IWSCredentialService and a default implementation that retrieves the credentials for each account name from the configuration file named the ConfigurationCredentialService. With this interface, you have now a good customization point where you can inject your own Credential Service which would ask the user for credentials for a given account name when needed.

I’ll talk later about the Connection Monitor design changes, but in the meantime I invite you to download the drop from http://mobile.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=25565 and take a look at the full list of changes on the wiki Changes from MCSF v1.

I suggest you also take a look at this great introductory post of Kzu regarding the new Container Model block.

Have a nice weekend!

Patterns & Practices Mobile Application Blocks First Community Drop available

2009-02-25T16:02:00.001-02:00

As I posted before, we’re working on the new Community Release of the Patterns & Practices Mobile Application Blocks, formerly Mobile Client Software Factory. And this week we’ve started to publish early bits on the Codeplex site. In fact, this is our first community drop, and there still much work to do, but it’s a good first look at what we’re working on.

We’ll continue publishing community drops so you can follow the project progress and give us some feedback before we ship. Keep in touch!

Working on a new Mobile Client Software Factory (VS 2008, .Net CF 3.5, WM 6.x!)

2009-02-10T00:25:00.001-02:00

It’s been almost two years since I started working on the Microsoft Patterns & Practices Mobile Client Software Factory, and those application blocks, shipped on July 2006, still being very valuable for the mobile developer. But it’s really hard to install it on Visual Studio 2008, in spite of some nice articles about it, like this great one from Glenn Block, which have some little missing steps I sent to Christoph and he posted here.

Well, soon you’ll be able to install it and without all that pain. It’s time to have a new set of mobile blocks updated and working on VS 2008, Windows Mobile 6.x and .NET CF 3.5. Some of the original MCSF team members (Per, Francis, Rohit, Alex, Kzu and me) with the help of an excellent advisory board, were started working on updating some of the original blocks (Configuration, Data Access, Connection Monitor, Endpoint Catalog, Subscription Manager, Disconnected Agent and Password Authentication) and building some new ones targeting modularity and location awareness. As you can see, the Mobile Composite UI Application Block won’t be updated and it will be removed from the new version, same with OAC which has been already updated by Clarius.

This version will be published on http://mobile.codeplex.com/ and ideally it will be the place for future great mobile development blocks.

We still working on prioritization and full feature set. Your feedback is totally welcome. If you have any suggestion, bug report or comment regarding this new project, please feel free to contact me: jose@mobilepractices.net.

Thanks!

Making your Smart Device Unit Tests run on the desktop

2009-01-30T11:42:00.001-02:00

In spite of Smart Device Unit Testing in Visual Studio 2008 is working really good, you may want faster test runs for doing Test-Driven-Development. Actually, that’s what I want :). In that case a very good option is to perform small TDD cycles running the tests on the desktop and run them on the device after some significant progress. But, how can we make our tests run on the desktop?

Adding a Desktop Test Run Configuration

The first step is quiet easy, you just need to add (if you don’t already have one) a new .testRunConfig file. Right click on the solution and Add – New Item – Test Run Configuration file. I like to call it “Desktop.testrunconfig”. The default configuration should work, so closing the properties dialog should be enough.

The second step is even easier, we need to select Desktop.testrunconfig as the active configuration, so, go to the Test menu, Select Active Test Run Configuration and click on Desktop (desktop.testrunconfig).

You are now ready for run your tests on the desktop!. Assuming that all your tests pass on the device, hopefully, all of them will also pass on the desktop. But, that was not my case! My project includes 12 tests passing on the emulator, but 5 of them don’t pass on the desktop. What’s going wrong?

Handling Windows Mobile specific functionality

As we’re developing a mobile application, our unit tests may include some windows mobile specific functionality which cannot be run on the desktop. It can be using a Windows Mobile API for trying to access the Outlook Mobile Contacts, checking if a new appointment has been scheduled, sending an SMS message or checking the battery level. We need to identify those scenarios and avoid them when running on the desktop.

In two of my failing tests, the tested code uses an API which doesn’t exist on the desktop. To avoid it from failing on the desktop, I need to place it inside an IF statement asking for the current platform and executing it only if it’s the expected platform. You can use the following code snippet as a way to do it:

[TestMethod]
public void testName()
{
    if (Environment.OSVersion.Platform == PlatformID.WinCE)
    {
        // Test body here
        // ....
    }
}

ExpectedException fails!

The other 3 failing tests are verifying cases where an Exception is expected. All of them use the ExpectedException attribute for this purpose, and it’s ignored when you run a smart device unit testing project on the desktop.

You have two options here: 1. Avoid the tests when running on the desktop as we did before 2. Replace ExpectedException with an alternative approach. As I want to keep most of the test running on the desktop as possible, I prefer the second one.

Actually ExpectedException already has some disadvantages even besides this smart device / desktop running issue. With ExpectedException we can not check that an specific line of the test is the responsible for throwing the exception, or we cannot validate any additional info of the exception, like the message or an InnerException, we just can check for an exception type. So, this is not only a problem, this is also an improvement opportunity, and I like the XUnit approach for this, with the Assert.Throws method. So, why we cannot just implement something similar as follows:

public static class ExtendedAssert
{
    public delegate void ThrowsDelegate();

    public static Exception Throws<exceptionType>(ThrowsDelegate target)
        where exceptionType : Exception
    {
        try
        {
            target();
            Assert.Fail("No Exception was thrown.");
        }
        catch(exceptionType ex)
        {
            return ex;
        }

        return null;
    }
}

Now we can replace a test like this:

[TestMethod]
[ExpectedException(typeof(ArgumentOutOfRangeException))]
public void BackgroundSizeSmallerThanSizeThrowsArgumentOutOfRangeException()
{
    Desktop desktop = new Desktop();
    desktop.Size = new Size(20, 20);
    desktop.BackgroundSize = new Size(5, 5);
}

With something like this:

[TestMethod]
public void BackgroundSizeSmallerThanSizeThrowsArgumentOutOfRangeException()
{
    Desktop desktop = new Desktop();
    desktop.Size = new Size(20, 20);
    ExtendedAssert.Throws<ArgumentOutOfRangeException>(
        delegate { desktop.BackgroundSize = new Size(5, 5); });
}

Now, the test pass on the device and also on the desktop, and at the same time, it’s clear what line should throw the exception. Enjoy!

Setup.dll Sample and Walkthrough: Terms & Conditions / End User License Agreement for a Smart Device CAB installer

2008-10-26T21:52:00.002-02:00

Visual Studio Smart Device CAB projects are extremely helpful in many ways for building a cab installer, even thought they have some pending issues, like a more natural MSBUILD integration, they allow us to have a cleaner and dynamic definition of our mobile app installation based on our source projects instead of relying just in binary and .inf files.

Sometimes we need to perform some custom actions before and after the installation or uninstallation. Typically we can need to check for pre requisites or show a Terms & Conditions/EULA before the installation and continue only if the user accepts it or, as another example, we can need to remove temporary files and registry entries after uninstallation.

In this post I want to show you a very simple way to implement a Setup.dll which shows a Terms & Conditions dialog which requires the explicit user acceptance to continue the installation.

What we need to start?

We'll use Visual Studio 2008 but this procedure also works with VS2005. You'll need Visual C++ and Smart Devices support installed.

I recommend you to take a look at this article in MSDN regarding Setup.dll files for better context.

Choose any of your mobile applications (or create a new empty one) and create a new Smart Device Cab project for it, as I describe in this post. Once you got it, we're ready to start.

I'll use a port of SplashScreenSample for VS2008. For instance, my solution explorer looks like this:

Creating a new Setup.dll

First thing to do is to create a new Visual C++ Smart Device DLL project. Right click on the solution and select "Add" - "New Project".

The "Add New Project" dialog will pop up. Please select Visual C++ / Smart Device in "Project types" and use the "Win32 Smart Device Project" template.

I'll call it "EULASetup". Once you've entered the name just press "OK".

Nice... and now it's wizard time. Let's follow the "Win32 Smart Device Project Wizard"

Select the platform corresponding to your project. In this particular sample I'm targeting Windows Mobile 6 Standard:

As we want to implement a very simple DLL, just select "DLL" as Application Type and don't check anything else ("Precompiled headers" cannot be modified so let them checked).

Once we press "Finish" the wizard will create a new native C++ project in our Solution. The new project should look like this:

Showing the EULA dialog at installation begin

If it's not already open, please open EULASetup.cpp by double clicking on it. This class currently contains the DLLMain entry point for the library. We actually don't need this function in our setup.dll so this function can be removed.

What we need is to implement a function to be called when the user tries to install the cab. This function is Install_Init. In this function we'll show the terms & conditions for our application installation and according with the user response we can continue the installation or cancel it.

Our code needs to include "ce_setup.h" to get the required knowledge of Install_Init signature types, in this sample codeINSTALL_INIT, an enumeration which gives us the two possible result values: codeINSTALL_INIT_CONTINUE or codeINSTALL_INIT_CANCEL.

For simplicity, we can put the text in a string directly hardcoded within the source. I'm calling it "Message". Install_Init will show the message using the MessageBox API, and handling a "Yes" response continuing with the installation or a negative response canceling it.

It's important to remark that Install_Init may be called more than once, with different values for the installation directory; for example when the current directory doesn't have enough room. So we need to handle the fFirstCall parameter value to only show the dialog the first time our function is called.

How looks our code? please replace the entire content of EULASetup.cpp with the following:

#include "stdafx.h"
#include "ce_setup.h"

// This is a variable containing the text to be displayed
// in the Terms & Conditions dialog

TCHAR Message[] = _T("TERMS & CONDITIONS\r\n ")
        _T("Selecting YES you're accepting our terms & conditions.\r\n")
        _T("This is just a sample application.\r\n")
        _T("From http://www.mobilepractices.com\r\n")
        _T("You can replace this text with your own.\r\n")
        _T("We're using a setup.dll to show this dialog.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Extra line to force vertical scrollbar.\r\n")
        _T("Last line.\r\n")
        ;

// This function will be called when the user
// tries to install the cab. According to its return
// value the installation continues or is cancelled.
// As this could be called more than once
// (i.e. if there is not enough space on the target)
// we should take care about fFirstCall parameter
// to show the dialog only once.

codeINSTALL_INIT Install_Init(    HWND        hwndParent,
            BOOL        fFirstCall,
            BOOL        fPreviouslyInstalled,
            LPCTSTR     pszInstallDir )
{
    if (!fFirstCall
            
            ::MessageBoxW(0, Message,
            _T("SplashScreenSample")
                    , MB_YESNO) == IDYES)
        return codeINSTALL_INIT_CONTINUE;
    else
        return codeINSTALL_INIT_CANCEL;
}

Exporting Install_Init function using a .DEF file

As our Install_Init function should be visibly externally to allow WCELOAD.EXE to call it during the .cab file processing; it means that we need to export it, and in this sample we'll use a .def file for doing it.

Please, press right click on EULASetup (the project) and select Add - New Item...

Please select "Module-Definition File (.def)" and enter "EULASetup" as its name. Press "Add".

A new "EULASetup.dll" is included in your project. If it's not already open in the editor, please open it and replace the body with the following:

LIBRARY    "EULASetup"
EXPORTS
Install_Init @1

In this .def file we're just exporting Install_Init. Save the changes and build it. No errors should be found.

Adding the Setup.dll to our Smart Device CAB Project

Finally, we need to add "EULASetup.dll" as the setup.dll for our Smart Device CAB Project. This is really straightforward. Right click on the Installer project and "Add - Project Output..."

What we're doing is adding the output of build EULASetup to the installer. In fact, we're adding EULASetup.dll into the cab installer. The way to do it is selecting EULASetup as the project and "Primary Output" as what we want to include. Press "OK".

Now we have in our installer project the Primary Output from EULASetup.

The final step is to select it as the Setup.dll for our installer. Just select the Installer project by clicking on it

In the Properties pane for "CE Setup DLL" select (Browse...)

The Primary Output of a project is placed by default into the "Application Folder" of the CAB File System. So, in the following dialog please select "Application Folder" and press "OK" to open that folder

In the Application Folder select "Primary Output from EULASetup (Active)" and press "OK" again.

And... that's it! We've included EULASetup as the Setup DLL for our installer.

We're ready to rebuild the project and generate the .CAB File. Now when we try to install SplashSampleInstaller.CAB, we'll first get the following dialog:

If the user selects "No", the installation will be aborted. It will only continue if the user selects "Yes". I know the text could be improved a lot, and you even can use a more elaborated dialog, but... that's your homework!

Hope you like this walkthrough, and most important, it helps you. If you want to see the source code, just download it from the following link:

EULASetupDLLSample.zip (36Kb)

How to add Screen Rotation support to your app in .Net Compact Framework using OAC

2008-10-15T17:51:00.002-03:00

In a previous post I included a very simple application called "BasicCatalog" intended for showing one case of having more than one file with the same name on your deploy.

One of the problems of that PocketPC application is the lack of smart screen rotation awareness. Actually, if you rotate the Pocket PC emulator screen using the originally provided source code you'll see something like this:

As well as this layout still showing the picture, the description is almost invisible. We definitely can improve it having a better screen distribution for landscape screen orientation.

We'll use the Clarius Orientation Aware Control Community Edition, which can be downloaded for free. It includes support for creating a completely new layout at design time for landscape and portrait orientations within visual studio 2008 (and VS2005) designer.

This is a very detailed walk-through. You can follow it and do it very quickly in spite of this could look as a very long post ;)

For better understanding, I divided the article in the following steps:

Adding a new Orientation Aware Control to our project
Moving our original form design to the new OAC
Moving Form functionality to the new OAC
Adding an OAC instance to the existing form
Designing the horizontal layout

Please start downloading the original source code from this link, it will be our starting point for the whole work. We'll need the Community Edition of the Clarius Orientation Aware Control installed. If you already have any of the Clarius Orientation Aware Control 2008 editions installed, this preparation step is not needed, go straight to step 1:

1) Adding a new Orientation Aware Control to our project

Lets start creating a new Orientation Aware Control:

Right click on BasicCatalog project - Add - New Item...

Select the Orientation Aware Control template, and enter "CatalogControl.cs" in the "Name" field. Press "Add".

A new CatalogControl.cs [Design] tab will appear on Visual Studio. This canvas should be used as the new design surface for our form.

If you take a look at the Properties panel for this control, you'll see a new Orientation property with "Vertical" value. There is another new property named ScreenSize which is read only in the Community Edition, fixed to 240x320(QVGA), the default form factor for Pocket PC. In other OAC editions (Professional and Trial) this property can be changed freely to design different layouts for each supported screen size.

2) Moving our original Form design to the new OAC

Let's move all the controls included in our Form to the new CatalogControl. Double click "Form1.cs" in Solution Explorer to open it in design mode.

Press CTRL+A to select all the controls in the form (or do it thru the Edit - Select All menu option). You'll get something like this:

Copy all of them (CTRL + C), switch to "CatalogControl.cs [Design]" and paste (CTRL + V).

Please select "mainMenu1" from the bottom bar and delete it (Delete key or right click - Delete). The menu shouldn't be in CatalogControl anymore.

Select BasicCatalog from the Properties pane combo box and set the size to 240x268 (The regular OAC size for QVGA portrait).

We've already moved our layout to BasicCatalog. Now, our design should look like this:

3) Moving Form functionality to the new OAC

As this is a sample application for demo purposes only, it has all its basic logic defined in the Form source code. Actually, this used to be a very common scenario in mobile applications. Now we need to move all the functionality from the form source code to the CatalogControl source code, except for the menu related which will still being handled by the form.

So, let's start preparing CatalogControl. Open CatalogControl.cs source code doing right click on the control and selecting View Code.

Remove all the three methods after the CatalogControl() constructor. The sourcecode should look as the following:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;
using Clarius.UI;

namespace MobilePractices.BasicCatalog
{
   public partial class CatalogControl : OrientationAwareControl
   {
       public CatalogControl()
       {
           InitializeComponent();
       }
   }
}

Now, open the Form1.cs code: from Solution Explorer right click on Form1.cs - "View code".

Select from line 28 (private void FillComboBox()) to line 128 (up to the end of comboBox1_SelectedIndexChanged) and cut all the selected code (CTRL + X). Go back to CatalogControl.cs source code, and paste the code after the default constructor within the class (CTRL + V).

Additionally, we need to move the following using clauses:

using System.IO;
using System.Reflection;

and the class member "pictures" which should be now part of the CatalogControl class

List<ShowableDirectory> pictures = new List<ShowableDirectory>();

BuildCollection() and FillComboBox() method calls should be removed from the Form1 constructor and placed as part of a new override OnLoad method in CatalogControl:

protected override void OnLoad(EventArgs e)
{
   base.OnLoad(e);
   BuildCollection();
   FillComboBox();
}

Now it's time to move the menu item click handlers functionality from Form1 to CatalogControl. Both handlers will be now internal functions with no parameters (because in this application they don't need any parameter as part of their logic).

Copy (do not cut) and paste menuItem1_Click and menuItem2_Click into CatalogControl and replace their parameters, names and modifiers to look as following:

internal void SelectPrev()
{
   if (comboBox1.SelectedIndex > 0)
       comboBox1.SelectedIndex -= 1;
}

internal void SelectNext()
{
   if (comboBox1.SelectedIndex < (comboBox1.Items.Count - 1))
       comboBox1.SelectedIndex++;
}

These methods will be called from the form menu item click handlers, so we need to make them accessible from the form turning them "internal" instead of "private".

Finally, we need to wire up the selected index changed handler from CatalogControl to the corresponding event in the combo box. Go back to CatalogControl designer, select comboBox1 and press the "Events" button:

In "SelectedIndexChanged" select from the drop down list "comboBox1_SelectedIndexChanged" as following:

Save all the files (CTRL + SHIFT + S).

4) Adding an OAC instance to the existing form

To add CatalogControl to the existing form, we need to have it as part of the toolbox. To get it there, just build the solution. Menu Build - Build Solution.

The build should succeed with no errors. If you have any error please check the previous steps to find out what could be different.

Open Form1 in design mode (double click on Form1.cs in Solution Explorer). Remove comboBox1, textBox1 and pictureBox1 from the form (those three controls have been copied to CatalogControl during step 2).

Drag the CatalogControl from "BasicCatalog Components" in the ToolBox to the form:

The new control is called CatalogControl1 by default, and that's good enough for our sample. Click on the smart tasks icon at the top right of CatalogControl1 and select Dock in parent container.

This step is required for allowing OAC to detect screen size changes.

Go to the source code, and replace menuItem1_Click and menuItem2_Click with the following:

private void menuItem1_Click(object sender, EventArgs e)
{
   catalogControl1.SelectPrev();
}

private void menuItem2_Click(object sender, EventArgs e)
{
   catalogControl1.SelectNext();
}

Now the handlers in the form are just calling the correspond SelectPrev() or SelectNext() methods in CatalogControl.

We're ready to see the app running! Press F5 ...

The app should behaves in exactly the same way it used to do before all our changes, even with the same disappointing horizontal layout design. Frustrating? no way!... we've just included an OAC in our app so we can now easily build a better horizontal layout.

5) Designing the horizontal layout

Close the application if it still running pressing the OK button.

In Visual Studio, open CatalogControl in design mode by double clicking on it in Solution Explorer.

Be sure that you have CatalogControl selected, if needed please select it from the Properties pane combo box.

We need to rotate the screen, just Right click on any empty area of the designer and select "Rotate".

There are several ways to rotate an OAC, you can also change the "Orientation" property from the Properties pane to "Horizontal" or using the "Rotate" command:

The designer will change to the "Horizontal" Layout. First thing to do is to change the CatalogControl size to 320x188.

The layout looks as in the app when running in a horizontal screen. This is our starting point.

Select pictureBox1 and change the Docking property to Right, sizeMode to CenterImage and Size to 160,166 as follows:

The layout looks now much better:

And that's it! The work is done! Try running the app by pressing F5.

Now you'll see the following behavior when rotating the screen:

It's much better! isn't it?

You can download the final source code after completing the four steps from here:

basiccatalog.rotation.sourcecode.zip (66.7 KB)

Some extra tips:

You can rotate the emulator using the "Calendar" button at the right of the directional pad.

You can rotate a Form at design time, from a contextual menu in the Visual Studio designer if you right click on the title bar and select Rotate left or Right. Sometimes this menu fails while showing. In that case you just need to close the form designer and open it again. If your form contains an Orientation Aware Control, it will reflect the orientation change according to the rotation.

Resco will participate in Microsoft Tech Ed EMEA Developers 2008

2008-10-15T09:43:00.001-03:00

Microsoft is preparing the start of Tech Ed EMEA Developers 2008 for November 14th in the CCIB Barcelona, Spain. I've just received news from Resco about their participation showing some of their mobile products during the conference.

If you'll be attending, take a look at the press release for further information.

CabWizFixer: Support for files with the same name on Smart Device CAB installers

2008-09-26T15:38:00.001-03:00

There is a know bug in cabwiz.exe when your deployment needs several files with the same name in separate folders. This is a typical scenario when you have multiple resource files (i.e. using localization) in a Smart Device Cab Project, but it can also be present when you try to face an app in a generic approach depending on the folders/files structure or just even as a bad coincidence in your app file names. In all cases the cab installer will mess up your deploy copying the same file in all your folders for each group of namesakes.

Let's see an example:

Update: The originally posted 7Wonders sample application has been removed due to copyright issues after asking them about the usage of their material. I replaced that sample with this one:

The Small Catalog Mobile app

This is quite a basic sample, but useful enough, of a good generic approach for a problem. The Problem: We need to implement a Pocket PC app to show a small and simple catalog of a few products. Just a way to show a set of pictures and a quick description of each product. The app should be very simple, and we don't need even to have a database. So, we can just rely on the file directory structure where each subfolder in our app folder will be a new product. The folder name is the product name, and it includes two files named description.txt and picture.jpg for the product description and image correspondingly.

Actually, this approach also makes things easier during the development process. We can build the directory structure in our project as we want it once it's deployed on the device in a sort of WYSIWYG design experience.

You can download the sample solution source code from the following link:

basiccatalog.draft.sourcecode.zip (61K)

The solution includes two projects: BasicCatalog project itself, and a setup project. If you try to debug or run the solution from VS, it will be deployed and run as expected. But if you try to install the cab generated thru the setup project, the app will show always the same description and picture for all the products. The reason of this behavior is the cabwiz bug described at the beginning of this post. The same picture.jpg and description.txt files have been installed in all the product folders.

CabWizFixer

Here's when CabWizFixer can help us. This is a small tool we made internally based on part of the source code from the Clarius Orientation Aware Control which includes a built-in workaround for the cabwiz issue, a strong requirement for OAC applications as well as it relies on and extends the standard localization infrastructure provided by .NET Compact Framework.

With CabWizFixer, the Basic Catalog installer will work as expected. After install the tool, you just need to rebuild the installer and the new generated cab will install all the right files on the right location.

CabWizFixer is a experimental tool and it's provided "as is" with no warranties whatsoever. If you want to try it, here is the command-line installer:

CabWizFixerInstaller.zip (18k)

For uninstall it just launch from a command-line console:

CabWizFixerInstaller.exe /uninstall

I hope this tool makes your life a little bit easier :)

Take care!

Orientation Aware Control 2008 Released!

2008-09-01T11:29:00.002-03:00

Just last weekend we shipped Orientation Aware Control 2008, the latest stable version of the popular control for .Net Compact Framework from Clarius, formerly part of the Microsoft Patterns & Practices Mobile Client Software Factory.

You can find it in three different flavors:

OAC 2008 Community Edition: A free version targeting small application development, supporting different horizontal and vertical layouts for the default form factor.
OAC 2008 Professional Edition: Commercial version of the product. Take a look at the features comparison chart.
OAC 2008 Trial Edition: Fully functional Professional Edition that randomly shows a trial message.

Why should I use OAC 2008 over the p&p OAC?

OAC 2008 is an evolution of the original p&p OAC. Beyond some bug fixes and VB.Net and Smartphone support, you can keep in mind:

Visual Studio 2008 designer integration. As far as it targets VS 2005, p&p OAC doesn't support VS 2005.
.Net CF 3.5 support
It still being compatible with VS 2005.
Includes SipAwareContainer, a pretty cool panel control which detects the software input panel (SIP) status and resizes itself accordingly.
You can store layouts on satellite assemblies for reduced download time and use a tool for create separate .cab installers for each resolution/culture.

Wanna try it? You can go to the downloads page and take a look at it.

If you have previously installed Orientation Aware Control June 2008 RC Trial Edition over both VS2008 and VS2005 on the same machine, you should verify after uninstalling it and before installing OAC 2008 that the following files have been removed from your system:

Program Files\Microsoft Visual Studio 8\Common7\IDE\PrivateAssemblies\Clarius.UI.OrientationAware.Designer.2.0.dll (v.2.0.2.0) Program Files\Microsoft.NET\SDK\CompactFramework\v2.0\WindowsCE\DesignerMetadata\Clarius.UI.OrientationAware.*.asmmeta.dll

If any of these files remain on your system, please close Visual Studio and delete all of them before installing Orientation Aware Control 2008.

Hope you like the product. Remember to give us your feedback on the OAC Forum.

I'll continue posting about some of the features and usages of the OAC, so stay tuned!

Orientation Aware Control June 2008 RC Trial Edition available for download!

2008-05-06T22:14:00.001-03:00

Some time ago the best way to deal with screen rotation in your mobile application was to detect it programmatically and re-layout the screen at runtime, moving and resizing the controls and even changing their content manually, or directly showing a different view with a completely different layout according to the new orientation. An easier option was to use anchoring and docking, which could be good enough in a few cases, but not in most of them. This challenge was not easy at all, and that was the reason because many developers decided to directly forget screen rotation and delivery applications that are almost unusable when the screen is rotated.

What about applications which should run on devices with different form factors? Once again, anchoring and docking are not enough. Remember that in a mobile application you should design your UI thinking from the scratch in order to take full advantage of the screen and maximize the user experience.

One of the main advantages of using Visual Studio 2005/2008 and the .Net Compact Framework is the design-time experience which is great for a single form-factor / orientation, but it's almost useless when you need to design a solution thinking on a really outstanding mobile user experience.

When we worked on the Microsoft Patterns & Practices Mobile Client Software Factory, this challenge was part of our focus, and the need for a design-time experience in order to support rotation and multiple form factors was the goal. The former Orientation Aware Control was the first approach towards this goal. It's indeed part of the Mobile Client Software Factory, and by extending the Localization feature of the Visual Studio designer it provides a design-time approach for supporting screen rotation and multiple form-factors for Windows Mobile 5.0 Pocket PC and Visual Studio 2005. It is, in fact, one of the most popular application blocks of the MCSF, and it has changed the way in what .Net Compact Framework developers should deal with screen rotation and multiple form factors support.

Last year, Clarius Consulting released a new and improved Orientation Aware Control including support for Pocket PC 2003 and Windows CE 5.0. It was developed by the same people who worked on the MCSF Orientation Aware Control lead by Daniel Cazzulino. Unfortunately, this version was released before Orcas, and it didn't include any support for Visual Studio 2008, which was one of the most required features for the next version.

I'm glad to announce that we've just published the Orientation Aware Control June 2008 RC Trial Edition!! This is a new preview of the June Release Candidate, fully functional with a trial message at runtime. This version does include Visual Studio 2008 design-time support! and several bug fixes and improvements. It's good to know that this version works with both VS2005 and VS2008, and it includes support for .Net Compact Framework 2.0 and 3.5!

What are you waiting for? Go ahead and download it! Your feedback will be very appreciated!

How to allow minimize being in a modal dialog on Pocket PC using the .Net CF

2008-03-18T17:46:00.001-03:00

An interesting question came up today at the Mobility Metro train the trainers workshop in London: How can we allow the Pocket PC user to minimize the application even when he is in a modal dialog?

This is a particular requirement received by an attendee, and it was a little bit challenging problem. I did a small spike on this, and this is my suggested approach.

First of all, we cannot use Form.ShowDialog(), because it shows the 'OK' button at the top right corner, and ideally we should keep the standard 'X' smart minimize button there.

The solution is to use Form.Show() and handle the Form.Closed event of the dialog. We also should take care of the dialog Owner property in order to show only one entry on the Running Programs List.

private void menuItem1_Click(object sender, EventArgs e)
{
    Dialog dialog = new Dialog();
    
    //Prepare the app to be 'Running Programs Aware'
    this.Text = dialog.Text;
    dialog.Owner = this;
    
    //Subscribe to the dialog closed event
    dialog.Closed += delegate(object s2, EventArgs e2)
    {
        //Do something when the dialog is closed
        label1.Text = string.Format("DialogResult = {0}", dialog.DialogResult.ToString());
        //Update the form text back
        this.Text = "MainForm";
    };
    dialog.Show();
}

Here you can find the spike sourcecode:

AllowMinimizeDialog sample code (~12K)

Going back to London for Microsoft Mobility Metro 2008 Train The Trainers (TTT)

2008-03-09T20:29:00.001-02:00

Well, I'm glad to say that I've been invited to be instructor in the Microsoft Mobility Metro "Train the Trainers" in UK. It will be my second time in London and I'm sure it'll be as great as the previous one was.

This will be a three days mobility training targeting european instructors audience, that will start on March 18th. The agenda includes several topics, starting with Windows Mobile platform concepts, moving thru the tools, managed code for devices, SQL Compact Edition, Optimization and guidance, and an interesting review of what's coming on in mobile development. Hope to see some of you there.

These days are very busy for me, but I'll try to keep blogging. Stay tuned!

Looking for an OpenFileDialog for Smartphone? Porting the MobilePractices.OpenFileDialogEx from PocketPC to Smartphone

2008-03-01T11:17:00.001-02:00

This morning I've ported the MobilePractices.OpenFileDialogEx custom implementation of the OpenFileDialog to smartphone. Strictly, I've ported it to Windows Mobile 6 Standard Edition. And I want to remark that Smartphone doesn't even support the standard OpenFileDialog. If you try to use the standard version a NotSupportedException is raised. So I thought this port should be extremely useful, and it's additionally fully implemented using the .Net Compact Framework (.Net CF).

The port was pretty much straightforward, besides the expected design constrains. It took me exactly 75 minutes. What were the main issues I have during the process? First of all, the need to make it usable in the smartphone platform. It doesn't make sense to have the same structure with one combo box, the list, and the textbox at the bottom. So, my design decision was to leave the list. I know you may have a new smartphone device which has a qwerty keyboard, but I think it still being the simplest option just to browse the file system. Actually I used to do that even in my laptop. And if I keep the textbox, it'll leave less space for the list, and I think that's critical here. Anyway, if you prefer you can bring the textbox back from the pocket pc version.

The second main issue was how to provide the quick go back to any directory on the current path without the combo box. I've decided to implement this using the right menu, the same way File Explorer does.

It looks this way in the Windows Mobile 6 Standard Edition emulator:

Not bad! But it still being just a starting point. There are many features missing which you probably will find critical in your app. As you can probably noticed, the file list is not sorted, there are no InitialDirectory property, and it doesn't cached any directory info to improve the performance during the browsing. Feel free to add any feature you want. The source code is here:

MobilePractices.OpenFileDialogEx.Smartphone Sourcecode (~19k)

A custom OpenFileDialog implementation that browses the full file system: MobilePractices.OpenFileDialogEx

2008-02-25T00:46:00.001-02:00

Doing a spike yesterday I had the need to use OpenFileDialog to browse and select an existing file. The problem was that I placed the files on the device root. And oops! the Windows Mobile implementation of the OpenFileDialog, this is not a .Net Compact Framework limitation, doesn't allow the user to browse the root. Actually, it doesn't allow the user to browse the whole file system, it just let you browse My Documents subfolders and Storage cards. Very bothering in some cases.

Indeed, this is not the first time I have to deal with it. An I thought I should be just one of many developers with the same problem. So I decided to implement a custom OpenFileDialog in c# targeting PocketPC, but easily portable to Smartphone, and customizable and extensible as well. Wow! I think I should have said that first of all, it's a very simple piece of code. And that's its best feature. You can use it as a starting point.

I've not implemented the full Filter feature of the original OpenFileDialog because I think it's not a common scenario on mobile development and it make the UI overcrowded. Instead, the Filter property of my MobilePractices.OpenFileDialogEx implementation, is just a search pattern.

The MobilePractices.OpenFileDialogEx looks this way:

The dialog title can be changed as you wish thru the Text property. At the top of the screen, you can see a ComboBox which can be used to quickly go back to an specific folder.

Taking a look at the first snapshot you can notice that I'm identifying storage cards with a different icon. To identify a storage card you can check if the FileInfo.Attributes for it are Directory and Temporary.

if ((info.Attributes & (FileAttributes.Directory | FileAttributes.Temporary))
    == (FileAttributes.Directory | FileAttributes.Temporary))
    return FileSystemKind.StorageCard;

How to continue with this is up to you. You can add an InitialDirectory property, or some way to keep the current path along the application run, or a modified version which allows you to select a directory instead of a file. Or you can take the code and port it to smartphone. Probably I'll do that soon in a new post. Once more, this is just a starting point!

Here you have the source code including a sample application:

OpenFileDialogSample.SourceCode.zip (aprox.19kb)

Enjoy!