frisbeemonkey.com : Beginner - Containers and Layouts

Main

Tutorial

References

Skins

Beginner - Containers and Layouts

Skin Hierarchy

At a glance, skins are really just different Tags nested together to form the different parts of the skin. The skin is made up of one or more Containers which in turn are each made up of one or more Layouts. In the previous section, we saw how Name, Email, and other parts all were parts of the greater SkinInfo. A skin is built with levels just like that. The skin is really a bunch of parts(MainWindow, EQ, etc) put together. Each of these parts has its own subparts that describe it, and so on. Here is an example of the different tiers of a skin's hierarchy:

Containers

We've created the outer level of the skin, now we need to make our Main Window. As shown above, the Main Window is a Container made up of Layouts. Let's create our Container for our skin now. Open up player.xml, which should be blank. To it, add Tags to open and close the Container. Next add 5 Parameters. The first Parameter is id with a value of "main". Second is a Parameter called name whose value is "Main Window". Next, add two Parameters, default_x and default_y, both with a value of "0". The fifth Parameter should be default_visible whose value is "1". If you did it correctly, your file should now look like this:

The Parameter id tells Winamp which Container this is. name is what shows up under the System(right-click) Menu. The next two determine the Main Window's initial position on the screen. default_visible tells Winamp whether or not to show this Container when loading this skin. When set to "1", Winamp will show it the first time the skin loads. If the value is "0", then Winamp will not show the Container initially. There are other possible Parameters for containers, but these will be discussed later in the tutorial.

Layouts

Now that our Container is in place, we need to create a Layout. Containers must have at least one Layout, usually called the normal or default Layout, but often have multiple Layouts. For this part of the tutorial, we'll just work on making the Normal Layout of the Main Window.

The first step in creating our new Layout will be to create a new file in our XML folder. Name the file player-normal.xml. To use this file, we'll again have to include it in our skin. Between the Container tags, add an include Tag for player-normal.xml. Your player.xml should now look like:

If and when you have more than one Layout in your Container, you should know that Winamp will show whichever one is included first when initially loading the skin.

To create our Layout, let's open player-normal.xml and add an opening and closing Layout Tag. Unlike the Container Parameters, the Parameters of a Layout depend a lot on the specifics of the skin, some of which is covered in the next section. Right now, we will just add two that are standard, id and droptarget. Since this is our Normal Layout, the id value should logically be "normal". As for droptarget, its value should be "pldr". This tells Winamp how to deal with supported media files that are dragged and dropped on the Main Window. Your player-normal.xml should now read:

Now that we have the basic structure of our Main Window in place, we can begin to add Objects such as Layers, Sliders, Buttons, etc. Continue on to Background Images to learn how to display our first Layer.

< Previous

Up One Level

Next >