MVVM (Model-View-ViewModel) হলো একটি জনপ্রিয় আর্কিটেকচারাল প্যাটার্ন, যা বিশেষভাবে WPF (Windows Presentation Foundation), UWP (Universal Windows Platform) এবং Xamarin অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। MVVM প্যাটার্ন UI (User Interface) এবং লজিকের মধ্যে একযোগভাবে কাজ করার জন্য একটি পরিষ্কারভাবে আলাদা এবং মডুলার দৃষ্টিভঙ্গি প্রদান করে। এটি ডেটা এবং UI-এর মধ্যে সঠিক যোগাযোগ এবং রিয়েক্টিভ পরিবর্তনকে সহজতর করে।
MVVM প্যাটার্ন তিনটি মূল উপাদান নিয়ে গঠিত:
- Model: অ্যাপ্লিকেশনের ডেটা এবং ব্যবসায়িক লজিক।
- View: ব্যবহারকারীর ইন্টারফেস, যা UI উপাদান এবং তাদের অবস্থান নির্ধারণ করে।
- ViewModel: View এবং Model এর মধ্যে সেতুবন্ধন, যা ডেটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং পরিচালনা করে।
MVVM-এর মূল উপাদান
১. Model:
Model হলো অ্যাপ্লিকেশনের ডেটা এবং ব্যবসায়িক লজিক। এটি UI থেকে স্বাধীন, এবং ডেটাবেস, ওয়েব সার্ভিস, অথবা অন্য কোনো ডেটা সোর্স থেকে তথ্য সংগ্রহ করে। Model সাধারণত সিস্টেমের যাবতীয় লজিক এবং ডেটা অপারেশনগুলো হ্যান্ডল করে।
২. View:
View হলো UI, যা ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে। এটি ব্যবহারকারীর ইনপুট নেয় এবং ডেটা প্রদর্শন করে, তবে ব্যবসায়িক লজিকের সাথে সম্পর্কিত নয়। View মডেল থেকে ডেটা বাইন্ডিং ব্যবহার করে তথ্য প্রদর্শন করে।
৩. ViewModel:
ViewModel হলো View এবং Model এর মধ্যে মধ্যস্থতা। এটি Model থেকে ডেটা নিয়ে, View-এ প্রদর্শন করার জন্য প্রস্তুত করে। ViewModel ব্যবহারকারীর ইনপুট গ্রহণ করে এবং মডেলের লজিক চালানোর জন্য প্রয়োজনীয় কোড ধারণ করে। ViewModel সাধারণত INotifyPropertyChanged ইন্টারফেস ব্যবহার করে, যা ডেটার পরিবর্তন জানায় এবং View কে আপডেট করে।
MVVM ইমপ্লিমেন্টেশনের ধাপ
ধরা যাক, আমরা একটি সাধারণ অ্যাপ্লিকেশন তৈরি করছি যেখানে ব্যবহারকারী একটি টেক্সট বক্সে নাম লিখে Greet বাটনে ক্লিক করলে একটি বার্তা প্রদর্শিত হবে।
ধাপ ১: Model তৈরি
Model ডেটা এবং ব্যবসায়িক লজিক সংরক্ষণ করে। আমাদের উদাহরণে, Model শুধু ব্যবহারকারীর নাম সংরক্ষণ করবে।
public class PersonModel
{
public string Name { get; set; }
}
ধাপ ২: ViewModel তৈরি
ViewModel হলো View এবং Model এর মধ্যে যোগাযোগের সেতু। এটি ডেটা বাইন্ডিংয়ের মাধ্যমে Model থেকে ডেটা নিয়ে, View-এ উপস্থাপন করার জন্য প্রস্তুত করে। এখানে INotifyPropertyChanged ব্যবহার করা হয়েছে, যাতে ডেটার পরিবর্তন View কে জানানো যায়।
using System.ComponentModel;
public class PersonViewModel : INotifyPropertyChanged
{
private PersonModel _personModel;
public string Name
{
get { return _personModel.Name; }
set
{
if (_personModel.Name != value)
{
_personModel.Name = value;
OnPropertyChanged(nameof(Name));
}
}
}
public PersonViewModel()
{
_personModel = new PersonModel();
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
ধাপ ৩: View তৈরি
View হলো UI, যেখানে ডেটা বাইন্ডিং ব্যবহার করে ViewModel-এর ডেটা দেখানো হয় এবং ব্যবহারকারীর ইনপুট নেওয়া হয়।
<Window x:Class="MVVMExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MVVM Example" Height="200" Width="400">
<Grid>
<TextBox Width="200" Height="30" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}"/>
<Button Content="Greet" Width="100" Height="30" Margin="10,50,10,10" VerticalAlignment="Top" HorizontalAlignment="Left" Command="{Binding GreetCommand}"/>
<TextBlock Name="GreetingMessage" Width="300" Height="30" Margin="10,100,10,10" Text="{Binding GreetingMessage}"/>
</Grid>
</Window>
ধাপ ৪: ViewModel-এ Command এবং Greeting Message যোগ করা
ViewModel-এর মধ্যে আমরা একটি Command তৈরি করি, যা বাটনে ক্লিক করলে একটি গ্রীটিং মেসেজ প্রদান করবে। এছাড়া GreetingMessage প্রপার্টি ব্যবহারকারীর জন্য বার্তা সংরক্ষণ করবে।
using System;
using System.Windows.Input;
public class PersonViewModel : INotifyPropertyChanged
{
private PersonModel _personModel;
private string _greetingMessage;
public string Name
{
get { return _personModel.Name; }
set
{
if (_personModel.Name != value)
{
_personModel.Name = value;
OnPropertyChanged(nameof(Name));
}
}
}
public string GreetingMessage
{
get { return _greetingMessage; }
set
{
if (_greetingMessage != value)
{
_greetingMessage = value;
OnPropertyChanged(nameof(GreetingMessage));
}
}
}
public ICommand GreetCommand { get; set; }
public PersonViewModel()
{
_personModel = new PersonModel();
GreetCommand = new RelayCommand(Greet);
}
private void Greet()
{
GreetingMessage = $"Hello, {Name}!";
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
RelayCommand Implementation:
using System;
using System.Windows.Input;
public class RelayCommand : ICommand
{
private readonly Action _execute;
public RelayCommand(Action execute)
{
_execute = execute;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true; // Always enabled in this simple example
}
public void Execute(object parameter)
{
_execute();
}
}
ধাপ ৫: MainWindow.xaml.cs-এ ViewModel সংযুক্ত করা
MainWindow.xaml.cs ফাইলে ViewModel কে উইন্ডোর ডেটা কনটেক্সট হিসেবে সেট করতে হবে:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new PersonViewModel();
}
}
উপসংহার
MVVM প্যাটার্ন ব্যবহার করে অ্যাপ্লিকেশন ডেভেলপমেন্টে Model, View, এবং ViewModel এর মধ্যে স্বচ্ছ যোগাযোগ তৈরি করা যায়। এই প্যাটার্নটি কোডের পুনঃব্যবহারযোগ্যতা, পরীক্ষাযোগ্যতা এবং রক্ষণাবেক্ষণ সহজতর করে তোলে। Data Binding, Command, এবং INotifyPropertyChanged এর মাধ্যমে View এবং ViewModel এর মধ্যে যোগাযোগ করা হয়, যা অ্যাপ্লিকেশনকে আরও মডুলার এবং পরিষ্কার করে।
Read more
