[ 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..

[ C# Windows10 ] Use SplitView With ListView

Untuk mempermudah pengelolaan menu pada SplitView, kita dapat menggunakan control ListView. Menyambung postingan sebelumnya di https://sabitlabscode.wordpress.com/2015/10/27/c-windows10-how-to-use-splitview-control/, berikut adalah contoh code implementasi SplitView dengan menggunakan ListView.

  • Masukkan kode berikut pada MainPage.xaml anda
<Page
   x:Class="App1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App1"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
 
 <!--menyimpan resource template-->
 <Page.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">
       <StackPanel Orientation="Horizontal" Margin="2,0,0,0">
          <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Symbol}" VerticalAlignment=          "Center"/>
          <TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>
       </StackPanel>
     </DataTemplate>
  </Page.Resources>

  <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay">
     <SplitView.Pane>
        <Grid>
           <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
           Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
           <TextBlock Text="MY APPS" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticRes           ource BaseTextBlockStyle}"/>
          <!-- kode listview -->
          <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1"          VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="          True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemp          late}"/>
       </Grid>
    </SplitView.Pane>

    <Grid>
        <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="SPLITVIEW CONTENT" Margin="12,12,0,0" Style="{StaticResource BaseTex         tBlockStyle}"/>
        <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource Bo         dyTextBlockStyle}" />
    </Grid>
  </SplitView>
</Page>
  • Pada MainPage code, masukkan kode berikut :
public sealed partial class MainPage : Page
 {
    public SamplePage(Frame frame)
    {
       this.InitializeComponent();
       this.FormSplitView.Content = frame;
    }

    // definisi variabel daftar-daftar menu pada SplitView, 
    // Page1 dan Page2 adalah blank page yang telah dibuat pada postingan sebelumnya
    private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
    {
       new NavLink() { Label = "List", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Alert", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Feedback", Symbol = "" , Navigationpage=typeof(Page2) },
    };

   public ObservableCollection<NavLink> NavLinks
   {
       get { return _navLinks; }
   }

   private void HamburgerButton_Click(object sender, RoutedEventArgs args)
   {
       FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
   }

   //fungsi ketika melakukan klik pada menu
   private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
   {
      if (FormSplitView.Content != null)
         ((Frame)FormSplitView.Content).Navigate((e.ClickedItem as NavLink).Navigationpage);
   }
 }

 //model menampilkan listview pada SplitView
 public class NavLink
 {
     public string Label { get; set; }
     public string Symbol { get; set; }
     public Type Navigationpage { get; set; }
 }

Silahkan jalankan program anda, tampilan aplikasi anda akan seperti berikut :

Capture3

Selesai, happy coding..

[C# Windows10] Use Character Map For Icon

Windows10 menyediakan sebuah opsi untuk menampilkan icon-icon sederhana pada aplikasi anda dengan menggunakan karakter yang ada pada Character Map. Dengan fitur ini anda tidak perlu repot memasukkan image untuk menghiasi interface aplikasi anda, cukup masukkan character pada Character Map dan aplikasi anda dapat memunculkan icon seperti gambar berikut :

Capture2

Untuk melihat jenis-jenis karakternya, silahkan buka Character Map dengan cara mengetikkannya pada menu start windows10 anda dan buka tools Character Map. Akan tampil halaman seperti berikut :

Capture

Pastikan anda memilih font “Segoe MDL2 Assets”, maka akan tampil kumpulan icon-icon seperti gambar di atas. Silahkan pilih salah satu icon yang ingin anda gunakan dan klik tombol “Select” jika anda ingin menggunakan icon tersebut. Kemudian pillih tombol “Copy” untuk mengambil karakter yang harus di salin ke dalam aplikasi anda. Anda dapat memasukkan copy-an karakter tadi ke dalam aplikasi anda. Sebagai contoh anda ingin memasukkan icon pada control “Button”, maka berikut contoh kode yang harus diketikkan :

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
 Width="50" Height="50" Background="Transparent"/>

Pada code di atas anda menentukan jenis Font Family ke Segoe MDL2 Assets, kemudian karakter yang sudah di copy anda paste ke nilai “Content=”. Setelah itu aplikasi anda otomatis akan menampilkan karakter yang sudah anda pilih tadi..

Happy coding..

[ C# Windows10 ] How To Use SplitView Control

Setelah sekian lama tidak buka blog dan menulis tutorial programming, akhirnya hari ini mulai bergairah kembali untuk menghidupkan blog ini. Adalah hadirnya windows10 dengan Visual Studio 2015-nya yang menarik perhatian saya untuk explore fitur-fitur terbarunya sekaligus posting pengalaman dan ilmu selama mempelajarinya.

Seperti diketahui Microsoft telah meluncurkan OS windows10 baik untuk PC, laptop, mobile, surface dan device lainnya yang menggunkan OS berbasis Windows. Melihat OS windows10 yang dapat diimplementasikan di berbagai jenis device, hal ini mengindikasikan bahwa Microsoft berharap adanya keseragaman dan memudahkan pengguna dalam menggunakan device yang berbeda-beda. Sekaligus berharap meningkatkan market sih 🙂 . Usaha ini juga dilanjutkan microsoft di level developer aplikasi/software ketika meluncurkan Visual Studio 2015. Dimana microsoft memperkenalkan UWP (Universal Windows Platform) yang pada intinya Microsoft memungkinkan developer mengembangkan aplikasi universal yang dapat diimplementasikan pada PC, laptop, surface, mobile, dll..

Baiklah, penjelasan diatas adalah mukadimah dari tutorial yang akan saya paparkan. Sebelumnya saya beritahukan bahwa pengembangan aplikasi UWP hanya dapat dilakukan pada OS Windows 10 dengan IDE Visual Studio 2015.

Kali ini saya akan memaparkan cara penggunaan SplitView pada C#. Tampilan akhir dari aplikasi ini adalah seperti berikut :

Capture

Terdapat panel menu di sebelah kiri dan panel content di sebelah kanan. Jika tombol pada panel sebelah kiri di klik, maka halaman konten yang ada di sebelah kanan juga akan berubah.

Capture2

Contoh ketika melakukan klik tombol lain, maka panel sebelah kiri berubah.

Capture3

Apabila tombol menu paling atas di klik, maka panel menu akan melebar dan menampilkan text dari masing-masing menu.

Baiklah berikut adalah tahap-tahap pembuatan aplikasi di atas :

  • Silahkan buat aplikasi baru pada VS2015 dan pilih universal apps.
  • Secara default ketika dijalankan project anda akan menampilkan halaman MainPage.xaml. Di halaman ini juga kita akan meletakkan code SplitView, masukkan kode berikut pada MainPage.xaml :
<Page
 x:Class="App1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">
 <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
 CompactPaneLength="50" OpenPaneLength="150">
   <SplitView.Pane>
     <StackPanel Background="Gray">
        <Button x:Name="ButtonOpen" FontFamily="Segoe MDL2 Assets" Content=""
         Width="50" Height="50" Background="Transparent" Click="ButtonOpen_Click"/>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
            Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
           <TextBlock Text="Page 1" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
            Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click" />
           <TextBlock Text="Page 2" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
     </StackPanel>
   </SplitView.Pane>
 <SplitView.Content>
    <Grid>
       <Frame x:Name="SplitContent">
       </Frame>
    </Grid>
  </SplitView.Content>
 </SplitView>
</Page>
  • Pada code di atas, terdapat tiga buah event yaitu event ketika ButtonOpen, MenuButton1 dan MenuButton2 di klik. Kita akan memaasukkan code untuk menjalankan ketiga event tersebut.
  • Pada Solution klik kanan pada “MainPage.xaml” lalu klik kanan dan pilih “View Code”.
  • Masukkan code berikut :
private void ButtonOpen_Click(object sender, RoutedEventArgs args)
 {
   FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
 }

 private void MenuButton1_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page1));
 }

 private void MenuButton2_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page2));
 }
  • Pada solution, tambahkan dua buah “Blank Page” dan beri nama Page1.xaml dan Page2.xaml.
  • Pada Page1.xaml design, masukkan kode xaml berikut :
<Page
 x:Class="App1.Page1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 1" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Sedangkan pada Page2.xaml, masukkan kode berikut :

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

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 2" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Dua kode di atas adalah kode yang digunakan untuk melakukan pengaturan tampilan pada halaman 1 dan halaman 2. Silahkan lakukan pengaturan sesuai keinginan anda jika perlu.

  • Pada solution, pilih “App.xaml” klik kanan pilih “View Code”. Masukkan code berikut pada “OnLaunched”
protected override void OnLaunched(LaunchActivatedEventArgs e)
 {

   #if DEBUG
   if (System.Diagnostics.Debugger.IsAttached)
   {
      this.DebugSettings.EnableFrameRateCounter = true;
   }
   #endif

   Frame rootFrame = Window.Current.Content as Frame;

   if (rootFrame == null)
   {
      rootFrame = new Frame();
      rootFrame.NavigationFailed += OnNavigationFailed;

     if (e.PreviousExecutionState == ApplicationExecutionState.Terminated){}

     Window.Current.Content = new SamplePage(rootFrame); //rootFrame;
   }
   Window.Current.Activate();
 }
  • View Code pada MainPage.axml, dan masukkan code berikut pada constructor nya :
 public SamplePage(Frame frame)
 {
    this.InitializeComponent();
    this.FormSplitView.Content = frame;
 }

Selesai, silahkan jalankan program anda.. Happy coding.. 🙂

%d bloggers like this: