MOSS 2007 supports Live Earth – Conservation International’s Public Web Sites – How We Did It (Part 2 of 2)
Continuing from part 1 of the “How We Did It” blog series about how Conservation International's web sites were migrated to MOSS 2007 in support of the Live Earth 24-hour, 7-continent event that occurred in early July, this blog entry focuses on the design and development of a Microsoft Silverlight based carbon calculator, developed by Applied Information Sciences (AIS), a Microsoft Gold Certified Partner.
<Lawrence />
Overview
A carbon calculator is a program that helps a user calculate his or her total carbon dioxide emissions for a year. The calculator takes into account the user's home energy, automobile mileage and travel habits, airline travel, and diet. Using scientifically proven algorithms and government provided data, the program assigns averages, weights, and multipliers to each value, mixes in some lookup data, and comes up with the total carbon dioxide emissions. This resulting number is then used to calculate a suggested donation, which would be contributed towards carbon offset projects (such as reforestation among others) that help to balance the carbon emissions with carbon intake. With all the recent attention focused on climate change, carbon calculators have increased in popularity and have started to appear all over the web.
Conservation International (CI) was in the process of migrating its main web site and “micro sites” with Microsoft's assistance to the SharePoint platform with a target production date of July 7, 2007 to coincide with Live Earth event. The previous version of the calculator had been built using HTML with JavaScript and didn't meet CI's needs in terms of user experience, was outdated compared to the numerous other carbon calculators on the web, and wouldn't match the look and feel of the new web sites. Microsoft brought in AIS to upgrade the calculator to Silverlight and implement it as an application hosted and driven by SharePoint. The final Silverlight based calculator (pictured below) consumes JSON objects, serves up images and videos, tracks usage through HitBox, and provides Virtual Earth visualizations of carbon offset projects in Madagascar. Built on the May 2007 Alpha preview of Silverlight 1.1 (the "MIX bits"), the carbon calculator was one of the very first Silverlight managed code applications to go into production.
This blog entry covers the following topics:
Vision and Scope
The new calculator had just a few hard requirements, with the primary one being to simply implement a compelling user experience that makes use of the algorithms of the existing version. The project team quickly agreed that video and Virtual Earth would be in play to provide an engaging user experience. Separately, the focus on hosting the application on SharePoint with the rest of the web site made using SharePoint lists for configuration and updating of the calculator an easy decision.
CI also wanted to incorporate many of the media assets from its current web site. CI believed that by using Virtual Earth, an enhanced spatial relationship and emotional connection could be formed between the people donating money and the target for those funds. Virtual Earth would be the vehicle to navigate information, videos, and images regarding the carbon offset projects. Over time, CI will convert more of its videos to Silverlight and incorporate them into the calculator, so keeping that aspect data-driven was a must. Lastly, CI needed to update data such as emissions for states and automobiles as well as various images on a regular basis, so SharePoint lists were chosen as the data and media store for the application.
AIS originally started developing the application in Silverlight 1.0, but as the 1.1 Alpha version was released at MIX 07 in May and the requirements for the application grew, the decision to move to Silverlight 1.1 Alpha was made to provide more flexibility during development. This added a tremendous amount of productivity to the development process, not to mention all the nice benefits of compiled code. Silverlight 1.1 Alpha works seamlessly with JavaScript and JSON objects, so integration with Virtual Earth, HitBox, and web services was very straightforward. The total development time was two months with two developers, including the initial work using Silverlight 1.0 as well as the video editing and conversion.
SharePoint Integration
SharePoint had already been chosen as the web content management platform to host CI’s new web sites, so it was a natural choice to hold images, videos, and all the data to drive the application. Some video files were fairly large (over 100 MB), but SharePoint handled them without complaint. The legacy application was decomposed to determine what lists would be needed to drive the application, and as the UI was designed, additional lists were added to store media elements. SharePoint was used out-of-the-box, and all lists (pictured below) were created using SharePoint's defaults. Images were kept in an image library, and videos were kept in a document library. Data was initially loaded manually through the SharePoint browser based UI and then automatically through scripts. AIS implemented the lists as features using the SharePoint Solution Generator tool in the Visual Studio Extensions for Windows SharePoint Services 3.0. The final push to production utilized SharePoint's content deployment feature to copy lists and data.
In addition to storing data and multimedia files, SharePoint would also provide services to retrieve list data and host the application. There are two methods to retrieve data: the first is to use SharePoint's class library; the second is to use SharePoint web services API. Since the carbon calculator and both of CI’s new web sites were developed in parallel, there was a desire to ensure that the calculator could function regardless of how it would ultimately be deployed on the web sites. Therefore, using the SharePoint web services to retrieve data would give us the flexibility needed for any deployment scenario. The SharePoint web services are documented at the MSDN Dev Center. For hosting the application, we chose the simplest method, which was to use the Page Viewer web part provided by SharePoint. To add the Silverlight carbon calculator, we created a new web part page in SharePoint, added the Page Viewer web part, and configured it to point at the Calculator web page.
Web Services Consumed by Silverlight
We decided to create a custom web service to marshal data from SharePoint to the Silverlight application. This provided many benefits for us including:
- Ability to cache results -- Since most of what we were doing was retrieving data, this was a great place to use caching.
- Natural place to transform and trim data -- Data from a SharePoint web service can contain more than we needed, and the names of attributes aren't always intuitive. We cleaned up the result sets here before passing them to Silverlight.
- Absolute control over web service contract that Silverlight would consume -- We could specify exactly what the Silverlight application would get and how it would get it. If we access SharePoint directly, there may be unintended results.
- A natural decoupling of Silvelight app and SharePoint -- Any list mappings, permissions, or other integration points could be contained in a single place.
- Ability to write tests against the web service separately from the Silverlight application -- We could write Visual Studio unit tests against the web service before accessing them through Silverlight.
- Avoided the cross domain limitation -- Now, it doesn't matter where the lists are relative to the application since the web service will be accessing SharePoint and not Silverlight. Similar to AJAX, Silverlight is limited to accessing only web services that are on the same full domain (includes every part of the domain and port) as the page that hosts the Silverlight control.
- Control over authentication to the SharePoint web services -- One point of authentication that's not calling party dependant.
Visual Studio 2008 (VS 2008) Beta fully supports developing web services to be consumed by Silverlight. We used the IDE to create the web service project and kept the default web.config. Adding the ScriptService attribute to the web service class was all that was needed to create JSON compliant objects that are fully consumable by Silverlight.
Most of the development of the web service was straightforward, and we rarely ran into any problems with the one real exception being when we used decimals and enumerations. We had a problem de-serializing decimals and enums on the Silverlight side, but since this was Alpha, we expected a few bugs like that. We created simple container classes using strings, ints, and doubles and filled them up with calls to the SharePoint web services. An example of this data structure is depicted below:
We created some base classes that "list getter" classes inherited from so that the only code we had to write for each list was transforming it from the result to the class object. The partial class diagram below provides a depiction of the class hierarchy that was implemented.
In addition to creating a pattern for retrieving and transforming SharePoint results, we created a single function that the all the web methods used for retrieving and caching results and error handling logic. We also took advantage of VS 2008's new language features such as LINQ and initialization functions. An example of how LINQ was leveraged is depicted below:
LINQ was an especially enjoyable part of the project, as it made quick work out of aggregating and slicing up the data returned from SharePoint. What would have taken several nested loops was easy to perform in a single statement.
Adding Virtual Earth
We wanted to create a connection from the dollars given to a location in the world and the projects located there by using Virtual earth to drive content about each different project. Virtual Earth is used to display a map of Madagascar, over which we put Silverlight markers and content. Silverlight itself doesn't currently pass any clicks through to the underlying web page, so all interaction had to be performed within Silverlight rather than Virtual Earth. That required us to do some interesting math to map Silverlight canvas coordinates to Virtual Earth lat/long while still allowing the map to be moved to different points of interest.
The core functionality of this application is to calculate carbon offsets with rich user experience including multimedia displays. Silverlight, like other .NET projects, allows us to reference other projects. A CalculatorBusiness project was added to the solution to perform calculations, interface with web services, and provide lookup data.
In order to create the mashup of Virtual Earth and Silverlight, we needed to do the following:
- Stack DIV tags so that VE is below Silverlight:
- Make the Silverlight plugin transparent, and all the canvases above the Silverlight must be transparent:
- Integrate Silverlight and JavaScript. Class, events, and methods can be marked as Scriptable and then called by JavaScript.
- Register the Scriptable class with the application using:
WebApplication.Current.RegisterScriptableObject("MadagascarExplorer", this); - Hook up events in JavaScript:
Silverlight Client UI Pattern
Silverlight 1.1 Alpha does not come with controls, windows, or other higher-level constructs that would be familiar to WPF developers. Some of those will be incorporated before the final RTW. In the mean time, that left us with some work to do to establish reusable UX patterns on the client. Basically, there are text and geometry and there are click events. One thing the 1.1 Alpha does have is a control model to encapsulate all of that, so we built extensively on that.
In addition to hand-coding checkboxes, drop-down listboxes, and buttons, we had to come up with a pattern to handle the overall screen-to-screen navigation. To implement "windows," we used the usercontrol-as-screen pattern that Pete Brown developed in VB5/6 and presented way back in 1998/1999. It's a pretty simple pattern that involves creating each usercontrol as its own "screen," hosting them all on one surface, and showing/hiding as needed. In the Silverlight implementation, we have usercontrols, each with a root canvas, nested within other hosting canvases. Each control has its own associated XAML file, which it loaded in its constructor, and a code-behind. Breaking up into separate XAML files worked especially well for developing the UX in Expression Blend, as the numerous popups, windows, and information areas got pretty crowded when put into a single XAML file.
To extend this concept for Silverlight, the Show() and Hide() methods of the screen base class looked in the XAML for known named animations. If those animations existed, they were used to animate in and animate out the screen. After testing the performance and reliability of several types of animations in the Alpha, most screens ended up with relatively simple fade and slide shows, and simple hiding for the fade out. The subsequent Alpha Refresh of Silverlight 1.1 improves animation performance, so if we were to do this over again, we would probably provide richer animations.
The main Silverlight page, in the end, was extremely simple. All it did was load up a main screen, which in turn loaded up the introduction user control-screen. This pattern does tend to give a more traditional screen-based UX, but it was appropriate and worked well in this case, and allowed us to complete our work in time for the 7/7/07 Live Earth launch date.
Summary
The rapid and successful implementation of the Silverlight based carbon calculator is a testament to the power and flexibility of the Silverlight platform in building compelling Rich Internet Applications (RIAs). Visitors to the Biodiversity Hotspots web site can see firsthand how Silverlight delivers a compelling user experience. CI and AIS plan on enhancing and extending the capabilities of the carbon calculator as newer versions of Silverlight are released!
The Conservation International Team at Applied Information Sciences
- Pete Brown – Project Manager/Technical Lead – Application UI Design
- Steven Suing – Sr. Consultant/Lead Developer – SharePoint Integration and Business Logic Implementation
The Conservation International Team at Microsoft
To stay up to date with Microsoft's development platform advancements and applications in the public sector, subscribe to the Public Sector Developer and Platform Evangelism Team Blog.
