Peringatan: Artikel ini dikategorikan sebagai archived. Artinya artikel ini tidak akan dirawat, diperbarui, ataupun dijadikan sebagai bahan diskusi.
Halo teman-teman! Kita bertemu lagi di seri tutorial UWP yang kini sudah memasuki bagian keempat yang di dalamnya akan dibahas cara menambahkan event handler ke elemen kontrol.
Sebelum saya melanjutkan, mungkin di antara kamu ada yang belum tau, apa sih event dan event handler itu?
Pasti kamu sering dan mungkin hampir setiap hari berinteraksi dengan aplikasi dan elemen-elemennya. Misalnya, ketika kamu mengeklik sebuah button, maka halaman aplikasi akan berpindah ke halaman yang lain. Magic apa yang sebenarnya terjadi? Apakah cukup dengan bermain if saja?
Nah, di sini lah event handler berperan. Terdapat 3 komponen untuk dapat membahas event handler: event, trigger, dan action. Lalu, apa definisi dari event handler itu sendiri? Di sini saya tidak akan menjelaskannya sendiri, saya akan mengutip definisi dari website Microsoft Developer Network.
Apa itu event?
An event is a message sent by an object to signal the occurrence of an action. The action could be caused by user interaction, such as a button click, or it could be raised by some other program logic, such as changing a property’s value.
To respond to an event, you define an event handler method in the event receiver. This method must match the signature of the delegate for the event you are handling. In the event handler, you perform the actions that are required when the event is raised, such as collecting user input after the user clicks a button. To receive notifications when the event occurs, your event handler method must subscribe to the event.
Lalu, bagaimana dengan event handler?
To respond to an event, you define an event handler method in the event receiver. This method must match the signature of the delegate for the event you are handling. In the event handler, you perform the actions that are required when the event is raised, such as collecting user input after the user clicks a button. To receive notifications when the event occurs, your event handler method must subscribe to the event.
(*) Untuk pengetahuan lebih jelas mengenai event khusus .NET Framework (C#), silakan ikuti artikel MSDN ini.
Catatan: Agar kamu dapat mengikuti tutorial ini, pastikan kamu sudah mengikuti tutorial sebelumnya, karena saya akan menggunakan code dari sana.
Baca tutorial sebelumnya: Cara Menambahkan Elemen Kontrol (Control Element) di Aplikasi UWP
Sebelum kita memulai tutorial ini, mari kita lakukan perubahan nilai property pada elemen PasswordBox dan penambahan elemen TextBlock ke aplikasi.
Atur nilai property IsEnabled dari elemen PasswordBox menjadi False.
<!-- Kode 1 --> <PasswordBox x:Name="passwordBox" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,240,0,0" Width="200" PlaceholderText="Password" IsEnabled="False" />
PasswordBox.IsEnabled merupakan property yang menentukan apakah kotak input elemen tersebut diaktifkan atau dinonaktifkan. Nilai default property tersebut pada elemen PasswordBox adalah True.
Setelah itu kita tambahkan elemen TextBlock, dengan memasukkan code ini tepat di bawah elemen Button.
<!-- Kode 2 --> <TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" Text="" Margin="0,420,0,0" TextAlignment="Center" />
Jika kamu memasukkannya dengan benar, maka kode keseluruhan akan terlihat seperti Kode 3.
<!-- Kode 3 -->
<Page
x:Class="UWP_Tut_Proj_1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_Tut_Proj_1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="textBox" HorizontalAlignment="Center" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="0,200,0,0" PlaceholderText="Username" Width="200"/>
<PasswordBox x:Name="passwordBox" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,240,0,0" Width="200" PlaceholderText="Password" IsEnabled="False"/>
<CheckBox x:Name="checkBox" Content="Remember me" HorizontalAlignment="Center" Margin="0,290,0,0" VerticalAlignment="Top"/>
<Button x:Name="button" Content="Log In" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,360,0,0" Width="80"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" Text="" Margin="0,420,0,0" TextAlignment="Center"/>
</Grid>
</Page>
Sekarang mari kita bermain dengan event handler. Klik panah di sebelah kiri MainPage.xaml sehingga muncul sub item dan klik ganda file MainPage.xaml.cs hingga muncul di code editor.
Pertama kita akan menambahkan fungsi aksi yang dipicu elemen TextBox yang memicu aksi perubahan nilai properti elemen TextBox itu sendiri.
Berikut adalah skenarionya: Jika user mengetik kata “bold” di TextBox, maka teks yang ada di TextBox menjadi cetak tebal (bold). Jika user mengetik kata “softtama” di TextBox, maka warna border TextBox berubah menjadi hijau.
Lalu, mana yang disebut event, trigger, dan action? Terjadinya ketikan (dalam hal ini terjadinya perubahan teks) di TextBox adalah event, mengetik kata “bold” atau “softtama” di TextBox adalah trigger, dan mengubah teks menjadi cetak tebal dan warna border menjadi hijau di TextBox adalah action.
Untuk menambahkan aksi berdasarkan skenario tersebut, tambahkan Kode 4 ke MainPage.xaml.cs ke dalam class MainPage tepat di bawah constructor function MainPage.
// Kode 4
public void textBox_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args) {
if (sender.Text.Contains("bold")) {
sender.FontWeight = Windows.UI.Text.FontWeights.Bold;
}
if (sender.Text.Equals("softtama")) {
sender.BorderBrush = new SolidColorBrush(Colors.Green);
}
}
Selanjutnya kita akan menambahkan aksi yang dipicu oleh elemen TextBox, namun memicu aksi perubahan pada elemen lain, dalam hal ini adalah elemen PasswordBox.
Berikut skenarionya: Jika terdapat kata “softtama” di TextBox, maka aktifkan PasswordBox. Selain kata “softtama”, nonaktifkan PasswordBox.
Untuk menambahkan aksi dari skenario tersebut, tambahkan operasi perubahan nilai properti IsEnabled seperti yang tampak pada Kode 5 ke MainPage.xaml.cs di dalam function textBox_TextChanging.
// Kode 5
public void textBox_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args) {
if (sender.Text.Contains("bold")) {
sender.FontWeight = Windows.UI.Text.FontWeights.Bold;
}
if (sender.Text.Equals("softtama")) {
passwordBox.IsEnabled = true;
sender.BorderBrush = new SolidColorBrush(Colors.Green);
} else {
passwordBox.IsEnabled = false;
}
}
Perlu kamu ketahui bahwa Kode 4 dan Kode 5 yang baru saja kamu masukkan ke MainPage.xaml.cs hanyalah baris-baris fungsi aksi saja dan tidak memiliki elemen pemicu.
Jadi, apa yang harus dilakukan agar fungsi aksi tersebut dipanggil ketika event dari suatu elemen pemicu terjadi?
Dalam ranah pemrograman C#, hal tersebut dikatakan sebagai subscribe. Maksudnya adalah kita menjadikan suatu fungsi aksi terpanggil ketika suatu event yang di-subscribe terjadi. Jadi bagaimana cara men-subscribe fungsi aksi ke event dari suatu elemen pemicu?
Lihatlah Kode 6 di bawah ini, yang merupakan struktur kode untuk men-subscribe fungsi aksi actionFunctionName ke event EventName dari elemen pemicu triggerElementName.
// Kode 6 triggerElementName.EventName += actionFunctionName;
Untuk men-subscribe fungsi aksi tersebut ke elemen pemicu, masukkan Kode 7 berikut ke dalam constructor function MainPage.
// Kode 7 textBox.TextChanging += textBox_TextChanging;
Sekarang deploy project nya, lalu coba ketik kata “bold” di field Username, dan lihat yang terjadi. Jika kamu mengikutinya dengan tepat, maka teks akan menjadi cetak tebal (bold) seperti yang terlihat pada Gambar 2.
Lalu coba ketik kata “softtama” di field yang sama, maka yang terjadi adalah apa yang tampak pada Gambar 3.
Sekarang, mari kita tambahkan event handler untuk elemen kontrol Button, dengan skenario: ketika kita mengeklik elemen Button, dengan syarat field TextBox Username tidak kosong, tampilkan teks “Username: ” ditambah teks yang diambil dari field TextBox Username, lalu pada baris baru tampilkan teks “Remember me?: ” ditambah teks yang bergantung dari nilai IsChecked dari elemen kontrol CheckBox (“Yes” untuk True, “No” untuk False).
Tambahkan Kode 8 ini di dalam class MainPage tepat di bawah function textBox_TextChanging.
// Kode 8
public void button_Click(object sender, RoutedEventArgs args) {
if (!textBox.Text.Equals("")) {
string username = textBox.Text,
rememberMe = (bool) checkBox.IsChecked ? "Yes" : "No";
textBlock.Text = "Username: " + username + "\n\n" + "Remember me?: " + rememberMe;
}
}
Untuk men-subscribe fungsi aksi button_Click ke elemen Button, tambahkan kode subscribe-nya ke dalam constructor function MainPage sehingga keseluruhannya tampak seperti pada Kode 9.
// Kode 9 textBox.TextChanging += textBox_TextChanging; button.Click += button_Click;
Sebelum melanjutkan, cek terlebih dahulu apakah kode yang telah kamu ketik selama ini di dalam class MainPage di dalam file MainPage.xaml.cs tampak seperti pada Kode 10 di bawah ini.
// Kode 10
public sealed partial class MainPage : Page {
public MainPage() {
this.InitializeComponent();
textBox.TextChanging += textBox_TextChanging;
button.Click += button_Click;
}
public void textBox_TextChanging(TextBox sender, TextBoxTextChangingEventArgs args) {
if (sender.Text.Contains("bold")) {
sender.FontWeight = Windows.UI.Text.FontWeights.Bold;
}
if (sender.Text.Equals("softtama")) {
passwordBox.IsEnabled = true;
sender.BorderBrush = new SolidColorBrush(Windows.UI.Colors.Green);
} else {
passwordBox.IsEnabled = false;
}
}
public void button_Click(object sender, RoutedEventArgs args) {
if (!textBox.Text.Equals("")) {
string username = textBox.Text,
rememberMe = (bool) checkBox.IsChecked ? "Yes" : "No";
textBlock.Text = "Username: " + username + "\n\n" + "Remember me?: " + rememberMe;
}
}
}
Jika sudah mantap, deploy project-nya, dan lakukan skenarionya. Hasilnya akan seperti pada Gambar 4 untuk aplikasi yang berjalan di PC dan Gambar 5 untuk aplikasi yang berjalan di mobile.
Tidak lupa, di bawah ini saya lampirkan juga source code project dan App Packages untuk tutorial ini bagi kamu yang ingin mencobanya langsung tanpa mengikuti tutorial ini.
Sekian dari saya tentang tutorial UWP bagian keempat yang menjelaskan cara menambahkan event handler di aplikasi Windows 10 UWP. Jika kamu punya pertanyaan ataupun masalah mengenai tutorial ini, jangan lupa untuk menuliskannya di kolom komentar artikel ini, ya! Sampai jumpa di artikel tutorial berikutnya!
