XML Files

Winamp3 skins are created using one or more XML files. XML, like to php, is a markup language used to organize and present data. Using an XML parser, or decoder, Winamp gets all the information it needs to make your collection of pictures into a working skin. From the XML, Winamp knows where to place your images, how they interact with the user, etc. After going over the fundamentals of XML, we'll take a look at our first XML file.

Tags and Parameters

Everything in your skin needs to be defined using Tags and attributes for those Tags called Parameters. Tags look something like this:

<Llama>(Stuff will go here later) </Llama>

Notice that the Tag opens using <Llama> and closes using </Llama>. All tags must open and close so that the parser knows when objects start and end. However, some tags, such as the Layer tag, open and close in the same tag, like this:

<layer (Stuff will go here later) />

Tags can have Parameters that further alter the attributes or behavior of the objects. For example, the layer we used above has a bunch of attributes that can be set. A typical Layer looks like this:

<layer id="Llama" image="player.normal.llama" x="10" y="20"/>

The id, image, x, and y values are all Parameters. Don't worry about what they do for now, but understand how they work. The name of the Parameter is followed by the equals sign which is in turn followed by the value in quotations. In this case, id is a Parameter with a value of "Llama" For skinning purposes, all Tags have predetermined Parameters that you may use.

Skin.xml

Alright, now that we've covered some preliminary XML concepts, let's move on to actually starting to assemble a skin. The first file we'll create is skin.xml. Skin.xml is the first file Winamp looks for when loading your skin and it holds a lot of important information. Before we start, you should create a new folder in the Winamp3/Skins/ directory. Name it whatever you want to call this skin, something like "Tutorial".

In your text editor, create a new document and save it as "skin.xml". Copy and paste the following into your new file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<WinampAbstractionLayer version="0.8">
   <skininfo>
      <version>1.0</version>
      <name>YourSkinName</name>
      <comment>Enter some comment here.</comment>
      <email>YourEmail@somewhere.com</email>
      <homepage>http://www.YourWebpage.com</homepage>
      <screenshot>skin.png</screenshot>
   </skininfo>
</WinampAbstractionLayer>

So what does all that mean? This file is a good place to start because you can see Tags in action and also get a feel for how they can be nested. Between its opening and closing Tags, SkinInfo holds information about the skin that will show up in the SkinSwitcher. Replace the values for Name, Author, Email, and so forth to more appropriate values. Screenshot is a preview image of your skin that is displayed in the skin switcher. It should go in the same folder/directory as your skin.xml. If you call your image something else, change the name here as well. As for the other code here, the first line is the same for all skins and should not be modified. The next line tells Winamp what version your skin was designed for. At the time this tutorial is being created, 0.8 should be used. Any other values will bring up incompatibility warnings when you load the skin. Also, it might be worth that WinampAbstractionLayer is where the file extension for skins, WAL, comes from.

Including Other Files

While you can put all your information in one file, it's hard to keep track of things as the complexity of your skin increases. In order to have a tidy, flexible skin, you should organize your skin into different XML files. Our next step will be to include player.xml so that we can start putting some graphics on the screen and take our first sneak peek at our skin in progress.

Before creating player.xml, you should create a new folder in your skin folder. Call this new folder "XML" as this is where all your XML files(except for skin.xml) will go. Now create a new file and name it "player.xml". For now we will leave it blank, but don't worry, we'll fill it in in the next section. Open skin.xml and let's include our new file. To include a file, we need to use the Tag "include" and its Parameter "file" as shown:

<include file="xml/player.xml" />

This new line should be written inbetween </skininfo> and </WinampAbstractionLayer>. In this case, we use "xml/player.xml" as the file Parameter because we need to look in the XML folder we created to find our player.xml file. All includes are relative to the current file. In player.xml, we'll be including another file which will be in the same folder and therefore won't require the path.

Before we move on to player.xml, we should include a few other files. Just above where we included player.xml, add these lines:

<include file="../default/xml/pledit.xml"/>
<include file="../default/xml/thinger.xml"/>
<include file="../default/xml/eq.xml"/>

This will include the Default skin's Playlist Editor, Thinger, and Equalizer so that they are available to use during the development of our skin. Should you choose to skin these parts for yourself, these lines will be changed to reflect your modifications later in the tutorial.

Okay, hopefully you have an understanding of the basic concepts behind XML and have your first file, skin.xml, working. Let's move on to the Containers and Layouts section and start coding the main window.