Forum

Could you please provide documentation about skinning?

What we want is documentation about the skinning API and the XML format.

Also a skin editor would be nice.

Right now the only thing we can do when creating our own skin, is using one of the supplied XML skins and through trial and error see what effect each XML tag has on the skin.

This time consuming and error prone and could be prevented if you just provide some tools and documentation for building our own skins.

Why would you even provide (and promote) the ability to use custom skins via xml/bin files, if you don’t also provide documentation and tools for it?

 

There are four types of XML nodes in the XML skin file:

1) The Prof-UIS-Skin node as the root element.
2) The SkinItem nodes defining hierarchical tree. This element has only the Name attribute.
3) The Color nodes defining the color values in the Color attribute. The color elements are always leaf elements in the XML. This element also has only the Name attribute which is typically defining normal/hovered/disabled/pressed color names.
4) The Glyph nodes defining bitmap backgrounds of UI elements. The Clp, Crp, Ctp and Cbp attributes defining the content padding of UI element which means how the inner sub elements should be far from this element borders. The Image attribute defines path to BMP or PNG image file. The Lp, Rp, Tp and Bp attributes defining how the bitmap should be split into the nine slice bitmaps before painting. The DrawCenter attribute is the flag which defines whether to draw the central part of bitmap. The DrawMethod attribute defines how to draw all the slices. It can be Hollow, Stretch, Center, TileH, TileV or Tile. These values are similar to the CExtBitmap::e_DrawMethod_t enumeration used by the CExtBitmap::AlphaBlendSkinParts() method. This element also has only the Name attribute which is typically defining background type or state of UI item.

Some skins can be very un-friendly to particular UI elements. For example, the buttons have very big paddings in the Aqua skin and you cannot use this skin with very small push buttons.

What about To, Ro, Bo and Lo?

Thank you!

The skinned UI item layout and position are defined by the following XML parameter names declared near the top of the .../Prof-UIS/ProfSkin/ExtSkinItem.h file:

<>1)</b> The bitmap padding used for splitting bitmap into nine slices before painting it over UI element:

   #define __EXT_SKIN_ITEM_GLYPH_TOP_PADDING                                          L"Tp"
            #define __EXT_SKIN_ITEM_GLYPH_LEFT_PADDING                                         L"Lp"
            #define __EXT_SKIN_ITEM_GLYPH_BOTTOM_PADDING                                   L"Bp"
            #define __EXT_SKIN_ITEM_GLYPH_RIGHT_PADDING                                       L"Rp"

<>2)</b> The UI element content padding determines how far the inner UI sub-elements from borders of their parent element (for instance, how far icon and text from button’s border):

   #define __EXT_SKIN_ITEM_GLYPH_CONTENT_TOP_PADDING             L"Ctp"
            #define __EXT_SKIN_ITEM_GLYPH_CONTENT_LEFT_PADDING                        L"Clp"
            #define __EXT_SKIN_ITEM_GLYPH_CONTENT_BOTTOM_PADDING      L"Cbp"
            #define __EXT_SKIN_ITEM_GLYPH_CONTENT_RIGHT_PADDING                      L"Crp"

<>3)</b> The UI element offset:

   #define __EXT_SKIN_ITEM_GLYPH_LEFT_OFFSET                                           L"Lo"
            #define __EXT_SKIN_ITEM_GLYPH_TOP_OFFSET                                            L"To"
            #define __EXT_SKIN_ITEM_GLYPH_RIGHT_OFFSET                                         L"Ro"
            #define __EXT_SKIN_ITEM_GLYPH_BOTTOM_OFFSET                                     L"Bo"

The first two types of parameters used by all the skin data items. The most of UI elements in any app have fixed layout and/or position and ProfSkin library just needs to know how to paint UI elements and how to position inner UI sub elements.
But some UI items require to be shifted to some distance from their default location or from corners of parent UI elements. This is needed only for elements like window caption buttons or resizable control bar caption buttons. That’s why the third type of XML node parameters were defined. The most of UI elements ignore these parameters.

Thanks for the information.

I hope however that you are still working towards a complete documentation for the skins, that will then be integrated in the Profuis helpfiles along with a skin editor.

 

The XML skin description file works like CSS works with HTML. The XML skin does not have exactly defined skin description for each particular UI item. The XML nodes are inheritable like CSS cascading classes. We can only describe the XML tree branches and corresponding UI elements.

The skin editor is in our TO-DO list. We can visualize XML data in some tree grid control and display what and how can be painted according to the currently focused tree item. We can also provide several test windows containing different Prof-UIS controls. This can be useful for taking look at the entire skinning progress in the skin editor.

A description of each xml tag and its attributes and its effects and correspondence with UI elements would be nice.

In addition to that a skin editor is very desirable.

For example, I had a small CExtButton, about 12x12 pixels, with 1 letter as caption. This letter would not show up on the button, because apparently the skin element for a CExtButton has some attributes concerning content padding etc, which resulted in a usable client area for the caption of 0,0 pixels.....

It took some time to hunt down that this was the problem, becauseI had to debug step it until I found the culprit and then find the corresponding tag in the skin xml file.