Friday, 28 Oct 2011 will be my last day in Redmond, and unfortunately Microsoft and the patterns & practices team.

My decision to leave Redmond was driven solely by the real estate market in this area. This was a very difficult decision choosing between a life goal of building a new home, a short commute, and trying to stay with Microsoft in Redmond.

On 29 Oct 2011, I’ll be moving to Boise, Idaho and after a short break will begin a new career with Gayle Manufacturing Company. I’m looking forward to becoming part of the GMC family and transitioning back to an architect-developer role. Over the winter I’ll work with a home builder and hope to break ground in March or April of 2012.

Leaving Microsoft

Leaving Redmond is easy (for the above reason), leaving Microsoft is difficult. I’m grateful for the opportunities I’ve been given over the last 3 years. Except for the Marine Corps, Microsoft is the best company I’ve ever worked for. I would not hesitate to recommend the opportunities at Microsoft to anyone, this super place to work.

I will very much miss the dedicated and very smart people at Microsoft. Leaving Redmond also means moving away from friends in the area; I will miss you as well.

Prism

For questions on Prism please post them here: https://compositewpf.codeplex.com/discussions. The Prism team provides outstanding support.

Close

I would love to stay in touch:

blog: https://karlshifflett.wordpress.com/

twitter: @kdawg02

Microsoft and the people of Microsoft, thank you very much for the last three years.

Project Silk

Client-Side Web Development for Modern Browsers

Project Silk provides guidance for building maintainable cross-browser web applications that are characterized by an intentional design, rich interactivity, and a responsive user interface (UI). The result is an immersive and engaging user experience (UX). Such applications take advantage of the latest web standards, including HTML5, CSS3, and ECMAScript version 5, and modern web technologies such as jQuery and ASP.NET MVC 3.

The concepts explained in this book are demonstrated via a real-world customer-facing web application called the Mileage Stats Reference Implementation (Mileage Stats). Mileage Stats allows users to track and compare their vehicles' fuel efficiency, usage, and operating costs, and to schedule vehicle maintenance reminders. The image below shows the Mileage Stats client-side objects and their implementation mapped to libraries or frameworks.

Building a rich web application that reduces the number of full-page loads, includes animations, and is responsible for updating the UI dynamically requires a thoughtful approach to managing structure, modularity, communication, navigation, and data. The book details how the Project Silk team designed Mileage Stats and solved a number of challenges.

Links

• Project Silk download
• Project Silk Home Page on MSDN
• Project Silk Community on CodePlex
• Project Silk Road Map
• Mileage Stats Video

Audience

• This guidance is intended for web developers and assumes you have some hands-on experience with ASP.NET MVC, CSS, HTML, JavaScript, and jQuery.

In this Release

• Project Silk Mileage Stats Reference Implementation full source code
• Widget QuickStart documentation and source code
• Unit Test Hands on Labs (3)
• Project Silk: Client-Side Web Development for Modern Browsers online documentation
• Mileage Stats Video

About patterns & practices

The Microsoft patterns & practices team provides a wide range of guidance to help customers save time and reduce risk on their software development projects by incorporating proven patterns and practices.  This applied engineering guidance includes both production quality source code and in-depth documentation.

The guidance is designed to help software development teams:

• Make critical design and technology selection decisions by highlighting the appropriate solution architectures, technologies, and Microsoft products for common scenarios
• Understand the most important concepts needed for success by explaining the relevant patterns and prescribing the important practices
• Get started with a proven code base by providing thoroughly tested software and source code that embodies the recommendations

For more information: https://msdn.microsoft.com/practices

Have a great day,

Just a grain of sand on the worlds beaches.

Video

If you have not seen the Project Silk video check it out here.

Chapters

The following chapters are ready for review:

• Design and Layout (new)
• Modularity (early draft)
• Communication (early draft)
• Navigation (early draft)
• Server-Side Implementation (updated)
• Introduction (updated)
• Architecture
• Client Data Management and Caching
• jQuery UI Widgets
• Application Notifications
• Security
• Unit Testing Web Applications
• Widget QuickStart
• How to: Check UIElement Properties with Coded UI Test
• How to: Create Automation Negative case with Coded UI Test
• How to: Create Web Client UI Test using Coded UI Test

The following chapters are currently being written or will be started soon:

• HTML Templates

Close

We welcome and appreciate your feedback on the application and book content.

Have a great day,

Karl

Guidance Chapters Ready for Review

Today’s drop includes the following chapters (provided in CHM or PDF format) that are ready for community review. Our team very much appreciates your feedback and technical review. All documentation feedback should be posted in the Issue Tracker; if required, a document can be attached along with the feedback.

• Architecture
• jQuery UI Widgets
• Server-Side Implementation
• Security
• Unit Testing Web Applications
• Widget QuickStart
• How to: Check UIElement Properties with Coded UI Test
• How to: Create Automation Negative case with Coded UI Test
• How to: Create Web Client Test Automation with Coded UI Test

jQuery UI Widget Chapter

The jQuery UI Widget chapter provides comprehensive coverage of the jQuery UI Widget Factory and how to author your own widgets.

Project Silk uses widgets to modularize its client-side JavaScript. Widgets are powerful objects that provide a good amount of built-in infrastructure yet are simple to use. The above Architecture chapter provides the high-level view of Project Silk and explains the important role widgets play.

What you can expect to learn from the widget chapter:

• How to define and apply widgets
• How to manage the lifetime of widgets
• How to define default options that permit overrides and change notifications
• How to use options for decoupling behavior and facilitating event subscriptions
• How to use private methods to improve the readability of the code
• How to define and use public methods, properties, and events
• How to inherit from a base widget

Downloads

Latest documentation drop (24 May 2011): https://silk.codeplex.com/releases/view/66995

Latest code drop (Drop 9 – 10 May 2011): https://silk.codeplex.com/releases/view/66045

Have a great day,

Karl

Registration is now open for the  patterns & practices Prism, Unity, WPF, MVVM training event, 27-29 June in Boise, ID. All event information can be found on the registration page.

Register:  https://prismboise-eorg.eventbrite.com/

In addition a dinner is planned for Sunday, 26 June at the Goodwood Barbecue Company at 6:00pm.

Register: https://prismboisedinner-eorg.eventbrite.com/

Very much looking forward to these events.

Have a great day,

Karl

Save the dates for a 3 day patterns & practices Prism, Unity, WPF, MVVM training event, 27-29 June in Boise, ID.

Join three Prism Team members Bob Brumfield (lead developer), Geoff Cox (developer), and myself (program manager) for an information packed 2 days of instruction followed up by a day of pair-programming.

Day one will consist of WPF and MVVM topics; day two Prism 4.0 and Unity; day three is dedicated to pair-programming, getting your questions answered, and an opportunity for you to apply the last two days’ training against your scenarios and programming style. The pair-programming day is always so much fun along with some wicked coding.

This is a free event for 75 attendees. Each seat has a desktop, power and wireless.

Registration will open soon and will be announced on my blog and twitter.

Very much looking forward to spending time with developers and taking in the beauty of Idaho.

Have a great day,

Karl

This Widget QuickStart illustrates the way Project Silk uses the jQuery UI widget factory to create maintainable components that implement client-side behavior. The approach used in this QuickStart is often referred to as progressive enhancement.

Business Scenario

Our team has been asked to enable cross-browser, keyword lookup with hyperlinking to popular Internet websites. This feature will need to be added dynamically to all company web pages.

Another team has been tasked with tagging the web page keywords. The words will be dynamically tagged based on server-side business logic driven by agreements with 3^rd parties.

The focus of this QuickStart will be enabling the client-side behavior for the tagged keywords. When a user hovers over a keyword, the browser will display a popup of popular links for that keyword from the delicious.com bookmarking service.

Walkthrough

To interact with the completed scenario, follow the below steps:

Open the default.htm file using Internet Explorer 9. After the file's content is displayed you'll need to click on the "Allow block content" button at the bottom of the browser window. This is a security feature of Internet Explorer 9.

After allowing blocked content, you'll notice the keywords have a new color and have been underlined with a dash line as pictured below.

Using your mouse, hover over an underlined keyword. A popup with the top 10 most popular links for that keyword will be displayed. Notice the keyword has been repeated in the title of the popup.

1. One second after moving your mouse away from the keyword, the popup will close unless your mouse is within the boundary of the popup.
2. If the keyword is on the left side of the page the popup will open to the right of the mouse. If the keyword is on the right side of the page the popup will open to the left side of the mouse as in the below image.

Move your mouse over the popup. You can now click on a link. When clicked, a new browser window will open and navigate to the URL of the clicked link.

Moving your mouse out of the popup boundary will cause the popup to be closed.

Conceptual View

This section graphically illustrates the relationship of the jQuery UI widgets to the HTML page elements.

The image below shows a single infobox widget attached to the page's body element. Additionally, a tagger widget has been attached to each keyword.

The below HTML reveals a keyword tagging strategy that leverages HTML5 data attributes. Each of the keywords has been wrapped in a span tag with the data-tag data attribute applied. For our scenario imagine the keyword wrapping was accomplished on the server-side.

<!DOCTYPE html>
<html>
<head>
  <title>Project Silk: Delicious Widget QuickStart</title>
  <link rel="stylesheet" href="style.css" />
  <meta http-equiv="X-UA-Compatible" content="IE=9">
</head>
<body>
  <div id="container">
    <img src="projectsilk.png" />
    <h1>
      Project Silk Overview</h1>
    <p>
      Project Silk provides guidance and example implementations
      that describe and illustrate recommended practices for 
      building next generation web applications using web 
      technologies like <span data-tag>HTML5</span>, 
      <span data-tag>jQuery</span>, <span data-tag>CSS3</span>
      and Internet Explorer 9. The guidance will be taught in 
      the context of real-world development scenarios rather 
      than focusing on <span data-tag>technology</span> 
      features.</p>

Attaching Widgets

Widgets are attached to HTML elements. When a widget is attached its options can also be set.

(function ($) {
  $('body').infobox({
    dataUrl: 'https://feeds.delicious.com/v2/json/popular/'
  });
  $('span[data-tag]').tagger();
} (jQuery));

The above code demonstrates the infobox widget being attached to the body element. The dataUrl option value will be used when performing popular keyword link look-ups.

The jQuery selector 'span[data-tag]' returns a jQuery wrapped set that contains all span tags with a data-tag attribute. Think of a jQuery wrapped set as a collection or an array. A tagger widget will be attached to each of the span tags in the returned collection.

Widget Initialization

When created, the jQuery UI widget factory will call the private method _create. This method provides the developer an opportunity to perform widget setup actions. Examples include building and injecting markup, adding CSS classes, binding events, etc.

_create: function () {
  var self = this;
  self._targetElement = $('<div class="qs-info-box" />');
  $('body').append(self._targetElement);
  self._targetElement.hover(
    function () {  // mouseenter
      self._isMouseOver = true;
    },
    function () {  // mouseleave
      self._isMouseOver = false;
      self.hideTagLinks();
    }
  );
}

The above code snippet first sets up a closure for this called self, so that the widget can be referenced in the hover event handlers.

Recall that the infobox widget is attached to the body element; however, it currently has no UI element in the DOM to work with. The element div.qs-info-box will contain the UI for this widget. It will be stored in the _targetElement variable and attached to the body element. Now the infobox widget has a DOM element it can reference, manipulate, and attach event handlers to.

The hover behavior is defined by two functions. The first function is the mouseenter event handler and the second function is the mouseleave event handler.

Widget Interactions

An interesting challenge with this scenario is giving the user time to click the links without showing the popup longer than needed. The implementation requires coordination between the two widgets.

Mouse Entering a Keyword

When the mouse enters the keyword span, the mousenter event handler in the tagger widget is invoked.

function (event) {  // mouseenter
  clearTimeout(timer);
  screenWidth = window.innerWidth;
  if (event.pageX > screenWidth / 2) {
    offsetX = -270;
  }
  self._locatedInfoBox.infobox('displayTagLinks',
                              $(this).text(),
                              event.pageY + offsetY,
                              event.pageX + offsetX);
}

The following describes the steps to displays the keyword links within the popup (_targetElement) in the above code.

• clearTimeout - This clears the timer created when the mouse previously left the keyword.
• Calculate the horizontal offset depending on the location of the mouse relative to the center of the screen.
• Pass the keyword text and X,Y positions for the popup to the displayTagLinks function on the infobox widget.

• Inside the displayTagLinks function, the URL is augmented with the keyword text in preparation for the Ajax request. The maximum number of items to be returned is also included in the URL according to the requirements of the delicious.com service as seen in this line of code:

  url = this.options.dataUrl + tag + '?count=' + self.options.maxItems;

• On successful completion of the Ajax call, the contents of the popup are constructed and applied to the _targetElement using its jQuery html function. Before showing the popup with the show function, the position is set using the jQuery css function. You can see this in the _displayResult function below, which is called by the success and error Ajax handlers.

  _displayResult: function (element, html, top, left) {
    element.html(html);
    element.css({ top: top, left: left });
    element.show();
  }

• The Ajax error condition behaves in a similar fashion except an error message will be display in lieu of the links if an Ajax error occurs.

Mouse Leaving a Keyword

When the mouse leaves the keyword span, a 1000 millisecond delay is set to call the hideTagLinks function on the infobox widget. The popup is only hidden if the mouse is not over it. Effectively, the 1000ms delay provides the user time to move the mouse from the keywords to the links.

hideTagLinks: function () {
  if (!this._isMouseOver) {
    this._targetElement.hide();
  }
}

Mouse Entering the Popup

Internally the infobox widget maintains state about whether the mouse is over the popup or not using the _isMouseOver property.

When the mouse enters the popup, _isMouseOver is set to true.

function () {  // mouseenter
  self._isMouseOver = true;
}

Mouse Leaving the Popup

When the mouse leaves the popup, _isMouseOver is set to false and hideTagLinks is invoked.

function () {  // mouseleave
  self._isMouseOver = false;
  self.hideTagLinks();
}

hideTagLinks: function () {
  if (!this._isMouseOver) {
    this._targetElement.hide();
  }
}

Download

The source code and Microsoft Word document version of the blog post can be downloaded at: https://silk.codeplex.com/releases/view/64272

More Information

You may find the following links useful in your investigation of the jQuery UI widget factory:

• https://jqueryui.com/docs/Developer_Guide
• https://wiki.jqueryui.com/w/page/12138135/Widget-factory
• https://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/
• https://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

Comments

Microsoft values your opinion about our products, guidance, documentation and samples.  You can leave feedback on this blog post or on the The Project Silk site at: https://silk.codeplex.com/releases/view/64272

Thank you for your feedback and have a great day,

Karl Shifflett

The primary purpose of this blog post is to provide an example of using Unity for dependency resolution when writing a Silverlight application that also uses Prism 4 Region Navigation and the Silverlight Frame Navigation framework.

Required Reading

If you have not yet read these blog post please do so now.

• Prism v4 Region Navigation Pipeline
• Integrating Prism v4 Region Navigation with Silverlight Frame Navigation
• Cancelling a Navigation Request using Prism v4 Region Navigation with Silverlight Frame Navigation

These blog posts provide critical foundational information that will not be repeat in this blog post.

Example Code

This blog post is a direct port of the code from the above Cancelling a Navigation Request using Prism v4 Region Navigation with Silverlight Frame Navigation post that uses MEF for dependency resolution.  That code has been ported to use Unity instead. 

The code in this blog post includes the prompt for navigation cancelling feature that gets called when navigating away from the inventory item page. This prompt demonstrates implementing the IConfirmNavigationRequest.ConfirmNavigationRequest method in Silverlight when the Silverlight Frame Navigation framework is also being used.

Configuring the Unity Container

When using Unity with Prism 4 Region Navigation in either Silverlight or WPF applications, the Unity container needs to be configured in a special way.  This is required because of the way the Prism Region Navigation API requests objects from the Unity container.

The below text is taken from the “Basic Region Navigation” section of on Prism 4 MSDN documentation page: https://msdn.microsoft.com/en-us/library/gg430861(v=PandP.40).aspx. 

The following code snippet is from the Bootstrapper.cs file in the, “ThePhoneCompany” project.  This shows how to properly register views with Unity that will be navigated to using the Prism 4 Navigation API.  The views are registered as type Object and then the type full name is used to name the view in the Unity container.

Notice how I have chosen to use the type full name instead of the type name.  Using the type full name prevents name collisions across different modules and makes navigating across modules very easy.

protected override void ConfigureContainer() {
    base.ConfigureContainer();

    Container
        .RegisterType<Object, AboutView>(typeof(AboutView).FullName)
        .RegisterType<Object, HomeView>(typeof(HomeView).FullName);
}

The below UriMapper XAML is from the ShellView.  You can see how the above view type full names map to the below Urls. 

Example:  User navigates to /#/HomeView, the Region Navigation API will request the “ThePhoneCompany.Views.HomeView” named object from the Unity Container and begin the navigation process. 

Example: User navigates to /#/Inventory/ItemView/1009, the Region Navigation API will request the “ThePhoneCompany.Inventory.Views.ItemView” named object from the Unity Container and begin the navigation process.

<navigation:Frame.UriMapper>
    <uriMapper:UriMapper>
                        
        <!--Default applicaiton mapper-->
        <uriMapper:UriMapping Uri="" MappedUri="/ThePhoneCompany.Views.HomeView"/>
                       
        <!--Used to add a new record-->
        <uriMapper:UriMapping Uri="/{moduleName}/{pageName}/add" MappedUri="ThePhoneCompany.{moduleName}.Views.{pageName}?key=0"/>
                        
        <!--Used to edit a record-->
        <uriMapper:UriMapping Uri="/{moduleName}/{pageName}/{key}" MappedUri="ThePhoneCompany.{moduleName}.Views.{pageName}?key={key}"/>

        <!--Used to view a page-->
        <uriMapper:UriMapping Uri="/{moduleName}/{pageName}" MappedUri="ThePhoneCompany.{moduleName}.Views.{pageName}"/>
                        
        <!--Used to navigate to a page in the Shell-->
        <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/ThePhoneCompany.Views.{pageName}"/>

    </uriMapper:UriMapper>
</navigation:Frame.UriMapper>

The below code snippet is from the InventoryModule.cs file.  Notice again how the views are registered in the Unity Container as type Object and named using the type full name.

public class InventoryModule : IModule {

    public InventoryModule(IUnityContainer container) {
        container
            .RegisterType<InventoryViewModel>()
            .RegisterType<ItemViewModel>()
            .RegisterType<CategoryViewModel>()
            .RegisterType<Object, InventoryView>(typeof (InventoryView).FullName)
            .RegisterType<Object, ItemView>(typeof (ItemView).FullName)
            .RegisterType<Object, CategoryView>(typeof (CategoryView).FullName);
    }

    public void Initialize() {
           
    }
}

Running the Sample Code

Requirements: you must download Prism 4 or later and run the RegisterPrismBinaries.bat batch file. The Prism v4 Readme covers this file in detail. If you do not want to run this batch file, you'll need to remove and re-add the references to the Prism assemblies.

The attached code uses Unity for dependency resolution.  This code also demonstrates cancelling a navigation request. To see this in action, run the application, select Inventory in the menu bar, select an inventory item to edit, then press the Close button on the inventory item form. A MessageBox will prompt you to continue the navigation or cancel it.

Comments

Microsoft values your opinion about our products, guidance, documentation and samples.

Thank you for your feedback and have a great day,

Karl Shifflett

SLPrismNavigationUnity.zip

This is a follow up blog post to Integrating Prism v4 Region Navigation with Silverlight Frame Navigation.  Please read this blog post if you have not already done so.

If you have not read the blog post Prism v4 Region Navigation Pipeline, please read this to get an understanding of Prism Region Navigation, the interfaces and the pipeline.  This blog post also covers IConfirmNavigationRequest in detail.

Background

When using Prism region navigation with WPF or Silverlight, developers can implement the IConfirmNavigationRequest interface and in the ConfirmNavigationRequest method, display a dialog, get a response and invoke the callback that was passed as an argument to ConfirmNavigationRequest.  This dialog does not have to be a modal or thread blocking dialog because the Prism Region Navigation pipeline is halted until the callback is invoked.

In order for a region navigation request to be cancelled in a Silverlight application that also uses the Silverlight frame navigation framework, a modal dialog is required when getting the response from the user.  This is because navigation is initiated by the Silverlight frame navigation framework and not the Prism region navigation.  Even if the Prism region navigation is used to initiate the request, the request is still routed to Silverlight frame navigation framework for processing.  The Silverlight frame navigation framework does not support halting the request like the Prism navigation API does, this is why a thread blocking dialog is required to get the input from the user before allowing the navigation request to continue processing.

Prism Documentation on Interaction Requests

Please read the following Prism documentation on Interaction Requests before proceeding.  This fully explains the concepts of the Interaction Request and I won’t repeat that content here.

https://msdn.microsoft.com/en-us/library/gg405494(v=PandP.40).aspx#UserInteractionPatterns

How to Implement Cancelling a Prism 4 Navigation Request when using Silverlight Frame Navigation

• In the view, set up a Prism Interaction Request in the XAML
• In the view model expose public property of type InteractionRequest<Confirmation>
• In the view model implement IConfimNavigationRequest

The following XAML snippet is from the ItemView.xaml file.

• The NavigationRequest property exposed on the view model
• The MessageBoxNotificationAction is in MessageBoxNotificationAction.cs. 

<ie:Interaction.Triggers>
    <prism:InteractionRequestTrigger SourceObject="{Binding NavigationRequest}">
        <infra:MessageBoxNotificationAction />
    </prism:InteractionRequestTrigger>
</ie:Interaction.Triggers>

The below code snippet is from MessageBoxNotificationAction.cs.

The Silverlight MessageBox is used to get the response from the user.  The Silverlight MessageBox is a thread blocking message box.  This is required when cancelling a Silverlight Frame navigation request.  Currently, the Silverlight MessageBox is the only thread blocking message box available in Silverlight.  Unfortunately this message box can’t be styled or modified by the developer.

public class MessageBoxNotificationAction : TriggerAction<FrameworkElement> {

    protected override void Invoke(object parameter) {
        var args = parameter as InteractionRequestedEventArgs;
        if(args == null) {
            return;
        }

        var confirmation = (Confirmation)args.Context;
        MessageBoxResult result = MessageBox.Show(confirmation.Content.ToString(), confirmation.Title, MessageBoxButton.OKCancel);

        confirmation.Confirmed = result == MessageBoxResult.OK;
        args.Callback();
    }
}

The below three code snippets are from ItemViewModel.cs.

The above view XAML data binds to the below NavigationRequest property exposed on the view model.

public InteractionRequest<Confirmation> NavigationRequest { get; private set; }

The NavigationRequest property is initialized in the view model constructor.

[ImportingConstructor]
public ItemViewModel(IRegionManager regionManager) {
    _regionManager = regionManager;
    NavigationRequest = new InteractionRequest<Confirmation>();
}

The below code is the implementation for the IConfirmNavigationRequest interface. IConfirmNavigationRequest derives from the INavigationRequest interface and adds a single method ConfirmNavigationRequest.

void IConfirmNavigationRequest.ConfirmNavigationRequest(NavigationContext navigationContext, Action<Boolean> continuationCallback) {
    this.NavigationRequest.Raise(
        new Confirmation {
            Content = "Would you like to continue navigating away?",
            Title = "Navigation Confirmation"
        }, confirmation => continuationCallback(confirmation.Confirmed));
}

During the processing of the navigation request the above ConfirmNavigationRequest method will be called causing the following code to be executed:

• Raise method on the InteractionRequest is invoked.  (NavigationRequest property exposes InteractionRequest)
• The triggers in the XAML trigger the above MessageBoxNotificationAction.Invoke method
• The result of the MessageBoxNotificationAction.Invoke method are returned in the Confirmation, Confirmed property
• The Prism Region Navigation API will either cancel or continue the navigation request based on the Confirm property

Running the Sample Code

Requirements: you must download Prism 4 or later and run the RegisterPrismBinaries.bat batch file. The Prism v4 Readme covers this file in detail. If you do not want to run this batch file, you'll need to remove and re-add the references to the Prism assemblies.

I have attached a modified version of the code that demonstrates cancelling a navigation request.  To see this in action, run the application, select Inventory in the menu bar, select an inventory item to edit, then press the Close button on the inventory item form.  A MessageBox will prompt you to continue the navigation or cancel it.

Comments

Microsoft values your opinion about our products, guidance, documentation and samples.

Thank you for your feedback and have a great day,

Karl Shifflett

Patterns & Practices Prism Team

SilverlightPrismv4IntegratedNavigationWithCancellationEnabled.zip

p & p projects are community driven.  This is your initial opportunity to feed into the web guidance project.

We very much value your opinion and kindly request your response to this VERY short survey.

https://www.surveymonkey.com/s/wcg

Have a great day,

Karl