form aplikasi bisnis dengan menggunakan teknologi wpf

of 9/9
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.

Post on 30-Jun-2015

217 views

Category:

Documents

6 download

Embed Size (px)

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 perintah pada fungsi tombol Forward tersebut. CollectionViewSource cvs = (this.FindResource("listingsViewSource")) as CollectionViewSource; cvs.View.MoveCurrentToNext();

10. Berikut adalah tampilan perintah yang anda sisipkan pada tombol Forward anda:

11. Lakukan hal yang sama dengan tombol Back: set Content property menjadi Back. ubah Name dari komponen ini menjadi backButton. Double klik dan beri perintah pada tombol Back anda code yang tertera di bawah ini. CollectionViewSource cvs = (this.FindResource("listingsViewSource")) as CollectionViewSource; cvs.View.MoveCurrentToPrevious(); 12. Klik Debug | Start Debugging (atau tekan tombol F5) untuk menjalankan aplikasi. Selamat! Anda telah berhasil membuat sebuah aplikasi bisnis yang dapat menampilkan data-data yang anda miliki. Aplikasi ini memiliki informasi umum (header/master) dan juga dapat menampilkan informasi detail yang ditampilkan dalam bentuk grid. Untuk fungsi navigasi, terdapat 2 buah tombol untuk membawa anda maju ke record selanjutnya ataupun mundur ke record sebelumnya. Selain artikel diatas, anda juga dapat belajar dari beberapa portal pembelajaran di bawah ini, untuk membantu anda mengembangkan kemampuan anda dalam pembuatan program. http://msdn.microsoft.com/id-id http://geeks.netindonesia.net https://channel9.msdn.com http://students.netindonesia.net/blogs Apabila anda memiliki pertanyaan yang hendak diajukan, anda dapat mengajukan pertanyaan pada comment section versi online dari tutorial ini. Pertama-tama anda perlu register (sign-up) sebagai member dari portal di bawah ini dan segera setelah anda terdaftar anda dapat mengajukan pertanyaan pada comment section di alamat ini: http://students.netindonesia.net/blogs/idjoel/default.aspx SELAMAT MENCOBA! TETAP SEMANGAT!