Saturday, July 13, 2013

WPF busy indicator implementation with Singleton Pattern

What is Singleton pattern ?

Singleton pattern ensure that a class has only one instance and provide a global point of access to that instance. Normally singleton object store data which is common to for all over the application.

Using this pattern now we are going to implement a busy indicator which is going to be a common for your whole WPF application.

Before start the development we need to download  Extended WPF Toolkit and latest Microsoft Prism library and extract those folders to your hard drive. Download links are  :
      Download PRISM

1. Create new WPF project named  by BusyIndicatorExample.

2. Right click on project reference and add the desktop version of  "Microsoft.Practices.Prism.dll" from extracted prism libraries.

3. Now we will implement the singleton class which going to be a data context for our WPF BusyIndictor controller. To do that right click on project  and create new class called BusyIndicatorManager. Implement the class as bellow.

using Microsoft.Practices.Prism.ViewModel;
using System.Collections.Generic;
using System.Linq;

namespace BusyIndicatorExample
{
    public class BusyIndicatorManager : NotificationObject
    {
        #region Membervariables

        private Dictionary<int, string> busyParameters;

        #endregion

        #region Constructor

        private BusyIndicatorManager()
        {
            isBusy = false;
            message = string.Empty;
            busyParameters = new Dictionary<int, string>();
        }

        #endregion

        #region Singleton Implementation

        private static BusyIndicatorManager instance;
        private static object syncRoot = new object();

        public static BusyIndicatorManager Instance
        {
            get
            {
                lock (syncRoot)
                {
                    if (instance == null)
                    {
                        instance = new BusyIndicatorManager();
                    }
                    return instance;
                }
            }
        }

        #endregion

        #region Public Properties

        private bool isBusy;
        public bool IsBusy
        {
            get { return isBusy; }
            private set
            {
                isBusy = value;
                RaisePropertyChanged("IsBusy");
            }
        }

        private string message;
        public string Message
        {
            get { return message; }
            private set
            {
                message = value;
                RaisePropertyChanged("Message");
            }
        }

        #endregion

        #region Public Methods

        public void ShowBusy(int id, string busyMessage)
        {
            if (!busyParameters.ContainsKey(id))
            {
                busyParameters.Add(id, busyMessage);
                IsBusy = true;
                Message = busyMessage;
            }
            else
            {
                busyParameters[id] = busyMessage;
                IsBusy = true;
                Message = busyMessage;
            }
        }

        public void CloseBusy(int id)
        {
            if (busyParameters.ContainsKey(id))
                busyParameters.Remove(id);

            if (busyParameters.Count == 0)
            {
                IsBusy = false;
                Message = string.Empty;
            }
            else
            {
                IsBusy = true;
                Message = busyParameters.Last().Value;
            }
        }

        #endregion
    }
}

Above this singleton implementation you can see that there are two public properties called IsBusy and Message , So they are the going to be bind with WPF busy indicator control. Also you can call ShowBusy and CloseBusy methods from anywhere in you application using singleton instance.

4. Now we will implement the our view for busy indicator. First add "Xceed.Wpf.Toolkit.dll" file as a reference from extracted Extended WPF Toolkit folder.


5. Now we will implement our MainPage.xaml view as bellow.

<Window x:Class="BusyIndicatorExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Name="btnRunBusy" Height="30" Width="150" Content="Run BusyIndicator" Click="btnRunBusy_Click" Margin="0,0,10,0"/>
            <Button Name="btnCloseBusy" Height="30" Width="150" Content="Close BusyIndicator" Click="btnCloseBusy_Click"/>
        </StackPanel>
        
        <xctk:BusyIndicator Grid.Row="1" Name="busyIndicator" IsBusy="{Binding IsBusy}" BusyContent="{Binding Message}">
            <Grid>
                

            </Grid>
        </xctk:BusyIndicator>
    </Grid>
</Window>

6. Now go to MainWindow.xaml.cs and modify the class implementation as bellow.

In class constructor we assign busy indicator DataContext as singleton instance of BusyIndicatorManager. 

7. Now Run the application and click on Run BusyIndicator button and then busy indicator will visible in our application.


Here we call the ShowBusy method which is implemented in BusyIndicatorManager class, using it's singleton instance. Inside the method we will set IsBusy property into true and Message property with message which are  bind to the BusyIndicator controller in our MainPage.xaml.

8. Now click on the "Close BusyIndicator" button and then running  busy indicator will disappear from the application. Because here we call the CloseBusy method which is implemented in BusyIndicatorManager class using it's singleton instance and Inside the method we set IsBusy property into "False".


Happy Coding!!!!!!!!!!!!!!!!!!!



Sunday, June 30, 2013

Microsoft PRISM Modularity with WPF

Download Source Code Here

PRISM framework is specially target  for large scale application (But you can use this for small scale application too. But complexity is high).You can use prism framework  with WPF, Silverlight, Windows Phone and also with Windows store app (You have to use PRISM for windows run time ).

Main  4 Features of Prism.
    1. Modularity : You can developed the application as modules using class libarary and get all of them      togther during the run time.
    2. Region : This concept is similar to the ASP.NET master pages. Here you can define place holders and you can dynamically load view into these regions(place holders).
    3. Command : Prism command are implement using ICommand interface. Prims has inbuilt command called DelegateCommand. You can implement this DelegateCommand in you view -model and then You can bind the command with view (Nomarly with button).
    4. Event : To communicate between loosely couple component we can use event. You can use PRISM EventAggregator to these type of communication.

Why you should use PRISM ?
Just imagine that you want to develop application which is targeting HR handing,Financial handling ,etc. Without using framework like PRISM you can develop this application.No issue. But if you want to develop this application as  
 1. Separate modules.
 2. Module should be loosely couple with each other.
 3. Support for testability.
 4. Support for maintainability.
 5. Support for extendibility.
Then you should use framework like PRISM.Because that's what prism framework designed and developed for by Microsoft.

Before Jump into the development I assume that you have fair knowledge of following technologies.

1.  WPF
2.  MVVM design pattern
3.  Dependency injection design pattern.

Also you need to download  the Latest version of prism framework from Microsoft. After download you can extract libraries into a separate folder.

Our Example

Business Scenario :

Lets imagine our application has two main function.
  1. Display employee information
  2. Display product information

To demonstrate the PRISM capabilities I'm going to implement these two function in two different modules.Also For Implement the business Logic I will implement the another module called repository module.

So Let's start the development now.

1. First Open the VS2012 and create new WPF project and name it as PrimsModulityWithWPF.
2. Delete the MainPage.xaml file from the project.
3. Add following references from Prism desktop folder (...\PRISM4.1\Bin\Desktop).

  • Microsoft.Practices.Prism.dll
  • Microsoft.Practices.Prism.MefExtensions.dll
  • Microsoft.Practices.ServiceLocation.dll
  • Microsoft.Practices.Prism.Interactivity.dll
4. Also add new reference called System.CompenentModel.Composition.dll from  Framework Assemblies.















5. Now add new WPF Widdow to the project named as Shell.
6. Now your new project structure will be as bellow.



6. Now add new C# class and named it as Bootstrapper
7.Add new two class Libraries to your project and named them as EmployeeModule and .ProductModule and delete Class1.cs file from both project.
8.For both newly added class libraries add the following references.

  • Microsoft.Practices.Prism.dll  (  from Prism desktop folder)
  • Microsoft.Practices.Prism.MefExtensions.dll (  from Prism desktop folder)
  • Microsoft.Practices.ServiceLocation.dll (  from Prism desktop folder)
  • Microsoft.Practices.Prism.Interactivity.dll (  from Prism desktop folder)
  • System.CompenentModel.Composition.dll (From Framework Assemblies.)
  • System.Xaml (From Framework Assemblies.)
9. Add another class Library to the solution and named it as Repository.Add the Following above references to it except the System.Xaml .
10. Add new class called EmployeeModule.cs to EmployeeModule and implement this class as below.


To import module to our main application we need to create our module exportable. So we need to implement our module class as above. Module as should implement using IModule interface which has only one method called Initialize. This method used the Initialize your module before the loading. For example you can specify the view  to navigate during the initial loading of your module. We will discuss more about this soon.

Using ModuleExport attribute ([ModuleExport(typeof(ProductModule))]) We make this module as exportable.

11.Now we want to implement the module class for EmployeeModule and Repository module.First write click on EmployeeModule and add new class called EmployeeModule.cs and implement it as below.

Now right click on Repository class library and add new class called RepositoryModule and Implement it as below.



12. Now again we will move to out main project (PrimsModulityWithWPF) and we will implement the our Bootstrapper class and Shell.

Responsibility of Boostrapper : 

A Bootstrapper is the one who has responsibility to initialization of your application which is implemented using prism library.
Also you want to need that PRISM provide two dependency container libraries called MEF and Unity. For MEF container PRISM has already implemented Bootstrapper class called MefBootstrapper. Also for Unity container PRISM as already implemented bootstrapper class called UnityBootstrapper.

In our example we use dependency injection container as MEF. So we need to implement  our boostrapper class derive from MefBootstrapper.

Before jump into bootstrapper implementation  right click on References of PrimsModulityWithWPF project and add the EmployeeModule,ProductModule and Repository as solution references.

Now implement our Boostrapper class as below.

Here we have to override some of virtual methods in which are in MefBootstrapper class


  • CreateShell
The CreateShell method allows a developer to specify the top-level Window for Prism application.Shell is usually the MainWindow of your application. (Ref : PRISM 4.1 Documentation)
  • InitializeShell
After you create a shell, you may need to run initialization steps to ensure that the shell is ready to be displayed. Depending on whether you are writing a WPF or Silverlight application, the InitializeShell method implementations will vary.
For WPF applications, you will create the shell application object and set it as the application's main window, as shown here (from the Modularity QuickStarts for WPF).
protected override void InitializeShell()
{
    Application.Current.MainWindow = Shell;
    Application.Current.MainWindow.Show();
}
 (Ref : PRISM 4.1 Documentation)
  • ConfigureAggregateCatalog
This method allows you to add type registration to the AggregateCatalog imperatively.For example, the our Bootstrapper registers the current assembly,EmployeeModule,ProductModule and Repository. In other word we should register the all the module that we use in our application inside this method.Without registering we can not use these libraries inside our application. Also you can register the Module using App.config file if you are using WPF.

13. We have completed implementation of our Bootstrapper class now. So now we will implement our shell view as bellow.



Also we need to create this shell view as exportable. To do that go to Shell.xaml.cs file and add the [Export] attribute as bellow.



14. Now we can  run and test our application working as expected or not. Before that we need to perform two extra steps more. For all the modules (Except our main module) , Properties of prism libraries "Copy Local" attribute should be set as "False". Other wise our application throw an assembly conflict exception.

Right click on  Microsoft.Practices.Prism which is in EmployeeModule class library and select the Properties  and set "Copy Local" attribute as false.

 Follow these step for all other Prism libraries (Microsoft.Practices.Prism.MefExtensions, Microsoft.Practices.ServiceLocation,Microsoft.Practices.Prism.Interactivity). And do the same steps for all other class libraries (EmployeeModule,Repository).

Now open you App.xaml file and delete StartupUri part from it. After that your App.xaml file should be like this.

Now go to the App.xaml.cs class and override OnStartup method as bellow.

Now rebuild your application and run it. if you complete above steps correctly you can see the empty shell like below.


15. we can implement our modules one by one. First we will implement the out Repository module which contain the all the business logic.

First we will implement the our model class for Employee and Product. Right click on  Repository module and create new folder called Model.

Create new class called "Employee" and implement it as bellow.



Create new class called "Product" and implement it as bellow.


Now we will implement the Interfaces for EmployeeRepository class and ProductRepository class. Right click on Repository module and create new folder called Repository and then right click on Repository folder and create new folder called Interfaces. Now create two interfaces named by IEmployeeRepository and IProducRepository and implement interface method definition as bellow.

IEmployeeRepository



IProductRepository


Now right click on the Repository folder and create new class called EmployeeRepository and implement the class using IEmployeeRepository interface as below.


Here you can  see [Export] attribute and it enable the Exportability of the EmployeeRepository (Since we use type as IEmployeeRepository  interface and since our class derived from same interface it enable exportability for EmployeeRepository class).

Now again right click on the Repository folder and create new class call ProductRepository and implement the class definition as below.


Our repository module implementation has completed now.

16. Now we will implement out EmployeeModule. Here what we going to do is, we call the GetAllEMployee methods which is in Repository module  and get the employee list and we will display the employee list in Shell's "EmployeeRegion"

Also I assume that  you have experience with MVVM design pattern and also XAML data binding.

First select the EmployeeModule class library.Right click on References and add Repository project as solution reference.

After that create two folders called View and ViewModel inside EmployeeModule class library.

Right click on the ViewModel class and create new class called EmployeeViewModel and implement the class as below.



You can see that EmployeeViewModel exportable because of [Export] attribute. Also look at the constructor and there we have use the [ImportingConstructor] attribute.By using this we can import the parameters to the constructor. Here we import the IEmployeeRepository interface here. (If you look at the EmployeeRepository class you can see that it is Exportable. So we can import it from our EmployeeViewModel constructor.). Also You can see that in constructor we used dependency injection here.It helps us to build loosely couple testable application.

Now right click on View folder and create new WPF usercontrol. Implement the view as below.


Now open the EmployeeView.xmal.cs  and implement the class as below.


 Now open the EmployeeModule class and  add extra line of code as below.



Here we import the IRegionManager iterface using [Import] attribute and we use the import object to Navigation. (or View loading).

When EmployeeModule loading it first call the Initialize method. Inside method we  load our ProductView into ProductRegion which is in Shell. For that we call the RequestNavigate method.

17. Now we will implement our ProductModule.. First select the ProductModule class library.Right click on References and add Repository project as solution reference.

Then create two folder called View and ViewModel on ProductModule class library.

Right click on the ViewModel folder and create new class called ProductViewModel. Implement the class as below.


Now right click on the View folder and create new WPF usercontrol called ProductView. Implement it as below.


Now go to ProductView.xmal.cs and modified the class as below.



Now open the ProductModule.cs and modified the class as below.


Now we have completed our development.So rebuilt and run your application. If you are following steps correctly you will see the following window.



Happy Coding!!!!!!!!!!!!!!!!!!

Saturday, March 9, 2013

C# Programming for beginners: Reactive Extension with Silverlight

C# Programming for beginners: Reactive Extension with Silverlight: What is RE? Reactive extension is a framework that support to the asynchronous and event programming using Observable collection. Befo...

Reactive Extension with Silverlight


What is RE?
Reactive extension is a framework that support to the asynchronous and event programming using Observable collection.
Before start you need to download and install reactive extension framework to your computer. You can download installation using following URL.
What we are going to do?
In Silverlight when we are calling to WCF method which is in the server side we should call it as asynchronous. Normally we cannot call this WCF method as normal method. First we should have to register method Completed Event and then we should call to the WFC method asynchronously. Then inside the Method completed method we can read the WCF method return values as following example.

        private void GetEmployeesU()
        {
            client.GetEmployeesCompleted += client_GetEmployeesCompleted;
            client.GetEmployeesAsync();
        }

        void client_GetEmployeesCompleted(object sender, GetEmployeesCompletedEventArgs e)
        {
            List<Employee> employees = e.Result;
           
        }
But thing is we cannot use this as normal method call in C#.  But using RE (Reactive Extension) we can perform this task as bellow example.
Now Create a new Silverlight project called ExDemo and add the following reference to the Silverlight project.
·         System.Reactive.Core
·         System.Reactive.Interface
·         System.Reactive.Linq
·         System.Reactive.Providers
·         System.Reactive.Windows.Threading
To the web project add the Silverlight enable WCF file called ReDemoService and implement the following method on that service class.
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ReDemoService
    {
        [OperationContract]
        public List<Employee> GetEmployees()
        {
            var employees = new List<Employee>
            {
                new Employee(){ID=1,Name="Niluka Dilani",Email="abc@hotmail.com"},
                new Employee(){ID=2,Name="Chathura Achini",Email="cde@hotmail.com"},
                new Employee(){ID=3,Name="Florina Breban",Email="fgh@hotmail.com"}
            };

            return employees;
        }
    }

    [DataContract]
    public class Employee
    {
        [DataMember]
        public int ID { get; set; }
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public string Email { get; set; }
    }
Add WCF service reference to the Silverlight project and name it as ReDemoService and in service reference setting set the Collection type as Generic List and build the Silverlight project.
Add new class called ServiceManager into the Silverlight project and implement that class as bellow.
    public class ServiceManager
    {
        private ReDemoServiceClient client;

        public ServiceManager()
        {
            client = new ReDemoServiceClient();
        }
        public IObservable<List<Employee>> GetEmployees()
        {
            var employees = from completed in Observable.Create<GetEmployeesCompletedEventArgs>(observer=>
                {
                    var subcription = Observable.FromEventPattern<GetEmployeesCompletedEventArgs>(client, "GetEmployeesCompleted")
                        .Take(1)
                        .Select(e => e.EventArgs)
                        .Subscribe(x =>
                            {
                                if (x.Error != null)
                                {
                                    observer.OnError(x.Error);
                                    return;
                                }
                                observer.OnNext(x);
                            }
                            , observer.OnError, observer.OnCompleted);
                    client.GetEmployeesAsync();
                    return subcription;
                })
                            select completed.Result; ;
            return employees.ObserveOnDispatcher();
        }
    }
Here what we do is using reactive extensions we call our WCF method called GetEmployees and this method will return the IObservable Employee list. Here this method we can consider as normal C# method call.
Now go to the your MainPage.xmal file and design your UI as bellow.
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="REDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Width="200" Height="26" Content="Load Employee" Click="Button_Click"/>
        <sdk:DataGrid x:Name="dgvEmployee" AutoGenerateColumns="False" Grid.Row="1">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Binding="{Binding ID}" Header="ID" Width="60"/>
                <sdk:DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="200"/>
                <sdk:DataGridTextColumn Binding="{Binding Email}" Header="Email" Width="200"/>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>
Inside the Button_Click event implement the following code lines.
    public partial class MainPage : UserControl
    {
        private ServiceManager service;
        public MainPage()
        {
            InitializeComponent();
            service = new ServiceManager();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var result = service.GetEmployees();
            result.Subscribe(x =>
                {
                    dgvEmployee.ItemsSource = x;
                },
                er =>
                {
                },
                    () =>
                    {
                    });
        }
    }
Here in inside the Button_Click event what is happening is , first we call the GetEmployees methods which is implemented in the ServiceManager Class and it will return the IObservable Employee List .Here we will be assigned the return value as result. Since result type is IObservable, we need to call to subscribe method to read .Actually here result which +is belongs to IObservable type will act as data source and our subscribe method will subscribe the Employee object list.