[ C# Windows10 ] About MVVM

Salah satu pattern yang digunakan dalam pengembangan aplikasi di Visual Studio 2015 adalah MVVM (Model View ViewModel).  Jika anda sudah akrab dengan konsep MVC, maka MVVM cukup mirip dengan MVC tetapi keduanya tetaplah pattern yang berbeda. Dalam MVC dan MVVM sama-sama mengenal “M” sebagai model dan “V” sebagai View dimana model adalah segala sesuatu yang berkaitan dengan data dan rule2 dalam data tersebut. Sedangkan View adalah segala sesuatu yang berkaitan dengan tampilan/user interface aplikasi anda. Pada MVC antara model dan view akan dihubungkan oleh “C” yaitu Controller dimana melalui controller inilah user akan melakukan permintaan/request (controller menjadi pintu awal) dan controller akan mengatur model apa yang akan dipanggil, fungsi apa yang akan dijalankan, hingga tampilan mana yang akan ditampilkan kepada user. Sedangkan pada MVVM model dan view akan dihubungkan melalui ViewModel tetapi pintu awal tetap terletak pada View. Pada MVVM ketika user membuat suatu permintaan/request maka yang pertama akan terbuka adalah View dimana View akan mengambil data yang ada pada model melalui perantara ViewModel yang telah menentukan data2 model mana saja yang akan ditampilkan beserta event2 yang akan dijalankan. Ilustrasi alur MVVM dapat dilihat pada gambar berikut :

Untuk memudahkan dalam memahami MVVM, berikut adalah contoh code C# pada Windows10 dengan MVVM. Pertama-tama buatlah sebuah model dengan nama “SoccerClub.cs” misal. Masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App1.Model
{
   public class SoccerClub
   {
      public string Name;
      public string Description;
   }
}

Code di atas mendefinisikan data “SoccerClub” yang berisi “Name” dan “Description”.

Saya akan membuat tampilan yang akan menampilkan Daftar dari nama2 SoccerClub beserta descriptionnya pada halaman saya. Dimana ketika di klik di salah satu item, maka sebuah textblock akan menulis keterangan item apa yang anda klik. Berikut tampilan akhir yang akan muncul pada aplikasi :

Capture

Sebelum membuat tampilan diatas dengan menggunakan ListView, pertama yang perlu kita buat adalah ViewModel. ViewModel yang dibuat harus memiliki data yang memuat data daftar SoccerClub dan sebuah event yang menjalankan sebuah proses ketika user melakukan klik pada setiap item. Buatlah sebuah class dengan nama “ExampleList.cs”, masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
using App1.Model;

namespace App1.ViewModels
{
   public class ExampleList : INotifyPropertyChanged
   {
        public event PropertyChangedEventHandler PropertyChanged;
        //mengeset apabila ada variabel yang berubah, secara otomatis akan merubah pada view
        protected void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public string JustText = "Hai"; //variabel ini digunakan untuk text yang tampil pada           //bagian atas listview, untuk menampilkan keterangan
        //variabel ini digunakan untuk menyimpan daftar SoccerClub
        private ObservableCollection<SoccerClub> _listData = new ObservableCollection<SoccerClub>()
        {
             new SoccerClub { Name = "Barcelona", Description="Spain" },
             new SoccerClub { Name = "Real Madrid", Description="Spain" },
             new SoccerClub { Name = "Liverpool", Description="England" },
             new SoccerClub { Name = "Bayern Munich", Description="Germany" },
             new SoccerClub { Name = "A.C. Milan", Description="Italy" },
         };
         
         //mengembalikan nilai _listData
         public ObservableCollection<SoccerClub> ListData
         {
             get{ return _listData; }
         }
         
         // event ketika melakukan klik pada list
         public void ListData_ItemClick(object sender, ItemClickEventArgs e)
         {
            this.JustText = "You Click On " + (e.ClickedItem as Example).Name;
            NotifyPropertyChanged("JustText");
         }
    }
}

Kode diatas adalah kode pada ViewModel. Kode tersebut lah yang akan digunakan halaman View untuk menampilkan data apa saja yang akan ditampilkan. Sekarang pada halaman view anda, pada file xaml klik kanan pilih “View Code”. Masukkan code berikut pada class view anda :

public sealed partial class PageName : Page
 {
        //mendefinisikan ViewModel yang telah dibuat sebelumnya
        public ExampleList MyData;
        public PageName()
        {
            this.InitializeComponent();
            MyData = new ExampleList();
        }
 }

Kemudian pada code xaml anda, masukkan code berikut :

<Page
 x:Class="App1.Control.PageName"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1.Model"
 xmlns:viewmodel="using:App1.ViewModels"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 >

  <UserControl.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:SoccerClub">
      <StackPanel Orientation="Horizontal" Margin="2,0,0,0" Background="#FFEEEEEE">
         <TextBlock Text="{x:Bind Name}" VerticalAlignment="Center"/>
         <TextBlock Text="{x:Bind Description}" Margin="24,0,0,0" FlowDirection="RightToLeft"/>
      </StackPanel>
   </DataTemplate>
 </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Height="638">
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <TextBlock Text="{x:Bind MyData.JustText, Mode=OneWay}" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/>
     <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" 
 ItemClick="{x:Bind MyData.ListData_ItemClick}" IsItemClickEnabled="True" 
 ItemsSource="{x:Bind MyData.ListData}" ItemTemplate="{StaticResource NavLinkItemTemplate}">
         <ListView.ItemContainerStyle>
             <Style TargetType="ListViewItem">
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
         </ListView.ItemContainerStyle>
     </ListView>
   </Grid>
</Page>

Perlu diketahui, pada MVVM anda dapat menghubungkan sebuah control (misal textBlock, checkbox, dll) langsung ke sebuah variabel yang ada pada class view tersebut. Setelah control tersebut sudah terhubung, maka ketika variabelnya berubah secara otomatis nilai pada control tersebut juga berubah. Misal anda menghubungkan textBlock A dengan variabel nilai1. Ketika anda merubah isian nilai1, maka nilai textBlock A juga ikut berubah. Untuk menghubungkan antara sebuah control pada sebuah nilai, anda dapat menggunakan x:Bind pada windows10. Pada code view di atas, anda dapat melihat saya menghubungkan beberapa control untuk terhubung ke variabel yang ada pada classnya yaitu variabel “MyData”. Selain itu anda juga dapat memanggil even yang ada pada variabel MyData dari view anda.

Setelah membuat tampilan diatas dan menghubungkan beberapa control ke variabel yang sudah ditentukan, silahkan jalankan aplikasi anda. Selesai.. happy coding..

One Response to [ C# Windows10 ] About MVVM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: