App deployed and run - dummy log in form - Mobile

Jika kamu perhatikan, ada bagian apa saja pada tampilan ‘fisik’ sebuah aplikasi? Dari kita mulai meng-install aplikasi hingga kita memakainya, ada sesuatu yang harus kita klik padanya, dan ada sesuatu yang harus kita isi dengan mengetik padanya. Elemen-elemen kontrol (control elements) seperti kotak teks (text box), tombol (button), menu dropdown, radio button, check box, merupakan elemen yang rasanya sudah wajib hadir pada suatu aplikasi.

Setelah sebelumnya saya membahas tentang cara mengatur nama, deskripsi dan logo aplikasi, sekarang, pada tutorial UWP bagian ketiga ini, saya akan melanjutkan dengan membahas cara menambahkan elemen kontrol (control elements) di aplikasi Windows 10 UWP.

I don’t want to upgrade my PC to Windows 10!

Excuse me, ma'am...
Permisi nyonya…

Baca tutorial sebelumnya: Cara Mengatur Nama, Deskripsi, dan Logo (Visual Assets) Aplikasi UWP


Mari kita mulai dari panel Solution Explorer yang terletak di sebelah kanan. Di sana, klik ganda file bernama MainPage.xaml untuk memunculkannya di code editor.

Go to MainPage.xaml
Gambar 1. Buka file MainPage.xaml

 

MainPage.xaml adalah file tempat kita mengatur tampilan aplikasi, menambahkan elemen kontrol (control elements) ke aplikasi, dan juga mengatur behavior pada elemen aplikasi yang ada.

MainPage.xaml sendiri memiliki dua panel editor, yaitu panel XAML dan Design.

Panel XAML merupakan panel editor kode yang berisi code XAML khusus untuk menambahkan elemen dengan kodingan bahasa XAML. Sedangkan panel Design adalah panel editor desain yang memungkinkan kita untuk melihat preview aplikasi dan mengatur elemen aplkasi secara langsung dengan drag-drop-resize. Dengan kata lain, dapat disebut sebagai WYSIWYG-nya si panel XAML tadi.

MainPage.xaml content
Gambar 2. Konten file MainPage.xaml, terdiri dari panel XAML dan Design

 

Masih sama seperti pada tutorial sebelumnya, sekarang kita masih belum bermain dengan kodingan, kita hanya akan bermain di panel Design saja.

Karena panel yang aktif saat pertama kali membuka MainPage.xaml adalah panel XAML, kita harus mengubahnya menjadi panel Design yang aktif. Caranya, klik tombol panah dua arah yang berada di antara tab panel XAML dan Design.

Swap panes between XAML and Design panel
Gambar 3. Swap panes untuk menukar posisi panel antara XAML dan Design

 

Dan sekarang kamu pun berada di panel Design. Di sana terlihat persegi kanvas putih yang merupakan layout aplikasi yang dapat kamu tambahkan dengan elemen kontrol sesukamu.

Design panel in MainPage.xaml
Gambar 4. Panel Design yang aktif di MainPage.xaml

 

Sekarang kita akan menambahkan elemen kontrol XAML (control elements) ke layout aplikasi.

Elemen kontrol dapat ditemukan di panel Toolbox. Untuk memunculkannya, klik tab Toolbox di sebelah kiri jendela Visual Studio.

XAML Control Elements in Toolbox panel
Gambar 5. Elemen kontrol XAML di panel Toolbox

 

Untuk menambahkan elemen kontrol ke layout aplikasi, klik ganda pada suatu elemen atau drag and drop elemen ke layout aplikasi.

Pada contoh, ketika menambahkan elemen TextBox dengan klik ganda, maka hasilnya akan tampak seperti Gambar 6.

TextBox control element is added
Gambar 6. Elemen kontrol TextBox yang telah ditambahkan ke MainPage.xaml

 

Sekarang kita atur properti elemen TextBox tersebut.

Pertama kita akan mengatur posisi elemennya menjadi rata tengah horizontal. Klik pada elemen yang dituju, lalu lihat panel Properties di sebelah kanan jendela Visual Studio di bawah Solution Explorer. Pada properti HorizontalAlignment, klik icon yang menunjukkan posisi rata tengah (Center), seperti yang terlihat di Gambar 7.

Properties of TextBox control element
Gambar 7. Formulir properti elemen kontrol TextBox

 

Sekarang elemen TextBox sudah berada di tengah seperti yang tampak pada Gambar 8.

HorizontalAlignment proeprty of TextBox is set to Center
Gambar 8. TextBox dengan properti HorizontalAlignment yang telah diatur menjadi rata tengah (Center)

 

Sudah cukup dengan menambahkan satu elemen, sekarang kita akan mencoba membuat form log in dummy di aplikasi Windows 10 UWP ini.

Sebelumnya kita hapus dulu element TextBox yang tadi ditambahkan dengan mengeklik pada elemen tersebut dan klik Delete pada keyboard, atau klik kanan pada elemen dan pilih Delete.


Sampai saat ini saya sudah menjelaskan bagaimana cara menambakan elemen dan mengatur propertinya. Sekarang saya serahkan pada kamu sendiri untuk membuat form log in ini, tentunya dengan nilai-nilai properti yang sudah saya siapkan pada Tabel 1 untuk kamu ikuti. Terdapat 4 elemen yang akan ditambahkan, yaitu TextBox, PasswordBox, CheckBox, dan Button.

 

Tabel 1. Daftar elemen kontrol XAML beserta nilai propertinya yang akan ditambahkan ke aplikasi
Nama Elemen Properti
Horizontal Alignment Margin (Top) Width Text/Content Placeholder Text
TextBox Center 200 200 (no value) Username
PasswordBox 240 Password
CheckBox 290 (no value) Remember me
Button 360 (no value) Log In

 

 

Kalau kamu kebingungan mana itu properti Margin (Top) dan PlaceholderText, lihat pada Gambar 9 dan 10.

Margin settings for TextBox control element
Gambar 9. Pengaturan margin elemen TextBox: top margin-nya diatur menjadi 200

 

Placeholder text setting for TextBox control element
Gambar 10. Mengatur teks placeholder TextBox

 

Sudah selesai? Jika kamu melakukannya dengan benar, maka layout aplikasi akan tampak seperti pada Gambar 11.

Dummy log in form
Gambar 11. Form log in dummy yang terdiri dari TextBox, PasswordBox, CheckBox, dan Button

 

Setelah selesai membuat form log in, mari kita deploy aplikasinya di Local Machine dan Emulator Windows 10 Mobile.

Untuk hasil deploy di Local Machine, form log in akan tampak seperti pada Gambar 12. Sedangkan untuk di Windows 10 Mobile, lihatlah Gambar 13.

App deployed and run - dummy login form
Gambar 12. Aplikasi yang di-deploy memiliki formulir log in dummy

 

App deployed and run - dummy log in form - Mobile
Gambar 13. Aplikasi yang di-deploy di mobile emulator memiliki formulir log in dummy

 

Sangat mudah bukan? Dengan langkah sesimpel itu, kamu sudah bisa membuat form log in dummy di dalam aplikasi Windows 10 UWP buatan kamu sendiri.

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.

 


Baca tutorial selanjutnya: Menambahkan Event Handler pada Elemen Kontrol Aplikasi UWP


Sekian dari saya tentang tutorial bagian ketiga yang menjelaskan cara menambahkan elemen kontrol (control elements) ke aplikasi Windows 10 UWP. Jika kamu punya pertanyaan ataupun masalah mengenai tutorial ini, jangan lupa untuk menulisnya di kolom komentar artikel ini. Terima kasih dan sampai berjumpa di tutorial selanjutnya!