SharpDevelop at First Glance

Pada postingan ini akan diperkenalkan tentang sharpdevelop. Disini akan diperlihatkan cara membuat project baru, menambakan item-item toolbox sharpdevelop, mengkompile/re/build project, dan merunning projectnya. Ummm.... Ok,, silahkan buka program sharpdevelopnya, begitu pertama kali dibuka akan muncul gambar berikut, cantik banget... :D

Kemudian pas udah masuk :

Eeum.... Tampilannya klasik, mirip-mirip eclipse eheheh... :D, terus sharpdevelop ini juga lebih terasa ringan dari visual studio dan juga eclipse. Begitu dibuka, loading dikit, trs udaaah... padahal pengen loading lama-lama biar liad gambar ikannya lebih lamaa hahaha... Waaah... First glance SharpDevelop kereun deh.... :-) Moga-moga nanti tidak mengecewakan karena banyak bugs atw fiturnya tidak memadai untuk pengembangan program di C#...Aamiin.. :-)

Ok... Terus... pada menu file, pilih new, terus pilih solution, atw boleh langsung tekan Ctrl+Shift+N seperti terlihat di bawah :

Terus pilih C#, pilih WPF, terakhir WPF Application, tambahkan juga namaproject dan lokasinya :

Terus, tinggal tekan tombol "Create", Nah... tampilan pertama yang bisa kita lihat :

Tab "Tools" di atas adalah tempat semua komponen-komponen GUI yang bisa langsung di drag ke mainWindow. Terus disini, bagian xml dipisain sama tampilan GUInya langsung, jadi agak beda yah dengan di visual studio :D. Terus coba kita tambahkan 1 button ke dalam main window, untuk itu pertama-tama klik tab "Design", dan tab "Tools", terus dari tab "Tools" tersebut drag 1 biji button ke main window :

Bagian "properties" ada disebelah kanan seperti terlihat pada gambar di atas, nah dari situ kita bisa mengubah konfigurasi button tanpa harus melalui kode xml secara langsung. Terus nama dari button bisa diisikan pada label "name", tepat di bawah kata "properties". Di sini nama button tersebut belum ada. Terus klu kita langsung double klik buttonnya, akan langsung lompat ke file cs-nya, sama persis dengan visual studio, cuman di sharpdevelop ini, kode bawaannya lebih menawan, bisa dilihat :

Yang perlu digaris-bawahi adalah kode yang di line 33, itu adalah kode bawaan dari sharpdevelop dan tidak boleh di eksekusi, makanya dijadiin comment di sini. Jadi yang dieksekusi ketika button di pencet hanya message box-nya saja :

Untuk menjalankan programnya bisa langsung tekan tombol "run" :

Atau klik kanan pada project, "pilih run project" :

Pada gambar diatas, terlihat bahwa kita juga dapat memilih Build, Rebuild, Clean, Set as StartUp Project, dsb....

Kemudian jika konfigurasi "debug" ingin diganti ke "release" :

Terusss... apa lagi  yah...???


Saya pikir cukup demikian,,, moga bermanfaat sesi pengenalannya ke SharpDevelop... :-)

Membuat berbagai macam chart menggunakan ~Toolkit.dll di C# - WPF

Sebelumnya kita telah membuat chart dari scratch {pie chart} seperti yang terdapat pada postingan ini. Nah di postingan ini akan dibuat chart kembali, tetapi dengan  menggunakan dll, yaitu System.Windows.Controls.DataVisualization.Toolkit.dll. Jadi silahkan download dulu dll tersebut lewat google atau kalau Hisoka sendiri, ngedownloadnya dari link ini. Di web tersebut donwload source code dari "DatavisualizationDemos.zip",

Nah setelah projectnya didownload, terus extract, terus kompile atw run projectnya {eeeh..klu g' dicompile sm di run juga gpp :D}, terus di project tersebut masuk ke folder toolkit, nah didalam folder toolkit ini tersimpan file dll-nya sesuai dengan versi net framework yang kita gunakan, silahkan dilihat-dilihat terus dipilih :D.

Ok setelah dll-nya ketemu, pertama-tama mari kita buat project baru di visual studio 2010.

Kemudian silahkan tempatkan toolkit.dll pada folder debug dalam project ini:

Terus tambahkan referensi, dengan klik kanan pada "Reference" pilih "Add Reference..." :

Pilih tab "Browse" dan arahkan ke lokasi dll tersebut berada :

Nah setelah menekan tombol "OK", maka referensi baru akan ditambahkan ke dalam project ini, seperti terlihat di bawah :

Naah..berarti kita telah dapat menggunakan dll tersebut untuk project yang kita gunakan saat ini.

Ok... Mari kita menata tampilan GUI-nya pertama kali. Masukkan tab control, dan atur konfigurasi tab control ini sebagai berikut :

Kemudian pada collection dibagian item, tambahkan 6 items yaitu, Bar Series, Line Series, Column Series, Area Series, Pie Series, & Scatter Series :

Untuk menambahkan tab-tab pada control, lebih jelasnya bisa dilihat disini, klu memang yang gambar diatas belum jelas. Nah sampai disini GUI yang telah dibuat seperti terlihat di bawah :

Terus pada file xml-nya, ganti "/>" pada tiap-tiap tab item menjadi </TabItem> :

Next, kita tambahkan element baru pada komponen xml main window yang mengacu ke file dll yang telah kita masukkan sebelumnya, element xml yang ditambahkan adalah :
xmlns:Poipo_DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit", seperti terlihat di bawah :

Komponen "Poipo_DVC" itulah yang akan kita gunakan untuk membuat chart pada project ini. Sebagai catatan, sebenarnya ada banyak jenis chart yang bisa dibuat dari dll tersebut, cuman yang baru dicobain baru 6 biji, jadi disini cuma dibuat 6 biji saja hehehe... :D, dan sebagai tambahan juga langkah-langkah untuk membuat masing-masing chart tersebut sama, cuma nama tiap chart aja yang dibedain. So, disini cuma diperlihatkan secara rinci satu cara saja untuk membuat chart, sedangkan chart-chart yang lainnya itu sama saja cuma namanya aja yang dibedain. Ok, mari kita buat chart yang pertama yaitu "bar series", pada TabItem bar series tambahkan :

Nah perhatikan, nama element untuk Poipo_DVC:Chart tersebut yaitu "barChartSeries" dengan fitur height dan width adalah auto. Sebenarnya masih ada beberapa fitur-fitur lain yang bisa kita tambahkan, seperti warna background, ukuran text, dsb yang bisa kita edit langsung dari propertiesnya, contoh :

Sow, silahkan edit-edit sendiri propertiesnya sesuai keinginan. Balik ke xml, tambahkan element berikut :

Terus dalam komponen Chart.Series diatas tambahkan :

Kemudian letakkan kursor pada komponen barChartSeries, kemudian pilih icon listrik(event) pada pada visual studio, cari "initialized", kemudian masukkan nama fungsi misalnya "barSeriesInitialized", ilustrasi :

Setelah memasukkan nama fungsi di bagian initialized, tekan enter, maka kita secara otomatis beralih ke file .xml.cs tepat didalam fungsi "barSeriesInitialized". Biar lebih aman, tambahkan "using System.Windows.Controls.DataVisualization.Charting; " , kemudian dalam fungsi tersebut tambahkan kode di bawah :

Perhatikan barChartSeries adalah nama dari chart yang telah kita buat sebelumnya pada file xml, kemudian ("Hisoka", 12 ) dkk.. adalah komponen yang akan ditampilkan pada bar chart ini. Hasilnya seperti terlihat di bawah :

Nah... Untuk chart-chart berikutnya, langkah-langkahnya persis sama. Ummm... sebenarnya ini cuma salah-satu cara saja yang digunakan, masih ada beberapa langkah atau kode lain yang bisa kita gunakan untuk memanfaatkan pembuatan chart dari file dll ini, cuman hisoka pake cara yang ini aja :D

Ok, , kemudian untuk line series, pada file xml tambahkan kode xml yang sama, cuman namanya aja yang dibedain, jenis chart dan  nama fungsi initializednya :

Terus dalam fungsi "lineSeriesInitialized", tambahkan kode yang sama juga, cuman namanya aja yang beda :

Hasilnya :

Beralih ke tab Column Series, kode xml-nya juga hampir sama seperti terlihat di bawah :

Kode untuk columnSeriesInitialized :

Hasilnya :

Terus beralih ke Area Series, kode xml :

Kode untuk fungsi areaSeriesInitialized :

Daan... Hasilnya :

Lanjut untuk pie chart series, kode xml :

Kode untuk fungsi pieSeriesInitialized :

Hasil yang diperoleh untuk pie chart :

Siip... Yang terakhir untuk project ini adalah Scatter series, kode xml-nya :

Kode untuk fungsi scatterSeriesInitialized :

Hasilnya :

Alhamdulillah.....Selesee... demikian pemaparan beberapa jenis chart yang terdapat pada file toolkit.dll ini, seperti yang disebutkan diawal tadi, masih ada banyak jenis chart yang lain. Jadi silahkan diexplore untuk jenis-jenis chart yang lain. :-)

Sekian... semoga bermanfaat.... :-)