Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Setting Up Your Windows Store App Project

Download

Right click “Save as…”

 This video covers the basics of setting up a Windows Store app project in Visual Studio 2012 for the Windows Phone 7 app we are going to migrate. We also discuss the migration strategy, scoping the features within the port, and the advantages of using a Windows Store project template as our solution base. For more information on migration, please visit the Migrating a Windows Phone 7 app to a Windows Store app guidance.

The final source code for the WIndows Store App Viewer for Khan Academy is available for download

 

Installing the Developer Tools

You can download and install everything necessary to follow along as we build the Windows Store project in this series. However, you must first install a copy of Windows 8. To view and build the project files, you will also need to download Microsoft Visual Studio Express 2012 for Windows 8.

 

The Khan Academy Phone App

To show the migration in action, we will use the open source Khan Academy Windows Phone 7 app, developed by Joel Martinez. This app retrieves a list of video playlists from the Khan Academy website and lets the user watch them. Our Windows 8 Store app will be called “Viewer for Khan Academy”.

If you’re not familiar with Khan Academy, they are a “not-for-profit organization with the goal of changing education for the better by providing a free world-class education for anyone anywhere.” Their website, www.khanacademy.com hosts thousands of videos over a wide collection of topics and are offered freely to anyone with an interest in learning. They support Open Source data and have a rich collection of APIs that expose their library to the developer community as well.

Joel Martinez is a mobile app developer who created a popular Windows Phone 7 app that accesses this rich collection of videos. By providing his original Windows Phone 7 viewer of Khan Academy app as an Open Source project and writing about the process extensively on his blog at http://www.codecube.net, he has helped developers learn the basics of Windows Phone 7 development leveraging public videos found online.

If you have a Windows Phone and want to try out the original Windows Phone 7 version, you can download it from the Windows Phone Store. The app's source code is also available for download.

The Windows Phone app was developed in Silverlight so uses XAML for its interface syntax with C# code behind. When the app is first run, it calls the public Khan Academy APIs which return a collection of video playlists. In the phone app, these playlists are not organized by topic:

 

Screen Capture

Selecting a playlist brings up a collections of videos, which when clicked send the user to the video player on the phone to stream in the video content:

 

Screen Capture (1)

Joel Martinez developed the phone app with solid logical abstraction following an MVVM pattern. The Phone app also leverages both network calls to the Khan Academy APIs as well as local storage of retrieved data for improved responsiveness:

 

khanPhoneLayout

If requested data has not previously been retrieved and stored locally, the app makes a request to the cloud and stores the data in IsolatedStorage. Updating local storage data with cloud responses is done in the background.

 

Determining the Migration Strategy

When porting a Silverlight for Windows Phone 7 app to Windows 8, there are several considerations you should take into account. Do you want to migrate as quickly as possible, or do you want to invest more time in the new features Windows 8 makes available? Are you going to want to share as much reusable code as possible, or maintain different solutions per platform? How greatly will the User Interface be affected as you migrate from a smaller form factor to a larger tablet or desktop Interface?

clip_image001[5] 

In our case, the Windows Phone app relies heavily on hitting the Khan Academy servers and requesting data as discussed above. It also makes use of Windows Phone's IsolatedStorage. C# 5.0 introduced two new keywords async and await and this Async Pattern is used extensively in modern Windows 8 apps for handling I/O functions. Since our app uses these types of commands extensively, this would be a big change.

While it is possible to convert synchronous methods written in C# that do I/O internally to functions that return Task<T> to a task continuation middle man, this method would be inherited more from the current .NET way of handling asynchronous tasks. We decided to invest in learning the modern asynchronous pattern implementations in WinRT for both handling server requests and storing app specific data. The Async / Await pattern is a significant addition to how all developers will be creating Windows 8 apps moving forward, so after our early explorations, we decided to create a fresh code base.

If your phone app does not use extensive I/O code that would benefit from the new Async / Await pattern, you may wish port primarily your models and view models, versus starting from scratch as outlined in such MSDN articles as http://msdn.microsoft.com/en-us/library/windows/apps/hh465136%28v=VS.85%29.aspx.

However, in either case, it is recommended that you don't try and bring over your XAML UI files directly. We discuss this further below.

 

Scoping the Solution

Once we determined a migration strategy for the existing Phone features, we wanted to see what benefits the new form factor and platform would afford. A core design principle for Windows 8 apps is “Winning as One”. This means that to the degree you app can leverage common features provided in the operating system and implemented consistently across apps, the greater the overall experience for the user will be. To that end, the Windows 8 operating system introduces Contracts and other features that apps can leverage to extend their functionality and provide a consistent, polished experience for their users.

clip_image002

While staying true to the functional goals of the phone app, there were three Contracts we wanted to leverage in the port to Windows 8. Since Khan Academy contains thousands of videos that cover a wide range of topics, exposing this data in our viewer through a Search Contract was essential. Once the app has loaded a video, the ability to send a link to a someone also made a lot of sense, so we would add this through the Sharing Contract. Since the primary content of the app are videos, leveraging the PlayTo Contract would allow the user to enjoy the experience on a larger screen if available.

Other than taking advantage of the Contracts made available through Windows 8, we wanted to keep the core functionality similar between phone and tablet. However, we decided to aggregate the information a little better in the Windows 8 version and group the playlists together by topic, something that is missing in the simple list interface of the Phone app.

 

Working with the Project Templates

To whatever degree you want to tweak versus rewrite your code, your XAML files are a different matter. The general advice is to start fresh, preferably from one of the new Windows 8 Project Templates found in Visual Studio, and then bring in the relevant UI elements under the root node. There are several reasons for this.

clip_image003

For one thing, the platform changes how navigation is handled. While on Windows Phone, navigation is usually handled with the NavigationService object, in Windows 8 it is primarily handled through Frames and Pages. Also, all the form factor considerations of Windows 8, including snapping, orientation and variable resolution support, require a common structure that doesn't exist in Windows Phone. If your existing phone app was designed with good view models and proper use of MVVM patterns, this UI migration will be much easier.

 

clip_image004

 

The best way to understand the differences between UI design from Windows Phone to Windows 8 is to open up the blank templates for Windows 8 Applications in Visual Studio 2012 and see how they work. We chose the Grid App template as the basis for our migration project.The Grid App template is a multi-page project that navigates among groups of items, so this template worked perfect for our list of Khan Academy videos.

clip_image005

There are several advantages of using a Windows Store Template as your starter project, instead of simply creating a “Blank Project” in Visual Studio. These include:

  • A Common Folder that comes packed with very usefull classes and assets to assist in Windows 8 app development, including BindableBase.cs.
  • Common\LayoutAwarePage.cs from which you can inherit your pages and have instant hooks into the system events when dealing with snapping, rotation and orientation.
  • Common\StandardStyles.xaml which gives you a default template on which to extend your app styles and templates.
  • A DataModel folder with provides a strong foundation for data binding and MVVM architecture for your app.

Unlike Windows Phone apps which handle navigation through a URI based navigation service, Windows 8 handles initialization and navigation through frames and container view models.

If you create open up a new Grid App Template, you will notice an App.xaml file. This is the first page loaded when a Windows 8 app stats. App.xaml.cs in turn calls its LaunchApp() function to direct the app to whatever startup page you wish to present. 

We took this opportunity to create our data model for the app. With our KhanDataSource created, the common initialization practice is to create a Frame and use it to navigate to your startup page, passing along your Data Model if applicable. In our case, our startup page will be HubPage.xaml. Both the XAML elements of HubPage.xaml and the structure of our Data Model, KhanDataSource will be analyzed more in the next Quickstarts.

C#

public async void LaunchApp(
     ApplicationExecutionState previousExecutedState)
{
     DataSource = new KhanDataSource();
     await DataSource.LoadAllData();
     var rootFrame = new Frame();
[…]
     if ( rootFrame.Content == null)
     {
          if ( !rootFrame.Navigate(
               typeof(HubPage),
               JsonSerializer.Serialize(DataSource.TopicGroups)))
          {
               throw new Exception(“Failed to create initial page”);
          }
     }
     Window.Current.Content = rootFrame;
     Window.Current.Activate();
}

All the C# templates and most apps will follow this same routine. When an app is launched, App.xaml fires its LaunchApp() event. If a Data Model is required, it may be created at this time and loaded from data either locally or from the cloud, and get passed into the startup page of your app for data binding to the UI. During the subsequent series of Quickstarts, we will look closely at each of these steps and how we implemented them in the Windows Store Khan Academy App.

There are also some great posts on Dev Center that dive deeper into general migration strategies if you want to research the specifics of this topic further:

In the next Quickstart, we'll jump straight into working with data and the new asynchronous pattern in Windows 8.

If you have any questions, comments, or feedback feel free to join in the discussion.

Twitter: @rickbarraza, @joelmartinez

Tags:

Follow the Discussion

  • SteveSteve

    except that all XNA games will just not migrate and its a shame that no tools have been created to assist game developers.

  • JulesJules

    Interesting and useful video from teh Silverlight/ XAML perspective..

    Steve: if you really are interested n XNA and Windows 8, you really should know by know that MonoGame is our great hope for migrating XNA Gams onto Windows 8. Version 3.0 of Monogame, with Windows 8 support is hopefully just a few weeksaway now. (They obviously want to align with W8 and WP8 SDKs)

  • @Steve: yep, as @jules says, MonoGame is definitely the way forward if you had an XNA game that you wanted to port. 

    http://monogame.codeplex.com/

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.