Damian Schenkelman’s Blog

Today I tweaked the Event Aggregator Quickstart that comes with the Prism-v2 source code to show how Silverlight 3 Child Windows could be used in a Silverlight Composite Application.

Child Window Overview

Silverlight 3 has a new template called ChildWindow. It is basically a user control (unlike a Popup you can edit its XAML), but it allows you to create modal windows for your application, such as dialogs.

To use this dialog, you just have to create a new instance of it and call its Show method. As this call is asynchronic, you need to handle the Closed event to know when the dialog interaction has finished.

Sample Scenario

The Quickstart’s scenario shows how to use the Event Aggregator to add funds of a particular customer, so what I did is add a confirmation dialog before adding the fund. After you select the customer and fund (both of them as in the original Quickstart) and click the Add button following dialog pops up:

As expected, if you click “Yes” the fund will be added, and if you click “No” or close the dialog it won’t.

Child Window Sample

Disclaimer

This code is provided “AS IS” with no warranties, and confers no rights.

Download

You can get the sample from here: ChildWindowSample.zip.

As some of you may know, some weeks ago I blogged about how to drag and drop WPF views between regions in Prism-v2. Well, today I started spiking and was able to create the same sample for Silverlight (thanks Julian and Ezequiel for your contributions). So, if you were interested in the previous spike but could not use it because you are developing a Silverlight application, you might find this sample useful.

I will not go over the specs, because there are no modifications required to use it compared to its WPF version (explained in my related previous post). However, I did modify the ViewDragManager to cope with some of the WPF/Silverlight differences.

Outcome

Below you can find a picture of how the Silverlight ViewDragManager doing its job:

 

Drag and Drop Sample

Disclaimer

This code is provided “AS IS” with no warranties, and confers no rights.

Download

You can get the sample from here: SLDragDropSample.zip.

Hope this is useful application .

Last week, with Matias Bonaventura, Julian Dominguez and Pablo Constantini, we created a WPF demo application using Prism-v2 that shows both way interaction between different modules of the application and different WPF WebBrowser controls.

Below you can find some of the highlights of how this application works. The demo shows interaction between the WPF application and a Web application hosted in a WebBrowser control. How this is done is explained with further detail in the blog post.

Quickstart Overview

The demo has the following main components:

• CustomersModule: This module is responsible for handling the information of the different customers. It gets the information from a WCF WebService. It has a single view, CustomerView, with a DataGrid to show the customers.  The view is placed in the “CustomersRegion” (top left of the screen).
• LocationModule: This module contains a single view which in turn hosts a WPF WebBrowser control (and a progress bar to show when the page is loading). This control shows the place of residence of the customer through Bing Maps. This view is placed in the “LocationRegion” (bottom of the screen).
• OrdersModule: This module contains a single view which has a WPF WebBrowser control. This control shows a different ASP.NET page with a customer order, based on the customer that is selected in the CustomersView DataGrid. The view is shown in the “OrdersRegion”.
• A Web Application that allows shipping different customer orders.
• A WCF service that manages Customers and Orders (this is for the Web app and the WPF app to share the same data).

The image below shows the layout of the application:

How does the application work?

When a customer from the DataGrid is selected a command is executed (through an attached behavior with the DataGrid’s SelectionChanged event). This command publishes an event using the EventAggregator to notify the Presenter’s of the OrdersView and LocationView in the other modules.

The OrdersView updates the page it shows in the WebBrowser control, and the LocationView updates the customer’s address in a BingMap.

When the user clicks the “Ship Order” button from the WebSite hosted in the WebBroser control from the OrdersView:

1. The WCF Web Service is updated with the data of the Shipped Order (marks the order as shipped).
2. The view listens to the published JS event in the site hosted by the WebBrowser control and notifies its Presenter (I go over how this communication takes place later in this post).
3. The Presenter fires an event through EventAggregator.
4. The event is handled by the CustomersViewModel which updates the customer list through the WebService.
5. The Customers DataGrid is updated.

Implementation Specifics

To enable the WebSite to communicate with the WebBrowser control (via JS events) the following steps were performed:

1. Created the OrdersScriptableModel class (located in the OrdersView code behind), which is serialized as JS.
2. Fire a JS event from this class in the page and this in turn notifies the view.
3. Publish an event (using the EventAggregator) to establish communication with the CustomersViewModel to update the customers list (performing a call to the WebService).

There are other possible approaches, such as going over the different controls in the current WebBrowser.Document to listen for JS events.

You can also check out some tips about using WCF services in Prism in this post by Matias.

Source Code

Disclaimer

This code is provided “AS IS” with no warranties, and confers no rights.

Download

We uploaded the sample to the Prism codeplex site. You can get the sample from here.

Hope this sample application is useful!!!

Yesterday, this question in the Prism forums at codeplex, had us (p&p Sustained Engineering Team) thinking about a possible way to implement drag and drop of views from one region to another. Since we had not seen any samples on how that could be done, I decided to implement one. Thanks to Ezequiel Jadib, who helped me with his experience using WPF and Silverlight drag and drop.

This blog post will explain the process to enable Drag and Drop for your views (assuming they are not in scoped regions), and provide a sample based on the Hello World Quickstart from Prism-v2.

Some more information about WPF Drag and Drop can be found here:

• How to: Use a Thumb to Enable Dragging

Creating the ViewDragManager

After a couple of quick spikes, with Julian “Attached Behavior” Dominguez and Matias Bonaventura, we arrived to the conclusion that having a single component to manage the drag and drop of views would be the best option. This component was called ViewDragManager.

To use the ViewDragManager in your solution you will need to follow these steps:

1. Register the ViewDragManager in your application’s container. You can override the ConfigureContainer method of the UnityBootstrapper to do this. It should be registered as a Singleton since it will act as a service:

   protected override void ConfigureContainer()
          {
              base.ConfigureContainer();
              RegisterTypeIfMissing(typeof(IViewDragManager), typeof(ViewDragManager), true);
          }

2. Add a reference to the DragDropManager assembly in your Shell project, and to the modules that will enable draggable views.
3. Add a namespace reference in your Shell to be able to access the ViewDragManager:

   xmlns:DragDrop=”clr-namespace:DragDropManager;assembly=DragDropManager”

4. Set the ViewDragManager.AllowDrop dependency property in each of the regions that will enable views to be dragged into them to True.

   <ContentControl DragDrop:ViewDragManager.AllowDrop=”True”
                       Height=”200″ Name=”DropRegion” cal:RegionManager.RegionName=”DropRegion” />

5. Create a Thumb in each of the views you want to be able to Drag and Drop.

   <Thumb Background=”DarkSlateGray” Width=”10″ Height=”60″ x:Name=”dragger”/>

6. Call the AddDraggableView method of the ViewDragManager passing the view and its thumb as parameters. A possible place to do this could be the View’s Presenter constructor:

   public DraggableViewPresenter(DraggableView view,
              IRegionManager manager, IViewDragManager dragManager)
          {
              this.viewDragManager = dragManager;
              this.regionManager = manager;
              this.View = view;
              viewDragManager.AddDraggableView(this.View, this.View.dragger);
          }

That’s all, you should now be able to drag your views between the regions you enabled

Outcome

The outcome is the following (clicking the image will probably provide a better view).

Drag and Drop Sample

Disclaimer

This code is provided “AS IS” with no warranties, and confers no rights.

Download

You can get the sample from here: DragDropSample.zip.

I hope this is useful, and greatly appreciate your feedback to continue improving.

Have fun dragging !!!

Today I finally decided to blog about the Prism-v2 Silverlight reference implementation using Silverlight 3 Beta.

In this post I will explain the process and some of the modifications I made to the application to use some of Silverlight’s new features and provide the outcoming source code.

So after opening the RI with SL 3 installed the well known migration wizard appeared.

The migration was a pretty straightforward process, and after less than a minute it finally succeeded and was ready for use.

So with Julian, Ezequiel and Matias we started to think which of the new features from Silverlight 3 could be shown working in the Reference Implementation.

After a small talk, our choice was out-of-browser (OOB) functionality.

Implementing Out-Of-Browser (OOB) functionality

For those who have not yet had the chance to read about this Silverlight 3 feature I will provide some links at the end of this article.

To enable OOB, I opened the AppManifest.xml file, and changed its content to the following:

<Deployment xmlns=“http://schemas.microsoft.com/client/2007/deployment”
        xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“>
  <Deployment.Parts>
  </Deployment.Parts>
  <Deployment.ApplicationIdentity>
    <ApplicationIdentity
        ShortName=“Prism-v2 RI Silverlight 3”
        Title=“Prism-v2 Reference Implementation working out of the Browser with Silverlight 3“>
      <ApplicationIdentity.Blurb>
        Prism-v2 RI running out of browser in Silverlight 3
      </ApplicationIdentity.Blurb>
    </ApplicationIdentity>
  </Deployment.ApplicationIdentity>
</Deployment>

Having done that, OOB should have been enabled. I ran the application and right clicked to check if this worked correctly. After confirming that I wanted to install the application, the following message was shown:

Ok, the objective was complete. However, that picture is not the one that represents our application the best.I created some images, added them to a folder in the StockTraderRI project (Icons folder). After setting the build action of each image to “Content” and I updated the code in the AppManifest.xml so the icons would be used in the OOB application:

<Deployment xmlns=“http://schemas.microsoft.com/client/2007/deployment”
        xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“>
  <Deployment.Parts>
  </Deployment.Parts>
  <Deployment.ApplicationIdentity>
    <ApplicationIdentity
        ShortName=“Prism-v2 RI Silverlight 3”
        Title=“Prism-v2 Reference Implementation working out of the Browser with Silverlight 3“>
      <ApplicationIdentity.Blurb>
        Prism-v2 RI running out of browser in Silverlight 3
      </ApplicationIdentity.Blurb>
      <ApplicationIdentity.Icons>
        <Icon Size=“16×16“>Icons/icon16.png</Icon>
        <Icon Size=“32×32“>Icons/icon32.png</Icon>
        <Icon Size=“48×48“>Icons/icon64.png</Icon>
        <Icon Size=“128×128“>Icons/icon128.png</Icon>
      </ApplicationIdentity.Icons>
    </ApplicationIdentity>
  </Deployment.ApplicationIdentity>
</Deployment>

After that, the picture changed to show one of the pictures chosen:

After checking both options (there is no need to check any of the options, I just did), the application was launched out of the browser

Source Code

Disclaimer

This code is provided “AS IS” with no warranties, and confers no rights.

Download

You can get source code here: Prism-v2 RI with OOB capabilities.zip.

Final thoughts

For more information about out-of-browser experience you can check:

• OUT-OF-BROWSER EXPERIENCES (video, really recommend it)
• Silverlight 3 Out-of-browser Update Model

Some other posts related to Silverlight 3 and Prism-v2:

• How To: Integrate a Prism v2 application with the Silverlight 3 Navigation Framework
• Commands with Attached Behavior for Silverlight 3 DataForm

I hope this post is useful to you, and your feedback, opinions and thoughts are always welcome to continue improving.

In the first post of this series I blogged about how to extract the event aggregator into a single Silverlight assembly. This was useful because it reduced the size of an application that only used the Event Aggregator from the CAL’s latest release.

Today, with Matias Bonaventura, we put Prism’s extensibility to test again (greatly in part to Ezequiel Jadib’s motivation) by extracting WPF commanding from the Composite Application Library for WPF & Silverlight. I built the assembly and tested it in the WPF commanding quickstart. Prism’s extensibility stepped up to the challenge one more time.

As I did last time I will provide a snapshot using .Net Reflector, so you have a fast way to learn what the assembly contains. (Clicking the picture will provide a better look)

You can check out other posts in this series:

• Putting Prism-v2 extensibility to test. The standalone Silverlight Event Aggregator

Standalone Silverlight Evevnt Aggregator Binaries

Disclaimer

This assembly is provided “AS IS” with no warranties, and confers no rights.

Download

You can get the assembly here:Composite.Commands.Wpf.

This is a post I have had pending for a long time. As usual it came up after I saw this question in the Composite WPF & Silverlight forums at Codeplex.

The user wanted a lightweight download, and was only using the Event Aggregator from the CAL’s latest bits. I thought that this would really test Prism’s extensibility, so I created a single assembly which only contained things required by the Silverlight Event Aggregator.

The following picture will easen the process of explaining/understanding all the classes this assembly requires. It was taken using the .Net Reflector. (Clicking it will probably make it easier to read)

Afterwards I tested the correct functionality of this assembly using the EventAggregator Quickstart by replacing the events used in it with events from this new assembly.Everything worked like a charm, so Prism-v2 passed this “extensibility test”

Glenn Block has a post that explains how to perform Event Aggregation with MEF (with and without EventAggregator), so perhaps you could find that post interesting if you have read this far.

You can check out other posts in this series:

• Putting Prism-v2 extensibility to test (Part II). The Composite.Commands.Wpf assembly

Standalone Silverlight Event Aggregator Binaries

Disclaimer

This assembly is provided “AS IS” with no warranties, and confers no rights.

Download

You can get the assembly here: Composite.EventAggregator.Silverlight.

Today in the Prism forum this question presented an interesting scenario. If I create a module that is loaded on demand and other modules depend on it: how do I load them using Directory Lookup module enumeration?

This scenario could be used to develop new modules without changing the code of the one they depend on and simply store them in a folder so they get loaded.

As Julian Dominguez quickly explained there is a simple way to do this with Prism-v2:

[Module (ModuleName="IndependentModule", OnDemand = true)]
  public class IndependentModule :IModule
  {
      private readonly IModuleCatalog catalog;
      private readonly IModuleManager moduleManager;
      //Your code here

      public IndependentModule(IModuleManager moduleManager, IModuleCatalog catalog)
      {
          this.moduleManager = moduleManager;
          this.catalog = catalog;
          //Your code here
      }

      public void Initialize()
      {
          //Your code here                                                              

          var dependentModules = this.catalog.Modules.Where
              (m => DependsOnModule(m.DependsOn, “IndependentModule”)).Select(m => m.ModuleName);
          foreach (string dependentModule in dependentModules)
          {
              moduleManager.LoadModule(dependentModule);
          }
      }

      private static bool DependsOnModule(IEnumerable<string> dependencies, string independent)
      {
          if (dependencies == null)
              return false;

          return dependencies.Contains(dependant);
      }
  }

Now if any modules in the directory depend on this module, they will automatically get loaded after this module is.

I hope you can find a good use for this.

Some weeks ago, due to yet another question from the Composite WPF & Silverlight Codeplex forums, I found myself researching about the Silverlight 3 DataForm control. I turned to this video which allowed me to understand the basics of how it worked really fast.

The user wanted to execute a command in his view model when an item of the DataForm had been edited.

This post will not focus on explaining what this control allows (for this I really recommend the video), but focus on the implementation required instead.

Attached Behavior Saves the Day

So I checked the documentation and asked Julian Dominguez (the attached behavior guy), and Matias Woloski (an expert in the client development field) if attached behaviors was the way to go. And of course they all pointed my in that direction.

I took the Click class used in Prism-v2 and turned it into the ItemEditEnded class:

public static class ItemEditEnded
   {
       private static readonly DependencyProperty ItemEditEndedCommandBehaviorProperty
           = DependencyProperty.RegisterAttached(
           “ItemEditEndedCommandBehavior”,
           typeof(DataFormItemEditEndedCommandBehavior),
           typeof(ItemEditEnded),
           null);

       public static readonly DependencyProperty CommandProperty
           = DependencyProperty.RegisterAttached(
           “Command”,
           typeof(ICommand),
           typeof(ItemEditEnded),
           new PropertyMetadata(OnSetCommandCallback));

       public static readonly DependencyProperty CommandParameterProperty
           = DependencyProperty.RegisterAttached(
          “CommandParameter”,
          typeof(object),
          typeof(ItemEditEnded),
          new PropertyMetadata(OnSetCommandParameterCallback));

       public static ICommand GetCommand(DataForm dataForm)
       {
           return dataForm.GetValue(CommandProperty) as ICommand;
       }

       public static void SetCommandParameter(DataForm dataForm, object parameter)
       {
           dataForm.SetValue(CommandParameterProperty, parameter);
       }

       public static object GetCommandParameter(DataForm dataForm)
       {
           return dataForm.GetValue(CommandParameterProperty);
       }

       private static void OnSetCommandCallback
           (DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
       {
           DataForm dataForm = dependencyObject as DataForm;
           if (dataForm != null)
           {
               DataFormItemEditEndedCommandBehavior behavior = GetOrCreateBehavior(dataForm);
               behavior.Command = e.NewValue as ICommand;
           }
       }

       private static void OnSetCommandParameterCallback
           (DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
       {
           DataForm dataForm = dependencyObject as DataForm;
           if (dataForm != null)
           {
               DataFormItemEditEndedCommandBehavior behavior = GetOrCreateBehavior(dataForm);
               behavior.CommandParameter = e.NewValue;
           }
       }

       private static DataFormItemEditEndedCommandBehavior GetOrCreateBehavior(DataForm dataForm)
       {
           DataFormItemEditEndedCommandBehavior behavior =
               dataForm.GetValue(ItemEditEndedCommandBehaviorProperty) as DataFormItemEditEndedCommandBehavior;
           if (behavior == null)
           {
               behavior = new DataFormItemEditEndedCommandBehavior(dataForm);
               dataForm.SetValue(ItemEditEndedCommandBehaviorProperty, behavior);
           }
           return behavior;
       }
   }

Then I created the class that would hook the DataForm’s event to the command DataFormItemEditEndedCommandBehavior:

public class DataFormItemEditEndedCommandBehavior : CommandBehaviorBase<DataForm>
    {
        public DataFormItemEditEndedCommandBehavior(DataForm dataForm)
            : base(dataForm)
        {
            dataForm.ItemEditEnded += OnItemEditEnded;
        }

        private void OnItemEditEnded(object sender, DataFormItemEditEndedEventArgs e)
        {
            ExecuteCommand();
        }
    }

As Julian explained: The first class is the one needed to create the attached behavior when the Xaml parser creates the UserControl. His blog post, ICommand for Silverlight with Attached Behaviors, uses a similar approach to the code that end up in the CAL (although it is not exactly the same), and explains how the Attached Behavior pattern works.

Putting things to work

Now I had to test that this worked correctly. With that in mind, I took the HelloWorld Quickstart and turned it into a little application with a DataForm inside its only view. To test the scenario, the command would add a new item to a list of customers which was databound to the DataForm, thus giving it an extra “page”.

You can download the code from here. Since this was originally the HelloWorld Quickstart from Prism-v2, I made some minor changes to it to make the application easier to understand.

Disclaimer: This code is provided “AS IS” with no warranties, and confers no rights.

I hope you can find good use to this.

As you might have read in the blogs of some of the guys from the p&p team or at Codeplex, the Prism survey is a place where you can share your thoughts, experiences, feedback (both good and bad) about using the guidance (both WPF and WPF & Silverlight versions).

Your feedback is important to improve the guidance for the next release so please, take some time (should take about 10 minutes) to fill the survey.

If you currently believe that something is a must for the next version of Prism, you can contact Blaine Wastell, p&p Program Manager, by e-mail or through a comment in this post.