Windows Phone 8 and Beyond: A Data Driven Application and The Return of the Jedi Knight. Part I Getting Started and Localization of a Windows Phone 8 App

Introduction

In the past when I was introduced to Windows Phone development (WP7) I was a little disorganized and although the goal was to publish to the Windows Phone Store my cool apps were not ready.  My WP7 apps had limited usage.  So, even if I would like to undust those apps and deploy them to the store I have to rethink the way I build them.

So, I need to retrain myself and I intend to document my journey.  The reader might find the following posts useful but I am doing this as my own journal.  This are my references and experiments.

The application that I am creating is very simple and it is helping me to learn new concepts and revisit already learned techniques.  The application has an Internet Browser and the user is able to browse to the requested page, add/remove URLs to a favourite collection.  The favourite collection is sorted by date added (Created When) where the most recent entry is at the top.  The user is able to delete favourites.  The application will contain a settings or configuration area where the user is able to define sorting order, display total count of favourite and set parameters to automatically purge old favourites.  The application will also have a navigation bar like any regular browser with Back, Forward, List Favourites and add to favourites buttons as well as a menu item to navigate to settings.  The application would use resources to facilitate localization based on user region and language preferences.

I thought that this simple app would allow me to stretch all my muscles and set me on the right track.  However, this inspiration did not come out of the blue. 

Motivation: Succeeding in the Windows Phone Store

Recently I went to a presentation at the British Columbia .Net User Group and the subject was how to be successful in the Windows Phone Store.  The presenter was one of the organizers of the Metro Vancouver Windows Phone Development Group, Nora Sabau.  Her presentation was not about coding but about guidelines to follow, common sense and what not to lose track of when designing a Windows Phone application.  I would like to think that Nora's main take home ideas were the following:

How to be Successful in the Windows Phone Store

1.  "WOW" your users.
2. Have a marketing plan for your application.
3. "The Price is Right!": not too expensive, not too cheap... use "The Force" to get it right.
4. Localization of the application.  Do not forget the World; it is bigger than Burnaby.
5. Target devices (Windows Phone 7, 7.1, 8.0, 8.1).
6. Create an app that the user would not want to remove by exploiting social media, usage of the Internet, entertainment, usefulness.
7. Quality, quality and more quality!

The above are "take away homes" thoughts because the presentation was much richer than that.  On the way home, while racing through the asphalt of the "Number One" highway, I imagine what "Obi-Wan" would tell me, if he had a chance: "Its is time to complete your training and become a Jedi, but first you need to face your fears". :)

All right, I need to face the music and create an action plan which would cover some of the above key thoughts.  Here is the plan for this training session :

1.  Download the WP SDK and take a look at sample code.
2. Create a simple Data Driven WP 8 application.
1. Customize the application tile.
2. Localize the application.
3. Use the MVVM Pattern.
4. Use of IsolatedStorageSettings to storing application specific settings. 
5. Use SQL Compact.
6. Try different ways to create a DataContext.
1. Code generation using tooling (SQL Server Compact Toolbox).
2. Code First with ADO.Net Entity Framework.

Download the SDK

Getting the SDK is a snap.  After installation make sure that the BIOS settings support Hyper-V otherwise the emulator will fail to start.  Once the SDK is set you can get started... Trust The Force and learn from sample code provided, those are great!

Localization of a Windows Phone 8 Application

I believe that in the design process localization should be decided early and this is because localizing a WP app, as of any other application, requires the use of resource files and it is easier to add values to these files as we go rather than searching and replacing strings from views at the end of the project with their corresponding localized resource.

But this is easy, I like easy!  To help novice Jedi WP Developers, Microsoft has placed XAML and C# comments providing hints as to how to localize the application.  I used those hints to localize my app combined with MSDN and Channel 9 resources.

A required file for localization is the "AppResources.resx" which allows us to store name - value pairs which can be accessed from XAML or C#.  The objective becomes to author different versions of this file for different languages then the OS of the phone would select the correct file depending on the user localization settings.

Authoring Different Resource Files

Assume that you have created your application and all strings, labels, captions, etc are using the AppResources.resx resource file.  To create additional resources based on supported culture view the property of the project, not the solution, and select the languages that the application intends to support from the "Supported Culture" section in the "Application" tab.  After selecting the desired languages save and note that Visual Studio creates the respective resource files, AppResources.es.resx, and AppResources.fr.resx for Spanish and French respectively.

Note that the created files are identical copies of the original AppResources.resx.  Now you can edit the values of these files, not the keys, with the translated strings.

In Application Tab select a Supported Culture and save the file.  Visual Studio creates the corresponding files.  Open those files and edit the Values.  The key needs to stay the same.

Binding to Localized Resources Directly from XAML

Binding to a localized resource from the XAML is very easy:

Content="{Binding Path=LocalizedResources.GoBtnContent, Source={StaticResource LocalizedStrings}}"

In the Path, the LocalizedResources refers to the AppResources.resx content and the property is the key name of the localized string in the resource file.  The source "StaticReource LocalizedStrings" refers to the class LocalizedStrings which is used by the framework to select the appropriate resource file based on the user regional + language settings.  Leave this class alone for now as I do not thing you need to touch it.

Localizing Resources from C#

Resources can be localized from C# code as well.  To me, it seems more laborious this way and I would only do it from C# code in case that I cannot find an easy way to bind the resource from XAML like we saw above and localizing the ApplicationBar seems to be the case.  However, the solution to the problem was suggested in the hints and comments added by Microsoft:  thank you!

The following code snippet adds four buttons and a menu item, all localized, to the application bar.

Call BuildLocalizedApplicationBar() from the constructor.

To see localization in action we need to select Settings in the emulator and access "language + region".  The following figure shows two different settings; Spanish and English.  So, it works!

Part II

For Part II, soon to be published, I will document how I created a compact database to use with this Data Driven application.  The tools available such as SQL Server Compact Toolbox and ADO.Net Entity Framework Code First, revisit binding and MVVM.  

What Obi-Wan has to Say

"Jose, none of these techniques are new, they are part of an ancient religion and I encourage your to continue and complete your training and have fun while at it".

Thank you Ben!

To Windows Phone Developers, old and new, with apps or just mere ideas:  "I look forward to seeing them in action", Obi-Wan Kenobi, Episode IV, A New Hope 1977  

References

1. Developer Tools:  Windows Phone 8 and 8.1 SDK to get you going
2. How to Enable Hyper-V for the emulator for Windows Phone 8
3. Tips for Localizing Windows Phone 8 XAML Apps
1. Summary of the above paper in a Channel 9 video