Fast Download links : Prism Training Kit 1.1 | Prism 4

A new version of Prism (aka Composite Application Guidance for WPF and Silverlight) has been officially released last week, and the community has been very enthusiastic about it.  You can read more about this on Diego’s blog and Karl’s blog.

With Damian, Diego, Guido and  Ezequiel we have updated the Prism Training Kit (now it’s version 1.1 ) to target the new bits of Prism 4. The Beta Training Kit includes 5 Hands-On-Labs that cover some of Prism’s core concepts (modularity, bootstrapping, dependency injection, UIComposition and Communication), which are now using Prism 4 assemblies. We also take the oportunity to solve the all the bugs that were reported. If you want to know more about prism training kit content you can read Prism Training Kit: Beta Version Available.

Additionally, as we had received very good feedback from the community about the training kit (which has 1000+ downloads ), this week we plan to add new content to the training kit tackling the new concepts introduced in Prism 4. We have in mind adding the following new labs:

• Using Managed Extensibility Framework (MEF) with Prism Applications.
• Prism Navigation Framework.
• Prism 4 Windows Phone 7

(We intentionally left MVVM out, as there are already very good samples in Karl’s in-the-box MVVM training).

If you feel we are missing something important please let us know Your feedback is really appreciated!

Hope you find it useful!

Quería agradecerle a todos los valientes que se despertaron el Sábado temprano para asistir a la charla y a todos los que organizaron el evento que salió fantástico!
Para los que estuvieron en la charla y todavía no lo hicieron, por favor no se olviden de completar la encuesta en http://www.codecamp.com.ar:8080/feedback/.

En la charla nos centramos en el patrón MVVM, específicamente orientado para aplicaciones Silverlight y WPF, ya que utiliza fuertemente conceptos como Data Binding, Commands y Notificaciones. También mostramos otros patrones usados para desacoplar los diferentes conceptos dentro de la capa de presentación como MVC y MVP.

Realizamos una Demo con una aplicación de ejemplo, implementada sin utilizar ningún patrón, y luego la refactoreamos paso a paso para que utilice MVVM.

Como prometimos, pueden bajarse las slides y el código de los siguientes links:

• Slides
• MVVM demo

Muchos preguntaron también por los frameworks que dan soporte para MVVM. Para eso les recomiendo que miren el MVVM Frameworks explorer, que tiene una lista bastante buena y actualizada.

What’s new

In this first drop, you will find 2 new QuickStarts that tackles two of the main concerns of the community: MEF integration and the MVVM pattern.  In this post I’ll cover the MVVM QuickStarts and leave the MEF QuickStarts for the following post.

Basic Model-View-ViewModel Quickstart

The BasicMVVM QuickStarts address the most usual challenges when developing MVVM triads. The QuickStarts demonstrate a POCO scenario,  showing a questionnaire with different question types that must be completed. By design, the QuickStarts targets Silverlight only (no WPF  version) and does not use any of the Prism library .

(Styling is WIP )

Some of the challenges demonstrated in this quickstart are:

• INotifyPropertyChange implementation

Every ViewModel needs to notify the view when its bounded properties change. For that purpose, Silverlight provides the INotifyPropertyChange interface. The QuickStarts provides the ViewModelBase class, a base implementation that provides useful methods for property notification:

protected virtual void RaisePropertyChanged(string propertyName); 
protected void RaisePropertyChanged(params string[] propertyNames);
protected void RaisePropertyChanged<T>(Expression<Func<T>> propertyExpresssion);   

Besides the classic RaisePropertyChaged method that received the name of the property that has changed, it also provides an interesting overload that accepts a lambda expression, which allows to write property notification in the ViewModel as follows:

this.RaisePropertyChanged(() => this.Name);

• Validation

Another typical challenge is notifying the View when binding errors occur. For that reason, Silverlight provides two interfaces: INotifyDataErrorInfo and IDataErrorInfo. The ViewModelBase class provides a base implementation for the INotifyDataErrorInfo that can be leveraged from the ViewModels:

public virtual bool HasErrors;
public virtual IEnumerable GetErrors(string propertyName);
protected void SetError(string propertyName, string error);
protected void SetError<T>(Expression<Func<T>> propertyExpresssion, string error);
protected void ClearErrors(string propertyName);
protected void ClearErrors<T>(Expression<Func<T>> propertyExpresssion);
protected void SetErrors(string propertyName, List<string> propertyErrors);
protected void SetErrors<T>(Expression<Func<T>> propertyExpresssion, List<string> propertyErrors);
protected virtual void RaiseErrorsChanged(string propertyName);
protected virtual void RaiseErrorsChanged<T>(Expression<Func<T>> propertyExpresssion);

The quickstart demonstrate how the domain model validation is done on the Model (for example the NumericQuestions). Formatting validation is performed on the ViewModels (for example the Age property in the questionnaire) to customize error messages (if you don’t need customization of error messages you can just rely on Silverlight binding errors).

• Transitions/Animations triggered by the ViewModel

Animations are typically triggered by the UI (e.g. when clicking a button). But some times animations must start based on a change in the ViewModel. The challenge in those cases is how to start the animation when the ViewModel doesn’t have a reference to the View. The quickstart demonstrate how to use Triggers and the VisualStateManager bound to a property in the ViewModel to accomplish that requirement:

<i:Interaction.Triggers>
    <ei:DataTrigger Binding=“{Binding CurrentState}“ Value=“Normal“>
        <ei:GoToStateAction StateName=“Normal“/>
    </ei:DataTrigger>
    <ei:DataTrigger Binding=“{Binding CurrentState}“ Value=“Submitting“>
        <ei:GoToStateAction StateName=“Submitting“/>
    </ei:DataTrigger>
</i:Interaction.Triggers>

 

• Usage of hierarchical ViewModels (ViewModels that contain other ViewModels)

Each of the questions in the questionnaire has their own ViewModel, and the QuestionnaireViewModel has a property of type List<QuestionViewModel> Questions.  In the QuestionnaireView, the questions’ view models are bound  to the corresponding view DataTemplate. This is achieved by the newly developed  DataTemplateSelector (WPF provides a mechanisms for doing this out-of-the-box, Silverlight does not.)

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Infra:DataTemplateSelector Content=“{Binding}“ HorizontalContentAlignment=“Stretch“ IsTabStop=“False“>
            <Infra:DataTemplateSelector.Resources>
                <DataTemplate x:Key=“OpenQuestionViewModel“>
                    <!– View for OpenQuestionViewModel –>
                </DataTemplate>

                <DataTemplate x:Key=“MultipleSelectionQuestionViewModel“>
                    <!– View for MultipleSelectionQuestionViewModel –>
                </DataTemplate>
                <DataTemplate x:Key=“NumericQuestionViewModel“>
                    <!– View for NumericQuestionViewModel –>
                </DataTemplate>
            </Infra:DataTemplateSelector.Resources>
        </Infra:DataTemplateSelector>
    </DataTemplate>
</ItemsControl.ItemTemplate>

• Use of Blend Behaviors (Commanding, Data Template Selection, Binding, Validation)

Finally, the quickstart demonstrate the usage of several new Behaviors to simplify the binding between the View and the ViewModel.  Some of these behaviors are:

• CallExecuteMethod: This behavior is similar to binding to a command, but removes the need to explicitly instantiate a Command in the ViewModel. You can specify the method to execute and a CanExecute property:

                         <Behaviors:CallExecuteMethodAction TargetObject=”{Binding}” ExecuteMethodName=”Submit” CanExecutePropertyName=”CanSubmit”/>

• UpdateTextBindingOnPropertyChanged: This behavior updates the binding every time the text property changes on a TextBox. This can be done in WPF without out-of-the-box behaviors , but is not available in Silverlight yet.

<TextBox Text=”{Binding ResponseText, Mode=TwoWay, UpdateSourceTrigger=Explicit}”>
            <i:Interaction.Behaviors>
                <Behaviors:UpdateTextBindingOnPropertyChanged/>
            </i:Interaction.Behaviors>
</TextBox>

• ValidateObject: This behavior updates the ValidationSummary property for the ValidationSummary controls whenever an error occurs on its source.

         <sdk:ValidationSummary >
            <i:Interaction.Behaviors>
                <Behaviors:ValidateObject SourceObject=”{Binding}”/>
            </i:Interaction.Behaviors>
        </sdk:ValidationSummary>

All these leverage Blend’s Behavior<T> class, so they can also be used with drag&drop from Blend.

This is the first drop of the new version of prism, so any feedback will be really appreciated from the p&p team and will help improving future drops. Remember to leave your feedback in the codeplex site.

Your feedback is needed to help prioritize the potential features of Prism (previously called Composite Application Guidance for WPF and Silverlight) will include in its next version. Completing the survey should take you 5-10 minutes.

I will explain in this post how to install and use the Prism MVVM templates. If you are not familiar with the MVVM pattern the following links are a good staring point:

• Model View ViewModel (MVVM) in the prism Knowledge Base.
• WPF Apps With The Model-View-ViewModel Design Pattern
• Model-View-ViewModel In Silverlight 2 Apps
• DataModel-View-ViewModel pattern: 1
• WPF patterns : MVC, MVP or MVVM or…?

These MVVM templates aim to help you facilitate the creation of views with presenters when developing prism applications. Then we disscuss briefly some implementation considetarions.
David Hill has recently posted the Prism Quick Start Kit which includes project templates for creating prism Modules and Shell, both for WPF and Silverlight. Damian has created code snippets for easing the creation of Commands with attached Behaviors.

How-To: Install the Prism MVVM Templates

Installing the templates it’s really simple!

1. Dowloand templates and unzip them into your Visual Studio templates folder. They are C# templates so they go here on my system:
       My Documents\Visual Studio 2008\Templates\ItemTemplates\Visual C#
2. To avoid getting a warning message the first time you use them, you can close Visual Studio and run the following command (as admin) in a Visual Studio Command Prompt window:
       devenv.exe /installvstemplates

That’s all! you should now be able see them in the New Items dialog.

How-To: Use the Prism MVVM Templates

Using the templates it’s also really simple (that’s the idea of using templates after all ).

1. Open any prism application in Visual Studio. (Templates will work in any kind of application, but you will have to reference CAL assemblies).
2. Right click on the project/folder where you want to place your new view and select Add / New Item…The New Item Dialog will appear.
3. Select Prism MVVM or Prism MVVM (with interfaces) from the My Templates category.
4. Click Add.  This will create the View with xaml and code behind, and the ViewModel. If you selected Prism MVVM (with interfaces) template, it will additionally create interfaces for the View and ViewModel (this is highly recommended as it will ease testing).

Great, we have now the new view with it’s corresponding ViewModel.  To show the view you should register it in the appropriate region as usual. For example, using view discovery (if you didn’t used interfaces, you won’t need the first line):

this._container.RegisterType<ICustomersViewModel, CustomersViewModel>();
this._regionManager.RegisterViewWithRegion(RegionNames.ButtomLeftRegion, () => this._container.Resolve<CustomersView>());

Using the above code in David’s Quickstart Solution, you can get the view shown:

Implementation considerations:

You will notice in the implementation of the view and viewModel that:

1. View-First approach is used.
2. Templates can be used in WPF and Silverlight prism applications.
3. The implementation relies on prism, as it inyects the EA to the ViewModel.
4. A property is created in the viewModel, to demostrate databinding in the view.

You can download the templates from here.

You can download and install these templates from David’s blog:

• Prism Quick Start Kit
• Prism Quick Start Kit Update

The Composite Application Guidance for WPF and Silverlight (a.k.a Prism) provides several Quickstarts that demonstrate key concepts of the library and the Stock Trader Reference Implementation which illustrate a real-world scenario. The Prism Quick Start Kit aims to provide the basic structure for prism projects and solutions, easy to understand and make use of the recommended practices.

The Prism Quick Start Kit comes with quick-start solutions, templates for the Shell and module projects and supports both WPF and Silvelright.

Hope you find them useful!

Activate semantic by concrete region implementation (between brackets is the type of control attached to by default):

• SingleActiveRegion (ContentControl): There is a maximum of one active region at a time. This means that activating a view might trigger a deactivation of another view.
  If the region is created with the default adapter (ContentControlRegionAdapter) the active view will also be only one visible, as it is set as the content of the ContentControl.
• AllActiveRegion (ItemsControl): All views that are kept in the region are active. Calling Deactivate on a view will throw an InvalidOperationException. All views are usually visible.
• Region (Selector): This region allows for multiple active and deactive views.
  If created with the default adapter (SelectorRegionAdapter) the active views will be kept in sync with the SelectedItem/SelectedItems of the control. So when calling Activate on a view, you can only select a single active view at a time. By setting the SelectedItems property of a listbox, you can set multiple views to active. All views (active and deactive) are visible.

The RegionActiveAwareBehavior and the IActiveAware interface are very close related to the activate semantic. So for example, even if the IActiveAware interface is implemented in a view, if it is contained in an AllActiveRegion, the view will only be notified of the active state change only once (when added to the region).

Hiding views

Activating and deactivating views is usually confused with it’s visibility. If you deactivate a view, it will only hide it if the region is a SingleActiveRegion. It will throw an exception in AllActiveRegions and it will not hide the view in Regions.

The posibility of hiding views while keeping the view in the region is not implemented out-of-the-box in prism-v2. Hiding view only makes sense in ItemsControl containers, as in other containers views are automatically hidden when they are not active. Hiding views might be particularly helpful, for example if there is a requirement to hide certain TabItems (as deactivating the view won’t hide the tab, and setting Visibility=Hidden in the view won’t hide the tab).

With Damian Schenkelman, we created the following two classes (one for Silverlight and one for WPF) that add extension methods to allow hide/show views in prism-v2 regions (Download links below). WPF methods implements hide/show for all ItemsControl containers while Silverlight methods are only implemented for the TabControl.

· SilverlightRegionExtensions (allow hide views in TabControl regions)

· WPFRegionExtensions (allow hide views in ItemsControl regions)

The aforementioned classes expose the following extension methods for the IRegion interface:

· Hide(string viewName): Hides a view registered with a particular name in the region.

· Hide(object view): Hides the view passed as a parameter.

· Show(string viewName): Shows a view registered with a particular name in the region.

· Show(object view): Shows the view passed as a parameter.

We also created a sample application to show it’s usage and to highlight the difference betwen Add/Remove, Activate/Deactivate, Hide/Show.

You can play with it selecting the tab checkboxes and pressing the action buttons.

Download

We uploaded the WPF and silverlight region extension method to the Prism codeplex site. You can get these classes from RegionExtensions.zip.

You can also downloaded the sample application from Hide Views Sample .

The Problem

I had a WCF service in place. It was working fine with a ASP.NET web app, but when I tried to cunsume it from a Prism-v2 module I got the following exception:

‘System.InvalidOperationException: Could not find default endpoint element that references contract ‘CustomerService.ICustomerService’ in the ServiceModel client configuration section. This might be because no configuration file was found for your application, or because no endpoint element matching this contract could be found in the client element.

I was using the app.config that was generated by the WCF “add service reference” wizard. I checked it’s content but everything was fine.

The solution

Move the app.confing to the Shell project!
In prism modules are loaded dynamically, so they all run in the Shell project context. WCF was not finding my app.config because it was not in the right place.

This will do for simple applications, but most general application already have an app.config with settings. On the other hand, modules should be completely decoupled from the shell. A good way to resolve these issues is to set WCF configuration within the module programatically.

I hope this is useful when consuming WCF Services from Prism Modules.
 

Problem

The main issue is that XBAP applications rely on WPF framework to create the NavigationWindows that will be holding XBAP pages and CAL needs to create the main window on the Bootstrapper (creating instances of NavigationWindows is not allowed in PartialTrust applications).

The first thing that you will  do to convert your WPF application into an XBAP application is changing <Window> for <Page> in you XAMLs. In most scenarios that is practically all you have to do because WPF framework is intelligent enough to create the right environment for the application: If you are using Windows, it just creates a new instance of a window and calls it’s Show method (like you usually do in the CAL’s Bootstrapper). But if you are using Pages, it needs to host pages in NavigationWindows or the Browser.

But, if you are using CAL after changing your Windows for Pages, you will end up commenting the call to the Show Method (pages don’t have a Show method) and setting the starupURI of the application. And that’ were the root of the problem lies: WPF creates an instance of a Page and you are creating another instance in the Bootstrapper. That will mess up things and you will end up loosing references to the CAL’s regions and contentControls.

Solution

Based on Mokosh’s Prism and WPF Browser Application (Xbap) post that shows a good way run Prism v1 solution as XBAPs,  let’s migrate a Prism v2 solution to run as an XBAP application is as follows:

We will start with the HelloWorldDemo.Desktop Quickstart included in Prism v2.

1. Set the shell as the startup page of the application. To do that, open the App.xml file and add StartupUri=”Shell.xaml” to the <Application> element.
   <Application x:Class=“HelloWorld.App”
   xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
   StartupUri=“Shell.xaml“>
     <Application.Resources>
     </Application.Resources>
   </Application>
2. In the App.xaml code behind (App.xaml.cs) remove the OnStartup method. We will add the BootStrapper initialization afterwards.
3. In the Shell.xaml file change the <Window> element for a <Page> element. You should end up with the Shell.xaml code as follows:
   <Page x:Class=“HelloWorld.Shell”
   xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
   xmlns:cal=“http://www.codeplex.com/CompositeWPF”
   Title=“Hello World” Height=“300” Width=“300“>
     <ItemsControlName=“MainRegion” />
   </Page>
4. In the Shell.cs make Shell inherit from Page instead of Window. Ej: public partial class Shell : Page
5. To avoid creating a new instance of the shell, get the one created during the Application startup.  A good place to do that is the Shell constructor.

public Shell()
{
    Bootstrapper bootStrapper = new Bootstrapper();
    bootStrapper.ShellPage = this;
    bootStrapper.Run();

    InitializeComponent();
}

6. Now we will need to add a property to the Bootstrapper class to have a reference to the Shell and  then return it in the CreateShell method. So the complete Bootstrapper code should be:

class Bootstrapper : UnityBootstrapper
{
    private DependencyObject shellPage;
    public DependencyObject ShellPage
    {
        get
        {
            return shellPage;
        }

        set
        {
            shellPage = value;
        }
    }

    protected override DependencyObject CreateShell()
    {
        return ShellPage;
    }

    protected override IModuleCatalog GetModuleCatalog()
    {
        ModuleCatalog catalog = new ModuleCatalog()
            .AddModule(typeof(HelloWorldModule.HelloWorldModule));
        return catalog;
    }
}

7. Press F5 and Enjoy!

Further improvements:

• You can host the XBAP application directly in the browser if you follow these 6 steps proposed by Charles: Converting EXE Projects to XBAPs
• You can take a look at Damian‘s migration of the Reference Implementation and download the XBAP RI: Composite Application Guidance for WPF & Silverlight (Prism v2) Reference Implementation migrated to XBap

Technorati Tags: Patterns and Practices,Composite Application Guidance,WPF,XBAP,Prism,CAL