How to Enable Silverlight

This how-to provides instructions to illustrate how you can develop applications that leverage Silverlight 2.0. Specifically, this example displays a product detail page and allows your customer to add a product item to the cart. The coding model for building Silverlight applications is identical to the coding model you are already familiar with when building apps directly against the Microsoft Multi-Channel Commerce Foundation.

Note This sample code is provided to illustrate a concept and should not be used in applications or Web sites, as it may not illustrate the safest coding practices. Microsoft assumes no liability for incidental or consequential damages should the sample code be used for purposes other than as intended.

Hardware and Software Assumptions

You can access the sample code by selecting them in the samples folder you selected when you installed the Microsoft Commerce Server 2009 SDK Samples. In order to use these samples it is assumed that you have installed the following:

  • Microsoft Visual Studio 2008 SP1

  • Microsoft Internet Information Services (IIS)

  • Silverlight tools for Visual Studio 2008 SP1

  • Microsoft Commerce Server 2009

  • Microsoft Commerce Server 2009 SDK Samples

Visual Studio Solution Structure

The SilverlightProductDetail.sln solution is composed of the following 3 projects:

Project

Description

ProductDetailControl

This Silverlight 2.0 project that contains the sample code around the product detail XAML control.

SilverlightCommerceContracts

This project is a Silverlight 2.0 Commerce set of contracts and message builders.

SilverlightProductDetailControl.Web

This project is a web application that is used to host the CommerceProxy service.

Building the Solution

Within Visual Studio:

  1. Open the solution file SilverlightProductDetail.sln

  2. Right click on Solution "SilverlightProductDetail" (3 projects)

  3. From the context menu select Build Solution, as shown below:

Dd451575.25e3399d-14f9-4f96-895d-bd18cd487ce7(en-US,CS.90).gif

Creating a Web Application

Use the following steps to add the sample application to your Commerce Server site in Internet Information Services (IIS). When you do so, you will choose an IIS application pool to assign to the Catalog Web application. To make sure that the application works correctly, the application pool you select must comply with the following:

  • In IIS 7.0, the application pool must run in the Classic managed pipeline mode, not Integrated.

  • The application pool must have all the necessary security privileges to access your Commerce Server site and its associated databases.

To add the application to the Commerce Server site in IIS 6.0

  1. In Internet Information Services (IIS) Manager, in the navigation tree, under Web Sites, right-click Default Web Site, click New, and then click Virtual Directory.

  2. On the first page of the wizard, click Next.

  3. In the Alias box, type SilverlightProductDetailControl, click Next.

  4. Next to the Path box, click Browse.

  5. Navigate to <dir>\SDK\Samples\API\APISamples, click the SilverlightProductDetailControl folder and click OK.

  6. Click Next.

  7. In the Virtual Directory Access Permissions page, select Read, and then click Next.

  8. Click Finish.

  9. In the navigation tree, right-click the SilverlightProductDetailControl virtual directory, and then click Properties.

  10. Next to the Application name box, click Create.

  11. In the Execute permissions box, select Scripts and Executables.

  12. Select an application pool.

    Note

    The application pool must have all the necessary security privileges to access your Commerce Server site and its associated databases.

To add the application to the Commerce Server site in IIS 7.0

  1. In Internet Information Services (IIS) Manager, in the navigation tree, click Sites, right-click Default Web Site, and then click Add Application.

  2. In the Alias box, type SilverlightProductDetailControl.

  3. Click the Select button next to the Application pool box, and select the application pool to use.

    Note

    The application pool must have all the necessary security privileges to access your Commerce Server site and its associated databases. It must also run in the Classic managed pipeline mode.

  4. In the PhysicalPath box, type the full path of the application, which is:

    <dir>\SDK\Samples\API\APISamples\SilverlightProductDetailControl

  5. Click OK.

Once the web application has been created, open Microsoft Internet Explorer and type in the following URL in the address bar:

https://localhost/SilverlightProductDetailControl/ProductDetailControlTestPage.aspx

The following page should be displayed:

Dd451575.ca52541d-9251-4037-95c1-d8b07fa26dca(en-US,CS.90).gif

At this point, you can enter a quantity, select a variant based on color and add it to the cart. Go into Commerce Server Customer and Orders Manager and see the basket that was created.

Project Details

The following is a detailed description of the projects found in the SilverlightProductDetail solution.

SilverlightCommerceContracts.csproj

This Silverlight 2.0 project type contains the source code for all of the Microsoft Multi-Channel Commerce Foundation data contracts and message builders. These have been provided so they can be compiled under Silverlight 2.0. Also included in this project file is the source for the CommerceProxy service reference exposed in the web application. The code is located in the CommerceProxyReference.cs source file – It defines CommerceProxyClient that is used to communicate with the service endpoint defined in the web application.

ProductDetailControl.csproj

This project file represents the actual Silverlight 2.0 control. Page.xaml and Page.xaml.cs contain the XAML and code to invoke the CommerceProxy via the same type of message builders and wrappers that you would use when coding directly against the API from your web application. The following is an example of how to query for the product being displayed in the Silverlight control:

var query = new CommerceQuery<Product>();

query.SearchCriteria.Model.CatalogId = "Adventure Works Catalog";
query.SearchCriteria.Model.Id = "AW188-06";

{
    var variantQuery = new 
  CommerceQueryRelatedItem<Variant>(Product.RelationshipName.Variants);

    query.RelatedOperations.Add(variantQuery);
}

CommerceRequest request = query.ToRequest();
CommerceRequestContext requestContext = new CommerceRequestContext();

request.RequestContext = 
      CommerceProxyContext.Current.GetCurrentRequestContext();
            CommerceProxyContext.Current.OperationServiceAgent.ProcessRequestCompleted +=
      new EventHandler<ProcessRequestCompletedEventArgs>
                                (client_ProcessRequestCompleted); 
            CommerceProxyContext.Current.OperationServiceAgent.ProcessRequestAsync(request);

The only real difference in the calling pattern is Silverlight service calls are asynchronous and require the use of a call back method to process the response.

void client_ProcessRequestCompleted(
                object sender, 
                ProcessRequestCompletedEventArgs e)
{
    CommerceResponse response = e.Result;

    CommerceQueryOperationResponse queryResponse = 
      response.OperationResponses[0] as CommerceQueryOperationResponse;

    _product = queryResponse.CommerceEntities[0];
    
    this.VariantList.ItemsSource = 
      from rel in _product.Variants select new Variant(rel.Target);
    this.VariantList.SelectedIndex = 0;
}

SilverlightProductDetailControl.Web

This project file represents the web application used to host the CommerceProxy service. The proxy has been implemented as a simple pass-thru service that invokes the real service via the OperationServiceAgent. The following is an example of how the call to the Commerce OperationService is performed:

public CommerceResponse
  ProcessRequest(Microsoft.Commerce.Contracts.Messages.CommerceRequest request)
{
    CommerceResponse response =
         CommerceContext.Current.OperationServiceAgent.ProcessRequest(
                                 request.RequestContext, request);
     return response;
}

The request and response are passed in and returned as is.

Note It is important to note some of the WCF configuration and attributes that are required in order to successfully expose the CommerceProxy over the Internet.

ASP.NET Compatibility

ASP.Net compatibility must be enabled. This ensures the CommerceProxy has access to the Commerce Server 2009 context information. To enable this you must:

  • Set AspNetCompatibilityRequirements class attribute mode to "Required" in the ICommerceProxy interface implementation.

  • Provide a CommerceProxy.svc class definition, such as:

[ServiceBehavior(
   ConcurrencyMode = ConcurrencyMode.Multiple,
   InstanceContextMode = InstanceContextMode.Single)]
[AspNetCompatibilityRequirements(
   RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
public class CommerceProxy : ICommerceProxy
{
}
  • Define a similar item within the <system.serviceModel> section of Web.config, as follows:
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>

Please refer to the sample code for more information.

Next Steps

This sample lacks the security required for production environments, such as SSL and proper authentication and authorization. Further enhancements, such as authorizing specific calls based on the type of data being accessed, are possible. For example, a query for products may be allowed to work anonymously whereas accessing profile data would require the user to be authenticated and the channel to be secured using SSL. XML (or other types of stores) could be used to define the necessary security services that can be evaluated at runtime, prior to letting calls flow through to the Microsoft Multi-Channel Commerce Foundation service.