25
Pada bab ini akan dibahas mengenai bagaimana perangkat lunak yang telah didesain pada bab 3 diimplementasikan menjadi listing program yang akan menghasilkan perangkat lunak untuk melakukan pembuatan interface.
4.1. Modul pengolahan gambar
Berdasarkan desain sistem pada bab tiga, maka fungsi utama modul ini adalah untuk mengolah gabungan gambar bitmap menjadi sebuah file dan membuka sebuah interface yang telah disimpan menjadi gambar-gambar button dan background yang dapat diatur ulang.
4.1.1. Komponen TIntfEngine
Bagian penting dari komponen ini adalah penggunaannya untuk menyimpan gambar interface yang telah jadi ke dalam file dan membuka gambar file interface ke dalam stream. Procedure berikut digunakan untuk mengambil gambar interface dari file:
procedure TIntfEngine.LoadFromFile(const FileName: string);
var
I: Integer;
Stream: TFileStream;
Count, Index: Integer;
begin
{ hapus interface yang sudah ada } Clear;
{ buat stream }
Stream := TFileStream.Create (FileName, fmOpenRead);
try
{ bagian header interface }
{ baca warna transparan dari stream }
Stream.Read (FTransparentColor, SizeOf(TColor));
{ baca posisi interface dari stream } Stream.Read (FXPos, SizeOf(FXPos));
Stream.Read (FYPos, SizeOf(FYPos));
{ bagian header background }
{ baca jumlah background dari file } Stream.Read (Count, SizeOf(Count));
{ baca kumpulan background ke file } for I := 1 to Count do begin
{ buat background baru dan tambahkan ke kumpulan background }
Index := FBackgrounds.Add (TIntfBackground.Create(Self));
{ letakkan background pada interface }
FBackgrounds.Items[Index].Parent := TWinControl (Self.Owner);
{ baca background dari stream }
FBackgrounds.Items[Index].LoadFromStream (Stream);
end;
{ bagian header button }
{ baca jumlah button dari file } Stream.Read (Count, SizeOf(Count));
{ baca kumpulan button dari file } for I := 1 to Count do begin
{ buat button baru dan tambahkan ke kumpulan button } Index := FButtons.Add (TIntfButton.Create(Self));
{ letakkan button pada interface }
FButtons.Items[Index].Parent := TWinControl (Self.Owner);
{ baca button dari stream }
FButtons.Items[Index].LoadFromStream (Stream);
end;
finally
{ hapus stream } Stream.Free;
end;
end;
Procedure tersebut menjalankan procedure lain yang digunakan untuk membaca stream hasil dari procedure ini. Hasil tersebut berupa gambar background dan button beserta koordinat posisi gambar-gambar tersebut.
Procedure berikut digunakan untuk menyimpan gambar interface dari stream ke
dalam file:
procedure TIntfEngine.SaveToFile(const FileName: string);
var
I: Integer;
Stream: TFileStream;
begin
Stream := TFileStream.Create (FileName, fmCreate);
try
{ Tulis interface header }
Stream.Write (FTransparentColor, SizeOf(TColor));
Stream.Write (FXPos, SizeOf(FXPos));
Stream.Write (FYPos, SizeOf(FYPos));
{ Tulis object background ke file }
Stream.Write(FBackgrounds.Count, SizeOf(FBackgrounds.Count));
for I := 0 to FBackgrounds.Count-1 do
FBackgrounds.Items[I].SaveToStream (Stream);
{ Tulis object button ke file }
Stream.Write (FButtons.Count, SizeOf(FButtons.Count));
for I := 0 to FButtons.Count-1 do
FButtons.Items[I].SaveToStream (Stream);
finally
Stream.Free;
end;
end;
Procedure tersebut menggunakan procedure lain yang menyimpan data gambar interface ke dalam stream sebelum disimpan ke file.
4.1.2. Komponen TIntfBitmap
Bagian penting dari komponen ini adalah penggunaannya untuk menyimpan gambar interface yang telah jadi ke dalam stream dan membuka gambar file interface dari stream. Procedure berikut digunakan untuk mengambil gambar bitmap dari stream:
procedure TIntfBitmap.LoadFromStream(var Stream: TFileStream);
var
Empty: Boolean;
begin
if Assigned (Stream) then begin
{ ambil indikasi bitmap }
Stream.Read (Empty, SizeOf(Empty));
{ Jika bitmap ada isinya ? Jika ya } if not Empty then begin
{ ambil posisi bitmap pada interface dari Stream}
Stream.Read (FXMargin, SizeOf(FXMargin));
Stream.Read (FYMargin, SizeOf(FYMargin));
{ ambil data bitmap ke dalam Steam } FBitmap.LoadFromStream (Stream);
{ posisikan control berdasarkan posisi bitmap } Top := FYMargin;
Left := FXMargin;
{ sesuaikan ukuran control dengan ukuran bitmap } AutoSize;
end;
end;
end;
Procedure berikut digunakan untuk menyimpan data gambar ke dalam stream:
procedure TIntfBitmap.SaveToStream(var Stream: TfileStream);
var
Empty: Boolean;
begin
if Assigned (Stream) then begin { ambil indikasi bitmap } Empty := FBitmap.Empty;
{ simpan indikasi ke dalan Stream } Stream.Write (Empty, SizeOf(Empty));
{ apakah bitmap ada isinya ?, jika ya}
if not Empty then begin
{ simpan posisi bitmap pada interface ke dalam Stream}
Stream.Write (XMargin, SizeOf(XMargin));
Stream.Write (YMargin, SizeOf(YMargin));
{ simpan data bitmap ke dalam Steam } FBitmap.SaveToStream (Stream);
end;
end;
Kedua procedure tersebut merupakan procedure yang dipanggil ketika komponen TIntfEngine melakukan penyimpanan atau membuka file interface.
4.1.3. Komponen TintfButton
Berbagai procedure untuk berbagai keadaan button (idle, pressed, mouse over) merupakan bagian penting dari komponen ini. Berikut merupakan procedure ketika pointer mouse berada di atas button:
procedure TIntfButton.CMMouseEnter(var msg: TMessage);
begin
if FIdleBitmap.FBitmap.Empty then
FIdleBitmap.FBitmap.Assign (FBitmap);
if not FOverBitmap.FBitmap.Empty then FBitmap.Assign (FOverBitmap.FBitmap);
Invalidate;
end;
Berikut merupakan procedure ketika pointer mouse meninggalkan button:
procedure TIntfButton.CMMouseLeave(var msg: TMessage);
begin
FBitmap.Assign (FIdleBitmap.FBitmap);
Invalidate;
end;
Berikut merupakan procedure ketika button di-click:
procedure TIntfButton.MouseDown(Button: TMouseButton; Shift:
TShiftState;
X, Y: Integer);
begin
inherited;
if not FPushBitmap.FBitmap.Empty then FBitmap.Assign (FPushBitmap.FBitmap);
Invalidate;
end;
Berikut merupakan procedure ketika tombol mouse dilepas:
procedure TIntfButton.MouseUp(Button: TMouseButton; Shift:
TShiftState; X, Y: Integer);
begin
inherited;
if FOverBitmap.FBitmap.Empty then FBitmap.Assign (FIdleBitmap.FBitmap) else
FBitmap.Assign (FOverBitmap.FBitmap);
Invalidate;
end;
Berikut merupakan procedure yang dijalankan ketika button di-click pada interface yang digunakan pada program. Penentuan ID button pada pembuatan interface digunakan untuk menentukan button mana yang sedang beroperasi.
procedure TIntfButton.Click;
begin
inherited;
if Assigned (FEngine) then begin
if Assigned (FEngine.FOnButtonClick) then FEngine.FOnButtonClick (FID);
end;
end;
4.2. Modul kerja
Modul kerja berhubungan dengan penggunaan program secara langsung.
Umumnya hanya berisi save dialog dan open dialog yang berfungsi untuk
mengambil dan menyimpan gambar. Selain save dan open dialog, modul ini juga
menyediakan sarana untuk mengatur cara kerja mouse. Bila tombol mouse ditekan
pada daerah kerja program, maka dapat berarti mouse tersebut membuat daerah
untuk gambar button, membuat daerah untuk gambar background, memilih objek
untuk digerakkan, atau tidak ada yang dipilih. Berikut merupakan procedure untuk
mengatur kerja mouse:
procedure TFWorkSpace.WorkspaceMouseDown(Sender: TObject; Button:
TMouseButton; Shift: TShiftState; X, Y: Integer);
procedure AddSelection (var NewSelection: TSelection);
{jika memilih background atau button yang akan dimodifikasi}
begin
NewSelection := TSelection.Create(Self);
NewSelection.Parent := WorkSpace;
NewSelection.Top := Y;
NewSelection.Left := X;
NewSelection.Selected := true;
NewSelection.OnMouseDown := SelectionMouseDown;
end;
procedure AddBackground;
{jika mode background digunakan pada tempat kerja program}
begin
AddSelection (FSelection);
FSelection.Part := TIntfBackground.Create(FSelection);
IntfEngine1.Backgrounds.Add (FSelection.Part);
FSelection.SendToBack;
SetActiveSelection (FSelection);
end;
procedure AddButton;
{jika mode button digunakan pada tempat kerja program}
begin
AddSelection (FSelection);
FSelection.Part := TIntfButton.Create(FSelection);
IntfEngine1.Buttons.Add (FSelection.Part);
SetActiveSelection (FSelection);
end;
begin
case FMode of mdBackground:
begin
AddBackground;
ToolButton3.Down := false;
end;
mdButton:
begin
AddButton;
ToolButton2.Down := false;
end;
else begin
SetActiveSelection (nil);
end;
end;
SetMode (mdNone);
end;
Berikut merupakan tiga procedure yang saling berhubungan untuk mengatur pemindahan gambar menggunakan mouse:
procedure TSelection.MouseDown(Button: TMouseButton; Shift:
TShiftState; X, Y: Integer);
begin
inherited;
if not FSelected then SetSelected (true);
if not FDoDrag then begin FDoDrag := true;
FX := X;
FY := Y;
end;
end;
procedure TSelection.MouseMove(Shift: TShiftState; X, Y: Integer);
var
Point : TPoint;
begin
inherited;
if FDoDrag then begin Point.X := X;
Point.Y := Y;
Point := ClientToScreen (Point);
Point := Parent.ScreenToClient (Point);
Top := Point.Y - FY;
Left := Point.X - FX;
if Top < 0 then Top := 0;
if Left < 0 then Left := 0;
if Left + Width > Parent.Width then Left := Parent.Width - Width;
if Top + Height > Parent.Height then Top := Parent.Height - Height;
end;
end;
procedure TSelection.MouseUp(Button: TMouseButton; Shift:
TShiftState; X, Y: Integer);
begin
inherited;
if FDoDrag then FDoDrag := false;
end;
4.3. Sistem kerja
Sistem kerja program ini banyak menggunakan open dialog karena tanpa
membuka gambar, tidak ada interface yang akan dibuat. Untuk memulai
pembuatan interface, dilakukan pemilihan gambar background dan button
menggunakan open dialog. Keduanya menggunakan open dialog yang sama
hanya berbeda dari mana untuk menjalankannya.
Gambar 4.12. Gambar open dialog untuk membuka gambar
Berikut merupakan tampilan setelah memilih gambar untuk background dan button.
Gambar 4.13. Gambar background dan button yang siap diatur
Menu save as dari file digunakan untuk menyimpan interface yang sudah jadi. File
yang disimpan memiliki extension gin.
Gambar 4.14. Gambar save dialog interface
Jika terjadi kekeliruan atau ingin membuka kembali interface yang telah dibuat, dapat melalui menu load dari file.
Gambar 4.15. Gambar open dialog interface
Bentuk form berubah menjadi interface setelah program di-run. Setelah perubahan ini, Semua button pada interface dapat difungsikan melalui pengetikan program pada file unit.pas. Penggunaan fungsi ini berdasarkan ID pada perancangan button sebelumnya. Pada program utama ditambahkan type dan const. Const untuk menggunakan ID pada perancangan button sebelumnya, type untuk menggunakan komponen IntfEngine pada saat dilakukan penekanan tombol.
Berikut merupakan program sederhana untuk membuat agar button bekerja jika di-click.
const
{mendefinisikan ID button}
btnPrev = 1;
btnStop = 2;
btnPlay = 3;
btnPause = 4;
btnNext = 5;
btnClose = 6;
type
TForm1 = class(TForm)
IntfEngine1: TIntfEngine;
procedure IntfEngine1ButtonClick(ID: Integer);
private
{ Private declarations } public
{ Public declarations } end;
var
Form1: TForm1;
implementation
{$R *.DFM}
procedure TForm1.IntfEngine1ButtonClick(ID: Integer);
begin
case ID of
btnPlay : ShowMessage ('Play Button Click');
btnStop : ShowMessage ('Stop Button Click');
btnPause : ShowMessage ('Pause Button Click');
btnNext : ShowMessage ('Next Button Click');
btnPrev : ShowMessage ('Prev Button Click');
btnClose : Close;
end;
end;
