oleh: Julius Fenata Pembaca yang budiman, pada kesempatan kali ini saya akan mengajak saudara untuk mempelajari salah satu teknologi pengembangan aplikasi dengan menggunakan Visual Studio 2010 Express Edition (disertakan dalam CD). Teknologi ini disebut Windows Presentation Foundation (WPF), merupakan suatu teknologi yang dikembangkan Microsoft untuk memperkaya pengalaman pengguna (User Experience) dalam beraktifitas dengan aplikasi yang dibangun dengan menggunakan teknologi ini. Untuk menjelaskannya, saya akan mengajak para pembaca yang budiman untuk bersama-sama dengan saya untuk mencoba membangun sebuah aplikasi kecil yang harapannya akan dapat memberikan pencerahan dalam memahami aplikasi teknologi ini dalam kebutuhan bisnis sehari-hari. Kali ini kita akan membuat suatu kerangka (scaffolding) untuk keperluan data binding untuk aplikasi anda, dimana nantinya kita dapat mempresentasikan data yang anda miliki pada database pada jendela aplikasi yang anda buat. Modul 1 – Menambahkan koneksi database ke dalam project dengan menggunakan Data Sources 1. Anda dapat memulai dengan membuka aplikasi Visual Studio Express anda (setelah terinstall dengan baik) lewat Start menu Windows anda, dengan menuju Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual C# 2010 Express. 2. Setelah aplikasi Visual Studio anda terbuka. Pilih File | New Project pada menu command. Beri nama pada aplikasi bisnis pertama anda: MyFirstBizApplication.
9
Embed
Form aplikasi bisnis dengan menggunakan teknologi WPF
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
oleh: Julius Fenata
Pembaca yang budiman, pada kesempatan kali ini saya akan mengajak saudara untuk mempelajari salah
satu teknologi pengembangan aplikasi dengan menggunakan Visual Studio 2010 Express Edition
(disertakan dalam CD).
Teknologi ini disebut Windows Presentation Foundation (WPF), merupakan suatu teknologi yang
dikembangkan Microsoft untuk memperkaya pengalaman pengguna (User Experience) dalam
beraktifitas dengan aplikasi yang dibangun dengan menggunakan teknologi ini.
Untuk menjelaskannya, saya akan mengajak para pembaca yang budiman untuk bersama-sama dengan
saya untuk mencoba membangun sebuah aplikasi kecil yang harapannya akan dapat memberikan
pencerahan dalam memahami aplikasi teknologi ini dalam kebutuhan bisnis sehari-hari.
Kali ini kita akan membuat suatu kerangka (scaffolding) untuk keperluan data binding untuk aplikasi
anda, dimana nantinya kita dapat mempresentasikan data yang anda miliki pada database pada jendela
aplikasi yang anda buat.
Modul 1 – Menambahkan koneksi database ke dalam project dengan menggunakan Data
Sources
1. Anda dapat memulai dengan membuka aplikasi Visual Studio Express anda (setelah terinstall
dengan baik) lewat Start menu Windows anda, dengan menuju Start | All Programs | Microsoft
Visual Studio 2010 Express | Microsoft Visual C# 2010 Express.
2. Setelah aplikasi Visual Studio anda terbuka. Pilih File | New Project pada menu command. Beri
nama pada aplikasi bisnis pertama anda: MyFirstBizApplication.
3. Pilih root window (pastikan anda tidak memilih grid yang berada di dalam windows – dan anda
dapat menekan tombol ‘F4’ pada keyboard anda untuk membuka jendela properties di panel
sebelah kanan bawah anda, untuk memastikan nama komponen yang anda seleksi).
4. Masih pada jendela Properties, ubah property Width dari root window anda menjadi 800,
lakukan hal yang sama untuk property Height-nya menjadi 600.
5. Pada sudut kanan atas, anda akan mendapatkan panel-panel yang tertutup – yaitu Toolbox,
Document Outline dan Data Sources. Arahkan mouse anda pada tulisan Data Sources, dimana
panel tersebut akan terbuka – dan pada saat panel tersebut terbuka, anda dapat ubah setting
panel tersebut sehingga akan selalu dalam kondisi terbuka dengan menekan icon pin Auto Hide
yang terdapat pada sudut kanan atas panel tersebut.
6. Sekarang kita akan menunjuk source data dari aplikasi bisnis yang akan kita buat/tampilkan.
Pada panel tersebut, klik tulisan Add New Data Source.
7. Pilih tipe data source yang hendak anda buat: Database. Klik Next.
8. Pilih Database Model-nya, untuk aplikasi ini pilih: DataSet. Klik Next.
9. Kemudian kita harus membuat sebuah koneksi data ke database. Klik New Connection.
1. Ubah Data source menjadi Microsoft SQL Server Database file.
2. Tekan tombol Browse di sebelah Database file name. Pilih database file yang disertakan
dalam CD (Southridge.mdf).
3. Tekan tombol Test Connection di sebelah kiri bawah jendela tersebut – tunggu sampai
anda memperoleh konfirmasi bahwa koneksi anda berhasil. Lanjutkan dengan menekan
tombol OK.
4. Pada halaman selanjutnya klik Next.
5. Klik Next. Klik Yes apabila anda diminta untuk meng-copy file database anda di dalam
lokal project folder anda.
6. Pada halaman berikutnya anda diminta konfirmasi untuk menyimpan dan menentukan
nama Connection String yang hendak digunakan, kita akan menggunakan nama yang
sistem anjurkan – klik Next.
7. Pilih Database Objects yang hendak digunakan:
1. Klik checkbox di sebelah kiri untuk mengembangkan detail dari Tables | Listings,
check MLS, Title, Price and PrimaryPhoto.
2. Check Tables | Neighborhoods.
3. Check Tables | Viewings.
8. Klik Finish.
10. Saat ini, anda dapat melihat munculnya database schema pada jendela data sources.
11. Anda dapat melakukan build pada solusi/aplikasi anda untuk melihat apakah aplikasi anda
berjalan dengan baik dengan menekan tombol ‘F6’ pada keyboard.
Modul 2 – Menggunakan Data Sources yang telah dibuat untuk menambahkan Data-Bound
controls (component) di Window
Sekarang kita akan menambahkan komponen pada jendela (window) aplikasi anda. Pada umumnya
setiap objek yang kita taruh pada jendela aplikasi kita – kita sebut dengan komponen (component) atau
kontrol (control).
Tahap pertama, kita akan menampilkan sebuah control yang dapat menampilkan data yang terdapat di
dalam database. Komponen tersebut adalah Data-Bound Control (kontrol yang terhubung dengan data
yang kita miliki pada database), tujuannya adalah supaya kita bisa melakukan manipulasi terhadap data,
seperti navigasi dalam menampilkan data-data yang kita miliki yang terdapat dalam database.
1. Pada jendela Data Sources, klik Listings dropdown list dan pilih Details.
2. Drag dan drop Listings dropdown tersebut ke jendela aplikasi anda, seperti yang terlihat di
bawah ini.
3. Drag dan drop Viewings foreign key table ke jendela aplikasi anda, seperti yang terlihat di
bawah ini.
4. Aplikasi anda akan terlihat seperti ini:
5. Buka panel Toolbox di sebelah kanan atas, tambahkan 2 button pada jendela aplikasi anda.
6. Pada jendela Properties, beri nama pada Content property menjadi Forward.
7. Kemudian masih pada jendela yang sama, ubah Name dari komponen ini menjadi
forwardButton.
8. Untuk sementara ini seharusnya tampilan jendela aplikasi anda menjadi seperti ini:
9. Double klik tombol Forward yang baru anda buat pada jendela aplikasi. Visual Studio akan
membawan anda ke layar untuk melakukan coding (code view) untuk anda memberikan