Chapter 3 - A Look at the default skin

Chapter 3 - Skinning the predefined colors and bitmaps

In addition to defining containers and layouts, the default skin declares a set of bitmaps and colors to be used by the main application and by component windows. Those elements (bitmap and colors) have predefined IDs. Each time the main application instantiate an object, it loads the bitmaps and use the colors you have associated with those IDs. If your goal is to entirely skin Winamp3 and all its current and future components, you need to replace those bitmaps and colors to match your skin.

Redefining elements is exactly the same thing as defining elements for the first time. In chapter 1, we declared just a few elements for the simple player window, here the file studio-elements.xml, included by studio.xml in the default skin, links the predefined IDs of colors and bitmaps to actual color values and bitmap files or section of bitmap files. ie:

Since in the future, some new bitmap and color IDs might be added to the set of predefined elements, you need to use the xml include directive in your skin.xml file to load the default elements from studio.xml prior to redefining them to your skin design.

For example , here is the skin.xml file for chapter 1's demo skin:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<WinampAbstractionLayer version="0.7">

<skininfo>
<version>1.0</version>
<name>Tutorial 1</name>
<comment>Tutorial 1 Demo Skin</comment>
<author>Nullsoft</author>
<email>denny@winamp.com</email>
<homepage>http://www.winamp.com/</homepage>
<screenshot>skinshot.png</screenshot>
</skininfo>

<include file="../default/xml/studio.xml"/>
<include file="../default/xml/eq.xml"/>
<include file="../default/xml/thinger.xml"/>
<include file="../default/xml/minibrowser.xml"/>
<include file="../default/xml/components.xml"/>
<include file="xml/player.xml"/>

</WinampAbstractionLayer>

This simple skin loads studio.xml prior to loading anything else, this is the proper way to ensure that your skin will always work with future versions of the main application.

If your skin simply gives a new face to the player, you can always include more from the default skin, hence this simple skin including most of the default skin's containers and layouts, except for the main window itself..

The easiest way to skin the predefined elements is to copy the file studio-elements.xml from the default skin into your skin's xml directory. Include it after including the default studio.xml, and start redefining colors and bitmaps :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<WinampAbstractionLayer version="0.7">

<skininfo>
<version>1.0</version>
<name>Tutorial 1 with custom colors</name>
<comment>Tutorial 1 Demo Skin with custom colors</comment>
<author>Nullsoft</author>
<email>denny@winamp.com</email>
<homepage>http://www.winamp.com/</homepage>
<screenshot>skinshot.png</screenshot>
</skininfo>

<include file="../default/xml/studio.xml"/>
<include file="xml/studio-elements.xml"/>
<include file="../default/xml/eq.xml"/>
<include file="../default/xml/thinger.xml"/>
<include file="../default/xml/minibrowser.xml"/>
<include file="../default/xml/components.xml"/>
<include file="xml/player.xml"/>

</WinampAbstractionLayer>

The skin has now 4 xml files: skin.xml, xml/player.xml, xml/player-elements.xml and xml/studio-elements.xml.Your custom colors and bitmaps are defined in xml/studio-elements.xml. You should never modify anything from the default skin. If you need to include a modifed xml, the proper way to do it is to copy the file to your skin and modify the include statements of your skin.xml to reflect your needs.

You can find a description of the predefined entries in the default skin's studio-elements.xml. Some objects use multiple bitmaps, in which case some consideration must be given to the fact that some bitmaps will be stretched and some others won't :

ie: a slider is composed of three bitmaps for its background :

LEFT

MIDDLE(stretched in width)

RIGHT

a button is composed of nine bitmaps :

TOPLEFT	TOP(stretched in width)	TOPRIGHT
LEFT(stretched in height)	MIDDLE(stretched in width and height)	RIGHT(stretched in height)
BOTTOMLEFT	BOTTOM(stretched in width)	BOTTOMRIGHT

The default skin's studio-elements.xml as of skin version 0.7: