Difference between revisions of "Modern Skin: XML Intro"
m (Protected "Modern Skin: XML Intro": All pages locked during Beta except for Article & FAQ page. [edit=sysop:move=sysop])
m (Unprotected "Modern Skin: XML Intro")
Revision as of 18:14, 24 September 2008
Creating a Modern Skin --> Intro --> Winamp 2 to Winamp 3+ --> Simple Skin Tutorial --> XML Intro --> Simple Skin Tutorial (Continued) --> Container --> Group --> Relative Positioning --> Complex Skin --> Non-Rect Player --> Layer Composition --> Alpha Channels --> Animatedlayer --> Snap Points --> Drawers --> Skin Scripting --> Drawer Scripting --> Animating a Skin --> Maki Overview --> Glossary
In this section, I will give a short introduction to XML. You may ask: what does XML have to do with Winamp? Well, XML is fully implemented in Winamp. From the skinning files to the playlist, it's all XML based. I will go over XML basics in this section. If you know XML, go ahead and skip to the next section.
So What is XML?
XML stands for eXtensible Markup Language (XML). You hear about XML everywhere. We're going to give you a quick and dirty guide to XML and its relevance to Winamp. XML is just like HTML. If you know HTML, you can pick up XML very quickly. So don't be afraid.
HTML and XML are from the same family of what is called SGML (Standard Generalized Markup Language). SGML was invented as a text-based language that can be used to mark up data - that is, add metadata - in a way that is self describing. What does this mean? Basically SGML is a way for programmers to transfer and display information. The best known application of SGML is HyperText Markup Language, or HTML. HTML is a universal markup language for the display of information and the linking of different pieces of information. The idea was that any HTML document (or web page) would be presentable in any application that was capable understanding HTML (namely a web browser).
Although HTML has been incredbly successful, it's also limited in its scope: it is only intended for displaying documents in a browser. It is not particularly useful as a medium to convey information to other programs. Don't understand? Here let me give you an example.
For example, if I want to tell everyone my name, there are many ways I can do this:
a) I can create a text file on a computer that look like this. When I send you this text file, you can read it or write a program to parse it. By reading "Ken Chen" in the text file, you can guess that it's my name. But then again, are you sure? It's not really clear, right? Lets look at the next example.
b) For the web, I can create an HTML file like this. I can put it on a web site and you can see the page in your browser. Once again, by just reading "Ken Chen" you're not really sure that it's my name.
<HTML> <HEAD><TITLE>Name</TITLE></HEAD> <BODY> <P>Ken Chen</P> </BODY> </HTML>
c) XML is a standard for conveying information. I might create an XML file like this. Looking at this file, you can see that it looks very much like an HTML file. The style is very similar. The difference is that in XML, you can design or come up with any tag you want to convey the information you want. Reading this simple example, you can tell that my first name is Ken and my last name is Chen.
<Name> <First>Ken</First> <Last>Chen</Last> </Name>
From this simple example you can see why markup language like SGML and XML are called self-describing. Looking at the data, you can easily tell that this is information about a <name> and you can see that there is data called <first> and another data called <last>.
d) You could write a shorter version of the previous XML by using element attributes. like so:
<Name First="Ken" Last="Chen" />
and it could equate to the one in C, if the Name element had those attributes (first and last). The reason for this is that you get tired of typing open and closing tags. Once you open a tag, you can have attributes for that tag. Many Winamp3 skin XML files are in this style. Here's an example from the Default skin.
<button id="Previous" action="prev" x="0" y="0" image="player.button.previous" downImage="player.button.previous.pressed" tooltip="Previous" />
The beauty of XML is that you can design whatever format you want to describe your data. The key is that you follow the XML hierarchy (we'll describe in the next section. Other than that, make sure you close the tag when you open one. (ie: make sure you have </name> if you open a <name> tag.
XML has a hierarchy that you need to follow. This is much like the HTML code where you embed a tag within a tag. By doing that, you're creating another level in the hierarchy. Make sure you close your tags correctly. Check out this example.
<Winamp Employee> <Name> <First>Ken</First> <Last>Chen</Last> </Name> <Email>Ken@Winamp.com</Email> <Location>San Francisco, CA</Location> </Winamp Employee>
In this example, we have <Name>, <Email> and <Location> as level 1 tags. Within the <Name> tag, we have two level 2 tags: <First> and <Last>.
XML & Winamp
XML is basically a way to store data. Now we've shown you what XML is, you may ask: what does that have to do with Winamp? Well, XML is fully implemented in Winamp. From the skinning files to the playlist, it's all XML based. I've gone over the basics of XML. I'll go over Winamp XML elements and dissect apart a simple skin example in the next section.