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!

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.

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 DocumentsVisual Studio 2008TemplatesItemTemplatesVisual 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.
 

(more details | PDF version)

Recently, I have been notified that the Japanese version is also available:

This is great news – way to go patterns & practices team!

Hands On Lab for free

One of the things I want to highlight is that, apart from having 300 printed pages (!), the documentation includes a Hands on Lab. What I like about Hands on Labs is that they provide a guided and integrated learning process through practical exercises surrounded by background technical content.

The Lab is quite hidden in the table of contents; you can find it under the node Composite Application Guidance for WPF Hands On Lab in the table of contents.

Covered Topics

This lab covers the basic concepts of the Composite Application Guidance for WPF as you build a simple Hello World application. The following is a list of questions we tried to address:

• What an application based on the Composite Application Library is
• What are the Composite Application Library assemblies, what they contain
• What is the Shell project and the Shell window
• What is the Bootstrapper, and what is the UnityBootstrapper class and how it is used
• What is a container and how it relates to the dependency injection pattern
• What is a service
• What is a region
• What type of regions are supported out-of-the-box by the Composite Application Library
• What is a module
• What is the module initializer class
• What folders a module typically contains
• What are the different ways of loading modules
• What is the StaticModuleEnumerator class and how it is used
• What is a view
• What is the Region manager and how to use it to add views and named views

Topics not Covered

To keep the Lab simple (and to ship on time!), we consciously kept some topics out of the Lab. However, you can find information about those topics across the documentation. The following list presents some of the topics not covered in the Lab and links to related resources:

• Commands
• Decoupled Events
• How to dynamically load modules
• Scoped Regions.
• Presentation Model and Supervising Controller patterns
• How to unit test an application based on the Composite Application Library. See the source code in the Stock Trader Reference Implementation or in the QuickStarts.

Feedback Welcome

We didn’t include Hands On Labs in previous deliverables like the Smart Client Software Factory and the Web Client Software Factory, so we are experimenting a new approach here (we did released Hands on Lab as separate downloads some time after the official releases, though). I personally think that including a Hands On Lab within the initial package will help users with the learning process and adoption, but I’m excited about reading your comments.

Do you like the lab? Is it useful? Would you recommend it to your colleagues and/or customers? It is great to receive feedback like this, but negative feedback is welcome too!

The Prism team.
1st picture: Redmond, WA, USA. 2nd picture: Buenos Aires, Argentina. 3rd picture: India

• Windows Presentation Foundation interoperability CAB extensions  and View with presenter recipe (don’t miss this post from Miguel Saez for more details)
• Offline application blocks and recipes; the application blocks support asynchronous calls to WCF web services.
• Richer ClickOnce Deployment capabilities
• Enhanced guidance packages which includes code generation Visual Basic .NET 2005 (don’t miss this post from Juan Arguello for more details)
• Improved installation with a new dependency checker

You can get it from the Microsoft Downloads Center.

One of the things we added at the very end of the project, is a QuickStart that demonstrates how to integrate the Disconnected Service Agent (DSA) and the Connection Monitor (CM) Application Blocks with a Composite UI Application Block application. Although we had to postpone a little bit the release date to include this QuickStart, we strongly believe that it will help you better understand how to consume these blocks from your smart client application.

The Offline Application Blocks demonstrated in the QuickStart

In just a few words (see the Help for detailed information), the Disconnected Service Agent Application Block allows you to invoke web services asynchronously from occasionally connected smart clients. This means that you can, for example, enqueue a request while the application is offline and have it automatically dispatched by the block when connectivity is detected. When the request is dispatched, a callback will be invoked for your application to process the response.

The Connection Monitor Application Block basically monitors connectivity status. As a developer, you can define what set of services you need to reach from your smart client application and the block will notify you whenever changes in the client’s computer affect the ability to reach those services.

Overview

The QuickStart basically shows a master-details view. The Shell form displays a list of restaurants in the left and their corresponding menu items in the right. To retrieve the data (restaurants and menu items lists), a WCF service is consumed:

If you launch the QuickStart without having an Internet connection available, the application will enqueue the request that will retrieve the restaurants list, and will display an Offline status indicator.

As soon as you go online, the restaurants list will be loaded and the connectivity status indicator will be updated:

If you click a restaurant, you will see the menu items list loaded in the right. But if the Internet connection was dropped, you will see a message saying that you must be online to retrieve the menu items list:

Now suppose you go online again, but the web service now is failing or has been shut down (you can close the WCF host to test this scenario). The application will handle the error and ask the user to try again later:

Retrieving data from a remote service is an expensive task and might take a while. Therefore the QuickStart displays a progress bar when a call to a the web service is performed:

What can I do next?

Download the factory and start playing with it!