Assalamualaikum,
Sebelumnya telah dijelaskan mengenai bagaimana XAML dan C# berkomunikasi. Salah satu cara yang mudah adalah dengan memanipulasi atributnya. Terkadang ada data yang berbentuk collection(kumpulan data dengan format yang sama) yang harus ditampilkan secara bersamaan. Bagaimana cara mengatasinya?
Ada metode komunikasi lain, yaitu data binding. Databinding(menurut saya) adalah metode komunikasi antara komponen XAML dan C# yang melibatkan data collection dengan banyak entri. Meskipun(bagi saya) set-up nya tidak mudah, tapi ketika digunakan nantinya akan sangat nyaman.
Paling tidak, ini yang saya pelajari bagaimana bekerja dengan data binding :
1. Buat class property untuk collection yang akan kita buat nanti
Class property ini mendeklarasikan komponen apa saja yang harus ada dalam collection tersebut. Analoginya, collection adalah showroom. Di dalam collection ada item atau dianalogikan dengan mobil. Masing-masing mobil memiliki beberapa sifat, seperti warna, mesin, ukuran, berat, dll. Nah, sifat ini disebut class property. Class property ini harus kita set up di awal waktu, agar nantinya tidak terjadi inkonsistensi data(data yang formatnya berubah-ubah).
Set up nya kurang lebih seperti ini :
Baris yang ada {get; set;} nya disebut auto property, mudahnya adalah memunculkan property baru untuk sebuah class. Kemudian ada satu method disana untuk meng-construct variable ketika ada parameter yang masuk. Ibaratnya, misal ketika ada mobil baru dsebuah showroom, dan ada data seperti berikut "5 roda, merah, diesel, 2 tahun" , nah, data-data ini harus dimasukan ke kolom dimana data itu harus berada. Data "5 roda" dimasukkan ke property "jumlah roda", data "merah" harus dimasukkan ke property "warna", dan seterusnya.
Nah, sekarang kita kaitkan dengan aplikasi Juragan Pulsa Ultimate. Untuk mengirim pulsa(via member galeri) secara sederhana kita membutuhkan 3 komponen, yaitu kode pulsa, nomor HP, dan PIN user.
Yang sering menjadi kendala adalah kode pulsa, orang-orang jarang yang hafal kode pulsa, misal pulsa SMS, pulsa Internet, pulsa Telepon, dll. Untuk mengatasinya, kita akan sediakan collection yang akan menentukan kode pulsa berdasarkan jenis operator dan nominalnya. Misalkan dipilih operator indosat dan nominal 25k sms , maka kode nya adalah IS25 atau semacamnya. Pemilihan kode ini dapat dilakukan dengan mencocokan property pada item-item di collection. Analogikan lagi dengan showroom dan mobilnya, misal kan kita mencari sebuah mobil, kriterianya adalah berwana merah, bermesin diesel, ukuran pxqxr, dll. Kita tinggal mencari pada collection, item mana yang atributnya sama dengan yang diinginkan, kemudian mengambil property nama dari atribut tersebut.
2. Membuat Database collection secara manual
Setelah kita membuat propertynya, saatnya kita isi "showroom" kita dengan "mobil". Kurang lebih begini cara membuat database collection secara manual. Bagian ini sangat menyengsarakan, me-nyeng-sa-ra-kan:
Nah, kita tinggal memasukkan data dengan urutan parameter SESUAI dengan urutan pada method construct saat kita membuat class property pada poin 1 diatas. Sederhana, namun butuh perjuangan.
3. Mempersiapkan template di XAML untuk menerima data
Kita akan menggunakan Listpicker untuk menampilkan data. List picker ini adalah fitur yang dimiliki oleh package bernama "Windows Phone Toolkit". Kita harus menginstal package tersebut kedalam project kita sebelum menggunakanya. Percayalah, butuh usaha siang malam untuk menginstalnya pada VS2012 yang bermasalah. :"
Setelah menguasai Tag list picker nya, kita tinggal memberi binding value pada atribut yang ingin kita masuki data. Misalnya seperti diatas, kita mendeklarasikan sebuah data template yang berisi textblock. Jadi nantinya setiap item pada collection akan direpresentasikan dalam bentuk textblock. Data yang akan dimasukkan di textblock tersebut akan mengubah atribut Text pada komponen textblock.
4. Trigger pemasukkan datanya
Setelah, setup semua yang diperlukan, ini saatnya untuk menentukan kapan data tersebut dapat ditampilkan.
Contoh trigger nya adalah sebagai berikut :
Demikian sedikit share databinding in nutshell , semoga bermanfaat, kita kebut artikel selanjutnya.
wasalamualaikum,
Sebelumnya telah dijelaskan mengenai bagaimana XAML dan C# berkomunikasi. Salah satu cara yang mudah adalah dengan memanipulasi atributnya. Terkadang ada data yang berbentuk collection(kumpulan data dengan format yang sama) yang harus ditampilkan secara bersamaan. Bagaimana cara mengatasinya?
Ada metode komunikasi lain, yaitu data binding. Databinding(menurut saya) adalah metode komunikasi antara komponen XAML dan C# yang melibatkan data collection dengan banyak entri. Meskipun(bagi saya) set-up nya tidak mudah, tapi ketika digunakan nantinya akan sangat nyaman.
Paling tidak, ini yang saya pelajari bagaimana bekerja dengan data binding :
1. Buat class property untuk collection yang akan kita buat nanti
Class property ini mendeklarasikan komponen apa saja yang harus ada dalam collection tersebut. Analoginya, collection adalah showroom. Di dalam collection ada item atau dianalogikan dengan mobil. Masing-masing mobil memiliki beberapa sifat, seperti warna, mesin, ukuran, berat, dll. Nah, sifat ini disebut class property. Class property ini harus kita set up di awal waktu, agar nantinya tidak terjadi inkonsistensi data(data yang formatnya berubah-ubah).
Set up nya kurang lebih seperti ini :
public class NominalProperty
{
public int OperatorId { get; set; }
/* Keterangan ID :
* 0- Telkomsel
* 1- XL
* 2- Indosat
* 3- StarOne
* 4- Axis
* 5- Flexi
* 6- Esia
* 7- Smartfren
* 8- Hepi
* 9- Ceria
* 10- Tri
*/
public string NominalCode { get; set; }
public string NominalDescription { get; set; }
public int Harga { get; set; }
public NominalProperty(int operatorId, string nominalCode, string nominalDescription, int harga)
{
this.OperatorId = operatorId;
this.NominalCode = nominalCode;
this.NominalDescription = nominalDescription;
this.Harga = harga;
}
}
Baris yang ada {get; set;} nya disebut auto property, mudahnya adalah memunculkan property baru untuk sebuah class. Kemudian ada satu method disana untuk meng-construct variable ketika ada parameter yang masuk. Ibaratnya, misal ketika ada mobil baru dsebuah showroom, dan ada data seperti berikut "5 roda, merah, diesel, 2 tahun" , nah, data-data ini harus dimasukan ke kolom dimana data itu harus berada. Data "5 roda" dimasukkan ke property "jumlah roda", data "merah" harus dimasukkan ke property "warna", dan seterusnya.
Nah, sekarang kita kaitkan dengan aplikasi Juragan Pulsa Ultimate. Untuk mengirim pulsa(via member galeri) secara sederhana kita membutuhkan 3 komponen, yaitu kode pulsa, nomor HP, dan PIN user.
Yang sering menjadi kendala adalah kode pulsa, orang-orang jarang yang hafal kode pulsa, misal pulsa SMS, pulsa Internet, pulsa Telepon, dll. Untuk mengatasinya, kita akan sediakan collection yang akan menentukan kode pulsa berdasarkan jenis operator dan nominalnya. Misalkan dipilih operator indosat dan nominal 25k sms , maka kode nya adalah IS25 atau semacamnya. Pemilihan kode ini dapat dilakukan dengan mencocokan property pada item-item di collection. Analogikan lagi dengan showroom dan mobilnya, misal kan kita mencari sebuah mobil, kriterianya adalah berwana merah, bermesin diesel, ukuran pxqxr, dll. Kita tinggal mencari pada collection, item mana yang atributnya sama dengan yang diinginkan, kemudian mengambil property nama dari atribut tersebut.
2. Membuat Database collection secara manual
Setelah kita membuat propertynya, saatnya kita isi "showroom" kita dengan "mobil". Kurang lebih begini cara membuat database collection secara manual. Bagian ini sangat menyengsarakan, me-nyeng-sa-ra-kan:
public List<NominalProperty> DataNominal()
{
List<NominalProperty> nominalCollection = new List<NominalProperty>();
//Telkomsel
nominalCollection.Add(new NominalProperty(0, "5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(0, "10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(0, "20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(0, "25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(0, "50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(0, "100", "100k Regular", 0));
//XL
nominalCollection.Add(new NominalProperty(1, "XB5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(1, "XB10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(1, "XB25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(1, "XB50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(1, "XB100", "100k Regular", 0));
nominalCollection.Add(new NominalProperty(1, "HR2G", "2GB Internet", 0));
nominalCollection.Add(new NominalProperty(1, "HR3G", "3GB Internet", 0));
nominalCollection.Add(new NominalProperty(1, "HR5G", "5GB Internet", 0));
nominalCollection.Add(new NominalProperty(1, "SN11G", "11GB Internet", 0));
nominalCollection.Add(new NominalProperty(1, "BBGAUL", "BB Gaul", 0));
nominalCollection.Add(new NominalProperty(1, "BBBIZZ", "BB Bizz", 0));
nominalCollection.Add(new NominalProperty(1, "BBF50", "BB Full(50)", 0));
nominalCollection.Add(new NominalProperty(1, "BBFULL", "BB Full(70)", 0));
nominalCollection.Add(new NominalProperty(1, "BB3IN1", "BB All in One", 0));
//Indosat
nominalCollection.Add(new NominalProperty(2, "I5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I12", "12k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I100", "100k Regular", 0));
nominalCollection.Add(new NominalProperty(2, "I5G", "5k GPRS", 0));
nominalCollection.Add(new NominalProperty(2, "I10G", "10k GPRS", 0));
nominalCollection.Add(new NominalProperty(2, "I25G", "25k GPRS", 0));
nominalCollection.Add(new NominalProperty(2, "I5S", "5k SMS", 0));
nominalCollection.Add(new NominalProperty(2, "I10S", "10k SMS", 0));
nominalCollection.Add(new NominalProperty(2, "I25S", "25k SMS", 0));
nominalCollection.Add(new NominalProperty(2, "TI25", "25k Telepon", 0));
nominalCollection.Add(new NominalProperty(2, "TI50", "50k Telepon", 0));
//StarOne
nominalCollection.Add(new NominalProperty(3, "ST5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(3, "ST10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(3, "ST25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(3, "ST50", "50k Regular", 0));
//Axis
nominalCollection.Add(new NominalProperty(4, "AX1", "1k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX15", "15k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(4, "AX100", "100k Regular", 0));
//Flexi
nominalCollection.Add(new NominalProperty(5, "FL5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(5, "FL10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(5, "FL20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(5, "FL50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(5, "FL100", "100k Regular", 0));
//ESIA
nominalCollection.Add(new NominalProperty(6, "E5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(6, "E10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(6, "E15", "15k Regular", 0));
nominalCollection.Add(new NominalProperty(6, "E25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(6, "E50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(6, "E100", "100k Regular", 0));
//Smartpren
nominalCollection.Add(new NominalProperty(7, "SM5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(7, "SM10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(7, "SM20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(7, "SM25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(7, "SM50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(7, "SM100", "100k Regular", 0));
//HEPI
nominalCollection.Add(new NominalProperty(8, "HP5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(8, "HP10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(8, "HP25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(8, "HP50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(8, "HP100", "100k Regular", 0));
//CERIA
nominalCollection.Add(new NominalProperty(9, "CR5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(9, "CR10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(9, "CR20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(9, "CR50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(9, "CR100", "100k Regular", 0));
//Tri
nominalCollection.Add(new NominalProperty(10, "T1", "1k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T30", "30k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T100", "100k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "T200", "200k Regular", 0));
nominalCollection.Add(new NominalProperty(10, "JANET", "Janet Regular", 0));
nominalCollection.Add(new NominalProperty(10, "JANETPLUS", "Janet Plus", 0));
nominalCollection.Add(new NominalProperty(10, "JUMBO", "Jumbo", 0));
nominalCollection.Add(new NominalProperty(10, "AON1", "1Bulan AON", 0));
nominalCollection.Add(new NominalProperty(10, "AON6", "6Bulan AON", 0));
nominalCollection.Add(new NominalProperty(10, "AON12", "12Bulan AON", 0));
nominalCollection.Add(new NominalProperty(10, "SP1GB", "1GB Paket", 0));
nominalCollection.Add(new NominalProperty(10, "SP2GB", "2GB Paket", 0));
nominalCollection.Add(new NominalProperty(10, "BBTRI", "BB", 0));
nominalCollection.Add(new NominalProperty(10, "IN2GB", "2GB Internet", 0));
nominalCollection.Add(new NominalProperty(10, "IN6GB", "6GB Internet", 0));
//Tidak Dikenal
nominalCollection.Add(new NominalProperty(11, "5", "5k Regular", 0));
nominalCollection.Add(new NominalProperty(11, "10", "10k Regular", 0));
nominalCollection.Add(new NominalProperty(11, "20", "20k Regular", 0));
nominalCollection.Add(new NominalProperty(11, "25", "25k Regular", 0));
nominalCollection.Add(new NominalProperty(11, "50", "50k Regular", 0));
nominalCollection.Add(new NominalProperty(11, "100", "100k Regular", 0));
return nominalCollection;
}
Nah, kita tinggal memasukkan data dengan urutan parameter SESUAI dengan urutan pada method construct saat kita membuat class property pada poin 1 diatas. Sederhana, namun butuh perjuangan.
3. Mempersiapkan template di XAML untuk menerima data
Kita akan menggunakan Listpicker untuk menampilkan data. List picker ini adalah fitur yang dimiliki oleh package bernama "Windows Phone Toolkit". Kita harus menginstal package tersebut kedalam project kita sebelum menggunakanya. Percayalah, butuh usaha siang malam untuk menginstalnya pada VS2012 yang bermasalah. :"
<toolkit:ListPicker x:Name="nominalText" ItemsSource="{Binding}" ExpansionMode="ExpansionAllowed" FullModeHeader="Pilih Nominal" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding NominalDescription, Mode=TwoWay}"/>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding NominalDescription, Mode=TwoWay}" FontSize="33" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Setelah menguasai Tag list picker nya, kita tinggal memberi binding value pada atribut yang ingin kita masuki data. Misalnya seperti diatas, kita mendeklarasikan sebuah data template yang berisi textblock. Jadi nantinya setiap item pada collection akan direpresentasikan dalam bentuk textblock. Data yang akan dimasukkan di textblock tersebut akan mengubah atribut Text pada komponen textblock.
4. Trigger pemasukkan datanya
Setelah, setup semua yang diperlukan, ini saatnya untuk menentukan kapan data tersebut dapat ditampilkan.
Contoh trigger nya adalah sebagai berikut :
nominalText.ItemsSource = DataNominal();
Penempatan trigger ini harus sesuai kebutuhan. Juragan pulsa sendiri, sebelum menerapkan data bindingnya, collection DataNominal di filter sesuai operator, collection akan dipilih kemudian item dengan operatorID sesuai dengan nominal tertentu akan dipindahkan ke collection baru tersebut. Kemudian baru di trigger setiap kali operatorID berubah. VOILA~Demikian sedikit share databinding in nutshell , semoga bermanfaat, kita kebut artikel selanjutnya.
wasalamualaikum,
No comments:
Post a Comment