Chapter 3: Developer and Designer Tools Introduced to iPhone Application Developers

Date: Tuesday, April 26, 2011, 12:00:00 AM

Tags: iPhone, WP7, Porting, Tools

Table of Contents

Introduction

With the release of Windows Phone 7 developer tools, Microsoft brings the user-friendly, high productivity Visual Studio Development environment to Windows Phone 7. Developers who have used Visual Studio will find a familiar environment. Even iPhone application developers familiar with XCode will find it easy to migrate to WP7 developer tools and become productive quickly.

Comparing the iPhone and Windows Phone 7 ToolSet

Visual Studio 2010 Express for Windows Phone is a full featured IDE specifically created for designing, developing and debugging Windows Phone 7 applications. This IDE, along with other tools, namely, Expression Blend, XNA Game Studio, and Windows Phone Emulator cover the entire cycle of Windows Phone application development.

WP7 developer tools cover the full functionality that is provided by the iPhone application developer tools. The following table gives an overview of the functionality of each of these tools and how they correspond to iPhone development equivalents.

clip_image002

;

As you plan to develop applications for WP7, your iPhone team structure and overall development process can remain the same. The entire team of designers, developers and testers, familiar with iPhone development tools, will find it easy to migrate to the WP7 toolset.

Development Lifecycle and Window Phone 7 Developer Tools

Windows Phone 7 development tools facilitate a close collaboration between designers and developers through the use of Expression Blend and Visual Studio. These two tools share the same file structure as well as actual source files. Expression Blend uses XAML for UI design, a declarative XML based language, which is also consumed by Visual Studio. This allows the designer and the developer to work seamlessly together while it provides clear separation of responsibilities between the two. image

Project Management

Like XCode, Visual Studio Express for WP7 is a full featured IDE. It allows developers to manage the entire structure of the development project; the source files as well as the various resource files. Visual Studio allows you to configure the application codebase, called a Visual Studio Solution, as a collection of projects, i.e. as a separate functional unit. This makes it easy to manage source files, to share code as well as to manage the work among team members. Visual Studio integrates a compiler and a debugger, both of which can be invoked either interactively or via the command line.

Let us create a sample application. Start Visual Studio Express for WP7 and click File, then New Project. In the New Project dialog select Windows Phone Application. Type "ShoppingList" for the name of the project and click OK. Visual Studio will create a new project for you as shown below. The Solution Explorer window shows the solution we just created. This solution has only one project, also named ShoppingList. The project contains the sources, resources and properties.

clip_image010

Unlike XCode, Visual Studio Express for WP7 does not allow integration with source control. If you wish integrated source control, you can instead use Visual Studio Professional edition which integrates various source control systems, such as Subversion, that iPhone application developers are familiar with. Alternatively, you can use the Visual Studio Team System, an edition designed particularly for greater communication and collaboration among software development teams, for developing your WP7 application.

UI Design Tools

WP7 developer tools include two UI design tools, namely, Expression Blend and Visual Studio UI designer. WP7 uses SilverLight, with its XML markup language, for the UI specification.

Visual Studio UI design tool is comparable to Interface Builder. iPhone application developers who know Interface Builder will find it easy to use this tool. The main page for our ShoppingList solution, MainPage.xaml, is already opened in the VS UI designer tool for editing (shown above).

Let us change the title of the application, as well as the title of the current page. Right click on the title, "MY APPLICATION" and select Properties. In the properties window, select Text and type "SHOPPING LIST." Similarly, change the title of the page by typing "my list" in the Text property of the title.

Open the Toolbox, drag a TextBlock and drop it on the page. Position it so that it is at the top left. Right click on the TextBlock and update its Text property to "Item:"

clip_image012

Drag a TextBox from the toolbox and place it underneath the above the textblock. Update its Text property to wipe it clean. Right underneath Properties, click on "TextBox1", and type "txtItem" to change the ID of the textbox to txtItem. Resize the textbox by dragging its right bottom corner so that its width is 300.

Similarly, drag a button and drop it to the right of the TextBox. Change its Content property to "Add", and its ID to "btnAdd". Resize the button so that its width is 140. And finally, drag another TextBox and place it underneath the txtItem textbox. Resize it so that it covers the rest of the phone screen. Update its ID to "txtList" Update its Text property to "Nothing here yet!" Your application should look something like this:

clip_image014

Click F5, or Debug and Start Debugging, to compile the application and launch it. This will start the WP7 emulator, deploy the ShoppingList application and run it. You can click on Add, but nothing will happen as we have not written any logic yet.

clip_image016

Developers can use context menus to add event handlers or set control properties. Its integration with Visual Studio allows for direct manipulation of controls and makes it easy to add logic to UI controls.

Expression Blend for WP7

Expression Blend for WP7 is a full featured visual UI design tool created for designers. There is no exact counterpart to this in the iPhone development toolset. Similar to VS Design tool, Expression Blend also allows drag and drop to design the UI. The tool, shown below, allows pixel accurate layout of controls. They can easily create and use color palettes and gradients, as well as special effects such as reflections and shadows. The tool can import Photoshop files, to make it easy to bring your iPhone application resources to your Windows Phone application. Designers can also use the tool to define application behavior, as well as certain animations, without any programming.

clip_image018

While designers use Expression Blend, and programmers use the Visual Studio Design tool to hook up their application logic to the UI design, the VS UI design tool can also be used for the UI design, as we saw earlier. Both tools include the same control set, that provides accurate fidelity to their run time visual representation, making it easy to visualize the application. The two design tools use the same project structure and share source files. Both tools consume/produce XAML, the Silverlight XML declarative markup language, for the interface design. This makes it very convenient for a designer to work on the design using Expression Blend while the developer uses Visual Studio to design the logic behind the application. It creates a smooth design and development workflow.

Editing code

Visual Studio includes a simple to use, full featured, yet configurable, source editor. It provides various features that will be familiar to XCode users. These include flexible search, rich editing, code formatting, and the ability to outline/hide code.

Let us add some logic to our application. Stop the running application by clicking Debug, followed by Stop Debugging. Double click the "Add" button which will open MainPage.xaml.cs with a method btnAdd_click in the MainPage class.

clip_image020

Edit the newly added method to add logic to add items to the shopping list. Type:

clip_image021

As soon as you type "t" for txtItem, VS will bring up the auto-completion dialog as shown below. The Visual Studio counterpart for XCode auto-completion is called IntelliSense.

clip_image022

Also type:
clip_image023

As soon as you type, "String." VS will pop up the auto-completion dialog. Typing "Is" will take you to the class methods of the String class.

clip_image024

VS IntelliSense is richly featured. As opposed to relying on the history alone, it disambiguates using the code context and .NET reflection, for intelligent auto-completion. It can suggest or even complete variable names, parameters, as well as class and method names. It even generates appropriate code where needed, as shown below using an unrelated code fragment:

clip_image026

To complete the event hookup, it will also generate an empty stub for the event handler, i.e., the button1_click method.

clip_image027

Visual Studio provides another very useful feature called Code Snippets, which is a counterpart to text macros in XCode. It allows you to insert code fragments in the active file with a few mouse clicks. Visual Studio ships with a large number of snippets and developers can create their own library of snippets. They can also be indexed and searched using user defined terms.

Type ctrl+k ctrl+x to bring up the Insert Snippet prompt. Select Visual C#, followed by "i" to select a code snippet for "if statement", which will insert an if statement in the code.

clip_image028

The inserted snippet identifies the parts the user needs to complete:

clip_image029

Type the remaining code, so that the body of the method is as follows:

clip_image030

Visual Studio supports various refactoring mechanisms. Select any piece of code and right click to access the refactoring menu.

The Visual Studio editor is highly customizable. Developers can easily define different keyboard shortcuts or create their own macros. Macros help you automate repetitive actions by combining a series of commands and instructions together, making it easy to invoke them as one command. iPhone application developers can easily customize the editor to use any shortcuts and keyboard combinations that they are familiar with. Instead of spawning a separate window for each file, as in XCode, the default view in VS uses tabbed windows. Developers can change this behavior to suit their need. They can change the way in which various windows are docked within the Visual Studio Shell.

Building Applications

Similar to XCode, Visual Studio Express for WP7 allows you to build the Visual Studio solution on demand. Further, each project that is part of the solution can be built separately.

Visual Studio uses an XML based, declarative build system called MSBuild which can be compared with Ant/Nant. Builds can be invoked interactively or via a command line for batch processing. This system is flexible and allows you to build a specific target either as a debug build or as a release build.

clip_image032

Emulator

WP7 developer tools include an emulator that can be used effectively for testing applications. It provides features that are comparable to the iPhone simulator included in the iPhone developer tools.

The WP7 emulator provides a virtualized environment in which you can deploy, debug and test applications. The Windows Phone Emulator is designed to provide comparable performance to an actual device and meets the peripheral specifications required for application development. It can be invoked from Visual Studio to load an application package [.xap] within the emulator.

Debugging

Visual Studio Express Phone 7 includes a very powerful symbolic debugger that can be used with the WP7 emulator or with a remote device. Once the application breaks into the debugger, the developer can view the variables in the application and control the execution.

Let us look at the debugger in action. Press F5 to launch the application again. Type "napkins" in the textbox and click Add.

clip_image034

"Napkins" is added at the end of "Nothing here yet!" - not something we expected. In Visual Studio, click in the light blue area to the left of the

clip_image035

line in the code window. This will insert a breakpoint at that line.

;

clip_image036

Launch the application again using F5. When the application breaks into the debugger, hover over txtItem in the code and click "+" in the popup to view the variable txtItem, as shown below. The developer can view the variable, its type, its fields and properties. The picture below shows how you can walk up and down the type hierarchy to inspect the objects.

clip_image038

You can set a "watch" on certain variables to inspect them continuously. Right click txtList, followed by Add Watch. The watch window will show the variable txtList. Expand txtList by clicking on "+".

clip_image039

Step through the code using F10 to see that control does not enter the if statement.

clip_image040

Observe in the watch window that the value of txtList.Text is "Nothing here yet!", whereas it is getting compared with "Nothing here yet" (with no exclamation point.) Therein is our bug! Change that statement to add the exclamation point, as follows:

clip_image041

While in the debugger, the developer can use the VS 'immediate mode' where one can write managed code instructions to modify or view the variables or execute some code to help with debugging.

clip_image042

Update the code and relaunch the application. Test it by adding couple of items to the shopping list.

clip_image044

Overall, you will find that, with the power of the managed programming environment, debugging a WP7 application is very easy. Unlike an XCode application, where you have access to assembly instructions, memory dumps and various registers, the WP7 application debugging is done entirely at the application level, using C# code and types.

In addition to the above debug facilities, the .NET framework includes two specific classes, Debug and Trace, that make it easy 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 evaluates to true, nothing happens, but if the statement returns false, the program breaks into a debugger.

Summary

The Windows Phone 7 developer toolset includes rich tools designed to support every step in the entire application development lifecycle. The design, development and testing tools are amenable to existing iPhone team roles and processes. The tight integration between theWP7 tools can help you streamline your design, development and testing workflow. These tools provide end-to-end functionality and are highly customizable, with the power to make your team quickly productive.


 
blog comments powered by Disqus