Creating a Silverlight 2 Application by Combining Expression Blend and Visual Studio 2008

Introduction to Silverlight

Silverlight has been in the news since it was announced last year. In fact, Silverlight began as what was known as WPF/E (Windows Presentation Foundation/Everywhere). When Microsoft introduced WPF for the desktop and deployment through Clickonce, it felt that it had to enter the RIA (Rich Internet Applications) market that was dominated by Flash. Because Silverlight is built on WPF and uses XAML as the declarative language for building the pages, however, there are certain differences between using WPF and Silverlight.

Microsoft recommends using Windows Presentation Foundation to build rich immersive applications and experiences that can take full advantage of the Windows platform, including UI, Media, offline communication, OS integration, Office integration, peripheral access, Document support, and more. Silverlight will be used for broad reach interactive media content and browser-based rich interactive and high-performance applications and experiences. By using Silverlight’s support for .NET, high definition video, cost-effective advanced streaming, unparalleled high-resolution interactivity with Deep Zoom technology, and controls, businesses can reach out to new markets across the Web, desktop, and devices.

Tools that You Need to Create Silverlight Apps

Because this article is oriented towards the developer who wants to create rich interactive applications, you will be looking at how to get started with developing for Silverlight. Microsoft has released a set of tools to develop applications. They are:

  • Visual Studio 2008 with Service Pack 1
  • Silverlight 2 Beta 2 SDK
  • Expression Blend 2 July 2008 Preview

Most of you are familiar with Visual Studio to develop .NET-based applications. But, what is Expression Blend and how does it help to create Silverlight applications?

Microsoft Expression Blend is Microsoft’s user interface design tool for creating graphical interfaces for web and desktop applications that blend the features of these two types of applications. Expression Blend is itself written using the .NET Framework 3.0 and Windows Presentation Foundation (WPF). Expression Blend is effectively an interactive, WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight (Blend version 2.0 onwards).

Expression Blend was code-named Sparkle, and originally the product was announced as Microsoft Expression Interactive Designer, before it was renamed Expression Blend in December 2006.

Expression Blend supports the WPF text engine with advanced OpenType typography and ClearType, vector-based 2D widgets, and 3D widgets with hardware acceleration via DirectX. It is completely written using WPF, as opposed to Windows’ older GDI or GDI+ graphics technologies. It is one of the applications in the Microsoft Expression Studio suite.

Those of you who are familiar with Adobe Photoshop to edit your images as well as add effects to existing images will see that Microsoft Expression Blend does the same for WPF. The only difference is that it works with XAML files rather than image files. And, the files are compiled before they can be used. Microsoft thought beyond the paradigm of developing graphics for websites. Its idea was to have a single solution that consists of multiple XAML files. On one side, the developer can use Visual Studio 2008 to create the skeleton page and then write code behind the page. Note that this code doesn’t touch the design interface, so the designer will be able to work on the designer part of the XAML file in Expression Blend. You will see shortly in a demo how this is possible.

Getting Started with Silverlight

Now that you have seen the tools needed to create a Silverlight application, you will see how simple it is to get started creating an application for the Silverlight platform. The steps are outlined below.

  1. Use Visual Studio 2008 SP1 to create a new Silverlight project based on the Silverlight 2 Beta 2 Template. Visual Studio will do the necessary steps to add a single HTML page or a single website to host your Silverlight application. This is because Silverlight is a plug-in that renders in the browser.
  2. Add your necessary XAML files needed for the user interface. This is similar to the forms that you would add to a Windows Form application.
  3. Edit the XAML page using Expression Blend 2 July 2008 preview. Note that Because each page in Silverlight 2 Beta 2 is treated as a user control, only Expression Blend 2 July 2008 preview will be capable of opening these particular XAML files. Any older version of Expression Blend will throw an error message saying that it is unable to open that file type.
  4. Switch to Visual Studio 2008 SP1 to write code behind files for the controls and pages that you created in Step 2.
  5. Build and compile the application.
  6. Host the same in IIS or any web server of your choice. For this demonstration, you will rely on Windows Vista for development and IIS for hosting the application.

What About a Database. Can I Use That?

Because Silverlight applications run in the browser context, they run in a sandbox and cannot access local resources directly. Developers think that Silverlight is similar to ASP.NET that can access servers and databases, but this is not so. Data access is provided through web services such as Windows Communications Foundation (WCF) or ASMX. That means you will have to create a web service to access your favorite database and then use that web service from within Silverlight to access the data or modify existing data. The reason for this is explained below.

Data stored in a database typically resides on a remote server whereas a Silverlight application resides on a client workstation. To retrieve data from a database stored on a remote server, requests must be sent to the server to retrieve the data just as with any other web application.

Due to the security constraints placed upon a Silverlight application, a Silverlight application cannot read files from the client machine unless they are stored in isolated storage. Hence, a Silverlight application is fairly limited in its capability to store data locally; however, simple files can be created for storing simple data and settings. But, files are not reliable for storing simple data as well as settings. Users will want data to be pulled and pushed and databases are the only solutions for storing data.

Silverlight applications can make calls to a server by calling a web service. Calls made to a web service from a Silverlight application can currently transport data by using plain old XML or JSON. Additionally, a web service being called by a Silverlight application must currently reside in the same domain as the Silverlight application. This restriction is imposed as a security precaution and limits the ability for the Silverlight application to make calls to web services; however, it does not limit what a web service being called by Silverlight can do. A web service being called by Silverlight acts as a proxy for the Silverlight application and can make calls to any resource on behalf of the Silverlight application and return the results. For example, a Silverlight application may call a web service that resides in the same domain as the application and that service may, in turn, call another web service outside of the domain or may query a database. This is the standard method available for a Silverlight application to retrieve server resources.

Conclusion: Yes, you can use a database to host the data, but you will have to do the additional work of creating web services to do the plumbing and then call them from within Silverlight.

Working Through the Sample Application

You will walk through an application that will keep track of your expenses. This application will be developed in Silverlight and access a SQL Server 2008 Express Edition database. This will have three screens. The first screen will show you the total amount that you have spent for the current month (because most people are interested in the current month’s expenditure) as well as the top three categories in which you have spent the money. This will be the home page of the application and will load whenever you call this application via an URL in the browser. On this home page, there will be two buttons to navigate to other pages. One will be for entering the amount as well as selecting the category of expense and the other page will show a report for the current month’s expenditure. Because the data will be stored in SQL Server 2008 Express Edition, this can be tweaked to show you the data for any month. This will be left as an exercise for you to test out.

The final screens for the application are outlined below. Note that you will use Expression Blend for this demo and not write any code. After this demo, you will be able to understand the first three steps as outlined in Section 1, “Getting Started with Silverlight.”

Figure 1: The home page of the Expenditure application

Figure 2: The page where you will add a new expenditure

Figure 3: The page where you will view the summary of expenses for the current month

More by Author

Must Read