Menyusun Urutan Komponen dalam Form

Fokus komponen-komponen GUI yang sudah ditambahkan ke Form biasanya diurut pengaksesannya sesuai urutan penambahan komponen ke dalam form. Urut-urutan fokus komponen ini biasa kita namakan tabulasi, yaitu ketika kita menekan tombol TAB untuk menjadikan komponen menjadi target dari penekanan tombol keyboard. Urut-urutan ini biasanya berguna bagi pengguna aplikasi yang lebih sering menggunakan keyboard dibanding mouse.

Pengguna aplikasi seringkali lebih suka menggunakan keyboard dibanding kombinasi penggunaan mouse. Nah untuk memindahkan fokus antar komponen biasanya pengguna menggunakan tombol TAB atupun kombinasi Shift+TAB untuk kembali ke komponen sebelumnya. Untuk memudahkan ilustrasi, biasanya ini terjadi pada aplikasi-aplikasi yang entri data, dimana pengguna banyak mengisikan data di textbox yang disediakan dan menekan tombol simpan untuk mengakhiri isian. Tentu saja, pengaturan fokus setiap textbox dan tombol akan membantu buat karakteristik pengguna seperti ini.

Pengembang/Programmer tentu ingin memberikan kemudahan bagi pengguna aplikasi yang dibuatnya. Sehingga urut-urutan fokus komponen ini akan menjadi perhatian penting. Di C# ini, seperti di VB, juga memberikan kemudahan untuk melakukan pengaturan fokus komponen ini. Tentu ini akan sangat membantu programmer/pengembang untuk memberikan kemudahan bagi pengguna aplikasi buatannya.

Untuk mengatur fokus komponen ini, property yang perlu diset adalah TabIndex. Untuk lebih mudahnya mari kita aplikasikan di rutin LoginFormEn yang pernah kita bahas sebelumnya. Awalnya Fokus komponen akan berurutan sesuai dengan penambahan komponen ke Form, yaitu:

1. Kotak Isian Password
2. Kotak Isian User Id
3. Tombol Cancel
4. Tombol Login

Tentu saja Label dikecualikan, karena tidak bisa menerima Fokus. Nah untuk selanjutnya kita akan mengubah urut-urutannya menjadi:

1. Kotak Isian User Id
2. Kotak Isian Password
3. Tombol Login
4. Tombol Cancel

Untuk membuat urut-urutannya seperti ini, yang perlu dilakukan adalah menambahkan potongan kode sebagai berikut:

txtUsername.TabIndex = 0;
   txtPassword.TabIndex = 1;
   btnLogin.TabIndex = 2;
   btnCancel.TabIndex = 3;

Sehingga kode lengkap dari LoginFormEn.cs kita akan menjadi seperti ini:

using System;
using System.Windows.Forms;

public class LoginFormEn : Form 
{
  private System.Windows.Forms.Button btnLogin;
  private System.Windows.Forms.Button btnCancel;
  private System.Windows.Forms.Label label1;
  private System.Windows.Forms.Label label2;
  private System.Windows.Forms.TextBox txtUsername;
  private System.Windows.Forms.TextBox txtPassword;

 public LoginFormEn ()
 {


    btnLogin = new System.Windows.Forms.Button();
    txtUsername = new System.Windows.Forms.TextBox();
    label1 = new System.Windows.Forms.Label();
    label2 = new System.Windows.Forms.Label();
    txtPassword = new System.Windows.Forms.TextBox();
    btnCancel = new System.Windows.Forms.Button();
    // 
    // btnLogin
    // 
    btnLogin.Location = new System.Drawing.Point(95, 60);
    btnLogin.Size = new System.Drawing.Size(75, 23);
    btnLogin.Text = "Login";    
    // 
    // txtUsername
    // 
    txtUsername.Location = new System.Drawing.Point(95, 13);
    txtUsername.Size = new System.Drawing.Size(193, 20);
    // 
    // label1
    // 
    label1.Location = new System.Drawing.Point(13, 13);
    label1.Size = new System.Drawing.Size(77, 13);
    label1.Text = "User ID (Email)";
    // 
    // label2
    // 
    label2.Location = new System.Drawing.Point(13, 35);
    label2.Size = new System.Drawing.Size(53, 13);
    label2.Text = "Password";
    // 
    // txtPassword
    // 
    txtPassword.Location = new System.Drawing.Point(95, 35);
    txtPassword.Size = new System.Drawing.Size(193, 20);
    txtPassword.PasswordChar = '*';
    // 
    // btnCancel
    // 
    btnCancel.Location = new System.Drawing.Point(176, 60);
    btnCancel.Size = new System.Drawing.Size(75, 23);
    btnCancel.Text = "Cancel";
    
    
   txtUsername.TabIndex = 0;
   txtPassword.TabIndex = 1;
   btnLogin.TabIndex = 2;
   btnCancel.TabIndex = 3;
    
    // 
    // authForm
    // 
    Controls.Add(txtPassword);
    Controls.Add(label2);
    Controls.Add(label1);
    Controls.Add(txtUsername);
    Controls.Add(btnCancel);
    Controls.Add(btnLogin);

  this.Text ="Ayo Belajar C#";
  this.Size = new System.Drawing.Size(300,120);
  
    // Penambahan Aksi:
    btnLogin.Click += new System.EventHandler(this.btnLogin_Click);
    btnCancel.Click += new System.EventHandler(this.btnCancel_Click);
    
    this.AcceptButton = this.btnLogin;
    this.CancelButton = this.btnCancel;
 }
 
  private void btnLogin_Click(object sender, EventArgs e)
  {
     MessageBox.Show("User ID(Email) : " + txtUsername.Text, "Isi User ID");
  }

  private void btnCancel_Click(object sender, EventArgs e)
  {
     this.Close();
  }

 public static void Main()
 {
  Application.EnableVisualStyles();
  Application.SetCompatibleTextRenderingDefault(false);
  LoginFormEn fm ;
  fm = new LoginFormEn();
  Application.Run(fm);
 }

}

Ok, Selamat Mencoba!