Binary Tree

Pohon biner adalah jenis pohon yang memiliki ke khasan, yaitu jumlah anak setiap simpul maksimal dibatasi dua buah saja.

1. Node

Pada dasarnya pohon biner sama saja dengan list hanya saja koneksinya lebih dari 1. Biasanya node  tree terdiri dari 2 bagian, data dan koneksi. Pada pohon biner terdapat koneksinya adalah koneksi kiri (anak kiri) dan koneksi kanan (anak kanan).

node

   Gambar 1. Representasi Node

  • Data adalah nilai yang disimpan didalam node dan biasanya tipe datanya adalah tipe data primitif.
  • Sedangkan L adalah koneksi yang menghubungkan dengan Node sebelah kiri.
  • dan R adalah koneksi yang menghubungkan dengan Node sebelah kanan.

Ada juga Node yang memiliki 3 koneksi, yaitu kanan, kiri dan parent.

Picture1

Gambar 2. Node dengan 3 koneksi

Parent adalah koneksi yang menghubungkan Node dengan Node orang tuanya. Sehingga anaknya bisa mengetahui data orang tuanya. Berbeda dengan Gambar 1, hanya orang tua yang mengenali anak tetapi tidak sebaliknya.

2. Pohon

Sebuah pohon harus memiliki akar atau root. Root dari sebuah pohon tidak boleh lepas karena root adalah pangkal dari sebuah pohon. Jika kita mengetahui pangkal sebuah pohon maka otomatis kita bisa menngunjungi semua node pada pohon tersebut.

Jenis-Jenis Binary Tree

  1. Full Binary Tree
    Pohon biner yang semua nodenya (kecuali leaf) pasti memiliki 2 anak dan tiap subtree memiliki tinggi pohon yang sama.
    Picture2
  2. Complete Binary Tree
    Pohon biner yang mirip dengan full binary tree tetapi tiap subtree memiliki selisih ketinggian minimal 1. Contoh tinggi pohon kiri 2 dan pohon kanan 1. maka selisihnya adalah 1. Jika selisih 1 maka pohon di bawah ini dapat diseput pohon complete.
    Picture3
  3. Skewed Binary Tree
    Pohon biner yang semua nodenya hanya memiliki 1 anak dan pohonnya condong. Misal condongnya ke kiri maka semua node hanya memiliki anak kiri semua begitu juga sebaliknya.
    Picture4

 

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

%d bloggers like this: