Get into Windows Phone 7 Development: Building a To-Do List App

By Denisse Zavala

Microsoft recently revealed the details of the Windows Phone Application Platform. It is built upon Silverlight, XNA Framework and the .NET Compact Framework, and MS rely on this combination to claim that development of rich applications will not have a steep learning curve for developers who are familiar with these technologies.

I wanted to get my hands on this platform so I used my basic Silverlight skills to create a really simple application to manage a To-Do list. Here the details:

First thing to do is get the Windows Phone developer tools CTP, which includes the VS 2010 Express for Windows Phone development tool and an add-on to the VS 2010 RC to enable phone development within the full VS 2010. These tools are not compatible with retail (RTM) release of VS 2010, so we’re stuck with the RC for a few more weeks. Installing the tools is as straightforward as with most MS developer tools, so there’s not much to say about it.

THE PROJECT

After launching the VS 2010 Express for Windows Phone I created a new project using the Windows Phone Application template:

VS opened the design and markup view, and it was no surprise to see the xaml markup, remember: Silverlight is the platform for Windows Phone 7 Series development.

The layout is a grid that holds some TextBlock controls, aTextBox, a Button, and a ListBox:

THE CODE BEHIND

Front end done! When I went to the code behind there was pretty much the same code from a Silverlight Desktop app: a partial class, a constructor that initializes the components, and two event handlers created when I added the markup for the Button and CheckBox Click event.

Two things draw my attention: the PhoneApplicationPage class (inherited by the MainPage class) and the SupportedOrientations property. The first is the equivalent to the Silverlight Page class. The second introduces a new concept to Silverlight: Orientation.

Orientation was never taken into account when building desktop Silverlight applications, however, when it comes to phone development, it is a big deal. The PhoneApplicationPage has two events that relate to orientation –OrientationChanging and OrientationChanged – and a property, SupportedOrientations, which specifies the orientations supported by the page (Landscape or Portrait).

I needed to define a collection to hold the tasks, and as this collection needs to be updated regularly I used an ObservableCollection:

Since Windows Phone 7 does not support SQL Server I decided to use Linq to XML to persist the tasks to a file named Tasks.xml, which must be included in the project in order to be packaged into the .xap.

The structure I used for the xml file is:

To use Linq to XML I needed to add the appropriate reference to the project:

The access to the file system in Windows Phone 7 is restricted, so to store files into the phone we need to rely on the IsolatedStorage. This feature allows isolating data by user and by assembly, or by application domain; data is saved to a compartment that is associated somehow with the code’s identity (Web site, publisher or signature); the compartment is not a specific storage location, instead, consists of one or more isolated storage files, called stores, that contain the actual directory locations where data is stored.

I created a method that uses IsolatedStorage to retrieve saved tasks, fill the Taks collection and then assign this collection to the ListBox ItemsSource property.

Needless is to say that a SaveTasks method was necessary and that it too relies on IsolatedStorage:

Remember those event handlers VS was kind enough to create for me? It is time to define what they will do.

When clicking the button I wanted to display the new task and save it to the xml file. The CheckBox click will cause to delete the related task from the list and save the new list to the xml file, overwriting existing elements.

The only thing left was to call LoadTasks() from the constructor:

RUNNING THE APPLICATION

The Windows Phone 7 tool includes an emulator – the phone operating system running on a virtual machine – that will run our applications just as if we’re using the actual phone. We can choose to deploy the app to the actual device or to the emulator.

I chose to deploy to the emulator, and after waiting for a while, the application loaded as shown below:

Working as expected, when adding tasks they are persisted and even after restarting the app they are loaded; when deleting, a message box is show to confirm the action.

That’s all, I have my To-Do list that persist the tasks in the phone. Quite simple and straightforward, obviously this application uses just basic features and its sole purpose was to introduce to this new platform, however, stepping into development of more complex and sophisticated applications doesn’t seem to be a hard transition for .NET developers.

Thank you for reading this article I made

Regards.

Enabling Fiddler on the Windows Phone 7 emulator

By David E.

Fiddler is a Web Debugging proxy to capture traffic between our computer and the Internet. It shows in detail all the requests made ​​by any application that accesses the Internet. Sometimes it is useful to review a page using Fiddler if there’s an image that we need or we want to know the logic of some specific client functionality, as Fiddler can tell us all files that are loaded when a page loads: html, aspx, css, js, etc.

One of the biggest advantages of a Web Debugging Proxy is that it is possible to see some requests to some services in our applications. Even though we have a desktop application, if there is a reference to a service in our code and we put a call to a method of that service, Fiddler can catch traffic request and service response. In particular, in Silverlight applications, or specific applications for Windows Phone 7, these calls can be made ​​using WebClient or WebRequest objects like.

To enable Fiddler on the emulator of WP 7 is necessary:

1. Install Fiddler on the version 2.3.0.7 (or some higher).
2. Start Fiddler
3. Select the menu "Options Fiddler"
4. Open the tab "Connections"and select the checkbox that says "Allow remote computers to connect"

5. Press OK to close the dialog.
6. In the Fiddler command line run the following command prefs set fiddler.network.proxy.registrationhostname HostName where HostName is the name of your computer you're running the emulator.

7. Close and restart Fiddler.
8. Start (or restart) Windows emulator Phone 7. This can also be made by stopping and re-run our application of WP7.
9. Open Internet Explorer in an emulator or run the command in your application that makes the request for service.
10. Verify that traffic is properly captured in Fiddler

Introduction to Windows Phone 7 and Page Navigation

By Rosario A.

First we need to join Visual Studio 2010 and select the Windows Phone Application project

Solution Explorer
This is the appearance in the Solution Explorer for the generated project. Instead of quoting the entire content of each file, I will describe its purpose.

ApplicationIcon.png
This image should be replaced with the one that is going to represent the application. It is the one that the users will see in the phone application. Make sure it is memorable.

App.xaml
The idea is to see this file as the web.config in ASP.NET. Here is where you will find comprehensive data and application settings. It is also where I prefer to keep my styles, even thought is not required to place them there.

App.xaml.cs
The underlying code for the previous file; this is where the off-activation cycle (tombstoning) is handled. The concept of off-activation will be covered on day # 14 of the 31 days of Windows Phone.

AppManifest.xml
A simple file with the application manifest required to generate the XAP package.

AssemblyInfo.cs
Another configuration file that contains meta-information such as name and program version and which is incorporated in the final assembly.

Background.png
This is the image that will be used when the application is posted on the home screen. The beating is to use a similar design to ApplicationIcon.png.

MainPage.xaml
The first page of the application. In almost all cases, it should NOT be the only page. The phone knows how to handle the forward and backward between pages and should not be accumulating all the functionality of the application in a single xaml file. Segment it. You will thank me later. We will cover in depth the issue of page navigation tomorrow morning, day # 2 of the 31 days of Windows Phone.

MainPage.xaml.cs
Contains the code-behind file for MainPage.xaml. When you need things to happen in the code, here is where they usually are written. Almost always it is necessary to interact with objects in the XAML file. During the series we will cover a lot of issues that require us to write code in this file (and similar to code-behind).

SplashScreenImage.jpg
The default image will be displayed while the application loads. It can be replaced with another of our liking, but remember that its only purpose is to notify the user that the delay is because the application is loading.

WMAppManifest.xml
Another file with metadata describing specific aspects of the application such as title, location of icons, and similar skills.

Navigation among pages

We have several pages and want to give the user a way to move between them. For this we will build a simple graphical interface navigation that allows us to do that.

1) Create a Windows Phone Application

2) Add several pages with Windows Phone Portrait

There were created three vertical pages: Pasta.xaml, Sauce.xaml and Cheese.xaml. We will associate pages using various methods.

3) Change the title of each page to distinguish them
Each page has an element created XAML (TextBlock) called PageTitle, which is assigned the string "page name ". It’s necessary to change it in each so that is evident in what page you're working.

4) Create some links on MainPage.xaml
There are several ways to create links between pages. The first is using only XAML. For this we use the HyperLinkButton:

                 NavigateUri="/Pasta.xaml"

                 Height="30"

                 Name="hyperlinkButton1"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left"/>

                 NavigateUri="/Cheese.xaml"

                 Height="30"

                 Name="hyperlinkButton2"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left" />

                 NavigateUri="/Sauce.xaml"

                 Height="30"

                 Name="hyperlinkButton3"

                 Width="200"

                 HorizontalAlignment="Left"

                 HorizontalContentAlignment="Left" />

When running the project it should be possible to click on either button links and go to the specific page (assuming you have the same page as me). By using the back button we will go to the previous screen. If you go back far enough, you exit the application to pass beyond the first screen.

5) Going to sites via code
If you prefer to use code instead of just using XAML, you can use any XAML of your choice. There will be created three buttons and each pointing to the same event handler. In the following C # code you will find out which button was pressed and then go to the appropriate page. The original function of the back button is still available in its entirety.

XAML

        Height="72"

        Name="BotónPasta"

        Width="160"

        Click="Botón_Click"/>

        Height="72"

        Name="BotónQueso"

        Width="160"

        Click="Botón_Click" />

        Height="72"

        Name="BotónSalsa"

        Width="160"

        Click="Botón_Click" />

C#

private void Botón_Click(object sender, RoutedEventArgs e)

{

    Button botónPulsado = sender as Button;

    switch (botónPulsado.Name)

    {

        case "BotónPasta":

            NavigationService

                   .Navigate(new Uri("/Pasta.xaml",

                                     UriKind.Relative));

            break;

        case "BotónQueso":

            NavigationService

                   .Navigate(new Uri("/Cheese.xaml",

                                     UriKind.Relative));

            break;

        case "BotónSalsa":

            NavigationService

                   .Navigate(new Uri("/Sauce.xaml",

                                     UriKind.Relative));

            break;

    }

}

As you can see, all user actions are recorded, allowing back on the path taken by simply using the NavigationService.

Sieena and Microsoft Partner on the Promotion of the Windows Phone 7 Application Development

Sieena and Microsoft Partner on the Promotion of the Windows Phone 7 Application Development

Microsoft chose Sieena to be one of the three companies in Mexico to help promote the development of applications for the new Windows Phone 7 platform.

LOS ANGELES, Nov. 30, 2010 /PRNewswire/ -- Sieena, a leading software development and IT outsourcing firm specializing in Microsoft technologies, today announced that it was chosen to be subject matter experts to help promote the new Windows Phone 7 in Mexico. Microsoft asked Sieena to help spread the word and illustrate how the Windows Phone 7 can help businesses capitalize on the large and growing mobile market.

With Windows Phone 7, Microsoft takes a fundamentally different approach to mobile software. The design synthesizes form and function—bringing together applications, services, and content with a common theme in a way that makes sense, so that everyday tasks are easier, with fewer steps.

"Sieena has been providing boot camps, workshops and webinars to help the promotion and development of applications for the new device," said Mauricio Duran, Sieena President. "Whether you're a developer, an independent software vendor, or a systems integrator, Windows Phone 7 can help you build a thriving mobility practice."

Sieena is recognized as one of the first companies to offer consulting services for the development and migrations of software applications to the Windows Phone 7 platform.

About Sieena

Sieena is an IT outsourcing software development firm specializing in Microsoft technologies. Headquartered in Los Angeles, CA, Sieena builds and maintains business-critical Web platforms and is a certified Microsoft Gold Partner. For more information visit http://www.blogger.com/www.sieena.com/nearshore-IT-outsourcing/Pages/Windows-Phone-7-development-for-your-business.aspx or for media inquiries contact Richie Matthews of DIALOGO at richie@dialogo.us.

About Windows Phone 7

Windows Phone 7 is a mobile operating system developed by Microsoft, which offers a new user interface and integrates the operating system with Microsoft Exchange, Microsoft SharePoint, and Microsoft Office. For further insight into the many benefits realized by Windows Phone 7, please visit www.microsoft.com/windowsphone/.