The quick answer is that skinning is a technique of giving Microsoft Windows "new clothes", and allowing the display of your customer's corporate colors and 'brand'.
Windows gives us no facility for doing this, however. In the past, most of the elaborate skinning was only done with entertainment applications such as WinAmp, or Windows Media Player. A few small niche applications have skin as well.
Some inroads have been made in displaying 'themes' in IE, changing the caption colors, text, and background.
PocketServer is the only one that has pushed the envelope this far with skin!
The only limitation to the skin shape and display is the imagination of your graphic artists. Windows do not have to be rectangular. Windows can have transparent areas within their boundaries. Active buttons and logos using your own artwork may be placed on the non-client artwork area.
Following the concept that "One Picture is worth a Thousand Words", I am going to show you the possibilites available.
To begin with, when you start our application, you have to log in with your SmartCard PIN. That logon screen in 'standard' Microsoft Windows looks like this:
This is simply a dialog box with a text area to type a PIN number and two buttons.
Since this is the first look most users get of the skin, The majority of the customers have chosen to have a fancier first impression.
This initial dialog is one of two that I have allowed a type of skinning that I call "Image Skinning". Image Skinning uses a graphic image as the dialog body and shape, with buttons and other Windows control features placed on it.
For example:
When I took the screen shot for this (and some of the others), I did it against a spreadsheet. The portions of the spreadsheet that you see around the edges of the 'window' are active portions of the window underneath showing through. Any of the skinned windows can be moved around the screen by simply holding the left mouse down on any artwork area and dragging the window to another screen location.
It can't be shown in a static image such as this, but all buttons have multiple states. On the 'window' above, there are two odd-shaped buttons, one of which appears to have an LED on it.
When the mouse 'rolls over' the button, the LED lights up and text is displayed as follows:
One more of this screen is after the PIN is entered, the upper button becomes enabled and when pressed, it appears like this:
I think that's enough examples of that sort, everyone should get the idea by now that the buttons are 'pushable' and have different images :)
As another example of Image Skinning, here is the login diaog for the American Express Blue Card application:
I probably should mention at this point that everything you will see on this page can be done with one version of the executable application. To get the different screen shots, all I did was switch skins, and this is something the application can do while running. No code has to be changed to make these drastic appearance changes.
Our application has what we call a "LaunchPad". The LaunchPad is a quick-launch area that has a small footprint on the screen and gives access to the other functions.
We can have a small and large LaunchPad. The small is strictly buttons and a minimal solution for placing somewhere out of the way on the screen. Depending upon the skin, an application may have a large LaunchPad, a small LaunchPad, or both... and once more, this is all controlled from the skin file. I won't belabor the point by demonstrating all of this. I will only show the large one.
One last word before the LaunchPad images:
The LaunchPad(s) are the other window that can be Image Skinned, and in the two examples I have chosen, they both are.
Here is the large LaunchPad for the standard Microsoft Windows look:
This one is the high-tech demo:
And the same window in the American Express application:
So far I've given examples of Image-Skinned windows. I haven't shown anything that uses the 'normal' skinning that I developed. With just plain 'skinning', I give all the windows in the application a similar look-and-feel with regard to color scheme, border artwork, button artwork, and button placement, among many other things. Within very specific, defined areas some variations can be made with regard to all this, but essentially all windows have a similar look.
As a demonstration of the skinning of normal windows, here is the options Property Page on the Administration Tab Sheet displayed as Microsoft Windows users know and love:
Here is that same window displayed using the Demo skin:
Because this window profile is more rectangular, I cut the artwork out a little large to make the rounding of the corners more visible. Note the Help, Close, Cancel, and Apply buttons on the artwork. Yes, these are fully functional buttons!
One last image is this same window from the American Express skin:
The skinning technology demonstrated on this page and in these few images is quite a bit more complex than that used in WinAmp or Windows Media Player. The reason for that is the desired flexibility I wanted to achieve.
Each of the skin files demonstrated contain close to 200 individual graphical elements that come together at run-time to produce what I've shown.
The document written to explain how to put a skin together now runs over 70 pages, and becomes out of date every time I add something.
I hope you've enjoyed this walk through my skinning technology, and if you have any questions, please push the "EMail" button below and let me know.
Thanks!
|
|