by Daaron Dwyer (ddwyer@ncic.com)

Let's face it. The square window does not inspire and promote artistic creations. Several are competing to secure the hearts and minds of developers, like Woll2Woll's 1st Class (http://www.woll2woll.com) and Tim Lawrenz's CoolForm (http://www.lawrenz.com/coolform), but no one had really addressed making a way to allow users to create new and different interfaces, also known as "skins." Your forms can be in any shape, include the shape of a supermodel, like one from Tim Lawrenz's Gallery. Editors Note: There is also a Delphi 4 Open-Source project called Illumination that does something similar.

You can allow end-users to create images to place on top of your more bland interfaces to create a much more visually appealling product. Skins are available for ICQ, Half-Life, and several other applications from the
Skinz.org web site.

HOW TO DO IT:

1.  Start with a skin
I recommend starting with a skin image and going from there. The Skinz.org web site directed me to a very good skins artist with extremely reasonable rates. At Shoggot's site, you can see examples of skins-- including the one he is doing for me (the ChronoLogic skin). The skin is actually four images: mask, mouseup, mousedown, and mouseover. (Mouseover is optional in most cases.)

2.  Map the skin
Mapping involves making an INI file, listing the location of each interface item. I tend to use a TImage component because of the transparency and the ease of determining pixel sizes and locations.

     The INI file looks much like this:

     [BITMAPINFO]
     MaskBitmap=mainmask.bmp
     MouseUpBitmap=main.bmp
     MouseDownBitmap=selected.bmp
     MouseOnBimap=selected.bmp

     [HOTAREAINFO]
     Count=11
     1=BUTTON_PLAY, 29, 249, 26, 18
     ...
     10=RADIO_REPEAT, 99, 293, 24, 17, FALSE, GROUP1
     11=RADIO_SHUFFLE, 60, 293, 30, 18, FALSE, GROUP1

The first section (BITMAPINFO) simply identifies the mask (a black monochrome image identifying the shape of your form), along with the mouseup, mousedown, and mouseover bitmaps. The second section (HOTAREAINFO) identifies the number of items it should be monitoring on your form, with an identification of the items. The items are in a format of:

     unique_number=unique_name, left, top, width, height, initial_state (optional), radio_group (optional)

3.  Incorporate the skin into your application
Freeware with Delphi source is fantastic, and the SkinForm component (available at http://friendsoft.yeah.net) from Xue Huai Qing is what I used to incorporate the skin just last weekend into my application. The strength of his component is it's ease of use. The clicked bitmap area is redrawn to show mousedown, mouseup and mouseover, along with support for radio button groups and boolean switch states. Methods are available to determine and set switch states, with custom mouse events providing state information also. Implementation in a Delphi form is as easy as drag and drop. Supporting a button click event can be a simple string test or the incoming button's ID can be changed to an integer to facilitate case statements.

     Here is an example from his tutorial:

     procedure TForm1.SkinForm1MouseUpNotify(ID: String; Button: TMouseButton;
       Shift: TShiftState; X, Y: Integer);
     var
        pos : TPoint;
     begin
          if (Button = mbLeft) then
          begin
               if ID = 'BUTTON_EXIT' then
                    Close;
               if ID = 'BUTTON_MINIMIZE' then
                    Form1.Perform(WM_SYSCOMMAND, SC_MINIMIZE, 0);

               if ID = 'BUTTON_MENU' then
               begin
                    pos := ClientToScreen(Point(X, Y));
                    PopupMenu1.Popup(pos.x, pos.y);
               end;

               if ID = 'RADIO_REPEAT' then
               begin
                    if SkinForm1.GetHotAreaState(ID) = TRUE then
                       ShowMessage('Repeat button enabled.')
                    else
                        ShowMessage('Repeat button disabled.');
               end;
          end;

          if (Button = mbRight) then
          begin
               pos := ClientToScreen(Point(X, Y));
               PopupMenu1.Popup(pos.x, pos.y);
          end;

     end;

This makes for very simple and very easy but really great looking forms for your applications. At the same time that you can offer a diversity of skins, you are also making a marketing move-- someone could be spending their valuable time to create an interface for your (probably registered) application. How much cooler can that get?

Copyright © 2007 undu.com                    Powered by Engineer Partner The One Stop Outsource