Skin Changer Dengan Delphi

Yang menunggu tutorial ini, mohon maaf kelamaan dipostingnye.. he he. biasa deh ga perlu banyak ceramah langsung aja.

Berikut adalah contoh penggunaan multi skin diaplikasi seperti halnya Winamp skins, jadi anda bisa menganti tampilan program anda langsung, tinggal pilih skin kemudian OK, berubah deh tampilannya. Ketika anda menutup program anda dan membukanya kembali nanti, maka skin yang akan ditampilkan adalah skin settingan anda terakhir kali.

Pastikan Skin library sudah diinstall di Delphi anda, jika belum ikuti langkah-langkah disini

Agar langkah-langkah kita seiring, silahkan atur folder dan file-file anda seperti berikut:

Ket:

1. Folder skinTest : adalah folder utama letak program kita dibuat
2. Folder skin : adalah letak folder skin-skin yang anda punya.
   Skin-skin tersebut bisa anda download di http://www.saarixx.info/sxskincomponents/en/downloads.php
   atau dari skin-skin yang anda buat sendiri.
3. cetekSkin.conf : adalah file config untuk menyimpan settingan skin. file ini berguna untuk menyimpan setting yang anda pilih, File ini tidak perlu dibuat karena akan dicreate dengan kode program.
4. file dpr,exe,pas,dfm dkk, sopasti file-file program kita.

Selanjutnya buat design sesuai selera anda.

Saat mendesign tampilan, lebih baik pasang terlebih dahulu object SXSkinLibrary1, SXSkinForm1, dan kemudian baru object-object lainnya. Ini bermanfaat supaya object-object lain akan secara otomatis mengatur sendiri properties-propertiesnya.

Untuk SXSkinLibrary1, SXSkinForm1 tidak perlu diatur propertiesnya, karena kita akan mengaturnya langsung dari script.

Yuk bahas scriptnya:

unit test;
interface
uses

  Windows, Messages, SysUtils, Variants, Classes,Graphics, Controls, Forms,
  Dialogs, SXSkinLibrary, SXSkinForm, SXSkinControl,SXSkinRadioButton,
  SXSkinCheckBox, SXSkinButton, SXSkinEdit,SXSkinPanel, SXSkinImage,
  SXSkinLabel, Grids, DBGrids, SXSkinSpinEdit,StdCtrls, Menus,
  ComCtrls, DirOutln, Outline;Type

{membuat variable object TcetekSkin dengan type record,
dan menambahkan nameOfSkin type string size 20 sebagai satu field}

Type
  TcetekSkin = record
  nameOfSkin : string[20];
  end;

TForm1 = class(TForm)
  SXSkinRadioButton1: TSXSkinRadioButton;
  SXSkinLibrary1: TSXSkinLibrary;
  SXSkinForm1: TSXSkinForm;
  SXSkinImage1: TSXSkinImage;
  SXSkinEdit2: TSXSkinEdit;
  SXSkinEdit1: TSXSkinEdit;
  SXSkinSpinEdit1: TSXSkinSpinEdit;
  SXSkinButton6: TSXSkinButton;
  SXSkinLabel1: TSXSkinLabel;
  SXSkinButton7: TSXSkinButton;
  ComboBox1: TComboBox;
  procedure FormCreate(Sender: TObject);
  procedure SXSkinImage1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
  procedure SXSkinImage1MouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);
  procedure SXSkinImage1MouseUp(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, Y: Integer);
  procedure Button2Click(Sender: TObject);
  procedure SXSkinButton7Click(Sender: TObject);
  private
  { Private declarations }
public
  { Public declarations }
  DraggingForm:Boolean;
  StartDragPT:TPoint;
end;

var
  Form1 : TForm1;
  myConf : File of TcetekSkin;
  cetekSkin : TcetekSkin;

implementation

uses DateUtils;

{$R *.dfm}

Ketika form dijalankan maka yang akan dikerjakan adalah: mencari file ‘cetekskin.conf’, jika tidak ada maka skin akan dibuat default yaitu memanggil skin kayu, jika ada maka kode akan membaca isi file tersebut, jika file tidak ada isinya maka akan default ke skin kayu, jika ada, maka isi tersebut adalah nama skin yang akan dipanggil.

procedure TForm1.FormCreate(Sender: TObject);
var
dir,myfileconf : String;

begin
myfileconf:= ‘cetekskin.conf’;

if FileExists(myfileconf) then //check file ada/tidak
begin

     AssignFile(myConf, myfileconf);
     FileMode := fmOpenRead;
     Reset(myConf);
     Read(myConf, cetekSkin); //baca file
     if cetekSkin.nameOfSkin<>”then
            dir := GetCurrentDir +’/skin/’+cetekSkin.nameOfSkin //folder skin
     else
           dir := GetCurrentDir +’/skin/kayu’; //folder skin default
     CloseFile(myConf);
end
else
      dir := GetCurrentDir +’/skin/kayu’; //folder skin default

//actifkan skin terpilih
With SXSkinLibrary1 DO
Begin

     SkinDir:= dir;
     SkinFile:=’skin.ini’;
     SkinFile2:=’skin.ini’;
     Active:=True;

end;
end;

tiga procedure dibawah adalah setting agar form dapat didrag/digeser

procedure TForm1.SXSkinImage1MouseDown(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin

if Button=mbLeft then
begin

     DraggingForm:=True;
     StartDragPT:=Mouse.CursorPos;
     Dec(StartDragPT.X,Left);
     Dec(StartDragPT.Y,Top);

end;
end;

procedure TForm1.SXSkinImage1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
var PT:TPoint;

begin
if DraggingForm then
begin
     PT:=Mouse.CursorPos;
     SetWindowPos(Handle,0,PT.X-StartDragPT.X,PT.Y-StartDragPT.Y,0,0,SWP_NOSIZE or SWP_NOZORDER);

end;

end;

procedure TForm1.SXSkinImage1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if Button=mbLeft then
     DraggingForm:=False;
end;

//procedure untuk merubah setting skin

procedure TForm1.SXSkinButton7Click(Sender:TObject);
vardir : string;
begin

AssignFile(myConf, ‘cetekskin.conf’); //setting file config
ReWrite(myConf); //kosongkan isi file
cetekSkin.nameOfSkin := ComboBox1.Text;
Write(myConf, cetekSkin); //tulis file dengan text combo terpilih
CloseFile(myConf);

//aktivkan skin

dir := GetCurrentDir + ‘/skin/’+ LowerCase(ComboBox1.Text);

With SXSkinLibrary1 DO
Begin

     SkinDir:= dir;
     SkinFile:=’skin.ini’;
     SkinFile2:=’skin.ini’;
     Active:=True;

end;
end;
end.

Monggo dicoba. Contoh sederhana.

Jika anda mau menjalankan dikomputer lain, sedangkan dikomputer baru tersebut ga ada SXSkinnya atau Delphi, maka file yang perlu di sertakan tentu saja .EXE dan folder skin

Jika anda mau membuat skin sendiri, anda bisa membuatnya dengan adobe photoshop atau program grafis lainnya yang bisa menghasilkan file *.png. anda tidak perlu mengotak-atik file skin.ini, anda cukup mereplace file *.png yang ada di folder skin dengan image baru anda, tentunya dengan memperhatikan size dari image-image yang sudah ada difolder skin tersebut.

Semoga ada manfaatnya. download skintest.zip 238kb