Login Register Japanese Korean
Download All

About XML & ALShow Skins

If you aren't familiar with XML (eXtensible Markup Langauge), here's a real fast crash course how it relates to ALShow skins, why it's so cool, and why it's so easy to use... If you are proficient with HTML, you'll find this extremely easy.

If you are familiar with HTML (Hyper-Text Markup Language), then XML will look very similar. In fact, HTML is a subset of XML. But HTML is already defined and is a standard. You can't create new tags or attributes in HTML. But you can with XML - that's the eXtensible part of it - so you can create your own language!

A basic XML document looks something like this:

  <childTag1>I have some content inbetween my opening and closing tags,
         but childTag2 does not. 
         However, I have no attributes,
         while childTag2 has 1.
  <childTag2 childTag2sAttribute="Hey - I have 1 attribute but childTag1 does not. 
                  However, I have no closing tag or content.
                  Did you notice the slash at my end?" />

  <childTag3 childTag3sAttribute="I have both an attribute and content.
                  My parent has no attributes but me and my
                  siblings are her content.">
    This is my content. I'm feeling pretty special. Sometimes it's
    best to be the youngest!

Tags may have content between an opening and closing tag and they may also have attributes. In the ALShow skin file, the only that that needs to be translated are the "tooltip" attributes. The following table summarizes the example above in terms of which tags have content and attributes:

  Attributes Content
parentTag none childTag1, childTag2,childTag3
childTag1 none I have some content...
childTag2 childTag2sAttribute none
Hey - I have ...
childTag3 childTag3sAttribute This is my content...
I have both...

XML is supposed to be self-describing, so the tags and attributes should have descriptive names.

Tags must be "closed". That is, they must have a closing tag, e.g. <tag></tag>, or must end with a slash before the ending >, e.g. <tag />.

Attributes must be quoted. e.g. <tag myAttribute="I am surrounded by quotes." />

Tags can have other tags nested inside of them as well, and those are called "children".

In the ALShow skin file, you'll see that <item> tags have "tooltip" attributes. They also have children that are used to control things like the position of something in ALShow. e.g.:

<item name="ButtonMute" type="Toggle" tooltip="Mute On/Off (Ctrl+M)">
  <position left="-91" top="-27" width="20" height="20"/>
  <bground bitmap="BTN_VOLUME_ON" transparent="FF00FF"/>
  <MouseDown bitmap="BTN_VOLUME_ON_MOUSEDOWN"/>
  <MouseOver bitmap="BTN_VOLUME_ON_MOUSEOVER"/>
  <bground1 bitmap="BTN_VOLUME_OFF"/>
  <MouseDown1 bitmap="BTN_VOLUME_OFF_MOUSEDOWN"/>
  <MouseOver1 bitmap="BTN_VOLUME_OFF_MOUSEOVER"/>

That item is for the mute button in ALShow. The "name" attribute tells us that. The tooltip is simple enough, "Mute On/Off (Ctrl+M)". We can also see how it is positioned inside of ALShow from the <position> tag. If we needed to, we could change the values there to move the mute button, or make it larger or smaller. So, using the self-describing tags, the position attributes are self-evident.

Looking at the MouseOver attribute, if you search for "BTN_VOLUME_ON_MOUSEOVER", you'll see inside of the Bitmap tag there's a file tag with an item that has that as its name attribute value. Looking at that file tag's src attribute, you can see that the graphic is "sound_btn.bmp". You can see that here:

<file src="sound_btn.bmp">
   <item name="BTN_VOLUME_ON" left="0" top="0" width="20" height="20"/>
   <item name="BTN_VOLUME_ON_MOUSEOVER" left="20" top="0" width="20" height="20"/>
   <item name="BTN_VOLUME_ON_MOUSEDOWN" left="40" top="0" width="20" height="20"/>

For more information, try searching the Internet for any of the 50 billion XML tutorials or post in the ALTools forums for help.