EDN Admin
Well-known member
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 http://msdn.microsoft.com/en-us/library/windows/apps/hh465136.aspx 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 https://github.com/joelmartinez/Khan-Academy-for-WinRT available for download . <h1>Installing the Developer Tools</h1> 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 http://www.microsoft.com/express Microsoft Visual Studio Express 2012 for Windows 8 . <h1> The Khan Academy Phone App </h1> To show the migration in action, we will use the open source Khan Academy Windows Phone 7 app, developed by http://www.codecube.net 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, http://www.khanacademy.com 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 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 apps source code is also available for https://github.com/joelmartinez/Khan-Academy-for-Windows-Phone 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: <img title="Screen Capture" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/Screen%20Capture%5B3%5D.jpg" alt="Screen Capture" width="288" height="480" border="0 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: <img title="Screen Capture (1)" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/Screen%20Capture%20(1)%5B3%5D.jpg" alt="Screen Capture (1)" width="288" height="480" border="0 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: <img title="khanPhoneLayout" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/khanPhoneLayout%5B2%5D.png" alt="khanPhoneLayout" width="500" height="370" border="0 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. <h1> Determining the Migration Strategy </h1> 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? <img title="clip_image001[5]" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image001%5B5%5D%5B2%5D.png" alt="clip_image001[5]" width="500" height="115" border="0 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 Phones 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. <a name="_msocom_1 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 http://msdn.microsoft.com/en-us/library/windows/apps/hh465136%28v=VS.85%29.aspx . However, in either case, it is recommended that you dont try and bring over your XAML UI files directly. We discuss this further below. <h1> Scoping the Solution </h1> 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. <img title="clip_image002" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image002%5B3%5D.png" alt="clip_image002" width="500" height="116" border="0 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. <h1>Working with the Project Templates</h1> 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. <img title="clip_image003" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image003%5B3%5D.png" alt="clip_image003" width="500" height="149" border="0 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 doesnt 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. <img title="clip_image004" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image004%5B3%5D.png" alt="clip_image004" width="446" height="340" border="0 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. <img title="clip_image005" src="http://files.channel9.msdn.com/wlwimages/b99a24a9f48a4ce2b672a09b015ae985/clip_image005%5B3%5D.png" alt="clip_image005" width="386" height="624" border="0 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. CommonLayoutAwarePage.cs from which you can inherit your pages and have instant hooks into the system events when dealing with snapping, rotation and orientation. CommonStandardStyles.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# <pre class="brush: csharp
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();
}
[/code] 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: http://msdn.microsoft.com/en-us/library/windows/apps/hh465136%28v=VS.85%29.aspx Migrate/port a Windows Phone 7 app to a Windows Store app http://msdn.microsoft.com/en-us/library/windows/apps/br229583.aspx Roadmap for Windows Store apps using C# or Visual Basic http://msdn.microsoft.com/en-us/library/windows/apps/hh768232.aspx C#, VB, and C++ Project templates for Windows Store apps In the next Quickstart, well 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: @ http://twitter.com/rickbarraza rickbarraza , http://twitter.com/joelmartinez @joelmartinez <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:b7a8f7c6f18c4b358aa4a09e0133d629
View the full article
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();
}
[/code] 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: http://msdn.microsoft.com/en-us/library/windows/apps/hh465136%28v=VS.85%29.aspx Migrate/port a Windows Phone 7 app to a Windows Store app http://msdn.microsoft.com/en-us/library/windows/apps/br229583.aspx Roadmap for Windows Store apps using C# or Visual Basic http://msdn.microsoft.com/en-us/library/windows/apps/hh768232.aspx C#, VB, and C++ Project templates for Windows Store apps In the next Quickstart, well 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: @ http://twitter.com/rickbarraza rickbarraza , http://twitter.com/joelmartinez @joelmartinez <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:b7a8f7c6f18c4b358aa4a09e0133d629
View the full article