Qt to WP7 - Chapter 3: Windows Phone Developer and Designer Tools

Date: Monday, September 19, 2011, 5:18:57 PM

Tags: Qt

Table of Contents

< Back to Qt to WP7 Guide contents

With the release of the Windows Phone (WP) developer tools, Microsoft brings the user-friendly, high productivity Visual Studio Development environment to WP. As Qt developer you are familiar with Qt Creator and Qt SDK so you can quickly migrate to WP developer tools and work with ease.

Comparing Windows Phone and Symbian Qt Tools

In Symbian Qt application development, Qt Creator is a cross-platform Integrated Development Environment (IDE) tailored to the needs of Qt application developers. Equivalent IDE for native Symbian C++ application development is Carbide c++ integrating device & platform specific Symbian SDKs and emulators.

In WP, Visual Studio 2010 Express for Windows Phone provides a full-featured IDE for WP application development. Visual Studio 2010 facilitates designing, developing and debugging of Windows Phone applications. It's worth noticing that Visual Studio and Qt Visual Studio Add-in can also be used for Qt application development.

Other essential WP tools that help you through the development cycle of the Windows Phone application are:

;

Visual Studio and the other above-mentioned WP application development tools offer similar functionality that is provided by Qt Creator and the Symbian Qt application development tools. The following table gives an overview of the functionality of the most important development tools on both Qt and WP platforms.

Functionality

Audience

Qt tools

Windows Phone tools

Primary UI design: Colors, gradients and animation

UI designers

Qt Quick Designer, Qt Designer

Expression Blend

UI design

UI designers and programmers

Qt Quick Designer and Qt Designer integrated to Qt Creator IDE

Visual Studio 2010 Express and Expression Blend for Windows Phone

Application development (coding)

Programmers

Qt SDK including Qt Creator IDE

Visual Studio 2010 Express for Windows Phone, Silverlight for Windows Phone Toolkit

Game development (coding)

Programmers

Qt SDK including Qt Creator IDE

XNA Game Studio

Testing / Emulation

Testers

Qt Simulator in Qt SDK, QML Viewer

Windows Phone Emulator in Visual Studio 2010 Express

Documentation

Development team and stakeholders

Doxygen, Qt Assistant

NDoc, Sandcastle, Doxygen, Microsoft Help System

Qt and Windows Phone application development tools

The WP toolset ensures that the entire team of designers, developers and testers familiar with Qt toolset find it easy to migrate to the WP development.

Development Life Cycle and Windows Phone Tools

WP toolset is designed to address the co-operation and needs of different members in application development team. In a similar fashion to Qt Quick Designer and Qt Creator in Symbian Qt, Expression Blend and Visual Studio facilitate a close collaboration between WP designers and developers.

Both these tools share the same file structure and source files. Expression Blend uses XAML for UI design and the XAML is consumed by Visual Studio. This system allows separation of responsibilities between the designer and the developer while allowing them to work together seamlessly, as illustrated below.

WP toolset supports development team co-operation

Managing projects in Visual Studio 2010

Like Qt Creator, Visual Studio 2010 Express for WP is a fully-featured IDE. Visual Studio 2010 allows you to:

  • Manage the entire structure of the development project, the source and the resource files
  • Configure the application codebase, known as Visual Studio Solution, as a collection of projects in a separate functional unit

With Visual Studio 2010, you can manage source files, share code and manage the work among team members. Visual Studio integrates a compiler and a debugger. You can access both the compiler and the debugger either from the GUI or from the command line.

Creating a new basic Silverlight application with Visual Studio is straightforward. We start WP development by creating a simple ShoppingList example application step by step.

1.Start Visual Studio 2010 Express for WP from Start menu.

2.In Visual Studio 2010, open File menu and click New Project.

3.In the New Project dialog box, choose Visual C# templates from the Installed templates.

4.Choose Silverlight for Windows Phone templates and select Windows Phone Application.

5.In the Name text box, enter name ShoppingList for project. Select location for ShoppingList project and click OK.

6.In the opening dialog, select Windows Phone 7.1 from the Target Windows Phone OS Version drop-down list and click OK. Visual Studio 2010 creates the new project.

The Solution Explorer pane displays the solution that you created. This solution has only a single project containing the sources, resources and properties.

New Windows Phone Silverlight application in Visual Studio

Note: Unlike Qt Creator, Visual Studio 2010 Express for WP does not provide integration with source control systems. The Visual Studio Professional edition provides features such as integration with various source control systems like Subversion. You can also use Visual Studio Team System, which is designed for greater communication and collaboration among the development teams.

Windows Phone UI Design Tools

The WP developer tools for UI design include:

  • Visual Studio UI Designer
  • Expression Blend

As a basis to application UI design and UI design tools, WP uses a specific XML markup language, XAML, for the UI specification. In Qt Quick, UI specification is constructed using JavaScript-based QML UI definition language.

Visual Studio UI Designer for Windows Phone

Visual Studio UI Designer for WP has a similar purpose and set of features compared to the Qt Quick Designer & Qt Designer integrated to Qt Creator so Qt application developers will find it easy to use.

Basic application UI design with Visual Studio UI Designer is simple. In our example project, the main page for the ShoppingList application, MainPage.xaml, is already open in the Visual Studio UI Designer for editing.

To change the titles of the application and the current page and to add a text block to application's content area, do the following:

1.Right-click the application title MY APPLICATION in Visual Studio UI Designer and select Properties.

2.In the Properties window, select Text and enter SHOPPING LIST.

3.Similarly, change the title of the page by entering My List in the Text property of the page title.

4.Drag a TextBlock from the Toolbox. Place it on top of the content panel.

5.Update the text block's Text property to Item.

Application and page title changed in ShoppingList application

To create layout for the ShoppingList application, do the following:

6.Drag a TextBox from the Toolbox and place it below the text block.

7.Update the text box's Text property to empty string.

8.Above Properties tab, click TextBox1 and enter txtItem to change the ID of the text box to txtItem.

9.Resize the text box by dragging its lower right corner so that its width is 300 or by entering 300 to text box's Width property.

10.Drag a Button from the Toolbox to the right of the text box.

11.Change the button's Content property to Add and its ID to btnAdd.

12.Resize the button so that its width is 140.

13.Drag another TextBox and place it underneath the txtItem text box.

14.Resize the new text box so that it covers the rest of the phone screen.

15.Update the ID of the new text box to txtList.

16.Update the Text property of the new text box to Nothing here yet!.

Complete UI layout for ShoppingList application

17.To start debugging, compile the application and launch it by pressing F5 or by clicking Start Debugging icon in Visual Studio 2010.

Visual Studio 2010 builds the ShoppingList application and deploys it to the WP Emulator that runs the application. You can enter text and click Add button but the application does not respond because there is no event handling code yet for the button you inserted in the previous steps.

The following screenshot illustrates ShoppingList application layout in WP emulator.

ShoppingList application layout in WP emulator

Expression Blend for Windows Phone

Expression Blend for WP is a visual UI design tool that is suitable for designers. Qt Quick Designer and Qt Designer are close equivalents to Expression Blend in Qt development toolset.

Expression Blend can be launched directly from Visual Studio's view menu. With Expression Blend, you can:

  • Drag and drop UI elements to design the UI
  • You can layout the controls accurately up to pixels. You can easily create and use color palettes and gradients
  • Add special effects, such as reflections and shadows
  • Import Photoshop files and other application resources to the Windows Phone application
  • Create fine application behavior and animations without any programming

The following image shows the ShoppingList application XAML UI in Expression Blend.

ShoppingList application UI in Expression Blend

Expression Blend is targeted for UI designers and Visual Studio UI Designer for programmers. Programmers can use Visual Studio UI Designer to integrate the application logic to the UI designed with Expression Blend. However, Visual Studio UI Designer can also be used to design UI for applications.

Both Expression Blend and Visual Studio UI Designer have:

  • A single control set that provides accurate fidelity to their run-time visual representation. This feature allows you to easily visualize the application.
  • Same project structure and share the same source files for designers and developers.
  • Use or produce XAML, which is a Silverlight XML declarative markup language used for interface design. This feature allows a designer to work on the design using Expression Blend while the developer uses Visual Studio to design the logic behind the application. You can establish a smooth design and development workflow.

Developing Applications in Visual Studio

Visual Studio has a simple to use, full-featured and a configurable source editor. The editor tool has various features that are familiar to Qt Creator editor users. The features of the Visual Studio editor include:

  • Rich editing
  • Format code
  • Auto-completion of code
  • Outline or hide code

Visual Studio editor is customizable. Visual Studio editor allows you to define various keyboard shortcuts or create your own macros. Macros help you to automate repetitive actions by combining a series of commands and instructions. You can easily customize Visual Studio Editor to use shortcuts and keyboard combinations you are familiar with.

In Qt Creator, each opened file uses a part of the main editor window that can be split horizontally and vertically. The default editor view in Visual Studio uses tabbed windows for separate files. You can change this behavior to suit your needs. You can change the way in which various windows are docked within Visual Studio Shell.

Let's return to our ShoppingList example application. To add logic to the ShoppingList application, do the following:

18.To stop debugging and to close the running application, press Shift + F5 or click Stop Debugging icon in Visual Studio 2010.

19.Double click Add button of MainPage.xaml in Visual Studio UI Designer. The Visual Studio editor opens up and displays MainPage.xaml.cs with a methodbtnAdd_Click.

Visual Studio Editor

20.To add logic for the items that are added to the ShoppingList application, edit thebtnAdd_Clickmethod. Start by entering the following code:

string tStr = txtItem.Text;

Note: When you enter letters, Visual Studio editor displays the context-sensitive auto-completion dialog box. The Visual Studio equivalent for Qt Creator code completion is called Content Assistant.

Auto-completion dialog box in Visual Studio editor

Note: You can also utilize VS IntelliSense and Code Snippets to enhance your coding efficiency. VS IntelliSense and Code Snippets are introduced shortly in the following chapters.

VS IntelliSense in Visual Studio

VS IntelliSenseis a Visual Studio feature using history, code context and .NET reflection for intelligent auto-completion in Visual Studio editor. VS IntelliSense can suggest and complete variable names, parameters, classes and method names. VS IntelliSense can also generate appropriate code where needed, as shown in the code below:

To complete the event hookup, Visual Studio generates an empty stub for the event handlerbutton1_Clickmethod.

;

Code Snippets in Visual Studio

Code Snippets in Visual Studio are an equivalent to code snippets in Qt Creator. Code Snippets allows you to insert code fragments with a few clicks in Visual Studio editor. Visual Studio contains a large number of snippets. These snippets help you to create own snippets. You can also create an index and search for the code snippets by using the self-defined terms.

To add a code snippet to ShoppingList application, do the following:

21.Focus cursor to new line in thebtnAdd_Clickmethod of MainPage.xaml.cs.

22.To start the Insert Snippet prompt, press ctrl+k ctrl+x in Visual Studio editor or select Insert Snippet from Visual Studio Edit menu.

23.Insert a code snippet forifstatement to the code by selecting Visual C# followed by I. Insert Snippet prompt is illustrated below:

Code Snippet in Visual Studio editor

24.The insertedifstatement code snippet can be used to wrap the event handling code in ShoppingList application.

private void btnAdd_Click(object sender, RoutedEventArgs e) {
    string tStr = txtItem.Text;
    if (true){

    e}
}

25.Enter the following code in thebtnAdd_clickmethod to complete event handling:

private void btnAdd_Click(object sender, RoutedEventArgs e){
    string tStr = txtItem.Text; 
    if (!String.IsNullOrEmpty(tStr)){
        if (txtList.Text.== "Nothing here yet"){
            txtList.Text = "";
        }
        txtList.Text += txtItem.Text + Environment.NewLine;
        txtItem.Text = "";
    }
}

Note: Visual Studio supports various refactoring mechanisms. You can select any piece of code and right-click the code to access the refactoring menu.

Building and Debugging Applications in Visual Studio

Visual Studio 2010 Express for WP allows you to build the Visual Studio solution on demand. It allows you to separately build each project to make a part of the complete solution.

Visual Studio uses an XML based, declarative build system called MSBuild. MSBuild is equivalent to cross-platform qmake build system in Qt Creator. You can access the builds either from the Visual Studio GUI or by using the command line for batch processing. MSBuild is flexible and allows you to create a specific target either as a debug build or as a release build.

Visual Studio build properties window is shown in the following screenshot.

Build properties in Visual Studio

Windows Phone Emulator

The WP Emulator provides a virtualized environment in which you can deploy, debug and test applications. The WP Emulator is designed to provide a comparative performance of an actual device and meets the peripheral specifications required for WP application development.

To access the WP Emulator from Visual Studio, do any of the following:

  • Right-click project file in Solution Explorer and click Deploy
  • Press F5 in the key board, this starts the Emulator along with the debugger
  • Press CTRL+F5, this starts only the Emulator

Cross-platform emulator for Qt development, Qt Simulator, enables application run-time emulation of several mobile devices and multiple mobile platforms supporting Qt. With Qt Simulator you can simulate various system events and configure a variety of global settings, parameters and properties in platform environment and device hardware. WP has specific hardware requirements and specific target platform so in WP Emulator support for adjusting device hardware parameters is limited.

Debugging Applications

Visual Studio Express 2010 for Windows Phone includes a symbolic debugger that you can use with the WP Emulator or with a remote device. Once the application loads into the debugger, you can view the variables of the application and control the execution. Visual Studio debugger functionality corresponds closely to Qt Creator debugger plugin acting as an interface between the Qt Creator core and external native debuggers such as the GNU Symbolic Debugger (GDB), the Microsoft Console Debugger (CDB) and a QML/JavaScript debugger.

To work with debugger, do the following with ShoppingList example application:

26.To start the debugger, press F5

27.In the ShoppingList application text box, enter napkins and click Add. Refer to the image below.

Testing ShoppingList application in WP emulator

Note: To demonstrate debugging process, "napkins" is added after "Nothing here yet!" on purpose in this version of the ShoppingList example application.

28.Stop debugging by pressing Shift + F5. In Visual Studio editor, click the green area to the left of the following code line.

string tStr = txtItem.Text;

Another option is to right click the code line and select Breakpoint->Insert Breakpoint. Visual Studio inserts a breakpoint at that line.

Breakpoint in Visual Studio Editor

29.Launch the debugger again using F5, enter text into the ShoppingList application text box and click Add. When the application stops to the breakpoint in the debugger, rest the mouse pointer overtxtItemin the code.

30.Click '+' icon in the opening pop-up to view the details of variabletxtItem.

Tracking Variables

You can view the details of the variables such as the Type, Fields and Properties. The dialog screenshot below shows how you can scroll up and down the Type Hierarchy to inspect the objects.

Inspecting variables in Visual Studio

You can set a watch on variables to keep them under observation continuously.

To track variables in ShoppingList example application, do the following:

31.Right-clicktxtListand click Add Watch. The Watch window displays the variabletxtList.

32.Click '+' icon neartxtListto expandtxtList.

Tracking variables in Watch window

33.To inspect why the control does not enter the followingifstatement, press F10 to step through the code.

if (txtList.Text == "Nothing here yet"){
    txtList.Text = "";
}

You can observe in the Watch window that the value oftxtList.Textis "Nothing here yet!". It gets compared with "Nothing here yet" (without exclamation point), this is a bug in the code. Modify the code to include the exclamation point in comparison.

if (txtList.Text == "Nothing here yet!")

Note: While in the debugger, you can use the VS immediate mode where you can write the managed code instructions to modify or view the variables or execute code to help with debugging.

Visual Studio Immediate Window

34.Once the code is updated, re-launch the debugger by pressing F5.

35.To test the ShoppingList application, add items to the Shopping list.

Fully functional ShoppingList application in WP emulator

A Note about Debugging

You will observe that you can easily debug a WP application using the managed programming environment. The debugging in WP application is done entirely at the application level using the C# code and types.

Note: The .NET framework includes two classes called Debug and Trace, which help you to write run-time debug messages to the output window. C# also supports an assert statement, which is evaluated at run time. If the statement returns true, Visual Studio does not respond. But if the statement returns false, the program enters the debugger.

Windows Phone Application Deployment Tools

For a WP developer, the most convenient way to test an application during development phase is to use Visual Studio to deploy it to the virtualized environment of Windows Phone emulator. Windows Phone emulator addresses many development and usage scenarios, but in the end it's naturally essential to have the ability to test and execute application in a physical Windows Phone device.

Deploying applications to Windows Phone device

To start deploying applications into Windows Phone device, you need to register your device using Windows Phone Developer Registration Tool installed as part of Windows Phone SDK. For device registration, you need a Windows Live ID and a valid App Hub developer account as a prerequisite. Thus, your device must be connected to your host computer where Zune is installed and running.

To deploy your application into Windows Phone device, you can use Visual Studio. For deployment, you need a registered Windows Phone Device that must be connected to your host computer where Zune is installed and running. To deploy application, just select target Windows Phone Device in Visual Studio Standard toolbar, choose preferred build (Debug or Release) from Solution Configurations list box and press F5 to start deployment.

Note: If you are using Visual Studio 2010 Express for Windows Phone to deploy your application to device, the Solution Configurations list box can be displayed in Standard toolbar by selecting Tools->Settings ->Expert Settings.

Another option to deploy your application into Windows Phone device is to use Windows Phone Application Deployment Tool installed as part of Windows Phone SDK. Prerequisites are equal to Visual Studio device deployment.

Note: For deploying applications that interact with Media API, you should use Windows Phone Connect Tool for device connection instead of Zune.

See Deploying and testing on your Windows Phone for more information about deploying applications to device.

Distributing applications through Windows Phone Marketplace

When your application implementation is completed, you can submit your application to the Windows Phone Marketplace to distribute it to other Windows Phone users. Windows Phone Marketplace Test Kit tool (installed as part of Windows Phone SDK) can be used to make sure your application meets the Windows Phone Marketplace publishing requirements.

Once your application meets the prerequisites for Windows Phone Marketplace, you can submit your application to App Hub for Windows Phone Application certification. After that your certified application can be published, distributed and maintained through Windows Phone Marketplace.

In a nutshell, the Windows Phone application distribution lifecycle consists of the following general steps:

1.Register as a Windows Phone Developer in App Hub

2.Develop and test your application

3.Assemble the prerequisites for Windows Phone Application Certification

4.Submit your application to App Hub for certification

5.Publish your application into the Windows Phone Marketplace

6.Add links to your application in the Windows Phone Marketplace Catalog

7.Update your application in the Windows Phone Marketplace

See Developing and publishing applications overview for Windows Phone Marketplace for more information about how to publish your applications to the Windows Phone Marketplace.

Windows Phone Documentation Tools

QT Creator has an integrated browser-like help tool called Qt Assistant that can also be utilized as an application-specific documentation tool. However, in most of the Symbian Qt applications API documentation is constructed utilizing external documentation tools, such as Doxygen, that can be used stand-alone or integrated to Qt Creator as a plugin.

WP developers benefit from Microsoft's feature-rich Help System that is integrated to Visual Studio and utilizes both locally installed and MSDN Online content. For constructing API documentation, you can use external documentation tools or include XML tags in special comment fields in WP application source code and Visual Studio compiler creates a XML documentation file for you.

Note: Visual Studio editor has a feature that makes it easy to create basic code comments for XML documentation file. Place the cursor just above a class or a member and type the '/' character three times. Visual Studio creates a skeleton for code comment block. When you press the '<' key for new tag in code comment block, VS IntelliSense selector shows a list of available code comment tags.

To add comments and to create XML documentation file for the ShoppingList example application, do the following:

36.Stop debugging by pressing Shift + F5. In Visual Studio Solution explorer, double-click MainPage.xaml.cs to open it up in Visual Studio editor.

37.Focus cursor to the line beforebtnAdd_Clickmethod of MainPage.xaml.cs and type the '/' character three times. Visual Studio creates the following skeleton for method comment block:

Skeleton forbtnAdd_Clickmethod comment block

38.Add method summary comment inside<summary>tags as illustrated below. Click the '<' key and select<code>tags to marktxtItemandtxtListas code inside<summary>tags.

Adding<code>tags for code objects inside<summary>tags

39.Complete the method comments by describing parameters inside<param>tags and add further comments to ShoppingList application classes and methods.

40.When ready, right-click ShoppingList application project file in Visual Studio Solution explorer and choose Properties.

41.In the left pane of the ShoppingList properties window, click Build.

42.Check the XML documentation file check box and choose a name and location for the XML documentation file to be created.

43.Build your project by pressing F6 and Visual Studio compiler creates the XML documentation file. Locate and view the generated documentation file in XML format.

XML documentation file for ShoppingList application

To create final documentation directly from code comments or from the compiler-generated XML documentation file, there is a variety of free document generation tools available for .NET, such as:

  • NDoc
  • Sandcastle
  • Doxygen

Summary

In this chapter we looked at the Windows Phone toolset for application development. WP toolset has similarities with the Qt development tools so Qt developers find the WP toolset easy to migrate to. The feature-rich tools in WP toolset are designed to support every step in the entire application development lifecycle. The design, development and testing tools seamlessly support the co-operation of the whole application development team. The tight integration between the WP tools helps you to streamline the design and develop & test the workflow. WP tools provide an end-to-end functionality and are highly customizable.

Related Resources

To get more information about Windows Phone developer tools, visit:

Other Resources you may find useful:

< Back to Qt to WP7 Guide contents

 
blog comments powered by Disqus