Qt to WP7 - Chapter 6: Porting Applications to Windows Phone

Date: Monday, September 19, 2011, 5:30:46 PM

Tags: Qt

Table of Contents

< Back to Qt to WP7 Guide contents

In the previous chapters we have gone through the basics of Windows Phone (WP) application development. You have got an overview of the WP application architecture, application design principles, development tools and the C# programming language. The fundamentals are in place so, to get further with WP application development, the next step could well be porting your favorite Symbian Qt application to WP.

Symbian Qt utilizes Qt C++ and JavaScript based QML as application development programming languages whereas WP applications are implemented with C#/VB.NET and XML based XAML. The programming languages differ so code rewriting is inevitably required when porting applications between Symbian Qt and WP.

However, the rewriting of code is not that troublesome after all. In fact, lots of functionality can be implemented in WP using less configuring and less complexity than in Symbian Qt. For support, you can use the WP API Mapping tool that is a handy tool to find out similar purpose classes between Symbian Qt/Qt Quick and Windows Phone. Furthermore, there are a lot of similarities and reusable parts in application development models between Symbian Qt and WP and you can certainly port the application business logic.

To support your porting effort, this chapter introduces some example applications from Nokia Developer that have been ported / rewritten from Symbian Qt to WP C#. Screenshots, code snippets and quotations of porting considerations are presented and, in addition, links to application distribution pages provide more information about applications and porting experiences between Symbian Qt and WP. Presented example applications serve as valuable example cases that support application porting and rewriting considerations between Symbian Qt and WP.

RSS Reader Example Application

The QML RSS Reader Example Application demonstrates the usage of RSS feed resources from the Internet. It contains a rich UI with view navigation, search, accordion list and animations. The Qt Quick UI components are being utilized for navigation (PageStackandToolBar) and for dialogs & buttons. Rest of the custom components & graphics are designed to be reusable in other applications. RSS Reader uses the QML local storage to store the feeds that the user has subscribed. The application also demonstrates how the graphical theme can be switched from the settings view.

The WP C# RSS Reader Example Application is a port from the corresponding Symbian Qt/QML example application, similarly showcasing the usage of RSS feeds and some WP specific features. Read the application porting story for more information.

The following screenshots illustrate some UIs of Symbian Qt and WP C# RSS Reader example applications.

Main view of RSS Reader Symbian Qt and WP C# versions

Feed view of RSS Reader Symbian Qt and WP C# versions

The following quotation from WP C# RSS Reader porting story describes the design considerations when porting RSS Reader from Symbian Qt to WP C#.

;

"Porting the design

The Windows Phone 7 version of RSS Reader looks and also behaves somewhat differently than the QML version. Even though the basic flow of the application is the same (choose a feed, choose an article, read the article preview, open it in the platform browser), the way to accomplish the task is different.

In the QML version, there is a custom accordion list that is used to access the feeds in different categories, but in the Windows Phone 7 version we wanted to embrace the Metro UI. Therefore we decided to use the Panorama control in the main view, so that eachPanoramaItemcontains one category of RSS feeds. The feeds are shown as large squares with the feed icon and name (if the feed icon is not available, a default icon is shown). The squares imitate the style of the Windows Phone 7 start menu icons.

The feed view is constructed as a Pivot control. The Pivot control consists ofPivotItemswith onePivotItemfor each RSS feed in the currently selected category, and the user can switch between the RSS feeds by swiping the screen horizontally. Inside thePivotItem, the RSS items of the feed are shown very similarly to the QML version, in a scrollable list. Filtering the list of items on the Windows Phone 7 version is done a bit differently; tapping the search button takes the user to a new screen with the list of items and a textbox for searching. The decision to go to a separate page is due to screen estate concerns, as there would be a bit too little room for the actual RSS items if the search field were on thePivotItem(especially when the on-screen keyboard is visible)."

;

The following code snippet demonstrates WP C# RSS Reader data model definition (RSSCache) and data binding in XAML document.

;

<Application.Resources>
<local:RSSCache x:Key="RSSPagesDataSource" />
</Application.Resources>
...
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource RSSPagesDataSource}, Path=Cache}">

Diner Example Application

The Diner Example Application demonstrates how QML can be used to build a simple, impressive catalog-type restaurant information application for Symbian based on local XML data. It is straightforward to convert the application to use internet resources instead of local XML-resources. The application is designed in a way that it is easy to replace the content and visual style for different restaurants. The application utilizes the Qt Quick UI components for navigation (PageStackandToolBar) and for dialogs, buttons and other GUI controls.

Diner application features tab-based navigation, using theTabGroupandToolBarQt Quick UI components. The UI is implemented using mostly the Qt Quick provided Symbian platform specific UI components, but it also has some custom graphics and UI elements, which are designed to be reusable in other applications. The booking view also introduces the experimental com.nokia.extras -components, namely theDatePickerand theTimePickerdialogs.

The WP C# Diner Example Application is a port from the corresponding Symbian Qt/QML example application, similarly demonstrating how to build a simple, catalog-type application for WP based on local XML data. Read the application porting story for more information.

The following screenshots illustrate some UIs of Symbian Qt and WP C# Diner example applications.

Main view of Diner Symbian Qt and WP C# versions

Location views of Diner Symbian Qt and WP C# versions

Reservation view of Diner Symbian Qt and WP C# versions

The following quotation from WP C# Diner porting story describes the design considerations when porting Diner from Symbian Qt to WP C#.

;

"Changes to design

When examining QML Diner app, it is apparent that straight-forward porting of the look&feel to the Windows Phone environment is not sensible. The QML version features a vivid color theme that is against Windows Phone design guidelines. Also, the navigation model of the QML version is based on using a tab bar control for which no direct equivalent is available in Windows Phone. Therefore a decision was made not to attempt to port the look&feel of the application to Windows Phone. Instead a new application theme more close to other Windows Phone applications was designed and a new navigation model based on panorama control was introduced. The porting aspect of the project was not centered on look&feel but on the features of the application.

The look&feel of panorama-based applications is dominated by the background image of the panorama. For this reason, special attention was given to the selection of the background image. To be in accordance with the dark default theme of Windows Phone, a relatively dark, warm-colored, and restaurant-themed image was selected. A white text color was selected for the application, also because of the dark theme of Windows Phone. This selection of a dark background image and overall theme means that the default platform theme is overridden: even if the user is using a light Windows Phone theme, Diner app still features a dark theme.

As a smaller detail, orientation switching is a major design goal in the QML application. In the Windows Phone environment, orientation switching is recommended to be used only in views that require user input while the user's device is equipped with a physical keyboard. For this reason, the Windows Phone version of the application is locked to portrait mode in all views except for the view for making reservations."

;

The following code snippet demonstrates how parsing of XML file containing restaurant data is done in WP C# Diner using LINQ.

;

XElement menu = doc.Descendants("menu").First();
Restaurant.Categories =
    (from category in menu.Descendants("category")
    select new Category()
    {
        Id = category.Attribute("id").Value,
        Name = category.Attribute("name").Value,
        IconURI = category.Attribute("icon").Value,
        Dishes = (from dish in category.Descendants("dish")
        select new Dish()
        {
            Name = dish.Attribute("name").Value,
            Text = dish.Value
        }).ToList()
    }).ToList();

The following code snippet demonstrates how loading and saving of reservations into Isolated Storage file is implemented in WP C# Diner.

;

private void LoadReservations()
{
    using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())
    {
        using (IsolatedStorageFileStream stream = new
                IsolatedStorageFileStream("reservations.dat",
                System.IO.FileMode.OpenOrCreate, file))
        {
            if (stream.Length > 0)
            {
                DataContractSerializer serializer = new
                DataContractSerializer(
                    typeof(ObservableCollection));
                    Restaurant.Reservations = serializer.ReadObject(stream) as
                    ObservableCollection;
            }
        }
    }
}

private void SaveReservations()
{
    using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())
    {
        using (IsolatedStorageFileStream stream = new
                IsolatedStorageFileStream("reservations.dat",
                System.IO.FileMode.Create, file))
        {
            DataContractSerializer serializer = new
            DataContractSerializer(
                typeof(ObservableCollection));
                serializer.WriteObject(stream, Restaurant.Reservations);
        }
    }
}

Sudokumaster Example Application

Sudokumaster is a logic-based, combinatorial number-placement puzzle with nine 3x3 grids each containing all the digits from 1 to 9. In the beginning only some of the numbers are placed in the grids and the player needs to figure out the correct positions for the missing numbers.

Sudokumaster was originally developed for Symbian platforms. Later on, Qt Quick version of the Sudokumaster was implemented and then Qt Quick version was rewritten to WP Silverlight Sudokumaster. Read the porting story of Sudokumaster WP Silverlight version for more information.

The following screenshots illustrate some UIs of Symbian Qt and WP Silverlight Sudokumaster example applications.

Main views of Sudokumaster Symbian Qt and WP Silverlight versions

;

Spinning wait note in Sudokumaster Symbian Qt and WP Silverlight versions

;

The following code snippet demonstrates how the Sudokumaster puzzle is generated using new thread fromThreadPoolin WP C# Sudokumaster.

private void NewGame()
{
    ...
    // Display wait note (spinning circle)
    waitIndicator.Visibility = System.Windows.Visibility.Visible;
    waitIndicator.StartSpin();
    ...

    // Disable databinding while generating puzzle
    DataContext = null;

    // Puzzle generation takes couple of seconds, do it in another thread
    ThreadPool.QueueUserWorkItem(dummy =>
    {
        // generating puzzle doesn't touch UI so it can run on another thread
        game.GeneratePuzzle();

        // switching to UI thread to modify UI components
        Deployment.Current.Dispatcher.BeginInvoke(() =>
        {
            DataContext = game.Model; // let's turn on databinding again
            gameTimer.Start();
            gameStartTime = DateTime.Now;
            gameState = GameState.Ongoing;
            UpdateStatus();
            waitIndicator.Visibility = System.Windows.Visibility.Collapsed;
            waitIndicator.StopSpin();
        });
    });
    ...
}

;

In Symbian Qt Sudokumaster, new thread is created using QMLWorkerScript.

;

WorkerScript {
    id: puzzleWorker
    source: "gameLogic.js"
    onMessage: {
        Functions.numbers = messageObject.board;
        empties = messageObject.boardEmpties;
        boardChanged();
        viewLoader.close();
        gameOn = true;
        mainBoard.focus = true;
        mainTimer.start();
    }
}
// gamelogic.js
WorkerScript.onMessage = function(message) {
    generatePuzzle(message.rands);
    WorkerScript.sendMessage({board: numbers, boardEmpties: empties});
}

The following code snippets demonstrate how Sudokumaster's wait note animation is implemented in WP C# XAML and Symbian Qt QML respectively.

WP C# XAML:

;

<Rectangle.Resources>
<Storyboard x:Name="spinAnimation">
<DoubleAnimation
    Storyboard.TargetName="Transform"
    Storyboard.TargetProperty="Angle"
    By="360"
    Duration="0:0:0.5"
    AutoReverse="False"
    RepeatBehavior="Forever" />
</Storyboard>
</Rectangle.Resources>

Symbian Qt QML:

NumberAnimation on rotation {
    id: animation
    loops: Animation.Infinite
    from: 0
    to: 360
    duration: 1500
}

Match'em Poker Example Application

Match'em Poker is arcade-style match-N game with poker hands in a square-grid. Player can change the position of two cards without any limitations. When a "poker hand" is formed, it will destroy itself from the level and scores are added. Blocks will drop if there is empty space below them.

Match'em Poker was originally implemented in iOS and ported to Symbian Qt utilizing Qt GameEnabler that enables the use of native OpenGL ES 2.0 code within a Qt application instead of Qt's QtOpenGL rendering. Symbian Qt Match'em Poker includes the SVG icon, resource collection files, game engine and OpenGL ES 2.0 graphics.

Symbian Qt Match'em Poker was later ported to WP XNA Match'em Poker that uses XNA Game Studio andSpriteBatchbased rendering. The objective was to port the application with minimal effort: reusing all of the original assets and modifying the code as little as possible. Read the porting story of Match'em Poker WP XNA version for more information about observations during porting effort.

The following screenshots illustrate some game views from Symbian Qt and WP XNA Match'em Poker example applications.

Game views from Match'em Poker Symbian Qt and WP XNA versions

Summary

In this chapter we inspected application porting between Symbian Qt and WP C# through four existing example porting / rewriting cases. Example porting cases covered several application areas within Silverlight and XNA frameworks and included functionality such as application UI controls, data binding, navigation, data management, threading, animations and graphics. Application design porting considerations were also presented.

Related Resources

To know more about the before-mentioned and other example applications ported from Symbian Qt to Windows Phone, visit:

Other Resources you may find useful:

< Back to Qt to WP7 Guide contents

 
blog comments powered by Disqus