Android to WP7-Chapter 3: The Developer and Designer Tools

Date: Friday, June 3, 2011, 10:48:26 AM

Tags:

Table of Contents

With the release of the Windows Phone 7 (WP7) developer tools, Microsoft brings the user-friendly, high productivity Visual Studio Development environment to WP7. Developers who have used Visual Studio will find themselves in a familiar environment. An Android application developer who is familiar with Eclipse will find it easy to quickly migrate to WP7 developer tools and become productive.

A Comparison of Android and Windows Phone Tools

Visual Studio 2010 Express for Windows Phone is a full-featured Integrated Development Environment (IDE). Visual Studio 2010 facilitates designing, developing, and debugging of Windows Phone applications. Other WP7 tools that can help you in the development cycle of the Windows Phone application are:

  • Expression Blend
  • XNA Game Studio
  • Windows Phone Emulator

Compared to Android developer tools, the WP7 developer tools offer richer functionality. The following table gives an overview of the functionality of each of these tools. The table also indicates the equivalent tools that you would use for Android application development.

image

As you plan to develop applications for WP7, you can continue to leverage the skillsets in your team. You can use the Android team structure and overall development process to build applications for Windows Phone. The WP7 toolset ensures that the entire team of designers, developers, and testers familiar with Android development tools will find it easy to migrate to the WP7 toolset.

Development Life Cycle and Windows Phone Developer Tools

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

image

Project Management for Windows Phone

Like Eclipse, Visual Studio 2010 Express for WP7 is a full-featured IDE. Visual Studio 2010 Express allows you to:

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

Visual Studio 2010 Express makes it easy to manage source files, to share code and 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.

To create a sample application, do the following:

  1. Start Visual Studio Express for WP7 from the Windows Start menu.
  2. In Visual Studio Express, click File.
  3. Click New Project.
  4. In the New Project dialog box, select Windows Phone Application.
  5. In the Name of the project text box, enter "ShoppingList" as the name of the project, and click OK. Visual Studio Express will create the new project as shown below.

The Solution Explorer pane displays the solution that you have created. This solution has only one project, also named ShoppingList. The project contains the sources, resources and properties.

image

Note: Visual Studio Express for WP7 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.

The UI Design Tools

The WP7 developer toolset includes two UI design tools:

  • Expression Blend
  • Visual Studio UI Designer

WP7 uses Silverlight and a specific XML markup language for the UI specification.

As you know, there is no native UI designer for Android. As compared to Eclipse ADT UI plugin, Visual Studio UI design tool is much richer. Android application developers migrating to WP7 developer tools will find the task of designing an application UI much easier. Once created, the main page for the ShoppingList solution, MainPage.xaml, is already opened in the Visual Studio UI Designer tool for editing.

Let us change the title of the application, as well as the title of the current page. To change the title of the application:

  1. Right-click the title MY APPLICATION and select Properties.
  2. In the Properties window, select Text and enter "SHOPPING LIST."

Similarly, change the title of the page by typing "my list" in the Text property of the title.

Let us design the interface of the main page of the application.

image

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

2. Drag a TextBox from the toolbox and place it underneath the text block created in the previous step.

3. Update the Textbox's Text property to delete any existing entry.

4. Under Properties, click TextBox1, and enter "txtItem" to change the ID of the text box to txtItem.

5. Resize the text box by dragging its lower right corner so that its width is 300.

6. Drag a Button to the right of the TextBox.

7. Change the button's Content property to "Add", and its ID to "btnAdd".

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

9. Drag another TextBox and place it underneath the txtItem textbox.

10. Resize the new TextBox so that it covers the rest of the phone screen.

11. Update the ID of the new TextBox to "txtList".

12. Update the Text property of the new TextBox to "Nothing here yet!"

At this point, your application should look something like this:

image

13. 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.

image

Note: You can use the context menus to add event handlers or to set the control properties. The emulator's integration with Visual Studio allows for direct manipulation of controls and makes it easy to add logic to the UI controls.

Expression Blend for Windows Phone 7

Expression Blend for WP7 is a full-featured visual UI design tool that is created for designers. There is no exact equivalent to Expression Blend in the Android development toolset. Similar to the VS Design tool, Expression Blend allows drag and drop to design the UI. With the tool, shown below, you can:

  • Drag and drop UI elements to design the UI.
  • Do pixel accurate layout of widgets. You can easily create and use color palettes and gradients.
  • Add special effects, such as reflections and shadows.
  • Import Photoshop files and Android application resources to the Windows Phone application.
  • Define application behavior and animations without any programming.

image

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. Both tools include control sets that provide an accurate representation of their runtime equivalents, 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 creating a smooth design and development workflow.

Visual Studio

Visual Studio has a simple to use, full-featured, configurable source editor. The editor tool has various features that are familiar to Eclipse users. These include flexible search, rich editing, code formatting, and the ability to outline/hide code.

Now let us add some logic to our application. :

  1. Stop the running application by clicking Debug followed by clicking Stop Debugging.
  2. Double click Add which will open MainPage.xaml.cs with a method btnAdd_click in the MainPage class.

image

3. To add logic for adding items to the shopping list, edit the btnAdd_click method. Enter the following code: string tStr = txtItem.Text;.

VS IntelliSense in Visual Studio

When you enter "t" for "txtItem", Visual Studio displays the auto-completion dialog box. The Visual Studio equivalent for Eclipse auto-completion content assistant is called Intellisense.

clip_image020

4. Enter the following code in the btnAdd_click method:

if (!String.IsNullOrEmpty(tStr))

When you type "String", Visual Studio displays the auto-completion dialog box. When you type "Is", Visual Studio displays the class methods of the String class.

clip_image021

VS IntelliSense has a rich feature set. It uses history, code context, and .NET reflection for intelligent auto-completion. 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:

clip_image023

To complete the event hookup, Visual Studio generates an empty stub for the event handler button1_click method.

clip_image025

Code Snippets in Visual Studio

Visual Studio provides another very useful feature called Code Snippets, similar to code templates in Eclipse, allowing you to insert code fragments with a few clicks. Visual Studio contains 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_image027

The inserted snippet shows the parts of the code that the user needs to complete.

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

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

string tStr = txtItem.Text;
if (!String.IsNullOrEmpty(tStr))
{
    if (txtList.Text == "Nothing here yet")
    {
        txtList.Text = "";
    }
    txtList.Text += txtItem.Text + "\n";
    txtItem.Text = "";
}

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

Visual Studio Editor

The Visual Studio editor is highly customizable. Developers can easily define various keyboard shortcuts or create their own macros. Macros help you to automate repetitive actions by combining a series of commands and instructions. Eclipse users can easily customize Visual Studio Editor to use shortcuts and keyboard combinations with which they are familiar.

Instead of opening a separate window for each file, as in Eclipse, the default view in Visual Studio uses tabbed windows. Developers can change this behavior to suit their need. They can also change the way in which various windows are docked within the Visual Studio Shell.

Building Applications

Similar to Eclipse, Visual Studio Express for WP7 allows you to build a 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 to Ant or 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.

image

Windows Phone Emulator

The WP7 Emulator provides a virtualized environment in which you can deploy, debug, and test applications.

It provides features that are comparable to the Android simulator included in the Android developer tools.

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 symbolic debugger that you can use with the WP7 Emulator or 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. Test it by adding couple of items to the shopping list. Type "napkins" in the textbox and click Add.

image

"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 "string tStr = txtItem.Text;" line in the code window. This will insert a breakpoint at that line.

clip_image037

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. You 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.

Watching Application State

image

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

Right click txtList, followed by Add Watch. The watch window will show the variable txtList. Expand txtList by clicking on "+".

clip_image040

To ensure that the control does not enter the "if statement", press F10 to step through the code.

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

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:

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.

image

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

image

Overall, you will find that, with the power of the managed programming environment, debugging a WP7 application is very easy. Like Eclipse, the debugging in WP7 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.

;

Summary

In this chapter we looked at the Windows Phone Developer Toolset. The tool set includes rich tools that are designed to support every step in the entire application development lifecycle. The design, development, and testing tools are equivalent to the existing Android team roles and processes. The tight integration between the WP7 tools helps you to streamline the design, develop the workflow, and test the 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