From Quick Application to Your Site
Reviewing the Quick Applications source code is an easy way to learn how to develop with Windows Live Services. You can also use the code as a template to develop new web sites. The quickest way to build a Windows Live-enabled web site is to download the Quick Application's source code, modify it to meet your needs, and then incorporate it into your own site.
|You just create the glue—connect the Windows Live Services together to create your own new user experience.|
To get started building your own Windows Live-based web site, choose the Quick Application that integrates the Windows Live Services you'd like to use. Then change the look and feel of the site to reflect your own design and add any new pages you need. Perhaps you'll want to weave a few more of the Windows Live Services into your site. Whatever you're building, the Quick Applications are the perfect starting points.
Suppose you're building a site for home theater enthusiasts called Ultimate Home Theater. The front page will show a blog of the latest home theater news and will have a link to a photo gallery. Users should be able to sign up for alerts when new content is posted and the site needs a place for users to buy and sell home theater equipment.
You want to get the site online as quickly as possible without writing custom code to store and retrieve blog posts, show pictures, or keep track of items for sale. That's where Windows Live Services save the day: Windows Live takes care of uploading and hosting the data—you just write the glue code that calls the Windows Live APIs and presents the data.
In this case, start with Contoso Bicycle Club, because it already has several features suitable for Ultimate Home Theater, specifically, photo albums and blog posts. It also supports buying and selling bicycle gear. That's just what you need to start building Ultimate Home Theater.
You start by downloading the Quick Application code and getting the basic site up and running. Then you can customize the site however you like. You might need to add or remove some pages. Perhaps you'll want to integrate more Windows Live Services.
Getting the Code
First, download the Quick Application's code. Go to http://www.codeplex.com/WLQuickApps
and click the Releases tab. All the Quick Applications come in one source code package. Download the package, unzip it, and then open one of the Quick Applications in Visual Studio.
Before you start customizing the application, get the Quick Application up and running on your web server. Each application has prerequisites and installation instructions on its individual CodePlex web page. After you get the unmodified application up and running, you can begin evolving it into your site.
Integrating Windows Live Spaces
The home page of Ultimate Home Theater has a sidebar listing the latest posts to a home theater blog. Windows Live Spaces hosts the blog content and my site just subscribes to an RSS feed to get the content. I'll use my existing Space at http://jason-kelly.spaces.live.com/
. A new HomeTheater category in my Space will contain the content for the blog.
Contoso Bicycle Club has an ASP.NET user control named LatestRidesControl.aspx
. It retrieves blog posts from the Windows Live Spaces RSS feed and displays them on the site. This control is just what I need. I simply moved this user control to the main panel of the page. Then, in web.config
, I changed the application settings to point to the URL for my HomeTheater RSS feed. Now, visitors to the Ultimate Home Theater site can see the latest blog posts from my Space.
For more information on integrating Windows Live Spaces into your site, browse to http://dev.live.com/spaces
Sending Alerts for New Content
With Windows Live Alerts on the site, readers can opt-in to receive alerts whenever new content is posted. If a reader is signed into Windows Live Messenger, an alert will pop up on their screen with a link to the new post. Alerts can also be sent by email or to a mobile device.
To add alerts to your site, start at http://signup.alerts.live.com/
, fill out a web form with information about the site, and provide the RSS feed URL for the content. After activating your account, you'll receive an email with a short block of HTML code to add to your site. The HTML block adds a signup button to the page. Clicking the button brings readers to the Windows Live Alerts signup page for your site.
To add Windows Live Alerts to Ultimate Home Theater, I filled out the registration form and placed the HTML block on the site's home page. When readers opt-in to alerts from the site and are signed into Windows Live Messenger, they receive alerts like the one shown in Figure 5
Adding a Photo Album
|Figure 5. Windows Live Alerts: To notify readers of new content, add Windows Live Alerts to your site. Users who opt-in receive real-time alerts in Windows Live Messenger or email.|
Contoso Bicycle Club has a photo slide show feature for each ride, but for the home theater site I want a separate page to host the photos. To do this, I started with Contoso's Ride Report page and removed several elements I didn't want on the page. Then I changed the main menu to include a Photos link that shows the slide show.
The page uses the SlideShow control from the ASP.NET AJAX Control Toolkit to display an ongoing photo slide show. The control consumes an RSS feed from my photo album in Windows Live Spaces and displays each photo in turn.
The code below shows the ASPX code used to create the slide show, while Listing 1
shows the GetSlides()
method that parses the photos RSS feed and returns the slides to the slide show control.
<asp:Image ID="Slides" runat="server" Height="480"
Windows Live Spaces takes care of hosting the photos, saving me from writing code to handle uploading and storing the images. More information is available at http://dev.live.com/spaces/photos
Including Windows Live Expo
To complete Ultimate Home Theater, I'll add a marketplace for users to buy and sell home theater equipment. Windows Live Expo is a free online classified ad service. Live Expo exposes all of its functionality to developers through a web service API. Contoso Bicycle Club already uses this service to allow members to buy and sell bicycle gear. I just need to change the site to search for home theater equipment instead of bicycles.
The Contoso Bicycle Club Quick Application implements a useful wrapper for the Live Expo web service. I can use the ExpoService wrapper for Ultimate Home Theater by just changing a few parameters.
Each caller to the Windows Live Expo API must send a unique string called an application key. To request a free Expo application key
, you'll need to sign in with your Windows Live ID. I added my key to the web.config
file of the application. Then I changed the code in Classifieds.aspx
so it would search for the specified category and keywords:
// Get your appKey from expo.live.com
ExpoService expoService =
new ExpoService(appKey, "1");
XmlDocument xmlDocument =
expoService.GetListings("66", "","home theater");
For information about the API keys and how to call the Windows Live Expo APIs, view http://dev.live.com/expo
The Finishing Touches
To finish up Ultimate Home Theater, I customized the layout to create a new look and feel for the site. Modifying the CSS, changing the graphics, and editing the master pages are the final steps of turning a Quick App into a custom site. You can see the results at http://www.jasonkelly.net/HomeTheater
Overall, you'll find Quick Applications to be rich sample applications that can help you integrate Windows Live Services into your web site. More than just sample code, Quick Applications are fully functional applications that you can customize and extend to build your own site much more quickly than if you started from scratch.
The latest information on the Windows Live Services is at http://dev.live.com