Sunday, 26 February 2017T2/26/2017 07:23:00 pm

MEMBUAT TAMPILAN APLIKASI ANDROID DENGAN MENGGUNAKAN DELPHI XE

Salam blogger….pada artikel sebelumnya saya sudah membahas tentang penggunaan komponen firedac dan database sqlite di Delphi XE dalam membuat aplikasi android. Nah pada kesempatan kali ini saya akan membahas tentang cara design dan user interface tampilan aplikasi nya di android. Membuat tampilan yang menarik merupakan hal wajib dilakukan agar aplikasi yang kita buat dapat dengan nyaman mudah efisien digunakan oleh pengguna aplikasi. Untuk membuat tampilan aplikasi yang standart digunakan pada umumnya merupakan hal yang perlu dilakukan untuk menciptakan aplikasi yang ramah terhadap pengguna.

Pada artikel sebelumnya saya sudah memberikan contoh penggunaan connection komponen firedac dan cara pembuatan database nya (baca juga : penggunaan komponen firedac dan database sqlite di Delphi XE). Nah untuk tampilan di aplikasi androidnya kita akan memerlukan komponen listview untuk menampilkan field yang sudah kita buat sebelumnya, disini juga kita menambahkan komponen toolbar, button dan label. Lalu design tampilan nya seperti dibawah ini.

Jika sudah lalu selanjutnya kita akan mengatur properties dari masing masing komponen tersebut. Langkah langkah nya adalah sebagai berikut :

  • Drop sebuah toolbar kedalam form, lalu set name properties menjadi addbutton, set stylelookup menjadi addtoolbutton dan set align menjadi right.

  • Lalu selanjutnya drop sebuah button kedalam toolbar yang sudah dibuat tadi,lalu atur propertiesnya ubah caption nya menjadi delete, ubah align nya menjadi left, ubah stylelookup menjadi deletetoolbutton.

  • Selanjutnya drop listview kedalam form, ubah alignnya menjadi client.

Jika sudah selanjutnya kita akan menambahkan koding program pada komponen tersebut agar dapat dijalankan. maka langkah selanjutnya adalah klik 2x pada listview lalu masukan koding program berikut :

procedure TForm1.ListView1ItemClick(const Sender: TObject;
  const AItem: TListViewItem);
begin
  ButtonDelete.Visible := ListView1.Selected <> nil;
end;

selanjutnya tambahkan sebuah procedure dan letakan didalam tag private lalu ketikan coding program berikut :

procedure OnInputQuery_Close(const AResult: TModalResult; const AValues: array of string);
lalu tambakan koding program berikut pada procedure tadi :
procedure TForm1.OnInputQuery_Close(const AResult: TModalResult; const AValues: array of string);
var
  TaskName: String;
begin
 TaskName := string.Empty;
  if AResult <> mrOk then
    Exit;
  TaskName := AValues[0];
  try
    if (TaskName.Trim <> '')
    then
    begin
      FDQueryInsert.ParamByName('ShopItem').AsString := TaskName;
      FDQueryInsert.ExecSQL();
      FDQuery1.Close();
      FDQuery1.Open;
      ButtonDelete.Visible := ListView1.Selected <> nil;
    end;
  except
    on e: Exception do
    begin
      ShowMessage(e.Message);
    end;
  end;
end;

lalu klik2x pada button add , lalu masukan koding program berikut :

procedure TForm1.ButtonAddClick(Sender: TObject);
var
  Values: array[0 .. 0] of String;
begin
       Values[0] := String.Empty;
       InputQuery('Enter New Item', ['Name'], Values, Self.OnInputQuery_Close)
end;

lalu pada button delete klik 2x dan masukan koding program berikut :

procedure TForm1.ButtonDeleteClick(Sender: TObject);
var
  TaskName: String;
begin
  TaskName := TListViewItem(ListView1.Selected).Text;

  try
    FDQueryDelete.ParamByName('ShopItem').AsString := TaskName;
    FDQueryDelete.ExecSQL();
    FDQuery1.Close;
    FDQuery1.Open;
    ButtonDelete.Visible := ListView1.Selected <> nil;
  except
    on e: Exception do
    begin
      SHowMessage(e.Message);
    end;
  end;
end;


Fungsi InputQuery menunjukkan kotak dialog yang meminta pengguna akhir untuk memasukkan teks. Fungsi ini mengembalikan Benar ketika pengguna memilih OK, sehingga Anda dapat menambahkan data ke database hanya ketika pengguna memilih OK dan teks berisi beberapa data. Jika dijalankan maka tampilan pada aplikasi akan seperti pada contoh gambar dibawah ini :

Demikian artikel yang dapat saya share kali ini tentang cara membuat design user interface pada aplikasi android menggunakan Delphi XE, semoga atrikel saya kali ini dapat bermanfaat buat sobat semua dan selamat mencoba.
Previous
Next Post »
0 Komentar untuk "MEMBUAT TAMPILAN APLIKASI ANDROID DENGAN MENGGUNAKAN DELPHI XE"

Silahkan tinggalkan komentar dibawah ini,
Terima kasih sudah :
1. Berkomentar dengan sopan
2. Tidak meninggalkan link aktif dalam form komentar
3. Berkomentar sesuai postingan / artikel
4. Tidak membuat komentar yang mengandung SARA / SPAM
5. Memberikan informasi link / script yang tidak berfungsi

Terima Kasih Sudah Berkomentar

PENDAPAT ANDA TENTANG BLOG INI ?

Follow by Email

 
Copyright © 2014 uduy macal blog's - All Rights Reserved
Template By Kuncidunia
DMCA.com Protection Status