| Downloads |
|---|
| 125467 Haidar WP7 code.zip |
Attending the Microsoft MIX10 conference in Las Vegas in March 2010 gave me a deeper insight on what Microsoft has been cooking up in recent months for Windows Phone 7 (WP7) Series. The theme of the conference this year was the MIXture between the luxurious user experience provided by Windows Phone 7 series and the power of Silverlight as WP7's major application development platform. XNA is also supported on WP7 for game development; however this article will cover only development on WP7 from the application point of view.
Throughout this article you will be introduced to preparing an environment for WP7 application development with Silverlight, a summary of features and functionality available in the WP7 application platform, and finally a sample "Hello World" application using both WP7 and Silverlight.
Preparing the Development Environment
Before you get started developing with WP7 and Silverlight, you need to prepare your environment and make sure you have all the components needed to compile, build, and deploy your application. To start with, you need to visit the Silverlight for Windows Phone home page. The page gives an overview of the new technology of developing applications using Silverlight and WP7. In addition, a list of important links to get you started is provided toward the end of the page.
Developing Silverlight or XNA applications on WP7 requires installing the Windows Phone Developer tools CTP. These tools are compatible only with Visual Studio 2010 and can be downloaded here. The tools include the following:
• Visual Studio 2010 Express for Windows Phone
• Windows Phone Emulator
• Silverlight for Windows Phone
• XNA Game Studio 4.0 CTP
The tools install the all the components you'll need to develop and deploy your WP7 and Silverlight application. Thus, even if Visual Studio 2010 isn't on the machine, the developer can still use the light version of Visual Studio 2010 Express for Windows Phone to create either Silverlight or XNA applications. If Visual Studio 2010 is installed on the machine, the proper project templates get installed so that you can use your own copy of Visual Studio 2010 to develop Silverlight applications for WP7.
As of the time of this writing, no mobile hardware has been released with WP7 that you can use to test your applications. However, the emulator provided by the tools is enough to deploy the applications and test their functionality, which will render the same as in deploying and rendering over a real mobile device running WP7 running.
The version of the Silverlight included in the tools is kind of a mixture of Silverlight 3.0 and some added features of Silverlight 4.0. When you create a new WP7 for Silverlight application, you'll notice that the toolbox (shown in Figure 1) is specialized for Silverlight applications running on WP7.
No discussion of Silverlight or XAML applications would be complete without at least a mention of Microsoft Expression Blend. Several flavors of the Blend software are available; to use Blend in designing sophisticated UIs for WP7 applications you need to install the following: Expression Blend 4 RC, Microsoft Expression Blend Add-in Preview for Windows Phone, and Microsoft Expression Blend Software Development Kit Preview 2 for Windows Phone.
Helpful Resources for Getting Started
Additional resources you might find helpful are the Application Platform Overview for Windows Phone and UI guidelines for developing applications on WP7. Another important resource for developers to look at is the WP7 developer training kit. It contains a set of labs that you can follow in a step-by-step manner to develop the simple applications provided as a way to practice developing applications on WP7 using both Silverlight and XNA. Also check out the Tim Heuer videos "Getting Started with Silverlight for Windows Phone", "Using the ApplicationBar for Windows Phone", "Windows Phone Navigation", "Windows Phone Application Splash Screen", and the MSDN Windows Phone Development documentation.
After you've installed all the needed tools to develop Silverlight applications for WP7 and read all the documentation and available resources on the Silverlight application platform for WP7, you're ready to review together major key points in the structure of a Silverlight application for WP7 and key WP7 hardware and software APIs available for a Silverlight developer.a
WP7 Application Platform
The WP7 application platform is built upon existing, widely used Microsoft technologies such as Silverlight, XNA, and .NET Compact Framework. Application development in WP7 is based on both Silverlight and XNA. Typically Silverlight is used for developing business-oriented applications and XNA is used for game development. Here's a rundown of the main features and functionality of WP7.
Visual Studio 2010 support. The WP7 application platform provides Visual Studio 2010 Express for Windows Phone along with project templates, which make developing a Silverlight or XNA application for WP7 as simple as developing any application for the web or desktop. Even if you have Visual Studio 2010, you can still develop WP7 applications because the same project templates that were installed with the Express edition are also installed on Visual Studio 2010. (At present, only C# templates are provided.)
APIs. Currently only C# APIs are provided for both Silverlight and XNA to access the Windows Phone services and internals. These APIs facilitate accessing the powerful features of WP7 (e.g., tasks, push notifications).
A managed Location Service (LS) API is accessible to Silverlight applications. The LS API, using the WP7 hardware features such as GPS, Wi-Fi, and others to provide an application with the geographical positioning of the user's mobile in terms of longitude and latitude coordinates.
Silverlight 3.0 support. The Silverlight version used by WP7 is Silverlight 3.0 with few additional features to fit the WP7 environment. To learn more about the supported features of Silverlight on WP7, Silverlight available controls for WP7, and much more on Silverlight on WP7, check out the Silverlight Application Development page.
Accelerometer support. The WP7 platform supports the use of an accelerometer, or a 3-D motion sensor that can be used to enable features such as automatic screen rotation, tilt-to-scroll, and gaming. For instance, the accelerometer emits information to a Silverlight application that the WP7 has been flopped from its portrait position to the landscape position. To learn more about this topic, visit the Accelerometer Overview for Windows Phone page.
Controls. The WP7 screen area contains two important controls:
• System Tray: a small rectangular area displayed at the top of the WP7 screen that is used by the device to display system-level notifications in a compact and non-distracting manner. Applications, while running, can still receive such notifications generated by the device itself.
• Application Bar: An Application Bar control UI is provided by WP7 for applications to implement navigation menus with items and buttons. The application bar usually appears at the bottom of a Silverlight application and can contain either menu items or buttons and sometimes both. Figure 2 shows an application bar with three buttons.
Cloud-supported push notification. WP7 has a Push Notification Service (PNS) that allows the use of cloud services by providing a communications communication with the device to push notifications. Such a service is present so that applications running on a WP7 mobile device need not keep on pulling the server for updates. Instead, updates will be pushed to the application whenever they're ready on the server. The notifications sent by the cloud service can target the device itself or an application on the device. Based on the type of the push notification, the PNS routes the notification to either application or device itself.
The push notification types are
• Raw notification: An application receives a raw notification from the PNS pushed by a Cloud service only when the application is running in the foreground. If not, the notification is dropped.
• Tile notification: A tile notification is always received by the device from the PNS regardless of whether or not the application is running in the foreground. If the application is running in the foreground, the tile notification is passed to the application. For an application to bind to tile notification it needs to execute the BindToShellEntryPoint() method on the channel created. Every application installed on the WP7 mobile has its own Tile on the device's home screen.
• Toast Notification: A toast notification is received by the device when the application is not running in the foreground. However, if the application is running in the foreground, then the notification is routed to the application instead. For an application to bind to toast notification it needs to execute the BindToShellNotification() method on the channel created. A toast notification is displayed by the device overlaid on top of the application at the top of the screen.
The PNS communication life-cycle follows these steps:
1. The application establishes and opens a communication channel. Each channel is a URI that cloud services use to push notifications.
2. Once a channel is established and opened, the URI is recorded and used by the cloud service.
3. When the cloud service sends a push notification, the notification is received by PNS.
4. Based on the type of the notification or the status of a specific application, the notification is routed by the PNS.
The Push Notification framework classes are located in the Microsoft.Phone.Notification assembly.
SIP on-screen keyboard. WP7 provides an on-screen keyboard known as the Soft Input Panel (SIP). To start with, whenever the user taps inside a TextBox, the SIP pops up, as shown in Figure 3. You can see the WP7 built-in QWERTY on-screen keyboard that is utilized by Silverlight applications. Based on the InputScope property of a TextBox, a specific SIP is displayed. The InputScope property is of type InputScopeNameValue enumeration. The enumeration contains a list of values to control the SIP. For instance, if a TextBox expects a numeric value to be entered, then the InputScope can be set to "Number". Figure 4 shows the effect of "Number" value on the SIP.
Silverlight Application Structure on WP7
The structure of a Silverlight application running on WP7 resembles that of a Silverlight navigation application running over the web. An application is represented by the Application object, which contains a property of type RootVisual that's set to a PhoneApplicationFrame class. That is, the content area of a Silverlight application running on top of WP7 consists of a single top-container, the frame that manages the pages to be displayed, and the navigation between those pages. Only a single PhoneApplicationPage at a time is displayed by the frame, which makes the need for navigation menus like the Application Bar inevitable.
The classes governing the Frame, Pages, and other components of the navigation system are located in the Microsoft.Phone.Controls.Navigation framework. In addition, a Silverlight application running on WP7 has two modes of display: Landscape or Portrait. As an application developer, you decide on the orientation by setting the SupportedOrientations property of a PhoneApplicationPage, of type SupportedPageOrientation enumeration. The enumeration has three valid values: Portrait, Landscape, and PortraitOrLandscape.
A WP7 application default theme resource is provided inside the App.xaml file of any Silverlight application. The Style elements included as part of the default theme are used by the application to configure the font family, font size, foreground colors, and so on. An application can utilize those resources, add to them, and even edit some of them based on the need and design.
Like Silverlight web applications, WP7 Silverlight applications can use Isolated Storage to provide a light-cache for an application.
A managed API is provided to access the WP7 built-in functionality. For instance, a Silverlight application might include a functionality to send a Short Message Service (SMS) message. Instead of developing the UI/functionality to do so, the application can rely on the device's built-in SMS feature by using the SMSComposeTask class that's part of the Microsoft.Phone.Tasks framework. Running tasks using the WP7 CTP Emulator is still unavailable, and a COM exception is thrown.
The "Hello World" Application
To demonstrate how easy developing a Silverlight for WP7 application is, I'll walk you through developing a very simple "Echo application" that consists of two parts:
• Echo application: This is a WP7 Silverlight application that contains a simple interface to allow the user to enter some text that will be sent to a Windows Communication Foundation (WCF) service. The service echoes back the text to the Silverlight application, which in turn will display the echoed text.
• Echo service: This is a WCF service containing a single method called EchoMethod() that takes as input a single String parameter. The method will add some "server-identification" text and return back the text to the caller.
At the time of this writing, Visual Studio 2010 doesn't allow you to add a service reference to a Silverlight application developed for WP7. The workaround is to:
1. Create a Visual Studio Empty solution inside Visual Studio 2010.
2. Add a Windows Phone Application to the solution.
3. Add a WCF Service Application to the solution.
4. Open the Windows Phone Application just created inside Microsoft Visual Studio 2010 Express for Windows Phone, right-click the application, click Add a Service Reference, and select the service created in the previous step.
Figure 5 shows how to create a new Silverlight application.
Once an application is created, locate the App.xaml and notice this section:
< --RootFrame points to and loads the first page of your application-->
This XAML section is initializing the RootVisual of the application by creating a new instance of the PhoneApplicationFrame and setting its Source property to a PhoneApplicationPage called "MainPage.xaml". Notice in the "MainPage.xaml" page two main Grids: TitleGrid and ContentGrid. The TitleGrid is used to display the application name and page title, as shown in Figure 6a below. Figure 6b (below 6a) shows the XAML code for the page.
< --TitleGrid is the name of the application and page title-->
The "ContentGrid" is the section used by developers to include content on a page. For the sake of this application, I've added the code in Figure 7 for the ContentGrid. When rendered, this code would display something similar to Figure 8.
The user enters some text by tapping or clicking on the TextBox. When the TextBox is clicked, the SIP pops up, allowing the user to enter the text using a simple-to-use QWERTY on-screen keyboard as shown in Figure 9.
As in a typical Silverlight application, when you add a reference to a service, Visual Studio generates a proxy class that the application can use to contact the service method. To connect the application to the Echo Service created previously, add an event handler for the Click event of the "Echo Text" button and include the following code:
private void Button_Click(object sender, RoutedEventArgs e)
\\{
EchoApplication.EchoService.Service1Client proxy = new EchoApplication.EchoService.Service1Client();
proxy.EchoMethodCompleted += new EventHandler(proxy_EchoMethodCompleted);
proxy.EchoMethodAsync(this.txtTextToEcho.Text);
\\}
The code is easy to comprehend:
1. An instance of the proxy class is created.
2. The code hooks into the EchoMethodCompleted event so that when the response comes back from the server, a handler will be ready to process the response. In this case, the event handler that will process the response is the proxy_EchoMethodCompleted method.
3. A call to the service method EchoMethod is issued asynchronously, supplying as input the text that the user has typed on the screen.
When the response is sent back from the service, the proxy_EchoMethodCompleted event handler is executed:
void proxy_EchoMethodCompleted(object sender, EchoApplication.EchoService.EchoMethodCompletedEventArgs e)
\\{
if (e.Error == null)
\\{ this.lblEcho.Text = e.Result; \\}
else
\\{ this.lblEcho.Text = e.Error.InnerException.Message; \\}
\\}
If an error is returned, it is displayed in a TextBlock on screen; otherwise, the actual valid response is displayed. Figure 10 shows a successful call to the Echo Service from a Silverlight application running on top of WP7.
Only the Beginning
What I've provided here is only an introduction to the nearly brand-new area of Silverlight development for Windows Phone 7 Series. The technology still has a long way to go, but with the support and attention being given it by Microsoft and the developer community, it won't be long before WP7 matures into a solid framework that will be used to produce better user experiences in Silverlight and XNA technologies.
Bilal Haidar ([email protected]) is a Microsoft MVP in ASP.NET. He is an MCP, MCTS, MCPD, MCT, and Telerik MVP. He is a lead software developer at CCC, a multinational construction company based in Athens, Greece.
