How to Build a Picture Gallery app for Windows Phone - Part 3

In this last part of the Picture Gallery blog series, we will discuss how the app handles errors and how RadControls for Windows Phone improved the development experience. In case you missed the previous two posts, they can be found here and here.

Handling exceptions

No application is complete without proper error handling. To be robust the application should handle the expected exceptions in a meaningful way or crash noisily when an unexpected error occurs. In the Picture Gallery app there are a few situations that should be expected. 

The first and most important condition that we need to verify on app startup is whether we have network connectivity or not. If we have no network we have no access to the image service and the app becomes useless. The Picture Gallery handles this by displaying a message to the end-user which notifies him/her that there is no network connectivity and that’s it. Then the user is free to navigate inside the app but there will be nothing to see since the images and other information cannot be downloaded.

Second, the image service API itself may throw exceptions. For example the Flickr.NET API throws a UserNotFoundException when the search functionality is used to find a person that does not exist. In this case the picture gallery allows the current image service provider to handle the exception by returning a meaningful message that should be displayed to the user. 

Finally, there are unexpected errors. The ones that we failed to recognize while developing and testing the app. In this situation we rely on RadDiagnostics. It listens for unhandled exceptions and provides the ability to send an e-mail to the developers of the app with information about the crash.  This is extremely important for us developers since we can’t deal with “My app crashed. What should I do?” questions. We need technical information; we need stack-traces, memory dumps and anything else that might shed light on the problem. It would be ridiculous to expect end-users to provide such info so the only solution is to tailor the app to be able to monitor, save and submit such information to its developers when it fails.

Using RadControls for Windows Phone

One of the most important controls that makes a huge difference is no doubt RadDataBoundListBox and its data virtualization feature. The data virtualization helps the app source code stay clean because the developer does not have to implement hacks on top of the default list box to display/hide the “load more” widget. It also supports empty content that is automatically displayed or hidden depending on whether the data source is empty or not.

Another heavily used component is RadBusyIndicator. It’s used in literally every view because a lot of stuff needs to be downloaded on demand like author information, photo URLs etc.

RadConversationView is used for the comments view, just in case we ever decide to make the application read/write. Currently it is read-only but if we decide to let the users post comments, we just have to set a property to display the text box. The current read-only mode can just as easily be implemented with RadDataBoundListBox alone.

Other useful components used in the picture gallery are RadSlideView, RadPaginationControl (on the gallery page) and PanAndZoomImage. The slide view allows the PhotoListViewModel to be visualized extremely easily and also PanAndZoomImage allows the end-user to examine each photo in detail.

Finally, our design-templates made the initial application setup a breeze. Most pages are based on certain templates and then modified to suit the application design as closely as possible. For example the pan/zoom and gallery pages are based on templates that are available in the latest release of RadControls. On the other hand the tag, search, last 7 days and photo details pages are based on some new design-templates that will be available in the next release of RadControls for Windows Phone.

To see all these concepts in action download The Picture Gallery app. To see the implementation of these concepts browse the app source code.