Data Binding এবং MVVM (Model-View-ViewModel) প্যাটার্ন, WPF (Windows Presentation Foundation), UWP (Universal Windows Platform), এবং WinUI অ্যাপ্লিকেশন ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ। এই দুটি প্রযুক্তি একত্রে ব্যবহৃত হলে অ্যাপ্লিকেশনগুলোর ডেভেলপমেন্ট, মেইন্টেনেন্স, এবং টেস্টেবিলিটি অনেক সহজ হয়ে যায়।
এই টিউটোরিয়ালে Data Binding এবং MVVM প্যাটার্ন সম্পর্কে বিস্তারিতভাবে আলোচনা করা হবে।
১. Data Binding
Data Binding হলো এমন একটি প্রক্রিয়া যার মাধ্যমে UI উপাদানগুলো (যেমন TextBox, Button, Label) একটি ডেটা সোর্সের সাথে সংযুক্ত হয়। এটি UI এবং ডেটার মধ্যে সম্পর্ক তৈরি করে, যার ফলে ডেটা পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায় এবং vice versa।
Data Binding এর মূল উপাদান
- Source: এটি ডেটার উৎস, যেমন একটি C# ক্লাস, ডেটাবেস, অথবা XML ফাইল।
- Target: এটি UI উপাদান, যেমন TextBox বা Label।
- Binding Expression: এটি একটি এক্সপ্রেশন যা নির্ধারণ করে UI উপাদানটি ডেটার কোন প্রপার্টির সাথে বাইন্ড হবে।
- Mode: এটি নির্ধারণ করে যে ডেটা বাইন্ডিং কিভাবে কাজ করবে। (যেমন: OneWay, TwoWay, OneTime, etc.)
Data Binding উদাহরণ
<TextBox Text="{Binding UserName}" Width="200"/>
C# কোড:
public class User
{
public string UserName { get; set; }
}
public partial class MainWindow : Window
{
public User CurrentUser { get; set; }
public MainWindow()
{
InitializeComponent();
CurrentUser = new User() { UserName = "John Doe" };
DataContext = CurrentUser;
}
}
ব্যাখ্যা:
- {Binding UserName}: এখানে TextBox এর Text প্রপার্টি
UserNameপ্রপার্টির সাথে বাইন্ড হচ্ছে। - DataContext:
DataContextসেট করা হয়েছেCurrentUserঅবজেক্টে, যার ফলে সমস্ত UI উপাদান এই ডেটার সাথে বাইন্ড হবে।
Binding Modes:
- OneWay: ডেটা শুধুমাত্র Source থেকে Target এ যায়।
- TwoWay: Source এবং Target একে অপরকে আপডেট করতে পারে।
- OneTime: ডেটা একবার বাইন্ড হয়ে একে অপরকে আপডেট করবে না।
- OneWayToSource: Target থেকে Source আপডেট হবে, কিন্তু Source থেকে Target আপডেট হবে না।
২. MVVM Pattern
MVVM (Model-View-ViewModel) হলো একটি আর্কিটেকচারাল প্যাটার্ন যা UI অ্যাপ্লিকেশনগুলোতে ডেটা এবং লজিক আলাদা করে। MVVM প্যাটার্নটি বিশেষভাবে WPF, UWP, এবং WinUI-তে জনপ্রিয়, কারণ এটি Data Binding ব্যবহার করে UI এবং লজিকের মধ্যে একটি পরিষ্কার আলাদা করা দেয়।
MVVM এর তিনটি প্রধান উপাদান
- Model:
- এটি অ্যাপ্লিকেশনের ডেটা এবং বিজনেস লজিকের প্রতিনিধিত্ব করে। Model কেবল ডেটা সংরক্ষণ করে এবং বিজনেস লজিক পরিচালনা করে, তবে এটি UI বা View এর সাথে সরাসরি ইন্টারঅ্যাক্ট করে না।
- উদাহরণ:
User,Product,Employeeক্লাস।
- View:
- এটি UI উপাদানগুলোর প্রতিনিধিত্ব করে। View কেবলমাত্র ডেটা প্রদর্শন করে এবং ইউজারের সাথে ইন্টারঅ্যাক্ট করে।
- উদাহরণ: উইন্ডো, প্যানেল, বাটন, টেক্সটবক্স।
- ViewModel:
- ViewModel হলো View এবং Model-এর মধ্যে একটি মধ্যস্থতাকারী। এটি Model থেকে ডেটা নেয় এবং View-এ উপস্থাপন করার জন্য প্রস্তুত করে। ViewModel ডেটা Binding এর মাধ্যমে View-এর সাথে যোগাযোগ করে।
- উদাহরণ: একটি ViewModel যা
Userমডেলকে উপস্থাপন করবে এবংUserNameপ্রপার্টি View এ প্রদর্শন করবে।
MVVM উদাহরণ
Model:
public class User
{
public string UserName { get; set; }
}
ViewModel:
public class UserViewModel : INotifyPropertyChanged
{
private User _user;
public UserViewModel()
{
_user = new User() { UserName = "John Doe" };
}
public string UserName
{
get { return _user.UserName; }
set
{
_user.UserName = value;
OnPropertyChanged(nameof(UserName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
View (XAML):
<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="350" Width="525">
<Grid>
<TextBox Text="{Binding UserName}" Width="200" Height="30" Margin="10"/>
</Grid>
</Window>
MainWindow.xaml.cs (View-ViewModel Binding):
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new UserViewModel();
}
}
ব্যাখ্যা:
- Model:
Userক্লাসটি আমাদের ডেটা মডেল। - ViewModel:
UserViewModelক্লাসটি ডেটা এবং লজিক নিয়ে কাজ করে এবং View এর সাথে যোগাযোগ করে। - View: XAML-এ
TextBox-এর Text প্রপার্টিUserNameপ্রপার্টির সাথে বাইন্ড করা হয়েছে।
MVVM Pattern এর সুবিধা
- Separation of Concerns (SoC): UI এবং লজিক আলাদা রাখার মাধ্যমে অ্যাপ্লিকেশনের রক্ষণাবেক্ষণ এবং পরীক্ষণ সহজ হয়।
- Testability: ViewModel আলাদা থাকায় ইউনিট টেস্টিং করা সহজ হয়।
- Data Binding: XAML ও C# কোডের মধ্যে শক্তিশালী Data Binding সাপোর্ট থাকার কারণে UI এবং ডেটা একে অপরকে স্বয়ংক্রিয়ভাবে আপডেট করতে পারে।
- Maintainability: যখন UI এবং লজিক আলাদা থাকে, তখন কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ হয়।
উপসংহার
Data Binding এবং MVVM Pattern আধুনিক Windows অ্যাপ্লিকেশন ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ দুটি কৌশল। Data Binding UI এবং ডেটার মধ্যে একটি সম্পর্ক তৈরি করে, যা অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। MVVM প্যাটার্ন ডেটা এবং UI-কে আলাদা করে, যা অ্যাপ্লিকেশনকে পরিষ্কার, রক্ষণাবেক্ষণযোগ্য, এবং টেস্টেবল রাখে।
Data Binding হলো XAML এবং C# (বা অন্যান্য প্রোগ্রামিং ভাষা) এর মধ্যে একটি সংযোগ ব্যবস্থা, যার মাধ্যমে UI উপাদান এবং ডেটার মধ্যে তথ্য বিনিময় করা হয়। Windows Application Development-এ Data Binding ব্যবহৃত হয় UI এর বিভিন্ন উপাদান (যেমন TextBox, Label, ComboBox) এবং ডেটার মধ্যে অটোমেটিক্যালি পরিবর্তন শেয়ার করার জন্য। এতে UI এবং ডেটা মডেল একে অপরের থেকে আলাদা থাকে, যার ফলে অ্যাপ্লিকেশন আরও পরিষ্কার, মেইনটেইনেবল এবং স্কেলেবল হয়।
Data Binding এর সুবিধা
- UI এবং ডেটা আলাদা রাখা: UI এবং ব্যাকএন্ড লজিক (ডেটা) আলাদা রাখা যায়।
- অটোমেটিক আপডেট: ডেটা পরিবর্তিত হলে UI তাতে স্বয়ংক্রিয়ভাবে আপডেট হয় এবং vice versa।
- MVVM প্যাটার্ন সমর্থন: Model-View-ViewModel (MVVM) প্যাটার্নের মাধ্যমে UI এবং লজিক আলাদা করা যায়।
- ডেটা এবং UI এর মধ্যে সম্পর্ক সহজ করা: ব্যবহারকারীর ইনপুট বা ডেটার পরিবর্তন UI তে সরাসরি প্রতিফলিত হয়।
Data Binding এর মৌলিক উপাদান
- Source: ডেটা উৎস (যেমন C# ক্লাস বা মডেল) যা UI উপাদানে প্রদর্শিত হবে।
- Target: UI উপাদান (যেমন TextBox, Label, ComboBox) যা ডেটা প্রদর্শন করবে।
- Binding Path: এটি ডেটার সম্পত্তির নাম, যা UI উপাদানের সাথে সংযুক্ত হয়।
- Binding Mode: ডেটার আপডেটের দিক নির্দেশ করে (OneWay, TwoWay, OneTime)।
Data Binding এর ধরন
১. One-Way Data Binding
এই ধরনের ডেটা বাইন্ডিংয়ে ডেটা শুধুমাত্র Source থেকে Target (UI উপাদান) এ প্রবাহিত হয়। একবার ডেটা পরিবর্তন হলে UI উপাদান তা আপডেট করে, তবে UI থেকে ডেটা পরিবর্তিত হয় না।
উদাহরণ:
<TextBlock Text="{Binding UserName}" />
এখানে, UserName হল ডেটা মডেলের প্রপার্টি যা TextBlock-এ প্রদর্শিত হবে। যখন UserName পরিবর্তিত হবে, তখন TextBlock স্বয়ংক্রিয়ভাবে আপডেট হবে।
২. Two-Way Data Binding
এই ধরনের বাইন্ডিংয়ে Source এবং Target একে অপরের সাথে যোগাযোগ করে। UI উপাদানে করা পরিবর্তন ডেটাতে প্রতিফলিত হয় এবং ডেটাতে পরিবর্তন হলে UI আপডেট হয়।
উদাহরণ:
<TextBox Text="{Binding UserName, Mode=TwoWay}" />
এখানে, ব্যবহারকারী TextBox-এ কিছু ইনপুট দিলে তা UserName প্রপার্টিতে আপডেট হবে এবং UserName প্রপার্টি পরিবর্তিত হলে TextBox-এও তা আপডেট হবে।
৩. One-Time Data Binding
এই ধরনের বাইন্ডিংয়ে Target (UI উপাদান) শুধুমাত্র একবার ডেটার মান নেয় এবং এরপর আর কোনো পরিবর্তন গ্রহণ করে না। এটি সাধারণত কেবল নির্বাচিত ডেটা বা স্থির ডেটা প্রদর্শনের জন্য ব্যবহার করা হয়।
উদাহরণ:
<TextBlock Text="{Binding UserName, Mode=OneTime}" />
এখানে UserName একবার TextBlock-এ সেট হবে এবং এর পরে কোনো পরিবর্তন হবে না।
Data Binding এর প্রপার্টি
- Binding Path: ডেটার গন্তব্যের ক্ষেত্র, উদাহরণস্বরূপ:
{Binding UserName}। - Mode: Data Binding এর প্রকার, যেমন
OneWay,TwoWay,OneTime। - UpdateSourceTrigger: কখন ডেটা উৎস আপডেট হবে তা নির্ধারণ করে (যেমন
PropertyChanged,LostFocusইত্যাদি)। - Converter: Data Binding-এর সাথে ডেটা রূপান্তর করার জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটার ধরন পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<TextBox Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
Data Binding এর জন্য C# কোড
Data Binding ব্যবহারের জন্য C#-এ একটি সঠিক ডেটা মডেল তৈরি করা প্রয়োজন। এই মডেলটি INotifyPropertyChanged ইন্টারফেসটি ইমপ্লিমেন্ট করতে পারে, যা UI কে ডেটার পরিবর্তনের কথা জানিয়ে দেয়।
C# কোড উদাহরণ:
public class UserModel : INotifyPropertyChanged
{
private string _userName;
public string UserName
{
get { return _userName; }
set
{
if (_userName != value)
{
_userName = value;
OnPropertyChanged(nameof(UserName));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
XAML এ Data Binding:
<Window DataContext="{Binding RelativeSource={RelativeSource Self}}">
<TextBox Text="{Binding UserName, Mode=TwoWay}" />
</Window>
এখানে, UserModel ক্লাসের UserName প্রপার্টি TextBox এর সাথে বাইন্ড করা হয়েছে, এবং পরিবর্তন হলে UI আপডেট হবে।
উপসংহার
Data Binding হলো XAML এবং C# মধ্যে শক্তিশালী একটি যোগাযোগ পদ্ধতি, যা UI এবং ডেটার মধ্যে এক্সপ্লিসিট সম্পর্ক তৈরি করে। এটি UI ডিজাইনের জন্য খুবই কার্যকরী, কারণ এটি ডেটার পরিবর্তন UI-তে স্বয়ংক্রিয়ভাবে প্রতিফলিত করে এবং অ্যাপ্লিকেশনটিকে আরও মেইনটেইনেবল করে তোলে। One-Way, Two-Way, এবং One-Time বাইন্ডিং-এর মাধ্যমে অ্যাপ্লিকেশন তৈরির সময় ডেটা এবং UI-কে একে অপরের সাথে সুনির্দিষ্টভাবে সংযুক্ত করা যায়।
Data Binding হল XAML এবং C#-এর মধ্যে একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা UI এবং ডেটা মডেল বা প্রপার্টির মধ্যে সম্পর্ক তৈরি করে। Windows Presentation Foundation (WPF), UWP (Universal Windows Platform), এবং WinUI অ্যাপ্লিকেশনগুলিতে Data Binding ব্যবহারের মাধ্যমে UI-এর উপাদান এবং ডেটার মধ্যে তথ্যের অবাধ প্রবাহ তৈরি করা সম্ভব।
এখানে One-Way এবং Two-Way Data Binding এর টেকনিকস আলোচনা করা হবে।
১. One-Way Data Binding
One-Way Data Binding হল এমন একটি বাইন্ডিং যেখানে ডেটা শুধুমাত্র এক দিক থেকে UI বা ভিউ-এর দিকে প্রবাহিত হয়। অর্থাৎ, ডেটা মডেল থেকে UI তে তথ্য পাঠানো হয়, কিন্তু UI থেকে মডেলে কোনো তথ্য ফেরত যায় না।
বৈশিষ্ট্য:
- Source থেকে Target এ ডেটা প্রবাহিত হয়।
- UI শুধুমাত্র ডেটা প্রদর্শন করে, এবং ব্যবহারকারী UI-তে কিছু পরিবর্তন করলে তা ডেটা মডেলে প্রতিফলিত হয় না।
- এটি সাধারণত UI-তে স্থির তথ্য প্রদর্শন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
XAML:
<TextBlock Text="{Binding UserName}" />
C# Code-Behind:
public class ViewModel
{
public string UserName { get; set; }
public ViewModel()
{
UserName = "John Doe"; // Set some initial value
}
}
DataContext Set:
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel(); // Set the data context to ViewModel
}
ব্যাখ্যা:
- Binding ব্যবহার করে UserName প্রপার্টি TextBlock-এর
Textপ্রপার্টির সাথে যুক্ত করা হয়েছে। এতে UserName এর মান শুধুমাত্র TextBlock-এ প্রদর্শিত হবে এবং UserName প্রপার্টি পরিবর্তিত হলে তা UI-তে প্রতিফলিত হবে। - UI থেকে কোনো পরিবর্তন হলে তা UserName এ প্রভাব ফেলবে না।
২. Two-Way Data Binding
Two-Way Data Binding হল এমন একটি বাইন্ডিং যেখানে ডেটা একে অপরকে দুটি দিকে প্রবাহিত করে। অর্থাৎ, ব্যবহারকারীর পরিবর্তন UI-তে থাকা ডেটার উপর প্রভাব ফেলে এবং সেই পরিবর্তন ডেটা মডেলেও প্রতিফলিত হয়, এবং তার পাশাপাশি ডেটা মডেল থেকে UI তে আপডেট আসবে।
বৈশিষ্ট্য:
- Source থেকে Target এবং Target থেকে Source - উভয় দিকেই ডেটার প্রবাহ ঘটে।
- এটি সাধারণত ব্যবহারকারীর ইনপুটের জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারীর পরিবর্তন মডেলেও রিফ্লেক্ট করতে হবে।
উদাহরণ:
XAML:
<TextBox Text="{Binding UserName, Mode=TwoWay}" Width="200" Height="30"/>
C# Code-Behind:
public class ViewModel : INotifyPropertyChanged
{
private string userName;
public string UserName
{
get { return userName; }
set
{
if (userName != value)
{
userName = value;
OnPropertyChanged("UserName");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
DataContext Set:
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel(); // Set the data context to ViewModel
}
ব্যাখ্যা:
- TwoWay Binding সেট করা হয়েছে TextBox-এর Text প্রপার্টির সাথে UserName প্রপার্টি সংযুক্ত করতে।
- INotifyPropertyChanged ইন্টারফেস ব্যবহার করা হয়েছে যাতে UserName প্রপার্টি পরিবর্তিত হলে UI আপডেট হয় এবং UI-তে যদি কোনো পরিবর্তন হয়, তা আবার UserName প্রপার্টিতে প্রবাহিত হবে।
- TextBox-এ ইনপুট পরিবর্তিত হলে তা সরাসরি UserName প্রপার্টি আপডেট করবে, এবং UserName-এর মান পরিবর্তিত হলে তা UI-তে রিফ্লেক্ট হবে।
One-Way এবং Two-Way Data Binding এর তুলনা
| বৈশিষ্ট্য | One-Way Data Binding | Two-Way Data Binding |
|---|---|---|
| ডেটার প্রবাহ | এক দিক থেকে (Source থেকে Target) | দুই দিক থেকে (Source থেকে Target এবং Target থেকে Source) |
| ব্যবহার | UI তে স্থির ডেটা প্রদর্শন করা | ব্যবহারকারীর ইনপুট গ্রহণ ও ডেটা মডেলে আপডেট হওয়া |
| ইনপুট পরিবর্তন | UI তে কোনো পরিবর্তন ডেটা মডেলে প্রভাব ফেলে না | UI তে পরিবর্তন হলে তা ডেটা মডেলেও প্রভাব ফেলে |
| প্রযুক্তিগত উদাহরণ | স্ট্যাটিক টেক্সট বা তথ্য ডিসপ্লে করা | ফর্ম ফিল্ড, ব্যবহারকারী ইনপুট এবং মডেল আপডেট |
উপসংহার
One-Way Data Binding এবং Two-Way Data Binding XAML-এর দুটি শক্তিশালী বৈশিষ্ট্য, যা UI এবং ডেটা মডেল বা প্রপার্টির মধ্যে সম্পর্ক তৈরি করতে সহায়তা করে। One-Way Data Binding সাধারণত UI প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে ডেটা মডেল থেকে UI তে ডেটা পাঠানো হয়। অপরদিকে, Two-Way Data Binding ব্যবহারকারীর ইনপুটের ক্ষেত্রে অত্যন্ত গুরুত্বপূর্ণ, যেখানে UI থেকে ডেটা মডেলে পরিবর্তন এবং তার পরবর্তী প্রভাব UI-তে প্রতিফলিত হয়।
এই দুটি Data Binding টেকনিকস একত্রে ব্যবহৃত হলে, ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং ডেটা এবং UI-এর মধ্যে অবাধ প্রবাহ সৃষ্টি হয়।
Windows Application Development, বিশেষ করে WPF (Windows Presentation Foundation) বা UWP (Universal Windows Platform)-এ, ObservableCollection এবং INotifyPropertyChanged ইন্টারফেস ব্যবহার করা হয় ডেটা বাইন্ডিং এবং UI আপডেটের জন্য। এই দুটি টুল ডেভেলপারদের ডেটা মডেল এবং UI-এর মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে সহায়তা করে।
১. INotifyPropertyChanged Interface
INotifyPropertyChanged ইন্টারফেস একটি খুব গুরুত্বপূর্ণ ইন্টারফেস যা আপনাকে একটি প্রপার্টির মান পরিবর্তিত হলে UI বা অন্য ডেটা কনজিউমারের কাছে এটির আপডেট পাঠানোর সুযোগ দেয়। যখন কোনো প্রপার্টি পরিবর্তিত হয়, তখন PropertyChanged ইভেন্ট ট্রিগার হয় এবং UI বা অন্য ডেটা কনজিউমার তা জানতে পারে।
বৈশিষ্ট্য:
- PropertyChanged Event: এই ইভেন্টের মাধ্যমে প্রপার্টির পরিবর্তনগুলি ট্র্যাক করা যায়।
- ডেটা বাইন্ডিংয়ের মাধ্যমে UI তে স্বয়ংক্রিয় আপডেট সাধিত হয়।
উদাহরণ:
using System;
using System.ComponentModel;
public class Person : INotifyPropertyChanged
{
private string name;
public string Name
{
get { return name; }
set
{
if (name != value)
{
name = value;
OnPropertyChanged(nameof(Name)); // Notify the UI of the change
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
ব্যাখ্যা:
- INotifyPropertyChanged ইন্টারফেসটি ক্লাসে যোগ করা হয় যাতে PropertyChanged ইভেন্টটি ট্রিগার করা যায় যখন Name প্রপার্টির মান পরিবর্তিত হয়।
- OnPropertyChanged মেথডটি UI-তে পরিবর্তন জানাতে ব্যবহৃত হয়।
২. ObservableCollection
ObservableCollection হলো একটি বিশেষ ধরনের Collection যা স্বয়ংক্রিয়ভাবে UI বা অন্য ডেটা কনজিউমারের কাছে পরিবর্তন পাঠাতে পারে। যখন ICollection এ কোনো আইটেম যুক্ত, মুছে ফেলা বা আপডেট হয়, তখন CollectionChanged ইভেন্ট ট্রিগার হয়।
বৈশিষ্ট্য:
- CollectionChanged Event: আইটেমগুলোর পরিবর্তন (যোগ, মুছে ফেলা, পরিবর্তন) সম্পর্কে UI-কে জানাতে ব্যবহৃত হয়।
- UI তে স্বয়ংক্রিয়ভাবে পরিবর্তন দেখানোর জন্য আদর্শ।
উদাহরণ:
using System.Collections.ObjectModel;
public class MainViewModel
{
public ObservableCollection<Person> People { get; set; }
public MainViewModel()
{
People = new ObservableCollection<Person>
{
new Person { Name = "John" },
new Person { Name = "Jane" }
};
}
}
ব্যাখ্যা:
- ObservableCollection আইটেমগুলোর একটি তালিকা তৈরি করে এবং UI-তে আইটেম যোগ, মুছে ফেলা বা পরিবর্তিত হলে তা স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।
INotifyPropertyChanged এবং ObservableCollection এর সমন্বয়
INotifyPropertyChanged এবং ObservableCollection একসঙ্গে ব্যবহৃত হয় যখন আপনাকে ডেটা বাইন্ডিংয়ের মাধ্যমে UI তে ডেটার পরিবর্তন সিঙ্ক্রোনাইজ করতে হয়। INotifyPropertyChanged একে অপরের মান পরিবর্তন জানায় এবং ObservableCollection-এর মাধ্যমে ডেটা এক্সপোজ করা হয়, যা UI-তে লাইভ আপডেটের সুযোগ দেয়।
উদাহরণ:
using System.Collections.ObjectModel;
using System.ComponentModel;
public class MainViewModel : INotifyPropertyChanged
{
private ObservableCollection<Person> people;
public ObservableCollection<Person> People
{
get { return people; }
set
{
if (people != value)
{
people = value;
OnPropertyChanged(nameof(People));
}
}
}
public MainViewModel()
{
People = new ObservableCollection<Person>
{
new Person { Name = "John" },
new Person { Name = "Jane" }
};
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
ব্যাখ্যা:
- People প্রপার্টি পরিবর্তিত হলে INotifyPropertyChanged ইভেন্ট ট্রিগার করে UI তে ObservableCollection এর পরিবর্তন জানানো হয়।
- ObservableCollection আইটেমগুলি পরিবর্তন বা আপডেট হলে CollectionChanged ইভেন্ট UI তে জানিয়ে দেয়।
উপসংহার
INotifyPropertyChanged এবং ObservableCollection দুটি গুরুত্বপূর্ণ টুল যা ডেটা বাইন্ডিং এবং UI আপডেটের জন্য ব্যবহৃত হয়। INotifyPropertyChanged UI-কে কোনো প্রপার্টি পরিবর্তিত হলে তা জানাতে সাহায্য করে, এবং ObservableCollection আইটেমগুলির পরিবর্তন স্বয়ংক্রিয়ভাবে UI তে প্রদর্শন করে। একসঙ্গে ব্যবহৃত হলে, এগুলি WPF, UWP, এবং WinUI অ্যাপ্লিকেশনে অত্যন্ত কার্যকরী এবং ডেটা সিঙ্ক্রোনাইজেশনের জন্য আদর্শ সমাধান প্রদান করে।
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
