Gambas2 & Gambas3, Tutorial Menggunakan Tree View Control

Tutorial kali ini akan membahas penggunaan kontrol Tree View, kontrol ini biasa digunakan untuk memudahkan dalam penggolongan/grup suatu data, misalnya kota cilegon, serang dan tangerang di grupkan menjadi satu grup di dalam provinsi Banten.

Berikut ini adalah langkah-langkah untuk mencoba kontrol TreeView.

1. Buat project baru

2. Tambahkan/masukkan 1 kontrol TreeView pada Form, anda dapat memilihnya di toolbox di tab Form untuk Gambas2 dan di tab View untuk Gambas3.

Gambas2 dan Gambas3 TreeView Control
Gambas2

Gambas2 dan Gambas3 TreeView Control 
 Gambas3

4. Tambahkan/masukkan 3 kontrol button dan 1 Label, sehingga tampilannya seperti gambar di bawah ini
Gambas2 dan Gambas3 TreeView Control



5. Ketikan kode berikut di kode editor

' Gambas class file

'-------------------------------------------------------------------------------------------------------------------------------
'Author  : Zainudin Ahmad
'Site    : GambasPI.blogspot.co.id
'Title   : TreeView Example Code (for gambas2 & gambas3)
'--------------------------------------------------------------------------------------------------------------------------------

Private $hPicProvinsi As Picture
Private $hPicKota As Picture


Public Sub Form_Open()

  Me.Caption = "Tree View Example"

  Label1.Background = Color.TextBackground
  Label1.Caption = ""
 
  $hPicKota = Picture["icon:/24/flag"]
  $hPicProvinsi = Picture["icon:/24/earth"]
 
  Button1.Caption = "Add Parent"
  Button2.Caption = "Add Child"
  Button3.Caption = "Open Child Banten"
 
  Button2.Enabled = False
  Button3.Enabled = False

End

'Jika Button1 di klik maka akan menambahkan item dengan top level parent
Public Sub Button1_Click()

  TreeView1.Add("pv_JawaBarat", "Jawa Barat", $hPicProvinsi)
  TreeView1.Add("pv_Jakarta", "Jakarta", $hPicProvinsi)
  TreeView1.Add("pv_JawaTengah", "Jawa Tengah", $hPicProvinsi)
  TreeView1.Add("pv_Banten", "Banten", $hPicProvinsi)

  Last.enabled = False
  Button2.Enabled = True
End

'Jika Button2 di klik maka akan menambahkan child item ke masing-masing parent
'sebanyak 4 item untuk setiap item parent
Public Sub Button2_Click()
  Dim sProvinsi As String

  sProvinsi = "pv_JawaBarat"
  TreeView1.Add("kt_Bandung", "Bandung", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Bekasi", "Bekasi", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Bogor", "Bogor", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Ciamis", "Ciamis", $hPicKota, sProvinsi)

  sProvinsi = "pv_Jakarta"
  TreeView1.Add("kt_JakartaBarat", "Jakarta Barat", $hPicKota, sProvinsi)
  TreeView1.Add("kt_JakartaPusat", "Jakarta Pusat", $hPicKota, sProvinsi)
  TreeView1.Add("kt_JakartaTimur", "Jakarta Timur", $hPicKota, sProvinsi)
  TreeView1.Add("kt_JakartaUtara", "Jakarta Utara", $hPicKota, sProvinsi)
 
  sProvinsi = "pv_Banten"
  TreeView1.Add("kt_Cilegon", "Cilegon", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Tangerang", "Tangerang", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Serang", "Serang", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Lebak", "Lebak", $hPicKota, sProvinsi)
 
  sProvinsi = "pv_JawaTengah"
  TreeView1.Add("kt_Jepara", "Jepara", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Kebumen", "Kebumen", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Kelaten", "Kelaten", $hPicKota, sProvinsi)
  TreeView1.Add("kt_Kudus", "Kudus", $hPicKota, sProvinsi)
 
  Last.enabled = False
  Button3.Enabled = True
End

'Kode ini untuk menampilkan nama item di Label1 sewaktu item di TreeView tersebut di pilih
Public Sub TreeView1_Select()

  Label1.Text = TreeView1.Current.Text

End

'Pada bagian kode ini ketika button3 di klik untuk pertama kali maka akan
'membuka/memperlihatkan child dari item "Banten" dan jika di klik untuk yg kedua kalinya
'maka akan menutup/menyembunyikan child item "Banten".
'Kode ini berfungsi untuk memperlihatkan dan menyembunyikan Child item "Banten"
Public Sub Button3_Click()

  If TreeView1["pv_Banten"].Expanded Then
    TreeView1["pv_Banten"].Expanded = False
    Button3.Caption = "Open Child Banten"
  Else
    TreeView1["pv_Banten"].Expanded = True
    Button3.Caption = "Close Child Banten"
  Endif

End

6. Coba anda jalankan/run (tekan F5) , tampilanya akan terlihat seperti di bawah ini.

Gambas2 dan Gambas3 TreeView Control

Selamat Mencoba

Artikel Terkait :