Silverlight 4: Problem - Design - Solution

Silverlight 4: Problem - Design - Solution

by Nick Lecrenski

A hands-on guide to Microsoft's latest rich application development technology: Silverlight 4

Silverlight 4 is the newest version of the rich Internet application toolkit that provides support for .NET capabilities over the Internet. With this latest release of Silverlight, Microsoft has revolutionized the way that Web applications can be created.


A hands-on guide to Microsoft's latest rich application development technology: Silverlight 4

Silverlight 4 is the newest version of the rich Internet application toolkit that provides support for .NET capabilities over the Internet. With this latest release of Silverlight, Microsoft has revolutionized the way that Web applications can be created. This book uses the popular Problem – Design – Solution strategy to demonstrate how to harness the power and abilities of Silverlight 4 to add value to the overall user experience of a Web site.

Using a Web site created by the author as a reference point, you'll go through the steps of creating a live, fully functional application for the Web using Silverlight 4 and the Silverlight Control Toolkit. Along the way, the book addresses important design considerations, such as the use of Web Services and the SQL Server database.

  • Uses the popular Problem – Design – Solution format show you how to harness the power of the latest version of Silverlight, Microsoft's rich Internet application toolkit
  • Puts the author's own Web site to task as you learn to create rich user interfaces that integrate video, HTML, and social networking components
  • Explains system linking and data flow, end user interface, system architecture based on Silverlight 4 and .NET 4, and more
  • Includes coverage on integrating social networking and Facebook

With this book, you'll quickly get started using the new features of Silverlight 4 to enhance the user experience of a Web site.

Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.

Product Details

Publication date:
Product dimensions:
7.30(w) x 9.20(h) x 1.00(d)

Related Subjects

Read an Excerpt

Silverlight 4

Problem - Design - Solution
By Nick Lecrenski

John Wiley & Sons

Copyright © 2010 John Wiley & Sons, Ltd
All right reserved.

ISBN: 978-0-470-53404-5

Chapter One


An Overview of the FitnessTrackerPlus Application

In the fall of 2008, Microsoft released an update to its new media-centric browser plug-in Silverlight. This update probably wasn't very exciting to end users who may have had Silverlight installed to watch the 2008 summer Olympics, but to developers who make use of Microsoft web technologies, a monumental change had occurred. Silverlight 2.0 finally included the long-awaited support for C#/VB.NET programming directly in the Silverlight world. No longer were developers forced to utilize the plug-in with a JavaScript-based API only. With the addition of C#/VB.NET support, it seemed like Silverlight may have finally made the necessary jump required in order to support line-of-business-style applications. Although a dramatic improvement from its predecessor, Silverlight 2 still left a lot to be desired in terms of line-of-business controls. Luckily, Microsoft has heard developers loud and clear and made several important enhancements in version 3 that specifically addressed line-of-business needs. Although the Silverlight 3 release meant developers had a powerful toolkit at their disposal for creating rich internet applications, some features were still omitted that were absolutely crucial in transitioning line-of-business applications from the desktop to the web. However, with the latest release of Silverlight version 4, these features have finally made it into the runtime, including a new Printing API, RichTextArea, Clipboard API, mouse wheel support, Implicit theming, and right-click event handling to name a few. Features like printing, right-click menus, and clipboard support offer some of the final pieces of the line-of-business missing from the Silverlight puzzle and may, in fact, make this latest release of Silverlight the most exciting yet for developers.

It is the primary intent of this book to introduce you to some of these great new features as well as show you some advanced techniques that you can apply to the development of your own Silverlight-based line-of-business solutions. In this book I will be following the Wrox Problem-Design-Solution style so that each chapter contains a detailed problem statement followed by a design analysis and solution implementation. I will not be discussing detailed API information for Silverlight and the various controls; however, all of this information is available by downloading the official Silverlight 4 documentation from This book will be taking you through the creation of a fully functional Silverlight 4 line-of-business application while touching on several important topics such as scalable design, social networking, SEO, revenue generation, rich user interfaces, and others.

In this chapter, you learn the following:

* How to take a great idea and build a design to make it into an even better web application.

* What pages you will need for the application.

* What the new Silverlight 4 features are that you'll use to build your application.

* How you'll actually build the application through membership, personalization, journaling, and social networking. You also learn how to monetize the site, as well as test and deploy it.

* What software you'll need to download and install and what the basic setup instructions are for the site.

It is an exciting time for Silverlight development, and with the plug-in installed on millions of computers and newly announced support in MySpace, now is a great time to learn how to incorporate the technology into your own solutions.


After a few years of full-time software development, I realized that between sitting in a chair for hours on end, and the not-so-great foods that are consumed during those crunch-time marathon coding sessions, I would probably need to consider some healthy habits to offset what can otherwise be a very sedentary work environment and lifestyle. The first step for me was to join a local gym, and watch what I eat when not on a marathon coding session. After a few weeks of working out I started to wonder, "Am I getting the results I was looking for? Are these foods really good for me? In fact, how can I even measure if I am making any progress while spending all of these hours in the gym?" Perhaps most importantly, the programmer in me decided to ask, "How can I write some software to help me keep track of what I do here?"

Most people would have just gone home, hopped on the Internet, and found some software or a web site that does this very thing. As programmers, however, we can just fire up the IDE and write our own instead. I decided that I wanted to create a new Silverlight-based web application that enables people to keep track of diet, exercise, and measurements. It would also be nice if the site could foster a community of users who share success with others through public facing journals hosted on the site, and integration with social networking sites such as Facebook and MySpace. Because this seemed like it could become a pretty popular site that could generate enough revenue to sustain itself, I also wanted to integrate some revenue streams through some form of pay-per-click advertising and monthly premium memberships for access to enhanced features of the site. At this point, the only thing missing was a name for the site and, of course, the implementation. For the name, I decided on FitnessTrackerPlus. I figured the "Plus" suffix will let users know that they are signing up for a more feature-rich site than traditional ASP.NET sites they may have used in the past. Or at least I will attempt to convince myself of that since I couldn't think of a nice catchy Web 2.0 name like Google or Twitter that works well for a fitness-tracking web site.


In this book, you will be creating a Silverlight 4 web application and will be utilizing the new features included in Silverlight 4 to provide the user with a rich user interface that is more responsive than a traditional ASP.NET web site. While the focus will be on creating an online fitness-tracking system, many of the features and techniques discussed can be applied to other line-of-business applications as well. Like most line-of-business applications, the primary purpose of the site is to allow users to enter data and view reports on that data. You will also be adding a social networking aspect to the site as well. In the end, you should be able to leverage the data entry, charting, site structure, SEO, and social networking components when building your own line-of-business applications in Silverlight.

Determining Requirements for the Site

The first step in the design phase of FitnessTrackerPlus is to get a detailed list of requirements for the site. I briefly touched upon some of the most basic high-level features that will be required by the site, but now it's time to flesh out everything. As with any application, it's best to collect as much detail about requirements as possible before writing a single line of code. Changes will always be easier to make at this stage of the game, as opposed to once you have already started coding a solution. The following sections list the major features that FitnessTrackerPlus will include.


The more popular a site becomes, the more important it is that the new traffic can be handled without causing problems for existing users. In order to facilitate this, a multi-tiered architecture should be used. This allows the site to grow as the site's popularity grows, as well as keeps a clean separation between user interface, business logic, and data access code.

Rich User Interface

Users will log on to the site to quickly enter daily exercise, foods, and measurements. A rich user interface that utilizes Silverlight helps to ensure that the amount of time performing data entry tasks is minimized. The less users have to spend entering data, the more time they will have to view reports, measure progress, and to interact with others. The key to making this process simple and painless is to ensure that the pages are not cluttered with large data entry forms. The data entry for foods, exercises, and measurements should be simple enough so that users can quickly figure out what they need to do in order to enter information. It is also common in web sites now to provide multiple themes for users so that they can select a favorite color scheme or site layout. Your site should provide a similar theme selection feature that also remembers theme preference so it can be restored on the next login.


Once users successfully log into the site, they should be presented with a dashboard that shows basic fitness information for the current day. The dashboard should provide a simple non-cluttered look and give the user quick access to current measurements, nutrition, and exercise summaries, and any site announcements that you want users to be aware of. Site announcements can be a good tool to let users know about upcoming site maintenance or new features, as well as any features that are currently being worked on for future releases. Such announcements enable you to avoid bulk e-mails that could possibly end up being interpreted as spam.

Nutrition Log

The goal of the nutrition log is to provide a simple way for users to enter the foods they eat and view basic summaries of the nutrients that they consumed during the course of the day. Because that is the primary goal, any control or feature that does not directly make this process easier should not be added to the screen. All too often, you'll find what you think will be a useful web site that provides a service you're looking for only to sign up and find out that the developers have crammed in as many features as possible with little regard to the effect on the overall user interface. It should not require a training manual for people to use any part of your site, especially the data entry. It will be difficult to show your users how they are progressing if they don't come back to the site daily to enter foods. The only way they will consistently do so is if the process is quick and easy.

In order to help users track the foods they eat, you should provide a database of foods that the user can search. With millions of foods on the market, it is not practical or realistic to include every food in your database, so you'll also need to provide a mechanism for users to create and manage custom foods, complete with custom nutrition facts for the given food. The user doesn't want to browse an entire food database on the site in order to find a specific food, so you need to provide an assisted search method. Most sites now have some sort of auto-suggest functionality in search boxes that helps guide the user to the correct entry in the database. Your site should provide similar functionality by taking the first few characters typed and suggesting foods that match the search criteria in the food database. In most cases, you want your users to type in a few letters of a food, click the matching item, and move on to the next food they ate.

Exercise Log

The exercise log will be very similar in functionality to the nutrition log. Again, the primary goal is to provide the user with a quick and easy way to enter daily exercises and workout information. The database should contain a list of well-known exercises that users can search. You should add auto-suggest functionality to the search box as you did with the food search. In addition, to make exercise entry easier, you should break down exercises into various muscle groups and provide users with the capability to browse exercises based on those muscle groups. Just as you probably can't populate your database with every known food, you most likely will miss some exercises that people perform as well, so users should be able to create and manage their own custom exercises.

Measurements Log

One of the most important aspects of the site will be that users can keep track of their current measurements. You want to allow for data entry of a few standard measurements such as weight, BMI, waist, and legs. As you did with the exercise and nutrition logs, you will provide a way for users to create custom measurements that they would like to keep track of. Although keeping track of numerical measurements can be an effective way to measure fitness progress, it would also be beneficial to give users a visual representation of that progress. In order to satisfy this requirement, the site should have a mechanism to upload images of the user when they are entering measurements.

Public Journal Page

Once your users have taken the time to update their journal, they may want to share their updates with other users as well as friends and family. Getting positive feedback when working toward any goal can provide powerful motivation. Your site should allow users the option to share information with others. You can do this by providing a public-facing version of the journal similar to other social networking sites such as MySpace and Facebook. What you want to avoid is forcing the user to share a long, convoluted URL that friends and family have no chance of remembering; you need the site to give the user a friendly URL in the form of FitnessTrackerPlus/Journals/username. When users enter that URL in the browser, it should take them directly to the public-facing journal page that matches the username specified. Because some users may not want to share all the information in their journal, you should give them the option of sharing everything or any combination of foods, exercises, measurements, and journal entries. Users should be able to disable sharing of the data or make their journals private again at any time.

Social Networking Integration

Although you are trying to create primarily a data entry application, it would not be wise to ignore the explosion of social networking sites that have been created in the last few years. Most content-based sites have found ways to integrate with popular sites such as MySpace, Facebook, Twitter, and others. Providing this integration further promotes the sharing of information and the ability to gather feedback about the information being shared. Because it's been established already that you are trying to build a new online community right here at FitnessTrackerPlus, you also want to take advantage of what some of the other major social networking sites currently have to offer for integration. In addition to offering your users with the public journal page, you should also provide them with the option to share their fitness information with others on an existing social networking site like MySpace. Now that MySpace offers official support for Silverlight applications, you should be able to create a MySpace application that allows users to share data right from their own MySpace profile page.

Browser History Support

One of the complaints over the last couple of years about Rich Internet Applications, especially AJAX-based solutions, has been the lack of support for basic browser navigation functions. All too often, users would be engaged in a web application that utilized an AJAX library and they would click the Back button on the browser only to be brought all the way back to the home page or login screen. Your application should fully support browser history and navigation features so that at no time will an accidental click of the mouse redirect the user back to a login screen or some other page on the site that is completely unrelated to what they were working on at the time.

Generate Revenue

One issue to consider when starting a site like this is that if it gains in popularity and you want to use a hosting provider that offers technologies such as SQL Server and ASP.NET, you will have to cover the costs associated with that hosting. When starting out, you can most likely get away with one of the many shared hosting providers available online. As the site grows, you may need to look at a dedicated hosting solution. In either case, it would be best if you didn't have to pay for this out of your own pocket. You will need to come up with a way to create revenue to pay for the costs of running and maintaining this site. You can do this by utilizing a pay-per-click advertising service. In addition to the advertisements, you can look at charging a small monthly fee in order for users to have access to the site.


Excerpted from Silverlight 4 by Nick Lecrenski Copyright © 2010 by John Wiley & Sons, Ltd. Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Meet the Author

Nick Lecrenski is the founder and lead developer of, a popular fitness tracking web site developed entirely in Silverlight.

Customer Reviews

Average Review:

Post to your social network


Most Helpful Customer Reviews

See all customer reviews