Showing posts with label MVVM. Show all posts
Showing posts with label MVVM. Show all posts

Thursday, February 26, 2015

MethMvvm Visual Studio extention for C Sharp developers


  • meth - public method
  • methp - private method
  • propmvvm - mvvm property
 Features & Benefits
This will enable you to create methods in C# easily with double tap. And also enabled to crate MVVM properties easily. to do thet you have to create PropertyChange event . as follows,

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public event PropertyChangedEventHandler PropertyChanged;
 
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }

CodePlex Project and Download Link

Friday, February 6, 2015

Prism MVVM pattern with Applcaition development

Prism is one of the design patterns which defined by Microsoft Patterns and Practices team for building composite Applications in C# , XAML (WPF,Store Applications etc ) .

Why MVVM is not enough ?

When we creating application with MVVM there is few questions and practices we need to figure out. 
  • Should I use Prism to provide support for MVVM?
  • Should I use a dependency injection container?
    • Which dependency injection container should I use?
    • When is it appropriate to register and resolve components with a dependency injection container?
    • Should a component's lifetime be managed by the container?
  • Should the app construct views or view models first?
  • How should I connect view models to views?
    • Should I use XAML or code-behind to set the view's DataContext property?
    • Should I use a view model locator object?
    • Should I use an attached property to automatically connect view models to views?
    • Should I use a convention-based approach?
  • Should I expose commands from my view models?
  • Should I use behaviors in my views?
  • Should I include design time data support in my views?
  • Do I need to support a view model hierarchy?
 (reference https://msdn.microsoft.com/en-us/library/windows/apps/xx130657.aspx )

Why Prism?

Prism contains wire frame which can help to accelerate application development in  MVVM and It already contains commonly required core features in application development.


Let's Start Coding 


Here we are going to create windows store application using Prism

1. Create new windows store application project (Blank application)
2. Go to package manager console or manage nuget packages and install prism nuget to the application

 3. Now starts coding . Here we are using MVVM and I create few folders to isolate resources in the project such as
  • ViewModel - for ViewModel
  • Model - for Model
  • Controles - for BaseControls
  • View - for XAML pages 
  • Enum - for enumerations
  • Interfaces - for Interfaces 
and then put MainPage.xaml  in to teh View Folder (drag and drop)

Now my project like this


















 Code for prism
 Now we have to convert our application to prism
1. App.XAML and App.XAML.cs

<prism:MvvmAppBase
    x:Class="SamplePrism.App"
    xmlns:prism="using:Microsoft.Practices.Prism.Mvvm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SamplePrism">
 
</prism:MvvmAppBase> 
 
 
sealed partial class App : MvvmAppBase
   {
       public App()
       {
           this.InitializeComponent();
       }
 
       protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
       {
          //Main is the name of view i need to navigate 
           this.NavigationService.Navigate("Main", null);
 
           return Task.FromResult<object>(null);
       }
   } 


2. Then create PageBase in controls  from Prism MVVM

public abstract partial class PageBase: Page,IView
   {
   } 
3. Then Use this page base in our Views, xaml

 Change MainPage.xaml and MainPage.xaml.cs as  follows
<controls:PageBase
    x:Class="SamplePrism.Views.MainPage"
    xmlns:prism="using:Microsoft.Practices.Prism.Mvvm"
    xmlns:controls="using:SamplePrism.Controls"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SamplePrism.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    prism:ViewModelLocator.AutoWireViewModel="True"
    xmlns:designtime="using:SamplePrism.DesignTimeViewModel"
    mc:Ignorable="d">

public sealed partial class MainPage : PageBase
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }

4. In here I'm craeting Interface to keep the properties of MainPage But this is optional. You can jsut implement the ViewModel without this interface


Here is My interface


public interface IMainPageViewModel
   {
       string Title { get; set; }
   }


5. Lets Starts MainPageViewModel

public class MainPageViewModel : ViewModel, IMainPageViewModel
   {
       string _Title = default(string);
       public string Title { get { return _Title; } set { SetProperty(ref _Title, value); } }
 
       public override void OnNavigatedTo(object navigationParameter, NavigationMode navigationMode, Dictionary<string, object> viewModelState)
       {
           this.Title = "Hello prism";
       }
   }

With prism MVVM it conains basic funtions in store app such like OnNavigatedTo , OnNavigatedFrom etc. You can directly use them inside the ViewModel 

Run and Enjoy the Prism.

It is really easy to build in complex applications in enterprise level. even if you  not like Prism code in specific scenario you can switch with your old MVVM too inside the same project










Full Code 
http://bit.ly/1DL68OI







Sunday, January 18, 2015

Working in designtime with Data in MVVM

If we develop applications ( XAML based) we have a problem with see the data in design view. Every application become successful when its interface is attractive. If our application is based on internet or any other computational task there is difficulty on make Interfaces without running the application real time. Here is solution for it

Use design time data binding which already with the xaml based application 

Today we going to develop the windows 8.1 store application. ( This is same with any XAML based Application )

1. Create Windows 8.1 store application form the Visual studio. (I named it as DesignTimedata )
2. Create ViewModel to bind the run time data , In following here is My MainViewModel.cs

With this example we are not going to the use internet or other tasks .therefore just hard corded the values in constructor 

namespace DesignTimeData.Runtime
{
    public class MainViewModel:INotifyPropertyChanged
    {
 
        private string _Title { get; set; }
        public string Title
        {
            get { return _Title; }
            set
            {
                _Title = value;
                OnPropertyChanged("Title");
            }
        }
 
        private string _Description { get; set; }
        public string Description
        {
            get { return _Description; }
            set
            {
                _Description = value;
                OnPropertyChanged("Description");
            }
        }
 
 
 
        public MainViewModel()
        {
        // Hard coded runtime data
            this._Title = "Title in Run time";
            this._Description = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.";
        }
 
        // Create the OnPropertyChanged method to raise the event 
        // Use in MVVM
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }
}


2. Then bind the ViewModel to the View with relevant tags.
You can use Singleton or Page Resource binding . In here Im using Bind the ViewModel to the Page in XAML . It gives me intellisense in XAML .

Here is my MainPage.xaml

<Page
    x:Class="DesignTimeData.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DesignTimeData"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:runtime="using:DesignTimeData.Runtime"
    mc:Ignorable="d">
    
    <Page.DataContext>
        <runtime:MainViewModel/>
    </Page.DataContext>
 
3 .Then Create New Class which have exact name of your view model. Better to use different namespace / folder . In this case It is MainViewModel 
Here is my design time ViewModel. It will contains all test data which displayed in design view in visual studio


namespace DesignTimeData.DesignTimedata
{
    public class MainViewModel
    {
        public string Title { get { return "DesignTime Title"; } }
 
        public string Description { get { return "Design time description"; } }
    }
} 

4. Then lets bind the design time data into the design (xaml) . In here there is always tag like this
      mc:Ignorable="d" 
with every page. something defines under this tag will not be displayed in the runtime. then this is the one that we need to use.

With this d we can define all the properties which page have and change them. but none of them are effecting the real application .

Lets bind the ViewModel to the page and use it with design time . Here is my full page

<Page
    x:Class="DesignTimeData.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DesignTimeData"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:desgn="using:DesignTimeData.DesignTimedata"
    xmlns:runtime="using:DesignTimeData.Runtime"
    mc:Ignorable="d">
    
    <Page.DataContext>
        <runtime:MainViewModel/>
    </Page.DataContext>
    
    <d:Page.DataContext>
        <desgn:MainViewModel />
    </d:Page.DataContext>
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Margin="100,150,0,0">
            <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="{Binding Title}"/>
            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding Description}"/>
        </StackPanel>
    </Grid>
</Page>

Now we can see the vaues that we put to test the Application UI and make any changes to it.














Here is runtime result of the app















Enjoy







Full Code 
http://bit.ly/1xiJ3yZ

 

Monday, September 15, 2014

Work with Async

Asynchronous Programming

If you are working with applications such as windows store and Windows Phone applications you may be found lot of functions that with Async keyword. Why Async?
We need async because when working with applications that interact with network (web, local network) , database, Files and reading hardware in the device are much more slower than the usual execution. Because of it communication bottlenecks are occur.

To avoid those communication bottlenecks async is born.

What Async Does ?

Async allows to run those delayed tasks in the background and meanwhile program can do what ever operations that does not depend on the awaited task.
simply,
"With Async Application can continue with other works that doesn’t depend on blocked resource until the blocked task finished"

Asynchronous programming available with .NET framework 4,5 onwards with Visual studio 2012. If you working on visual Studio 2012 without installing any of other libraries you can work on async

Concepts

Task
Task encapsulate all units of works in the async. Task contains following properties

  • State : Running , Finished , Cancelled
  • Result
  • Thrown Exceptions
It will handle each and every exceptions and it throws all exceptions when task is finished.(await finished)


Important

If you really want to implement async methods and use them remember async and await keywords.

async keyword informs the compiler this method need to be handle separately by itself. Await keyword indicate the suspension of relative running async task.

When working with async,
  • Use Async Suffix  | e.g. DownloadAsync
  • Return Task or Task<T> according to situation
  • void for only event handlers  

Example Wpf Code with simple async operation

public partial class MainWindow : Window
  {
      public MainWindow()
      {
          InitializeComponent();
      }
      private void btnNormal_Click(object sender, RoutedEventArgs e)
      {
          resultTxt.Text = getString("sample");
          independentWork();
      }
      private async void btnAsync_Click(object sender, RoutedEventArgs e)
      {
          resultTxt.Text = await getStringAsync();
      }
      /// <summary>
      /// Method with waiting in synchronize way
      /// ///
      /// </summary>
      /// <returns></returns>
      private string getString(string name)
      {
          //Task.Delay(2000);
          Thread.Sleep(2000);
          return "My String";
      }
      /// <summary>
      /// same method calling from async
      /// </summary>
      /// <returns></returns>
      private async Task<string> getStringAsync()
      {
          Task<string> asyncTask = Task.Factory.StartNew(() => getString("sample"));
          independentWork();
          return await asyncTask;
      }
      
      /// <summary>
      /// this work is independent from others
      /// </summary>
      private void independentWork()
      {
          resultTxt.Text += "\n independent work is done ";
      }
  }





Download Sample Code Here

Wednesday, September 10, 2014

Starts with MVVM

With the growth of programming and application development  there are major requrement that emerged the design patterns. Such as MVP(Model View Presentation) and MVC (Model View Controller) are common design patterns that allows developer to isolate codes. Bu the advanced features of XAML such as data biding, data templates, commands and on demand interaction between application and logic's guide world to MVVM (Model View ViewModel)

MVVM basically derived from the MVC design pattern. It clearly  create separation between these MVVM layers more than MVC.














Model contains all abstraction of data  not any logic's behind data. View is contains XAML views still not the logics. Importance is Model and view are not directly inter action with each other.


ViewModel Contains all  business logic's and data bind properties such as Collections. And it will interact with the View and Model. It takes notifications from model and send them to View as well as other way around.

Ex: If new item added to collection in view It automatically notify and update the View without any interaction.

Study Simple MVVM code here










Full Code In Media Fire 
http://bit.ly/MvvMDemo