Silverlight from the Client to the Cloud: Part 1

This post is part 1 in one of several series.  The series gives you a glimpse into some of the experiences and capabilities available with Silverlight and gives pointers on how to get started with them.

From March 30th to April 22nd this year, the Developer & Platform Evangelism Team at Microsoft Canada delivered a combination of all-day From Client to the the Cloud tour  and evening Community Connection Series events in 19+ cities across Canada as part of EnergizeIT 2010.

The EnergizeIT events give an idea of what’s possible.  To compliment those events, the TechDays events by Microsoft Canada coming up again this year in the Autumn season, give attendees the opportunity to learn more about how they can use Microsoft products and technologies.  I’ll be speaking there again this year on topics that may include Silverlight, Azure, OData and Windows Phone 7. 

At each of the recent EnergizeIT events, a 2.5 hour demo showed the tip of the iceberg in terms of what’s possible with some of the latest Microsoft tools and technologies from the viewpoint of developers and IT professionals.  They covered technologies and products included .NET 4.0, Visual Studio 2010 (including Lab Manager), Hyper-V, Windows Mobile, Office 2010, SharePoint 2010, PowerShell, System Center, the Windows Azure Platform and Silverlight.

The demo covered the user, developer and IT pro experience for a new car insurance business.  It showed how a consumer could use software on a Windows Mobile device to capture critical information when a collision occurs as well as how they can review and connect with the insurance company back at home.  It continued to show the construction of the application on the backend, how the back office workflow can operate, and how the application can be deployed to the cloud to take advantage of various benefits.

About two months before EnergizeIT, the DPE team contacted me to produce the Silverlight portion of the demo.  I had the pleasure of working closely with Christian Beauclair and Rick Claus to integrate the Silverlight application into the demo experience.

The user experience starts when they use their Windows Mobile device to capture collision incident information and submit a claim to the insurance company which is stored it in a SQL Server database via WCF Web Services and ADO.NET Entity Framework.  You can read about the mobile application portion in Mark Artega’s blog post

The Silverlight experience begins when the user gets home and follows up with the insurance company on their home computer.

First the user logs into the application…

20100514 login 

To reflect the ‘electric energy’ style of the the Energize ‘brand’ and the logo, the UI reveals areas using a specific ‘energy bar’ animation.  This grows from a spot…

20100514 reveal 1

…to the full width of the element to be revealed…

20100514 reveal 2

… and ‘materializes’ the element as the energy bar sweeps down over the area…

20100514 reveal 3

… after which the energy bar then shrinks until it disappears.  We joked about putting a ‘vudgzzz’ sound with this, but the demo didn’t have sound up. 

20100514 reveal 4

The Silverlight application uses ADO.NET Data Services in Silverlight 3 (now WCF Data Service in Silverlight 4 including OData support), to pull down a series of connected entities including a customer record, policies, claims, related employees, pictures, etc.  You can see how the sections of this application UI could lend themselves to display on Windows Phone 7.  The policy type icons are XAML resources bulit into User Controls, built from vectors allowing for a great scaling experience.  Unfortunately the release of Silverlight 4 was too close to the tour launch for us to use Silverlight 4 features like global implied styling.

20100514 home

When the user select the Claim activity, an animation storyboard acts on the UI to fade it and tilt it away using the Perspective 3D capabilities in Silverlight 3…

20100514 fade back

… and the claim details are revealed.  This includes binary image data transfered from the backend database.  The geospatial data in the claim is used with the Bing Maps Silverlight control to show the location of the collision on a map (with full zoom and pan support aloing with road and aerial views).

20100514 claim

It would then be possible to store updated information back to the SQL Server database via the WCF Data Service wrapping around the ADO.NET Entity framework model wrapping the database.

The asynchronous nature of all network calling libraries in Silverlight ensures that the user interface does not freeze up when the application is talking to services in the cloud.

The demo goes on to demonstrate a chat session between the user and an insurance adjuster which results in an appointment being placed in the users pending activities list.

This demo application scratches the surface of what’s possible.  Features like mic/webcam capture, WCF RIA Services, Templating, Deep Zoom, DRM, Streaming A/V Support, Printing, Out-of-browser execution, etc. really empower developers to take Silverlight to the max.

In upcoming series posts, I’ll give you pointers on the Silverlight experiences and capabilities of this application and the technologies it uses.

Advertisement

Getting Started with PHP on Windows Azure

This post will get you started with PHP development in Visual Studio for deployment to Windows Azure.

Using the FastCGI capabilities of IIS you can run PHP application on IIS and Windows Azure (in your local Development Fabric on in the Windows Azure cloud).

So, here’s how to create a simple PHP application in Visual Studio 2010 on Windows 7.

If you want to see this in video, check out my screencast interview with Dot Net Rocks TV on Azure and go to point 48:40.

  • Download the latest Windows ZIP files from http://windows.php.net/download/ (currently 5.3.2).  You should get for the VC9 x86 Non Thread Safe version.  The FastCGI system on IIS makes the use thread-safe.  Unzip the files into a folder somewhere on your system and rename the folder "PHP".
  • Ensure you have everything for IIS and CGI (i.e. FastCGI) is activated on your system for local development. 
  • Install the latest Azure SDK (checking the system requirements) – currently 1.1 (Feb 2010).
  • Start Visual Studio 2010 (which must be in run as an Administrator for the current version of the SDK) and create a new VS Cloud Project…

azphp1

  • Add the CGI Web Role…

azphp2

  • Open an Explorer window and locate your downloaded and extracted PHP folder.  Do a Copy on the PHP folder.
  • Open the folder for the web project…

azphp3

  • Paste the PHP folder (and therefore subfolders) into the web project folder and then select the Show All Files option in Solution Explorer so you can see the pasted PHP folder…

azphp4

 

  • Use the "Include in Project" option on the php folder to include it in project files, and therefore in the files deployed to Azure.

azphp5

  • Edit the Web.roleconfig file, (putting a new <application/> tag in place like this which tells IIS (locally or in the cloud) about the FastCGI interpreter for PHP…

azphp6

  • Edit Handers section of the Web.config file to include this new <add/> tag which tells IIS to use the PHP interpreter for files ending with .PHP…

 azphp7

  • Also add the new <defaultDocument/> tag above to set up "index.php" as the default document for the web application.
  • Finally add a basic index.php file using Add New Item on the web project; since there is no .PHP item – use a .TXT item (in the General category) and give the new file a .PHP extension…

azphp8

  • Enter this basic PHP code:

<? phpinfo(); ?>

  • Start up the application and you should see something like the following:

azphp9

You can now deploy this (or a real application) to Azure using the Publish function on the Cloud project as usual.

Check out this MSDN page for general help on using FastCGI interpreters with Azure.

Enjoy! 🙂

Microsoft and Open Source Communities are sponsoring the Make Web Not War conference on May 27th 2010, showcasing the latest cross-platform techniques and technologies, including presentations, panels, workshops, a codefest, the FTW coding competition and a party!  Open Data, HTML 5, PHP, JQuery, Mobile, SEO and the Cloud, are amongst the topics being covered.  Speakers and panelists will include myself, Microsoft Canada team members and many open source experts.

Make Web Not War

Exploring OData with Silverlight

Silverlight 4 includes native support for accesing OData-compatible data service, but it can be hard to use the entities exposed by such services without being able to explore the data and confirm the range and semantics of the data.

Well, you can use the OData URL query syntax to dive through the XML in your browser (yum!), or you could create an application to more visually show the data. 

Both of those are less than optimal for initial exploration, and why bother, when there’s a tool that lets you start exploring.

The OData Explorer sample application provides a good way to explore a specific OData-compatible service and also provides a list of some of the public compatible services.

The tool can be found here: http://www.silverlight.net/content/samples/odataexplorer/

As an example, one can use it to explore the Netflix service at http://odata.netflix.com/Catalog/ and try out a query like this:

/Titles?$filter=ReleaseYear%20eq%202009&$orderby=AverageRating%20asc&$select=AverageRating,ReleaseYear,Rating,Name

This provides the lowest rated NetFlix titles in 2009… hmm… interesting results…

Give it a go 🙂

silveright od x 1