What Are They?

By holding similar Objects and providing them with a common base of Parameters, Groups help organize your skin and keep your skin flexible for any changes you make later. Groups are defined before the Layout using the Tag groupdef. Between the opening and closing Tags, you place the Objects that you wish to be part of that Group. Now when you place the Group in your skin, all the Objects in that Group will be included. Consider them like a more powerful Include Tag for Objects.

How Do They Work?

The best way to understand Groups is to see one in action. For the tutorial skin, the background and inset Layers will be placed in the same Group. First, let's put the Group Tag in player-normal.xml. It should look something like:

<group id="player.normal.group.base" x="0" y="3" />

The id was chosen to be something meaningful and must be the same as what we use in our groupdef. For x and y, use the lowest values of those Parameters from the Objects you want in your Group. In this case, the background Layer has the lowest x value and the lowest y value, so we use "0" and "3". Later we'll see a case where we use one value from one Object and one value from another.

Next, to house our Group definitions, let's create a new file called player-normal-group.xml in our XML folder. There we need to define our "player.normal.group.base" Group and to place the background and inset Layers. The new file should look like this:

<groupdef id="player.normal.group.base" w="378" h="150">
<!-- 0,3 -->
   <layer id="MainBase" image="player.normal.background" x="0" y="0" sysregion="1"/>
   <layer id="MainInset" image="player.normal.inset.main" x="26" y="26"/>
</groupdef>

Here we see a couple of important aspects of Groups. First, notice that the Group has width and height Parameters. This should be the overall area taken up by the Objects in the Group. Because Winamp has a default size for Groups, your images may be clipped if you don't specify these dimensions. The second line is a comment where I noted the coordinates of the Group. If you look at the Layers, you notice that the x and y values have changed. The Objects in a Group all determine their position relative to the position of their parent Group, it becomes their new Origin, an important addition to the previous section. In this case, we subtract 0(no change) from all the x values and subtract 3 from all the y values. Before continuing, be sure to include player-normal-group.xml in player-normal.xml above the Layout Tag. Once that is done, refresh your skin and see what changes. If you did all the steps properly, nothing should have changed.

Adding More Groups

Using the concepts above and from previous sections, I've added two more Groups and some of their Objects. The first Group contains the Speakers, which, while they could be in the background Group, are in their own Group as they have a special purpose awaiting them later. The second Group contains the Display background and the glassy Layer to cover the Display. Further in the tutorial, we will cover how to add a Timer, the SongTicker, and other elements to the Display. This is what is looks like so far:

What We Have So Far

Just to make sure we're all on the same page, the following is what your XML files should look like at this point. If you've had no problems so far, then you may continue on to the section about adding the Control Buttons.

<!-- player.xml -->
<include file="player-elements.xml"/>
<container id="main" name="Main Window" default_x="0" default_y="0" default_visible="1">
   <include file="player-normal.xml"/>
</container>

Hopefully your code wasn't too dissimilar. From here on out, it will ber your responsibility to make additions to the Elements file as it is fairly straightforward. If you have your skin working up to this point, let's go to the Control Buttons section. If you're stuck somewhere, compare your code with this, see where the differences are, then go back to the appropriate section to figure out why the XML is what it is.