Assalamualikum Wr. Wb
pada posting kali ini saya akan
membahas tentang materi perkuliahan saya yaitu: Visual Programming. kali ini
saya akan membahas tentang bagaimana kita memasukan sound pada Button.
ok... kita langsung saja dalam
pembahasan ...
- Pada new project dialog, ada isi beberapa isian yang perlu diisi :
1. Pilih menu Template > Visual
C#
2. Pilih Windows Phone Application template
3. Kolom Name diisi dengan ‘PetSounds’
4. Jangan lupa kolom Solution Name diisi dengan nama yang sama ‘PetSounds’.
5. Klik OK
2. Pilih Windows Phone Application template
3. Kolom Name diisi dengan ‘PetSounds’
4. Jangan lupa kolom Solution Name diisi dengan nama yang sama ‘PetSounds’.
5. Klik OK
Mungkin anda akan melihat dialog
seperti berikut ini :
Anda bisa memilih pilihan target
Windows Phone OS Version-nya. Apabila anda menggunakan Visual Studio 2010 dan
SDK 7.1, maka pilih saja yang Windows Phone
OS 7.1, tapi apabila anda menggunakan Visual Studio 2012 dan SDK 8.0 maka anda bisa memilih seperti pada gambar tersebut. Maksud dari pilihan tersebut adalah untuk menentukan versi OS berapa yang kita target untuk aplikasi yang akan kita develop.
OS 7.1, tapi apabila anda menggunakan Visual Studio 2012 dan SDK 8.0 maka anda bisa memilih seperti pada gambar tersebut. Maksud dari pilihan tersebut adalah untuk menentukan versi OS berapa yang kita target untuk aplikasi yang akan kita develop.
2. Menghapus komentar yang tidak
diperlukan
Setelah beberapa saat, new project akan di panggil dan
diload ke dalam Solution Expoler, dan MainPage.xaml akan ditampilkan di area
utama Visual Studio. Perlu diingat, file tersebut kita sebut sebagai ‘Page’.
Pada sesi ini kita akan bekerja pada single page.
Baik, saya asumsikan anda tidak vernah bekerja dengan Visual Studio Sebelumnya. Kamu akan melihat MainPage.xaml pada visual designer.
Baik, saya asumsikan anda tidak vernah bekerja dengan Visual Studio Sebelumnya. Kamu akan melihat MainPage.xaml pada visual designer.
Anda bisa menghapus
komentar-komentar tersebut (yang ada dikotak merah), hati-hati anda harus menghapus
kode mulai dari <!- - sampai - ->. Sehingga XAML anda akan terlihat
seperti berikut ini
Kita akan focus pada ‘ContentPanel’
yang dimulai dari baris no 36 (lihat gambar diatas) diantara <Gird>
pembuka dan </Grid> penutup.
3. Menambahkan button control
Tambahkan code berikut ini diantara pembuka dan penutup <Grid> element.
Ingat, smentara ini anda hanya
menambhakn kode berikut :
<Button>Quack</Button>.
<Button>Quack</Button>.
Button yang kita tambahakn memenuhi
area screen yang tersedia, kita perlu melakukan beberapa pengaturan, contohnya
pengaturan Width dan High.
Maka visual designer akan berubah
seperti ini.
Mari kita pindahkan posisi button
tersebut ke bagian pojok kiri atas dengan warna background merah.
Disini kita juga perlu menambahkan
attribute ‘Name’ untuk referensi di file C#. Kembali ke visual designer.
Baik, ini merupakan awal yang bagus
buat anda. Anda bisa mendesain ulang button nys sesuai dengan keinginan anda
suatu saat nanti.
4. Menambahkan MediaElement control
Sekarang mari kita tambahkan media element dibawah button untuk memutar media.
5. Menambahkan audio file kedalam
project
Kita akan menambahkan PetSounds_Assets yang telah anda copy. Kita lihat pada Solution Exploer, target untuk menyimpan assets tersebut adalah pada sub folder Assets.
Kita akan menambahkan PetSounds_Assets yang telah anda copy. Kita lihat pada Solution Exploer, target untuk menyimpan assets tersebut adalah pada sub folder Assets.
Buka Windows Explorer, kemudian drag
and drop folder PetSounds_Assets/Audio ke sub folder Assets yang ada pada
Solution Explorer.
Ada beberapa file audio yang kita
tambahkan, tapi untuk sementara ini kita akan menggunakan hanya satu saja.
Sekarang tambahkan kode pada media element, sehingga menjadi seperti berikut
- Pertama, attribute x:Name akan kita butuhkan untuk memanggil element ini pada C#.
- Kedua kita menambahka attribute Source untuk menentukan file audio mana yang akan kita play.
- Ketiga kita menambahkan attribute volume untuk menentukan keras suaranya, volume ini range nya antara 0.0 – 1.
- Terakhir kita menambahakan attribute AutoPlay menjadi False untuk menentukan bahwa audio tidak akan langsung dijalankan ketika aplikasi dijalankan.
6. Menambahkan event Handler
Pada element <Button> kita akan menambahkan attribute Click=””, visual studio akan memebrikan suggestion kepada kita untuk membuat event handler, lihat gambar.
Pada element <Button> kita akan menambahkan attribute Click=””, visual studio akan memebrikan suggestion kepada kita untuk membuat event handler, lihat gambar.
Setelah muncul seperti itu, maka
kita hanya perlu menekan tombol enter satu kali, sehingga akan menambahkan
event handler secara otomatis.
Sekarang kita harus menambahkan kode
yang akan dieksekusi ketika button tersebut di click. Jadi kita perlu menuju ke
method PlayAudioButton_Click pada file C#. Caranya gampang, klik kanan pada
text “PlayAudioButton_Click”, pilih “Navigate to Event Handler”.
Setelah itu kita akan dibawa ke file
MainPage.xaml.cs, dan kursor anda akan berada pada method
PlayAudioButton_click.
Block tersebut akan dieksekusi
ketika button di click. Oleh Karen itu kita perlu menambhakna kode untuk
men-trigger media element untuk play audio.
Kita menggakses attribute Name dari
media element yang sudah kita deklarasiakan pada file XAML. Kemudian kita
memanggil method Play() untuk play audio yang ada pada source, dengan kata lain
file Duck.wav.
7. Menjalankan aplikasi
Kemudian kita run aplikasinya
dengan cara menekan F5 atau menekan tombol seperti gambar berikut ini
Apabila tidak ada error, maka
emulator akan muncul seperti gambar dibawah ini. JIka ada error mka kita harus
mencari errornya sebelah mana.
Anda bisa mencoba untuk klik button
tersebut, kemungkinana file audionya tidak akan dapat di play di emulator,
apabila tidak ada pesan error ketika klik button tersebut berarti anda telah
berhasil mebuat aplikasi tersebut, SELAMAT!!!
Untuk kembali meng-edit project tersebut kita perlu men-stop aplikasi yang sedang berjalan,
8. Kesimpulan
Pada pembelajaran sesi pertama ini, kita telah mebuat sound board app sederhana. Kita belajar telah belajar :
Pada pembelajaran sesi pertama ini, kita telah mebuat sound board app sederhana. Kita belajar telah belajar :
- Bagaimana membuat Windows Phone project
- Bagaimana memodifikasi file XAML dan bagaimana mengkonfigurasi control.
- Bagaimana menambahkan asset ke project dan mereferensikanya pada sebuah kode XAML
- Bagaimana kita menambahakn event handler untuk merespon user.
- Kita juga belajar bagaimana menghubungkan file MainPage.xaml dengan MainPage.xaml.cs.
- KIta belajar bagaimana men-trigger method untuk mengontrol play audio ketika user mengklik button.
- Terakhir kta belajar untuk menjalankan aplikasi pada emulator.
oke ... sekian dulu posting yang
saya buat. semoga bermanfaat....
Posting Komentar