Creating the Framework

There are many ways to include the Thinger in your skin. For the purposes of this tutorial, we're going to go into detail on how to make it a standalone Container.

Just like when we created our Main Window, the Thinger needs its own Container with one or more Layouts. Because the Thinger involves so few pieces, we're going to put all of its related XML into one file, "thinger.xml". Let's look at a skeleton of the Thinger's XML to see how this is done.

<elements>

</elements>

<container id="thinger" name="Thinger" default_x="0" default_y="165" default_visible="0">
   <layout id="normal" desktopalpha="1" w="150" h="154">

   </layout>
</container>

The key things to note here are the id, name, and the overall structure. The id is used by the Close Button. Since this is not "Main", it will only close the Thinger not all of Winamp. The name determines what shows up in the System Menu to identify this Container. Also, it is used to determine what to open when switching skins. For example, if you were using the Default skin and had its Thinger open, then switched to the Tutorial skin, it would also display the Thinger. This is because they both have the name of "Thinger". If you choose to name yours something else, its status will not carry over to or from other skins.

The overall structure of this file is a little different than those we have looked at so far. Until now, we've always had our Containers span over multiple files. One file for the Elements, one for the Container, one file for each of the Layouts, etc. In most cases, that is a great way to set things up. For the Thinger, however, it isn't really necessary since it only has one Layout and needs very little to make it work. If you create your Containers in this way, make sure that you still maintain the proper heirarchy though. Elements must be defined before your Container, Groupdefs are to be done before your Layout, but inside the Container, and Layouts must all be within the Container. And of course we have to include this file somewhere. Because we are going to use some of the Elements from our Main window, include thinger.xml just after our player.xml in skin.xml. Don't forget to remove the link to the Default skin's Thinger!

Designing the Layout

Let's add in all the parts of the Thinger that we already know of and are comfortable. A logical place to start would be the background image so that we can see everything else as we place it. While we're at it, we might as well do the inset as well.

<layer id="THBase" image="thinger.normal.background" x="0" y="3" sysregion="1"/>
<layer id="THInset" image="thinger.normal.inset" x="25" y="28"/>

Be sure to make the appropriate entries in the Elements as well. For the gammagroups, use the same as we did in the Player Elements. This will make the Thinger follow your Color Themes as well. Likewise, let's add in a "display" Group to house the actual contents of our Thinger using the following code:

<group id="thinger.normal.group.display" x="35" y="39"/>

<groupdef id="thinger.normal.group.display" background="thinger.normal.display.bg">
   <layer id="DisplayGlass" image="thinger.normal.display.glass" x="0" y="0" ghost="1"/>
</groupdef>

When putting these lines in your XML, remember, the Group goes inside the Layout, the Groupdef goes outside(but still inside the Container.) In this case, we're using the background Parameter to set the size and shape of the Group. This will be important to keep our Text and ComponentBucket from showing outside our display. Before we see how to add these new items, be sure to test the skin at it's current stage by saving all your files and refreshing.

Now you should have something that looks like this:

Chances are, you are seeing only half of that. If you have opened the Thinger at all for this skin while it was using the default Thinger, Winamp has already set the Layout height and width. If so, then you'll need to delete studio.xnf then load the skin again. When you can see the whole background, we're ready to continue on to the next page.