Modern Skins

1. What is a group?
2. Simple Tutorial: Using groups
3. Simple Tutorial: Playback Buttons Group Definition
4. Simple Tutorial: Song File Info & Visualization Group Definition

A group is a set of objects that can be referred to and manipulated as a whole. First must defined by a <groupdef> tag, then located with a <group> tag. Group is an important concept to understand because a group is such a versatile object.

Let's go back to our "Simple Tutorial" example. As you recall, we have two groups defined: "player.normal.playbuttons" and "play.normal".



Let's take a look at the code: (player.xml)



If we change line 113 and 114: change the x and y coordinates of the group objects, their positions are reversed. This is a simple change and much more convinient than changing the position of each element independently.

On lines 19-64 you'll see our group definition of the playback buttons. This section contains only the definition of the group or, in another words, it defines which objects are in the group. Once the group is defined, you can use it later as we will see later. Let's go over the elements inside the group.

SongInfo group is another group definition just like the Playback Buttons group. As you can see that the elements defined inside this group is different from the previous one. In this example, we're using elements other than buttons. We're using the layer to set the background color of two areas. A layer is basically an image. Layers can overlay on top of each other. It is similar to a layer in Adobe Photoshop. "Songinfo" and "infoline" are text objects displaying information stored within Winamp3 runtime variables.