The skinny fox

Sexy sells.

Yep, again I bother you with a whitepaper, a weird name, by the way, for a piece of paper, covered with black spots called letters, what is so white on these kind of papers? Wink [;)]

Each and every salesman can tell you that sexy sells.
Coming from the battleship gray colors of windows 95 with dull icons we came into the colorful world of XP and Vista (the latter for those who like pain).

The old way of creating applications will not do you any good in terms of sales these days.

Of course, good functionality has the highest priority in software development. It does not really matter how sexy your application looks, if the functionality is not good then your customers won’t be happy either.

Personal confession.

I have to confess that the way my apps looked could not bother me for a minute in the past, it  just was not important in my book. That attitude went on until I read the book “Mastering the Requirements Process” by Suzanne and James Roberts (ISBN: 0-201-36046-2).

In Chapter 7 of that must read book they write:
“You might think of non functional requirements as those that give character to the work”.
Things like speed, security et cetera are non functional, but they add to the user’s acceptance of your application. Let’s face it, if you application is as slow as a drunken snail in thick mud, as stable as quick sand and shows C5 errors every hour or so your users would not be very happy.

Another big point they make is the look and feel of a product. (page 115 to 118)
In this era of attractive looking applications you should also take into consideration the audience of your applications. Maybe not so much when you work as an in-house developer, although your users may like the work you do (take a look for some cool samples on Bernard Bout’s Weblog (http://weblogs.foxite.com/bernardBout), but even more so when you develop applications for commercial sales. I talk YOUR money here. 

The aforementioned book, along with some conversations I had with (potential) customers, showed me that giving this some attentention could very well help me sell more of my applications in the markets.

The target of this whitepaper

This whitepaper covers only a part of making your applications look better.
I show here a way of adding skins to your applications.

In this article I will show some forms with a skin, no doubt that some of you will recognize the skins, as they are taken from the samples that were once available on vfpskin.com.ar. Unfortunately that site is under construction for quite a while and it is still unclear when they’ll be back. Hence the motivation for my project.

I do not claim it is perfect and complete, far from that, it is just a way to get things started from what I hope may be a way to give the VFP community some extra zest to their applications. I know that there are some great graphical artists out there, so maybe they too can give us some nifty skins to add to our apps.

Graig Boyd put it so well during one of his sessions at the SouthWest Fox 2008 conference, “creating modern looking applications is a must these days if you want to sell them. (and along with that, your services as a developer.)”

The source of all evil.

For those of you who never visited http://www.news2news.com/vfp/index.php,, you have been missing quite something. The site owner, Anatoliy Mogylevets, maintains a lot of code and samples, showing what cool things you can do with the windows API. Some code is only accessible if you take a subscription to that site, but that still leaves many samples accessible. Speaking for myself I can say that taking a year subscription to this site was and is worth each and every €uro I paid for it.
If you even dare to tell that you never heard of that site then that makes me wonder on what planet you have been living.

Based on the sample on http://www.news2news.com/vfp/?function=-1&example=499, “How to draw custom Window Caption on FoxPro form” I created a class that handles most of the skinning itself.

I’d like to share this code with you all so you can take advantage of this. (I hope).
For my own usage I did make some changes to the code. The main advantage as I see it is that the way I do things now makes skiining the fox very open to new input so the fox can cunningly disguise himself as a gentleman.

This is a project under construction, so if you have any ideas and improvements, let me know, I am open to suggestions. Before sending me suggestions read also the todo list at the end of this article, I can be found at: B.Lutgerink@betuwe.net

So what is skinning anyway?

The whole idea is very simple.
Put some pictures at the very edges of a form, cut off the titlebar and borders of that form and voila, you have a new border around your forms.
Sure enough that does take some real estate off the form, but the gain is a better looking form.
The other gain is that you can create your own borderstyles.
So if you are a graphical artist (besides being a helluvaDatabaseGeekWhoProgramsCirclesAroundTheCompetition) go as you please and share your art with us all. 

In the above picture I stretched the form a bit here so you can see the effect of a new border. Normally the picture will show at the very edges of the form. As shown in this article.

There are 8 pictures involved in this, starting at the top left going clockwise you see:

·         TopLeft.gif;

·         TopBar.bmp;

·         TopRight.gif;

·         RightBar.bmp;

·         RightBottom.gif;

·         BottomBar.bmp;

·         LeftBottom.gif;

·         LeftBar.bmp

Notice that for the corners I use GIF files, the reason for that is that since they fill in a corner I don’t want to see the inner and outer parts of the picture, So I made those parts of the pictures transparent. Gif is supporting transparancy.

 vs

The topbar, rightbar, bottombar and leftbar are BMP files, the reason for that is that when these files get stretched (image property stretch set to 2) they don’t fade, as some other graphical filetypes do.

On the above picture you see the individual parts of the border on the form.
Before going REALLY technical I show you what the form looks like when it runs:

I did not add any code to adjust the backcolor of the form, that is all in the class I created.

It reads an ini file and there are the settings for these types of data.

Since ini files are very easy to change this gives you a chance to create and add your own skins to your applications. Very open source and extensible to your own liking and taste.

Now, are you ready to roll? Here comes the technique:

Teach me the Magic

Some  assumptions first. So that there will no misunderstanding of how I work.

You might need to adjust the code if you do things differently.

·         When starting my applications I alway create a public application object that handles most of the behavior of the application.
That is also the place where I put the name of the skin I want to see. This makes it very easy to simply drop one object on the form where I want the skin to appear. So my application class has one property named “skin”.

·         The value of this property is also the name of a folder under the application folder where all pictures reside. As well a a skin.ini file. More on that later.

·         Besides the property “skin” my application object also has a method SetSkin.
This method reads my application ini file, locates the SKIN section and reads the SKIN key.

Using an ini file makes it easy for you to change the behavior of an application

without having to compile the project again.

I use Simon Arnold’s initoobject class for this, in the original the classname in the

prg is ClsinitoObject, I seem to have sticky fingers so I often made the typo

clsInitobject (one o), therefore I changed the classname to clsini2Object.

(look at download ID 106 on the download page of foxite.

In the SetSkin method of the application object, the ini file is read and if the Skin

section and the skin key are there the value of skin is put in the skin property of

the application object. Here is the code:

LOCAL loini as clsini2object OF ini2obj.prg

 

loini = NEWOBJECT("clsini2object","ini2obj.prg","",this.cIniFile)

 

lcSkin = loini.readvalue("Skin", "Skin")

 

IF NOT ISNULL( lcSkin)

   this.skin = lcSkin

ENDIF

 

 

For the remainder of this article I will assume that you drop the formskinning object on the form itself.
I adjusted the code a bit so you can use it by dropping the object on your form.

So here’s the piece of code you need in the init of the form:

IF PEMSTATUS( goapp, "skin", 5) ;

   AND NOT EMPTY( goapp.skin) ;

   AND DIRECTORY( goapp.skin)

  

   FOR EACH loControl IN this.Controls

      IF UPPER(loControl.class) == "FORMSKINNING"

         loControl.FormInit()

         exit

      ENDIF

   ENDFOR

ENDIF

First the existence of the skin property is checked, if that is not empty AND there is a folder with the name of that skin only then the remainder of the code will run.

In the for … endfor loop the controls on the form are checked, if one of them is of the formskinning class the forminit method of that class will run.

Here’s the forminit:

LOCAL lcColor AS STRING

 

LOCAL loini as clsini2object OF initoobj.prg

 

loini = NEWOBJECT("clsini2object","initoobj.prg","", goapp.cInifile)

 

THIS.DECLARE()

WITH THISFORM

   .ADDPROPERTY("ProxyBorderStyle",3)

   .ADDPROPERTY("StartX",0)

   .ADDPROPERTY("StartY",0)

ENDWITH

 

WITH this  

   .AddImages()

   .ActivateImages()

   .SetMousePointer()

   .PositionImages()

   .AddButtons()

   .PositionButtons()

   .AdjustProxyCaption()

ENDWITH

BINDEVENT( THISFORM, "resize", THIS, "cutframe")

BINDEVENT( thisform, "resize", THIS, "PositionButtons")

THISFORM.RESIZE()

·         First the declare method is called, here the API functions needed for the skinning process are called.

·         It adds three properties to the form

·         then it adds the pictures, activates the images, this means that there is a bindevent for each of the images 1 to 6;

·         It sets the mousepointers for each of the images 4 to 6,

·         In the next step the close, max and min button are added.

·         The buttons are positioned.
Mind you, since the position of the “buttons” (just shapes actually) are determined on the position of the righttop image (img3) the images need to be positioned first.
If you forget about this order things turn out to be so messy, and for sure, the fox doesn’t like messy workers.

·         The next step is to adjust the captioncontrol, this is just a label that:

Ø  takes over the caption of the form and;

Ø  mimics the dragging of the form once you click with the mouse on that and drag the form.

·         In the last steps there is a bindevent between the form’s resize event and the skincontrol cutframe method, as well as the forms resize event and the positioning of the buttons.

·         Then the form is resized to cut away the frame.
This cutting away of the frame means that the borders and the titlebar are actually cut from the form. This is not the same as setting titlebar and borderstyle to 0 (zero), property settings that switch off the titlebar and borders.

All the pictures are subclasses of the SkinImage class. The name of the skin is passed as parameter, in the init of that class, the imagename is determined, based on the name of the class, and the correct image is added to the imagecontrol.

LPARAMETERS tcSkinName

WITH this

   .top = 0

   .left = 0

   .BackStyle= 0

 

   DO CASE

      CASE UPPER(.Name) = "IMG1"

         lcImage = "LEFTTOP.gif"

        

      CASE UPPER(.Name)= "IMG2"

         lcImage = "TOPBAR.BMP"

     

      CASE UPPER(.Name)= "IMG3"

         lcImage = "RIGHTTOP.gif"

     

      CASE UPPER(.Name)= "IMG4"

         lcImage = "RIGHTBAR.BMP"

     

      CASE UPPER(.Name)= "IMG5"

         lcImage = "RIGHTBOTTOM.gif"

     

      CASE UPPER(.Name)= "IMG6"

         lcImage = "BOTTOMBAR.BMP"

     

      CASE UPPER(.Name)= "IMG7"

         lcImage = "LEFTBOTTOM.gif"

     

      CASE UPPER(.Name) = "IMG8"

         lcImage = "LEFTBAR.BMP"

 

   ENDCASE

 

   .Picture = tcSkinName+"\"+lcImage

   .Visible = .T.  

Next, a caption is added, it  takes the text from the form caption.

In the activateImages method the images are activated, basically this means that they will respond to mouse actions, here’s the code:

WITH thisForm

 

* pics 1 to 3 are the top 3 img's and the caption control.
* They will respond to the mousedown.

   * basically this means they will make dragging of the form possible.

   *

 

   BINDEVENT( .img1,         "MouseDown", this, "OnMouseDownMove")

   BINDEVENT( .img2,         "MouseDown", this, "OnMouseDownMove")

   BINDEVENT( .img3,         "MouseDown", this, "OnMouseDownMove")

   BINDEVENT( .proxycaption, "mousedown", this, "OnMouseDownMove")

 

   * images 4, 5 and 6 are the right side, bottomright and the bottombar.

   * they make resizing of the control possible.

   *

   BINDEVENT( .img4,         "MouseDown", this, "BeforeMouseDownResize")

   BINDEVENT( .img4,         "MouseMove", this, "AfterMouseDownResize")

   BINDEVENT( .img5,         "MouseDown", this, "BeforeMouseDownResize")

   BINDEVENT( .img5,         "MouseMove", this, "AfterMouseDownResize")

   BINDEVENT( .img6,         "MouseDown", this, "BeforeMouseDownResize")

   BINDEVENT( .img6,         "MouseMove", this, "AfterMouseDownResize")  

  

This is the code of the OnMouseDownMove method:

LPARAMETERS tnButton, tnShift, tnXCoord, tnYCoord

* emulate the ability to drag the form using mouse

 

#DEFINE WM_SYSCOMMAND 0x112

#DEFINE WM_LBUTTONUP 0x202

#DEFINE MOUSE_MOVE 0xf012

 

IF tnButton = 1

   ReleaseCapture()

   SendMessage(ThisForm.HWnd, WM_SYSCOMMAND, MOUSE_MOVE, 0)

   SendMessage(ThisForm.HWnd, WM_LBUTTONUP, 0, 0)

ENDIF


Here is the code for the BeforeMouseDownResize method:
LPARAMETERS tnButton, tnShift, tnXCoord, tnYCoord

 

IF tnButton=1

   ThisForm.StartX = tnXCoord

   ThisForm.StartY = tnYCoord

ENDIF


All it does is adding the coordinates to the startX and startY properties of the form.

The AfterMouseDownResize:

LPARAMETERS tnButton, tnShift, tnXCoord, tnYCoord

 

WITH ThisForm

   IF tnButton=1 AND .ProxyBorderStyle=3

      .Width  = .Width  + tnXCoord - .StartX

      .Height = .Height + tnYCoord - .StartY

      .StartX = tnXCoord

      .StartY = tnYCoord

   ENDIF

ENDWITH
The form is resized and startX and startY are refreshed.

Then the mousepointer is set for the images on the form:

* mousepointer with two arrowheads, pointing left and right

#DEFINE MP_WE 9 

* mousepointer with two arrowheads, pointing left-up and right-down

#DEFINE MP_NW_SE 8

* mousepointer with two arrowheads, pointing Up and Down

#DEFINE MP_NS 7 

 

WITH thisForm

   .LockScreen = .T.

   .img4.mousepointer = 0

   .img5.mousepointer = 0

   .img6.MousePointer=  0

 

   IF .Borderstyle == 3

      * only if the form is resizable.

      *

      .img4.mousepointer = MP_WE

      .img5.mousepointer = MP_NW_SE

      .img6.MousePointer=  MP_NS

   ENDIF

   .lockScreen = .F.

ENDWITH

When the pictures are positioned this means that clockwise, the topleft, topbar, righttop, rightbottom, bottombar, leftBottom and leftbar are put in position.

The img1 doesn’t need positioning. When adding an object to a form its top left is always 0 (zero), there for we start with img2, being the topbar

    WITH thisform.img2  && top bar

        .Left = thisform.img1.Width

        .Width = thisform.Width - thisform.img1.Width - thisform.img3.Width

        .anchor = 11

    ENDWITH

 

    WITH thisform.img3  && top right corner

        .Left = thisform.Width - .Width

        .anchor = 9

    ENDWITH

 

    WITH thisform.img4  && right side bar

        .Left = thisform.Width - .Width 

        .Top = thisform.img3.Height

        .Height = thisform.Height - thisform.img3.Height - thisform.img5.Height

        .anchor=13

    ENDWITH

 

    WITH thisform.img5  && right bottom corner

        .Left = thisform.Width - .Width

        .Top = thisform.Height - .Height

        .anchor = 12

    ENDWITH

    WITH thisform.img6  && bottom bar

        .Left=thisform.img7.Width

        .Width = thisform.Width - thisform.img5.Width - thisform.img7.Width

        .Top = thisform.Height - .Height

        .anchor = 14

    ENDWITH

 

    WITH thisform.img7  && left bottom corner

        .Top = thisform.Height - .Height 

        .anchor = 6

    ENDWITH

 

    WITH thisform.

Published Tuesday, July 14, 2009 12:55 AM by Boudewijn
Filed Under: , ,
Attachment(s): skinnedfoxes.zip

Comments