View RSS Feed

Development Team Blog

Skinning in Visual DataFlex - The Simple Way to Great Looks

Rate this Entry
Note: This information applies to Visual DataFlex 2008 and higher.

What is Skinning?

Skinning can be defined as the process of applying a skin (customized graphical appearances) in order to change an application’s look and feel. Some skins merely make the program more aesthetically pleasing, but others can rearrange elements of the interface, potentially making the program easier to use.

Visual DataFlex and Skinning

Visual DataFlex developers can easily transform the appearance of their application by applying a skin to it – with Visual DataFlex an application can take on a complete new appearance with a few lines of code. All you need to do to dress an existing Visual DataFlex application with a new skin is to add a skinning object and set two properties:

Object oSkin is a cCJSkinFramework 
    Set psSkinFile to "Vista.cjstyles" 
    Set psSkinIni to "NormalBlack.ini" 
That will set the looks of all visual objects in that existing application. Normally, the hardest part of skinning your application in Visual DataFlex is to decide on which skin file to use.

Skin files are standard Visual Style files. Skins are applied by selecting a skin file, which means that your application can dynamically change skins – you or your users may customize the application’s interface by just selecting a different skin file to be used.

Visual DataFlex Skinning Rules

  • Skin Files

Skin files are files used to apply a Windows Visual Style to your applications. Two types of skin files can be used: the Codejock .cjstyles files and the standard Microsoft .msstyles files. Some skin files are typically located under the Windows directory at “C:WindowsResourcesThemes”. You can search your computer for *.msstyles to obtain a list of the pre-defined Visual Styles installed on your computer. Many more skins can be found on the Internet.
  • Location for the Skin Files

The application framework expects skins files to be placed in your workspace's programs directory.
  • Skinning Object

Application skinning is supported by creating a single desktop skinning object. The object ID of the skinning object is stored in a global handle named ghoSkinFramework that can be used by other parts of your program to communicate with the skinning object. The value of ghoSkinFramework will be 0 if the skinning object does not exist.
  • Skinning Coverage

If a skin file (psSkinFile property) and a skin section (psSkinIni property) are defined inside of your skinning object, the skin will be applied to all visual objects in your application.
  • Application Object

The skinning object normally requires that a cApplication object be defined first. We recommend that the skinning object be located directly below the application object. If you use the Studio to create a skinning object, the Studio will place this object in the correct location for you. The skinning object uses the application object to determine where the default directory is located and uses it to load and save skin preferences. If an application object is not available to provide this information, an error will be raised.
How to Skin your Application in Visual DataFlex
  1. Download a visual style, or use one of the operating systems pre-defined Visual Styles.
  2. Add a skinning object to your application – you can drag and drop a cCJSkinFramework from the class palette.
  3. Using the object properties panel, set the properties for the skinning object. You can use the Skin Selector dialog (activated by pressing the prompt button available from the psSkinFile and psSkinIni properties) to locate skin files. The Skin Selector will copy the skin files to the workspace’s Program folder.
Dynamically Setting Skins

In order to dynamically change skins at runtime, you will need to change the psSkinFile and psSkinIni property values – setting them to the new skin to be used – and then call the procedure ApplySkin. You will probably want to use ghoSkinFramework in your application in order to access the skinning object properties and methods.

If you allow users to select their own skins, you may want to be able to let them save and load these skin preferences. Setting the pbLoadPreference property to true enables this capability. A cApplication object is required to save and load preferences. In addition, application object’s pbPreserveEnvironment property must be set to true. The loading and saving of preferences can be customized by augmenting the LoadSkinPreference and SaveSkinPreference methods.

Also, if you allow the dynamic selection of skins, you will need a way to know what skin files are available and what skin sections are available for each skin file. You can use the function EnumerateSkins to search a directory for all skin files or you can use the SkinEnumeration.vw installed in your in the system pkg directory to display and allow users select skins from the default skin directory.

Using the SkinEnumeration view makes it possible to preview each one of the listed skins before deciding which one to keep. As you select a skin from the list, your application should automatically get skinned with the highlighted style.

Be aware that there is a trade off between setting a static skin and dynamically applying skins. When you, the developer, set a skin to be used with your application, you can carefully choose an appropriate skin and use skinning to give your application a distinct and professional look. If you allow users to dynamically choose a skin, you may lose that distinct look you selected for your application, but in return, you gain an exciting new configuration option!

Before deciding on how to bring skinning into your application, you may wish to research what types of application use skinning to brand their products and what types of application offer skinning as an end-user customization feature.

Exploring the Visual DataFlex Skinning Example

Visual DataFlex installs a Skinning example workspace. You can run the main program (Skinning.src) to see all that was covered in this article at work. Skinning.src includes a skinning object right under the cApplication object:

Object oApplication is a cApplication 
    Set psCompany to "Data Access Worldwide" 
    Set psProduct to "Visual DataFlex Examples" 
    Set psVersion to "14.0" 
    Set psProgram to "Skinning" 
    Set psHelpFile to "Examples.chm" 
    Set peHelpType to htHtmlHelp 
Object oSkin is a cCJSkinFramework 
    Set psSkinFile to "Vista.cjstyles" 
    Set psSkinIni to "NormalBlack.ini" 
Note: If all you want to do is to apply a skin to your application, creating a skinning object is normally all you need to do. If you want to know more about dynamic skinning, keep reading this section till the end.

It also includes the SkinEnumeration view, so you can select different skins at runtime:
Object oClientArea is a ClientArea 
    Use SkinEnumeration.vw 
The code in the SkinEnumeration view shows how to get a list of available skins and dynamically apply a new skin to your application. When the view is loaded (Procedure Activating), it gets a list of available skins in the current path, displays that list in a list object (oSkinList) and displays the currently selected skin in Textbox object (oCurrentSkinTB):

Procedure Activating 
    Forward Send Activating 
    Send LoadSkins // gets and displays a list of available skins 
    Send ShowCurrentSkin // displays currently selected skin 
Note that LoadSkins checks if ghoSkinFramework is set, i.e. if a skinning object exists, and uses that global variable to access and send messages to the skinning object. LoadSkins also uses a tSkinInformation array to keep the list of available skins.

tSkinInformation is the type returned by EnumerateSkins containing the name/description of the Skin file (sName), the file name and path of the skin file (sSkinFile) and the name of the skin section within the Skin file (sSkinIni).

Procedure LoadSkins 
    Integer iSkinsCount iArrayItem 
    tSkinInformation[] Skins 
    If ghoSkinFramework Begin 
        Get EnumerateSkins of ghoSkinFramework "" True to Skins
        Set pSkins to Skins
        Send AddSkinsToList of oSkinsList Skins
To apply a new skin the user just needs to select the skin from the list. The code in ApplyCurrentSkin will take care of setting the necessary skin properties (psSkinFile and psSkinIni) and calling ApplySkin to make it all happen.

Procedure ApplyCurrentSkin
    Integer iCurrent
    tSkinInformation[] Skins
    If ghoSkinFramework Begin
        Set psSkinFile of ghoSkinFramework to ""
        Set psSkinIni of ghoSkinFramework to ""
        Get Current_Item of oSkinsList to iCurrent
        If (iCurrent>0) Begin
            Get pSkins to Skins
            Set psSkinFile of ghoSkinFramework to Skins[iCurrent-1].sSkinfile
            Set psSkinIni of ghoSkinFramework to Skins[iCurrent-1].sSkinIni
        Send ApplySkin of ghoSkinFramework
    Send ShowCurrentSkin
When running the application you can see the default skin in use. After a new skin is selected, the new look is automatically applied.

Obtaining Skin Files

A few skin files are provided with the Codejock skin framework and others are installed with Windows on your computer. Many others can be downloaded from the Internet – see the links under References for some suggestions. In addition, skin editors are available which can be used to create your own skins.


Updated 3-Aug-2009 at 09:19 AM by Marcia Booth