One-way এবং Two-way Data Binding

Data Binding হল একটি গুরুত্বপূর্ণ ধারণা যা UI এবং ডেটার মধ্যে সম্পর্ক তৈরি করে। One-way এবং Two-way data binding হল দুটি প্রধান ধরনের ডেটা বাইন্ডিং, যা .NET MAUI এবং অন্যান্য ফ্রেমওয়ার্কে ব্যবহৃত হয়। এই দুটি বাইন্ডিং মডেল ডেটা এবং UI উপাদানগুলির মধ্যে তথ্যের আদান-প্রদান নিয়ন্ত্রণ করে।

1. One-way Data Binding:

One-way Data Binding হল এমন একটি পদ্ধতি যেখানে ডেটা এক দিকে, সাধারণত ভিউমডেল থেকে ভিউতে প্রবাহিত হয়। অর্থাৎ, UI উপাদান (যেমন একটি Label, TextBox, Button ইত্যাদি) একবার ডেটার সাথে বাইন্ড করা হয় এবং পরবর্তীতে ভিউ মডেল থেকে পরিবর্তন হলে UI তে তা আপডেট হয়। তবে, ভিউ (UI) থেকে ডেটা ভিউমডেলে ফিরে আসে না।

One-way Data Binding এর উদাহরণ:

ধরা যাক, আপনার একটি Label উপাদান আছে যেটি ভিউমডেল থেকে ডেটা শো করছে।

ViewModel:

public class MainPageViewModel
{
    public string Name { get; set; }

    public MainPageViewModel()
    {
        Name = "John Doe"; // এই ডেটা UI তে শো হবে
    }
}

MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.MainPage">

    <Label Text="{Binding Name}" />
</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

এখানে, Label এর Text প্রপার্টি ViewModel এর Name প্রপার্টির সাথে one-way বাইন্ড করা হয়েছে। Name এর মান পরিবর্তিত হলে তা স্বয়ংক্রিয়ভাবে UI তে আপডেট হবে।

One-way Data Binding এর বৈশিষ্ট্য:

• ডেটা শুধুমাত্র ভিউমডেল থেকে ভিউতে প্রবাহিত হয়।
• ভিউ (UI) থেকে ডেটা ভিউমডেলে ফেরত যায় না।
• এটি সাধারণত প্রদর্শনমূলক ডেটা বা UI উপাদানগুলির জন্য ব্যবহৃত হয়।

2. Two-way Data Binding:

Two-way Data Binding হল এমন একটি পদ্ধতি যেখানে ডেটা দুই দিকে প্রবাহিত হয়: ভিউমডেল থেকে ভিউতে এবং ভিউ থেকে ভিউমডেলে। এটি সাধারণত ইনপুট ফিল্ড, টেক্সট বক্স, স্লাইডার ইত্যাদির জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী ডেটা ইনপুট করলে তা ভিউমডেলে আপডেট হয় এবং ভিউমডেল থেকে UI তে পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

Two-way Data Binding এর উদাহরণ:

ধরা যাক, আপনার একটি Entry উপাদান আছে যা one-way এর পরিবর্তে two-way বাইন্ডিং করে ডেটার পরিবর্তন UI এবং ভিউমডেল উভয়দিকে প্রবাহিত করবে।

ViewModel:

public class MainPageViewModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public MainPageViewModel()
    {
        Name = "John Doe"; // Default value
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyMauiApp.MainPage">

    <Entry Text="{Binding Name}" />
</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

এখানে, Entry এর Text প্রপার্টি two-way বাইন্ড করা হয়েছে ViewModel এর Name প্রপার্টির সাথে। অর্থাৎ, ব্যবহারকারী যদি Entry ফিল্ডে Name এর মান পরিবর্তন করে, তা সরাসরি ভিউমডেলে আপডেট হবে। তদুপরি, যদি ভিউমডেল থেকে Name পরিবর্তন হয়, তবে তা UI তে (এনপুট ফিল্ডে) প্রতিফলিত হবে।

Two-way Data Binding এর বৈশিষ্ট্য:

• ডেটা দুটি দিক থেকে প্রবাহিত হয়: ভিউ থেকে ভিউমডেল এবং ভিউমডেল থেকে ভিউতে।
• এটি ব্যবহারকারীর ইনপুট নেওয়ার জন্য এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে উপযুক্ত।
• সাধারণত Entry, Slider, Switch ইত্যাদি কন্ট্রোলের জন্য ব্যবহৃত হয়।

উপসংহার:

• One-way Data Binding: শুধুমাত্র ভিউমডেল থেকে ভিউতে ডেটা প্রবাহিত হয়।
• Two-way Data Binding: ডেটা দুই দিক থেকে প্রবাহিত হয় (ভিউ থেকে ভিউমডেল এবং ভিউমডেল থেকে ভিউতে)।

Two-way বাইন্ডিং ব্যবহার করার সময়, এটি নিশ্চিত করতে হবে যে INotifyPropertyChanged ইন্টারফেস ব্যবহার করা হচ্ছে, যাতে ভিউমডেল থেকে ডেটা পরিবর্তিত হলে UI তে তা স্বয়ংক্রিয়ভাবে আপডেট হয়।