Logika Pemrograman: Bab 4: Visual Basic .NET: Langkah Demi Langkah

Monday, December 12, 2016

Bab 4: Visual Basic .NET: Langkah Demi Langkah

EXTENSIBLE APPLICATION MARKUP LANGUAGE (XAML)

APA YANG AKAN ANDA PELAJARI PADA BAB INI:

1. Apa itu XAML dan bagaimana ia diterapkan pada .NET Framework

2. Bagaimanan XAML berelasi dengan Windows Presentation Foundation (WPF)

3. Bagaimana menciptakan aplikasi WPF dalam Visual Studio

Pada masa sebelumnya, perancang antarmuka user (UI, user interface) seringkali memanfaatkan perangkat-perangkat seperti Adobe Dreamweaver dan Photoshop untuk mengembangkan aplikasi Windows dan HTML untuk aplikasi Web. Meskipun perangkat-perangkat ini menawarkan kemampuan grafika terkini, namun perangkat-perangkat itu memiliki keterbatasan dalam menciptakan form Windows dan form Web.

Microsoft telah menyadari pemisahan antara perancang UI dan pengembang piranti dan telah menciptakan sebuah bahasa baru dan sejumlah perangkat untuk membantu para perancang UI, yang memampukan mereka untuk menciptakan form Windows dan form Web yang dipakai oleh para pengembang untuk menciptakan aplikasi-aplikasi tingkat dunia.

Bahasa baru ini adalah Extensible Application Markup Language (XAML), yang ucapkan dengan Zammel. Karena XAML merupakan bahasa markup, ia mendefinisikan elemen-elemen dari antarmuka pengguna. Ini memampukan bukan hanya Microsoft untuk menciptakan perangkat-perangkat untuk merancang antarmuka pengguna, tetapi juga perusahaan-perusahaan lain. Salah satu contoh adalah Perancang Aurora XAML untuk Mobiform Software, yang memampukan para perangcang UI untuk menciptakan antarmuka pengguna untuk aplikasi Windows dan Web.

APA ITU XAML?

Seperti yang telah disebutkan, XAML adalah singkatan dari Extensible Application Markup Language. Tetapi apa itu artinya? Wikipedia mendefinisikan XAML sebagai bahasa berbasis XML yang dipakai untuk menginisialisasi nilai-nilai dan objek-objek terstruktur. Pihak lain mendefinisikan XAML sebagai bahasa berbasis XML yang mendefinisikan objek-objek berikut dengan properti-propertinya.

Dengan kedua definisi ini, Anda dapat mulai memahami bagaimana akronim untuk bahasa baru ini dibentuk. Anda dapat melihat bahwa bahasa baru ini didasarkan pada XML, yang telah menjadi standar industri dalam menggunakan data terstruktur antar aplikasi. A di dalam XAML adalah bagian aplikasi dari akronim, dan bagian deklaratif dari definisi yang mengacu pada kemampuan bahasa ini untuk mendeklarasikan objek yang merepresentasikan kontrol pada sebuah form.

Jadi, Anda dapat mulai memvisualisasikan bahwa bahasa baru ini mendefinisikan UI dari sebuah aplikasi pada suatu bahasa berbasis XML dengan mendefinisikan kontrol-kontrol pada sebuah form. Kontrol-kontrol yang didefinisikan oleh XAML mendefinisikan pemetaan kelas-kelas pada .NET Framework. Ingat bahwa XAML adalah sebuah bahasa markup aplikasi yang dipakai untuk mendefinisikan sebuah antarmuka, dan sebaiknya dapat dibedakan dengan jelas dari bahasa pemrogaman seperti Visual Basic.

Untuk mengilustrasikan hal ini, Gambar 4.1 menunjukkansebuah aplikasi Windows dasar yang didefinisikan dalam XAML, dan keluaran yang dihasilkannya. Anda dapat melihat bahwa XAML tampak seperti XML karena ia didasarkan pada XML dan terikat dengan standar XML. Anda dapat melihat bahwa kontrol-kontrol didefinisikan pada peta contoh ke kelas-kelas di dalam .NET Framework dan bahwa keluaran tampak seperti aplikasi Windows standar yang telah Anda ciptakan pada bab-bab sebelumnya.

GAMBAR 4.1

Jika diberikan nature dari XAML dan keluaran yang dihasilkannya, Anda dapat mulai memvisualisasi bagaimana XAML dapat secara lebih utuh memisahkan tugas-tugas perancang UI dari pengembang piranti. Perancang umumnya menciptakan kode XAML yang ditunjukkan pada Gambar, menggunakan sebuah perangkat seperti Expression Blend, Expression Design, atau Aurora XAML Designer, dengan secara visual menciptakan form Windows.

Langkah selanjutnya bagi perancang UI adalah memberikan XAML kepada pengembang piranti, yang disimpan di dalam sebuah file dengan ekstensi .xaml. Pengembang akan mengimpor file XAML ke dalam Visual Studio dan kemudian menuliskan kode untuk membuat form memiliki makna fungsional sedemikian rupa sehingga ketika user mengklik tombol, sesuatu yang berguna akan terjadi.

Hal ini tentu memberikan Anda pandangan luas, ilustrasi dari konsep di balik XAML dan apa peran yang bisa Anda mainkan. Pada organisasi yang lebih besar dengan tim yang berdedikasi menciptakan antarmuka-antarmuka user, skenario ini akan menjadi realitas. Pekerjaan Anda pada organisasi itu bisa jadi menuliskan kode untuk membuat antarmuka itu fungsional.

SINTAKSIS XAML

Cara terbaik untuk belajar tentang sintaksis XAML dan bagaimana ia digunakan memerlukan pengamatan yang dalam pada contoh aktual. Penggunaan kode XAML telah ditunjukkan pada Gambar 4.1. Bagian ini akan memecah potongan-potongan sehingga Anda memiliki pemahaman bagaimana kode tersebut berelasi satu sama lain dan bagaimana ia berelasi dengan .NET Framework.

Setiap elemen di dalam sebuah file XAML memetakan ke sebuah kelas .NET Framework. Jadi, hal ini akan menciptakan objek terkait pada saat aplikasi dijalankan. Kode berikut mendefinisikan form Windows dasar yang telah Anda gunakan pada bab-bab sebelumnya. Di sini, perhatikan bahwa nama elemen adalah Window, yang berkaitan dengan kelas Window di dalam .NET Framework, menggantikan kelas Form sebelumnya. Elemen Window merupakan elemen akar di dalam dokumen XAML ini, dan seperti setiap dokumen XML ia harus memuat satu elemen akar. Atribut-atribut dari elemen Window mendefinisikan namespace yang dipakai pada dokumen XAML ini dan memetakan ke properti-properti dari kelas Window. Atribut xmlns mendefinisikan skema yang dipakai pada dokumen XAML ini. Atribut xmlns:x mendefinisikan sebuah namespace di dalam dokumen dengan nama x.

Atribut x:Class menyediakan sebuah nama untuk kelas Window, dan pada contoh ini nama kelas tersebut adalah MainWindow. Atribut Title memetakanke properti Title dari kelas Window dan menetapkan judul yang ditampilkan pada jendela, seperti ditunjukkan pada Gambar 4.1.

Atribut Height dan Width memetakan ke properti Height dan Width dari kelas Window. Atribut-atribut ini dipakai untuk mendefinisikan tinggi dan lebar dari jendela, seperti ditunjukkan pada Gambar 4.1:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="164" Width="207">

</Window>

Tidak seperti form Windows yang telah Anda gunakan pada bab-bab sebelumnya, kelas Window tidak memiliki permukaan perancangan yang memampukan Anda menggambarkan kontrol-kontrol ke atasnya; kelas Window perlu memiliki sebuah kontrol kontainer yang akan menjadi tempat bagi kontrol-kontrol lain. Beberapa kontrol kontainer tersedia dalam XAML, masing-masing dengan tujuannya sendiri. Kelas Grid merupakan kontainer default yang dapat ditambahkan pada XAML ketika menggunakan Visual Studio untuk merancang sebuah jendela XAML. Ini direpresentasikan pada kode berikut dengan elemen Grid.

Elemen Grid memampukan Anda untuk secara presisi memosisikan kontrol-kontrol di jendela menggunakan kolom dan baris. Anda dapat menambahkan baris dan kolom pada kontrol Grid dan menempatkan kontrol-kontrol Anda ke dalam grid dengan tataletak seperti tabel. Pada bab ini, Anda tidak akan menambah baris dan kolom pada kontrol grid.

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="164" Width="207">

<Grid>

</Grid>

</Window>

Terkait dengan kode ini:

ü Kontrol pertama yang ditunjukkan di dalam jendela pada Gambar 4.1 adalah sebuah label yang memuat teks “Masukkan Nama Anda”. Ini direpresentasikan di dalam XAML dengan elemen Label, yang memetakan ke kelas Label dalam .NET Framework.

ü Atribut Name pada elemen Label memetakan kembali ke properti Name dari kelas Label dan merupakan nama yang Anda pakai untuk mengaksesnya di dalam kode. Atribut Height dan Width memetakan atribut Height dan Width dari kelas Label dan menetapkan lebar dan tinggi dari label di dalam jendela.

ü Atribut VerticalAlignment memetakan ke properti VerticalAlignment di dalam kelas Label dan menetapkan penyejajaran vertikal dari label di dalam Grid. Atribut ini memiliki nilai Top, yang mengindikasikan bahwa kontrol ini disejajarkan ke atas Grid. Nilai-nilai lain yang bisa ditetapkan untuk atribut ini adalah Center, Bottom, dan Stretch.

ü Atribut HorizontalAlignment memetakan ke properti HorizontalAlignment di dalam kelas Label dan menetapkan penyejajaran horisontal dari label di dalam Grid. Nilai-nilai lain yang bisa ditetapkan untuk atribut ini adalah Left, Right, Center, dan Stretch.

ü Atribut Margin memetakan ke properti Margin dari kelas Label dan menetapkan batas luar dari elemen. Properti Margin mendefinisikan sebuah struktur Thickness yang memuat nilai-nilai Double untuk sisi Left, Top, Right, dan Bottom dari persegipanjang.

ü Teks sebelah dalam dari elemen Label adalah teks yang akan ditampilkan pada form. Teks sebelah dalam dari elemen Label di dalam XAML memetakan ke properti Content dari kelas Label pada .NET Framework.

Pada titik ini, Anda dapat mulai melihat bagaimana sebuah jendela utuh mulai terbentuk dengan sejumlah elemen XAML dan atribut-atributnya:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="164" Width="207">

<Label x:Name="Label1" Content="Masukkan Nama Anda"

HorizontalAlignment="Left" Margin="10,13,0,0"

VerticalAlignment="Top" FontSize="14"/>

</Grid>

</Window>

Lihat elemen berikutnya. Pada kode berikut, Anda dapat melihat bahwa kontrol kotak teks direpresentasikan oleh elemen TextBox, yang memetakan ke kelas TextBox pada .NET Framework. Atribut Name juga memetakan ke properti Name dari kelas TextBox yang dapat dipakai untuk mengakses teks yang dimuat pada kontrol ini.

ü Atribut Height dan Width memetakan atribut Height dan Width dari kelas TextBox dan menetapkan lebar dan tinggi dari kotak teks di dalam jendela. Atribut VerticalAlignment dan HorizontalAlignment menetapkan penyejajaran vertikal dan horisontal di dalam grid, yang menetapkan bahwa kontrol ini disejajarkan ke kiri dan ke atas dari Grid.

ü Atribut Margin memetakan ke properti Margin dari kelas TextBox dan menetapkan batas luar dari elemen ini. Properti Margin mendefinisikan sebuah struktur Thickness yang memuat nilai-nilai Double untuk sisi Left, Top, Right, dan Bottom dari persegipanjang.

ü Jika Anda ingin menetapkan teks awal untuk elemen TextBox, Anda dapat menciptakan sebuah tag penutup </TextBox> dan menempatkan teks tersebut di antara tag pembuka dan tag penutup sama seperti ketika ia diciptakan pada elemen Label. Anda dapat pula mengakses teks yang dimasukkan oleh user di dalam kode Anda dengan mengakses properti Text dari kelas TextBox:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="164" Width="207">

<Label x:Name="Label1" Content="Masukkan Nama Anda"

HorizontalAlignment="Left" Margin="10,13,0,0"

VerticalAlignment="Top" FontSize="14"/>

<TextBox x:Name="teksNamaDepan" HorizontalAlignment="Left"

Height="23" Margin="10,49,0,0" VerticalAlignment="Top"/>

</Grid>

</Window>

ü Kontrol terakhir pada kode XAML sederhana ini adalah kontrol Button. Elemen Button pada kode berikut memetakan ke kelas Button pada .NET Framework, dan semua atribut memetakan ke atribut terkait di dalam kelas Button dan berperilaku sama seperti yang telah dijelaskan.

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="164" Width="207">

<Label x:Name="Label1" Content="Masukkan Nama Anda"

HorizontalAlignment="Left" Margin="10,13,0,0"

VerticalAlignment="Top" FontSize="14"/>

<TextBox x:Name="teksNamaDepan" HorizontalAlignment="Left"

Height="23" Margin="10,49,0,0" VerticalAlignment="Top"/>

<Button x:Name="tomboLSubmit" Content="Submit"

HorizontalAlignment="Left" Margin="10,92,0,0"

VerticalAlignment="Top" Width="75" FontSize="14"/>

</Grid>

</Window>

Pada titik ini, Anda telah melihat apa itu XAML ini dan keluaran yang dihasilkannya. Anda pasti telah memiliki pemahaman dasar dari XAML dan bagaimana ia berelasi dengan XML dan .NET Framework. Hal yang masih perlu Anda ketahui adalah bagaimana XAML berelasi dengan Windows Presentation Foundatin (WPF).

WINDOWS PRESENTATION FOUNDATION

Windows Presentation Foundation, yang lebih dikenal dengan WPF, merupakan teknologi presentasi yang menjadi bagian dari .NET Framework dan dipakai untuk membangun antarmuka pengguna yang kaya pada aplikasi-aplikasi WPF Windows dan WPF Browser. Aplikasi WPF Windows berbeda dari aplikasi form Windows yang telah Anda ciptakan sejauh ini, karena kode antarmuka pengguna berbeda dari kode logika bisnis seperti pada aplikasi Web.

WPF direpresentasikan dalam .NET Framework dengan PresentationFramework.dll dan memuat sejumlah kelas sendiri untuk membangun kontrol-kontrol dalam WPF. Sebagai contoh, jika Anda menampilkan topik Button Class pada pustaka MSDN yang diinstal dengan Visual Studio, maka Anda akan mendapatkan sebuah indeks yang meminta Anda untuk memilih kelas tertentu: Web, WPF, atau Windows.

Anda akan menemukan bahwa hampir semua kontrol (seperti Label, TextBox, ComboBox, dan Button) yang ada untuk form Windows juga didapati di dalam WPF. Meskipun hampir semua properti, event, dan metode sama, ada sedikit perbedaan yang nanti Anda temukan. Pada titik ini, Anda mungkin bertanya-tanya apa yang dapat Anda lakukan pada aplikasi WPF yang tidak bisa Anda lakukan pada aplikasi form Windows. Hampir segala sesuatu yang dapat dilakukan pada aplikasi WPF dapat dilakukan pada aplikasi form Windows. Namun, aplikasi WPF mempermudah pengerjaan pekerjan-pekerjaan yang lebih kompleks seperti untuk memanipulasi citra dan video.

Gambar 4.2 mendemonstrasikan salah satu kekuatan dari Windows Presentation Foundation pada sebuah aplikasi WPF. Perhatikan bahwa citra yang ditampilkan pada form memiliki sudut dan memuat bayangan parsial citra. Kode presentasi untuk form ini direpresentasikan dalam XAML, dan Anda akan melakukan langkah-langkah untuk mencitakan form ini pada latihan berikut.

GAMBAR 4.2

Menciptakan Antarmuka Pengguna WPF

Salah satu kekuatan dari aplikasi WPF adalah kemudahan dalam menciptakan citra seperti ditunjukkan pada Gambar 4.2. Anda dapat mengambil sebuah citra dua-dimensi, membengkokkannya, dan menampilkan bayangan parsial.

LATIHAN

Menciptakan Antarmuka WPF

Anda akan mulai menciptakan antarmuka pengguna yang ditunjukkan pada Gambar 4.2 pada latihan ini.

1. Buka Visual Studio dan pilih File dan kemudian New Project. Pada dialog New Project, pilih Visual Basic pada daftar Project Types dan pilih WPF Application pada daftar Templates. Masukkan Kartu Kredit pada bidang Name dan kemudian klik tombol OK.

2. Perhatikan bahwa Forms Designer dibagi ke dalam dua bagian. Bagian atas memuat representasi visual dari form, sedangkan bagian bawah memuat kode XAML yang dipakai untuk menciptakan representasi visual. Anda dapat memodifikasi isi form dengan mengklik pada form atau membentuk kontrol-kontrol dan menetapkan propertinya pada jendela Properties atau Anda dapat memodifikasi properti-properti pada kode XAML.

Modifikasi properti untuk elemen Window pada editor XAML dengan menetapkan properti Height menjadi 600 dan properti Width menjadi 800. Anda akan melihat jendela berubah ukuran. Sekarang, tetapkan properti Title menjadi Jendela1.

3. Sebelum menambahkan kontrol pada form, Anda akan menambahkan citra kartu kredit pada projek. Klik kanan pada projek Kartu Kredit pada jendela Solution Explorer dan pilih Add dan kemudian pilih Existing Item. Cari citra kartu kredit sesuai pilihan Anda dan kemudian klik Add pada dialog Add Existing Item.

4. Klik di tengah jendela pada Forms Designer, yang merupakan sebuah kontrol Grid. Sekarang geret sebuah kontrol Label dari Toolbox dan sejajarkan ke atas dan tengah jendela. Pada jendela Properties, tetapkan properti Content menjadi Pakai Kartu Kredit Anda Hari Ini.

5. Gulung ke bawah jendela Properties sampai Anda menemukan properti FontFamily dan kemudian tetapkan menjadi Segoe UI. Tetapkan properti FontSize menjadi 18 dan properti FontWeight menjadi Bold.

GAMBAR 4.3

6. Ubah ukuran dari kontrol Label pada jendela sampai semua teks tertampil dan kemudian posisikan ulang sehingga ia berada di tengah form.

7. Sebuah kontrol Border akan dipakai untuk menerapkan sejumlah efek pada citra. Tarik kontrol Border dari Toolbox dan tempatkan pada jendela. Pada editor kode, tetapkan properti Margin menjadi 0,60,0,0. Tetapkan properti-properti berikut pada jendela Properties:

Tetapkan Width menjadi 380.

Tetapkan Height menjadi 200.

8. Tarik sebuah kontrol Image dari Toolbox dan tempatkan pada kontrol Border pada jendela. Tetapkan properti-properti berikut pada jendela Properties:
Tetapkan Source menjadi kartukredit.gif (atau nama citra apapun yang Anda sukai).
Tetapkan Height menjadi 185.
Tetapkan Width menjadi 300.

9. Pada editor kode XAML, klik elemen Border. Pada jendela XAML, tambahkan elemen BitmapEffect berikut:

<Border.BitmapEffect></Border.BitmapEffect>

10. Di dalam properti BitmapEffect pada editor kode XAML adalah sub-subproperti. Tambahkan subproperti berikut pada BitmapEffect:

<Border.BitmapEffect>

</Border.BitmapEffect>

11. Pada titik ini citra Anda memiliki bayangan yang mengitari tepi bawah dan kanan. Untuk membengkokkan citra, Anda perlu memodifikasi kode XAML pada editor kode. Setelah menambahkan kode berikut, citra Anda akan tampak seperti pada Gambar 4.3:

</Border.BitmapEffect>

<Border.RenderTransform>

<SkewTransform CenterX="0" CenterY="0" AngleX="0" AngleY="-3" />

</Border.RenderTransform>

12. Sekarang Anda perlu menciptakan border kedua untuk memuat refleksi dari kartu kredit. Tarik kontrol Border dari jendela Toolbox dan tempatkan di bawah kontrol Border pertama. Tetapkan properti-properti berikut pada jendela Properties:

Tetapkan Margin menjadi 41,251,0,110.
Tetapkan Width menjadi 300.

13. Pada editor kode XAML, modifikasi elemen Border kedua dengan menambahkan elemen Border penutup dan menghapus karakter slash maju di akhir dari elemen Border. Kemudian tambahkan kode berikut:

<Border.Background>

<VisualBrush.Transform>

</VisualBrush.Transform>

</VisualBrush>

</Border.Background>

</Border>

14. Untuk membuat refleksi, tambahkan kode berikut:

</VisualBrush>

</Border.Background>

<Border.OpacityMask>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<GradientStop Offset="0" Color="Black"></GradientStop>

<GradientStop Offset="0.7" Color="Transparent"></GradientStop>

</LinearGradientBrush>

</Border.OpacityMask>

15. Terakhir, untuk membengkokkan citra pada kontrol Border kedua, tambahkan kode berikut:

</LinearGradientBrush>

</Border.OpacityMask>

<Border.RenderTransform>

</Border.RenderTransform>

16. Simpan projek dengan mengklik tombol Save All pada toolbar. Setelah projek disimpan, jalankan projek itu. Jendela Anda akan tampak seperti pada Gambar 4.4.

GAMBAR 4.4

Menggunakan Kontrol WPF

Anda telah menggunakan kontrol Label, TextBox, dan Button pada aplikasi Windows Forms yang telah Anda ciptakan pada bab-bab sebelumnya. Pada titik ini, Anda seharusnya telah cukup familiar dengan properti-properti dari kontrol-kontrol tersebut, seperti properti Name dan Text.

Pada latihan berikut, Anda akan menuntaskan antarmuka user pada aplikasi Kartu Kredit WPF dimana Anda akan menambahkan kontrol Label, TextBox, Button, dan ComboBox.

LATIHAN

Menggunakan Kontrol-Kontrol WPF

Pada latihan ini, ketika Anda menambahkan kontrol Label, TextBox, Button, dan ComboBox pada jendela Anda dan menetapkan properti-propertinya, Anda akan mulai melihat bagaimana ia berbeda dari kontrol-kontrol pada form Windows.

1. Jika projek Anda sedang berjalan, hentikan dan kembali ke Forms Designer. Geret sebuah kontrol Label dari Toolbox dan tempatkan pada jendela Anda di sekitar pojok kanan-atas. Tetapkan properti-properti berikut untuk kontrol ini pada jendela Properties:
Tetapkan Content menjadi Informasi Pribadi.
Tetapkan Margin menjadi 0,38,100,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontWeight menjadi Bold.
Tetapkan HorizontalAlignment menjadi Right.

2. Geret kontrol Label lain dari Toolbox dan posisikan sedikit di bawah dan di kiri dari kontrol Label sebelumnya. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Nama Depan.
Tetapkan Width menjadi 95.
Tetapkan Margin menjadi 0,69,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

3. Geret sebuah kontrol TextBox dari Toolbox dan posisikan ke kanan dari label kedua. Properti Name ada di luasan atas dari jendela Properties. Tetapkan properti-properti untuk label ini:
Tetapkan Name menjadi teksNamaDepan.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,71,35,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

4. Geret kontrol Label lain dari Toolbox dan sejajarkan di bawah kontrol Label kedua. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Nama Belakang.
Tetapkan Width menjadi 9.
Tetapkan Margin menjadi 0,99,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

5. Geret sebuah kontrol TextBox dari Toolbox dan posisikan di bawah kontrol TextBox sebelumnya. Tetapkan properti-properti untuk kontrol ini:
Tetapkan Name menjadi teksNamaBelakang.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,101,35,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.

Tetapkan HorizontalAlignment menjadi Right.

6. Geret kontrol Label lain dari Toolbox dan sejajarkan di bawah kontrol Label sebelumnya. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Alamat.
Tetapkan Width menjadi 95.
Tetapkan Margin menjadi 0,129,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

7. Geret sebuah kontrol TextBox dari Toolbox dan posisikan di bawah kontrol TextBox sebelumnya. Tetapkan properti-properti untuk kontrol ini:
Tetapkan Name menjadi teksAlamat.

Tetapkan Width menjadi 185.

Tetapkan Margin menjadi 0,131,35,0.

Tetapkan FontFamily menjadi Segoe UI.

Tetapkan FontSize menjadi 11.

Tetapkan HorizontalAlignment menjadi Right.

8. Geret kontrol Label lain dari Toolbox dan sejajarkan di bawah kontrol Label sebelumnya. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Kota.
Tetapkan Width menjadi 95.
Tetapkan Margin menjadi 0,159,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

9. Geret sebuah kontrol TextBox dari Toolbox dan posisikan di bawah kontrol TextBox sebelumnya. Tetapkan properti-properti untuk kontrol ini:
Tetapkan Name menjadi teksKota.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,161,35,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

10.Geret kontrol Label lain dari Toolbox dan sejajarkan di bawah kontrol Label sebelumnya. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Propinsi.
Tetapkan Width menjadi 95.
Tetapkan Margin menjadi 0,189,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

11. Geret sebuah kontrol ComboBox dari Toolbox dan posisikan di bawah kontrol TextBox sebelumnya. Tetapkan properti-properti untuk kontrol ini:

Tetapkan Name menjadi cboPropinsi.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,191,125,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

GAMBAR 4.5

12. Geret kontrol Label lain dari Toolbox dan sejajarkan di bawah kontrol Label sebelumnya. Tetapkan properti-properti untuk label ini:
Tetapkan Content menjadi Kode Pos.
Tetapkan Width menjadi 95.
Tetapkan Margin menjadi 0,219,225,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

13. Geret sebuah kontrol TextBox dari Toolbox dan posisikan di bawah kontrol TextBox sebelumnya. Tetapkan properti-properti untuk kontrol ini:
Tetapkan Name menjadi teksKodePos.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,221,125,0.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan HorizontalAlignment menjadi Right.

14. Geret sebuah kontrol Button dari Toolbox, posisikan ke pojok kanan-bawah dari jendela, dan Tetapkan properti-properti untuk kontrol ini:
Tetapkan Name menjadi tombolGunakanSekarang.
Tetapkan Content menjadi Gunakan Sekaran.
Tetapkan Width menjadi 185.
Tetapkan Margin menjadi 0,0,35,16.
Tetapkan FontFamily menjadi Segoe UI.
Tetapkan FontSize menjadi 11.
Tetapkan VerticalAlignment menjadi Bottom.

15. Simpan projek dan jalankan. Form Anda akan tampak seperti pada Gambar 4.5.

Memicu Event

Ketika Anda menuliskan kode menggunakan Visual Basic, Anda akan diminta untuk menangani event-event. Sebuah event terjadi ketika sesuatu, seperti pengklikan tombol, dilakukan. Anda akan belajar hal ini pada bab berikutnya.

LATIHAN

Memicu Event

Pada latihan ini, Anda akan menuliskan beberapa event handler di dalam kode untuk memuat kotak combo pada form dan untuk menangani pengklikan tombol. Anda akan melihat bagaimana event-event pada aplikasi WPF bila dibandingkan dengan yang ada pada aplikasi Windows Forms.

1. Jika projek sedang dijalankan, hentikan. Klik kanan pada MainWindow.xaml pada jendela Solution Explorer dan pilih View Code pada menu konteks. Tambahkan statemen Imports di atas kelas:

Imports System.Text

Class MainWindow

2. Deklarasikan sebuah array string untuk memuat singkatan-singkatan propinsi yang akan dimuat ke kotak combo. Untuk memperpendek kode, Anda hanya perlu mencantumkan enam singkatan propinsi. Tambahkan kode yang ditebalkan berikut pada kelas Anda:

'Variabel-variabel Private

Private strPropinsi() As String = {"SUMUT", "RIAU", "JAMBI", "BANDUNG", "JOGJA", "NTB"}

3. Anda ingin memuat kotak combo dengan data dari array strPropinsi. Waktu terbaik untuk melakukannya adalah ketika jendela dimuatdan setelah semua kontrol diinisialisasi. Klik pada jendela dan pilih event Loaded pada jendela Properties. Tambahkan kode yang ditebalkan pada event handler ini:

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)

'Mengikat kotak combol ke array strPropinsi

cboPropinsi.ItemsSource = strPropinsi

End Sub

4. Ketika user mengklik tombol pada jendela, Anda ingin aplikasi menjalankan suatu aksi. Untuk mempermudah kode, aksi itu menampilkan sebuah kotak pesan. Pilih tombolGunakanSekarang dan pilih event Click dari jendela Properties. Tambahkan kode yang ditebalkan pada event handler ini:

Private Sub tombolGunakanSekarang_Click(sender As Object, e As RoutedEventArgs) Handles tombolGunakanSekarang.Click

'Mendeklarasikan dan menginstansiasi sebuah objek StringBuilder

Dim objStringBuilder As New StringBuilder

'Menambah pertanyaan

objStringBuilder.AppendLine("Apakah informasi pribadi " &

"Anda yang dicantumkan di sini benar?")

objStringBuilder.AppendLine(String.Empty)

'Menambahkan informasi pribadi

objStringBuilder.AppendLine(teksNamaDepan.Text & " " & teksNamaBelakang.Text)

objStringBuilder.AppendLine(teksAlamat.Text)

objStringBuilder.AppendLine(teksKota.Text & ", " & cboPropinsi.SelectedItem.ToString() &

" " & teksKodePos.Text)

'Menampilkan sebuah kotak pesan untuk memverifikasi informasi

If MessageBox.Show(objStringBuilder.ToString,

My.Application.Info.Title, MessageBoxButton.YesNo,

MessageBoxImage.Question) = MessageBoxResult.Yes Then

'Lakukan pemrosesan di sini

Else

'Kembali ke jendela dan membiarkan user mengoreksi

'informasinya

End If

End Sub

5. Simpan projek dan kemudian jalankan. Masukkan data tertentu pada jendela dan klik pada tombol Gunakan Sekarang. Anda akan melihat hasil seperti pada Gambar 4.6.

GAMBAR 4.6

Logika Pemrograman

Monday, December 12, 2016

Bab 4: Visual Basic .NET: Langkah Demi Langkah

No comments:

Post a Comment

About Me