Mengubah Urutan Fokus Komponen Lazarus (Belajar Lazarus #6)

Properti TabStop dan TabOrder pada komponen dipakai untuk menentukan urutan komponen yang akan menerima fokus jika user menekan tombol Tab.

• Properti TabStop bertipe boolean yang menyatakan apakah user dapat berpindah ke sebuah kontrol dengan menekan tombol Tab. Jika bernilai True maka komponen tersebut ada dalam urutan tab dan user dapat berpindah / fokus ke komponen tersebut dengan menekan tombol Tab sekali atau beberapa kali bergantung pada urutannya.
• Properti TabOrder untuk menentukan urutan fokus komponen. Jika sebuah TabOrder dari sebuah komponen bernilai 0, maka komponen tersebut akan mendapat fokus saat pertama kali form ditampilkan. Defaultnya, nilai TabOrder sesuai dengan urutan penambahan komponen pada form. Komponen yang ditambahkan pertama akan mempunyai nilai TabOrder 0, komponen berikutnya mempunyai nilai 1 dan seterusnya. TabOrder hanya akan berfungsi jika TabStop bernilai True.

Selain dengan kedua properti tersebut di atas, kita dapat mengubah urutan fokus komponen secara manual atau terprogram dengan menuliskan pernyataan dalam event komponen tersebut. Pada belajar kali ini kita akan memakai event OnEnter (terjadi pada saat sebuah komponen menerima fokus) dan OnExit (terjadi pada saat fokus keluar ke komponen lain) serta method yang dipakai adalah SetFocus.

Misalkan kita akan membuat sebuah aplikasi yang memasukkan Nama, Kelas, Password. Jika Nama adalah Guru maka Kelas tidak perlu diisikan dan fokus langsung berpindah ke Password. Pada saat sebuah komponen menerima fokus, kita akan mengubah warna teks menjadi merah, dan pada saat fokus berpindah dari komponen tersebut warna akan kembali seperti semula.

• Buatlah sebuah aplikasi baru, tambahkan tiga buah Label, masing-masing dengan Caption &Nama, &Kelas dan &Password serta properti Name masing-masing dengan LNama, LKelas, LPassword.
• Tambahkan tiga buah edit dan kosongkon properti Text dan properti Name masing-masing ENama, EKelas dan EPassword. Jangan lupa TabStop dibuat berurutan ENama = 0, EKelas = 1 dan EPassword = 2.
• Properti FocusControl dari sebuah label dipakai untuk menentukan kontrol yang terhubung ke label. Artinya jika user menekan tombol dari Label (pada contoh di atas adalah Alt+N, Alt+K, Alt+P), fokus akan diberikan pada kontrol tertentu. Ubah properti FocusControl dari LNama dengan ENama, LKelas dengan EKelas dan LPassword dengan EPassword.
• Jika user memfokus sebuah komponen Edit, warna teks dari komponen tersebut akan berubah menjadi merah. Buat event handler OnEnter dari ketiga komponen edit tersebut. Isikan dengan pernyataan masing-masing sebagai berikut:

Pada komponen ENama isikan:
ENama.Font.Color:= clRed; 

Pada komponen EKelas isikan:
EKelas.Font.Color:= clRed; 

Pada komponen EPassword isikan:
EPassword.Font.Color:= clRed;

• JIka user melepaskan fokus dari sebuah komponen Edit, warna teks dari komponen tersebut akan berubah menjadi warna semula. Buat event handler OnExit dari ketiga komponen edit tersebut. Isikan dengan pernyataan masing-masing sebagai berikut:

Pada komponen ENama isikan:
ENama.Font.Color:= clWindowText; 

Pada komponen EKelas isikan:
EKelas.Font.Color:= clWindowText; 

Pada komponen EPassword isikan:
EPassword.Font.Color:= clclWindowText;

• Pada saat user meninggalkan ENama akan dicek, Jika nama tersebut adalah Guru, maka fokus komponen akan langsung ke EPassword. Lengkapi pernyataan pada event handler OnExit milik ENama dengan:

If ENama.Text = 'Guru' Then
  EPassword.SetFocus
Else
  EKelas.SetFocus;

Jika semua pernyataan dituliskan dengan benar maka hasilnya seperti gambar berikut:

Sedangkan listing program lengkapnya sebagai berikut:

unit ufokus;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls;

type

  { TFFokus }

  TFFokus = class(TForm)
    ENama: TEdit;
    EKelas: TEdit;
    EPassword: TEdit;
    LNama: TLabel;
    LKelas: TLabel;
    LPassword: TLabel;
    procedure EKelasEnter(Sender: TObject);
    procedure EKelasExit(Sender: TObject);
    procedure ENamaEnter(Sender: TObject);
    procedure ENamaExit(Sender: TObject);
    procedure EPasswordEnter(Sender: TObject);
    procedure EPasswordExit(Sender: TObject);
  private
    { private declarations }
  public
    { public declarations }
  end;

var
  FFokus: TFFokus;

implementation

{$R *.lfm}

{ TFFokus }


procedure TFFokus.ENamaEnter(Sender: TObject);
begin
  ENama.Font.Color:=clRed;
end;

procedure TFFokus.ENamaExit(Sender: TObject);
begin
  If ENama.Text = 'Guru' Then
    EPassword.SetFocus
  Else
    EKelas.SetFocus;
  ENama.Font.Color:=clWindowText;
end;

procedure TFFokus.EPasswordEnter(Sender: TObject);
begin
  EPassword.Font.Color:=clRed;
end;

procedure TFFokus.EPasswordExit(Sender: TObject);
begin
  EPassword.Font.Color:=clWindowText;
end;

procedure TFFokus.EKelasEnter(Sender: TObject);
begin
  EKelas.Font.Color:=clRed;
end;

procedure TFFokus.EKelasExit(Sender: TObject);
begin
  EKelas.Font.Color:=clWindowText;
end;

end.

Demikian belajar mengubah urutan fokus komponen lazarus, sampai jumpa di belajar bersama selanjutnya, jangan lupa baca belajar bersama tentang EditMask ya!. Terima kasih.