FontViewer sederhana menggunakan SharpDevelop

Pada postingan ini akan dibuat aplikasi sederhana menggunakan C# yang akan memperlihatkan jenis-jenis font yang telah terinstall secara default dalam windows yang kita miliki. Project ini dibuat dalam sharpdevelop. Ok pertama-tama mari kita buat project barunya :

Setelah itu atur tampilan GUI-nya. Pada tab "Design", drag 1 biji textblock dan listbox (beri nama : fontlist) :

Kemudian tambahkan textbox, dan 4 buah texblock seperti terlihat di bawah :

Beri nama pada textbox sebagai "sourceText", kemudian untuk 4 biji textblock yang berada dibawahnya masing-masing bernama tb1 sampai t4. Contoh xml-nya bisa dilihat di bawah :

Pada tb2, ganti ukuran font-nya menjadi 16, tb3 menjadi 20 dan tb4 menjadi 24. Kemudian beri text pada textbox, terserah aja text-nya, klu disini :

Kemudian untuk textblok yang berada di atas listbox, textnya diganti menjadi : "Silahkan pilih jenis font :". Nah sampai disini, jika programnya kita run, hasilnya :

Beralih ke tab "source" atau file xml-nya, pada listbox, tambahkan kode xml berikut :

Kode xml tersebut akan membuat itemSource pada listbox mengacu pada Font.SystemFontFamilies yang merupakan jenis-jenis font yang terdapat dalam windows. Nah...klu projectnya di run, listbox akan berisi jenis-jenis font seperti terlihat di bawah :

Ok.... Sederhanakan... :D... Next beralih ke tb1. pada tb1 tambahkan kode xml berikut(komponen Text="TextBlock" diapus dulu tapi) :

Di sini kita menggunakan teknik "binding" untuk menghubungkan komponen-komponen dalam GUI yang telah dibuat. Perhatikan Text = "{Binding ElementName = sourceText.... Maksudnya Text pada TextBlock ini terhubung ke sourceText yang berupa TextBox. Pada TextBox terdapat element "Text", nah text ini yang diambil oleh TextBlock dan dimasukkan ke komponen text-nya. Jadi intinya apapun text yang terdapat pada sourceText akan ditampilkan pula text yang sama pada tb1 ini. Kemudian, pada fontFamiliy kita lihat terhubung ke fontList (ListBox), Pathnya adalah selectedItem. Sow... tb1 ini akan mempunya jenis font sesuai dengan yang font yang dipilih pada fontList. Untuk melihat contohnya, projectnya bisa dijalankan, kemudian ganti text pada sourceText, dan pilih-pilih jenis font pada fontlist, maka kita akan lihat perubahan langsung terjadi pada tb1 ini.

Nah gambar diatas adalah tampilan awal, Coba kita ganti text pada textBox menjadi hellow Poipo, kemudian pilih salah-satu fontlist :

Terlihat text pada tb1 secara otomatis berubah ketika text pada sourceText kita ganti. Begitu pula ketika kita memilih salah-satu jenis font pada fontlist, terlihat fontnya juga langsung berubah... :D

Nah.... 2 baris kode tersebut ditambahkan juga ke tb2, tb3, dan tb4 (jangan lupa komponen Text="TextBlock" diapus dulu):

Nah... selese deh.... Coba kita lihat hasilnya :

Yah.... Silahkan dicoba-coba.... :D

Sekian.... Semoga bermanfaat..... ;-)

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... :-)