An Xtreamer skin is simply a bunch of HTML pages grouped together into a folder. That's it. The only difference from normal webpages you would make is a few Xtreamer-specific tags that you mix in to generate content from your Jukebox.

We've specifically redesigned the skin system to be as simple and unintrusive as possible while still being powerful enough to let you express your creativity. If you know how to make a web page using HTML, it should take you less than 5 minutes to create your first skin.

Let's start by creating your first Xtreamer skin. First open up the following folder on your harddisk:

C:\Program Files\Red Chair Software\Notmad Explorer\skins

C:\Program Files\Red Chair Software\Notmad Explorer\skins\myfirstskin

Inside your new folder, create a plain text file called index.html containing the text "Hello, World!". When writing pages for Xtreamer skins, you can use any text or web page editor like Notepad or FrontPage.

Now you're ready to view your new skin! Make sure your Jukebox is connected. Right click on the systray icon and select "Notmad Manager Options...". Go to the "Xtreamer HTTP Options" tab, and in the "Skin" drop-down box, select "myfirstskin", and then click "Ok". Right click on the systray icon again and select "Browse Notmad Xtreamer...". Your browser should now display your first Xtreamer skin, a white page with the words "Hello, World!"! Congratulations!

At this point, you have a choice in how to proceed. If you have experience with HTML or even PHP or ASP, you could immediately begin building a full-fledged skin using our sample skin. Alternatively, you could skip to the next section, "11.4 Introducing Xtreamer Tags" to get a more formal introduction on the Xtreamer skinning system, and then come back to this section later.

If you want to dive right in, go to the Xtreamer skins directory and start poking through the included "Barebones" skin. This skin has minimal formatting, hence the name, but is nontheless a full implementation of all the features of Notmad Xtreamer. This skin serves two purposes:

1. Because there is essentially no formatting code, you can easily focus on the Xtreamer command tags themselves and quickly figure out how the skin does what it does.
2. Because there is so little formatting, you can use "Barebones" as a fully-functional skeleton onto which you can immediately begin adding your own formatting and graphical design.

Simply copy the "Barebones" folder and its contents, rename the copy, and begin editing the files in the skin. Remember to use the Xtreamer Options dialog to change the active skin to the one you're working on so that you can view the changes you're making instantly by hitting refresh in your web browser.

With some programming experience, it should not be hard to figure out how the tags work and quickly turn "Barebones" into your own interesting and attractive skin. If you find that you have some "big picture" or technical questions while you're working, see the following two sections. Section 11.4 gives a more formal introduction to Xtreamer tags, while section 11.6 is a technical reference guide. Also, feel free to send us e-mail with any questions you may have.

"Barebones" Skin Browser

This section explains how to add actual Jukebox content to your skin using special Xtreamer tags you insert into your webpages. These tags are processed by the Xtreamer server which replaces them with Jukebox content on the fly. This technique is called server-parsing, is used to generate dynamic content in webservers like Apache or Microsoft IIS.

11.4.1 Tag Basics

Each tag is basically a command to the Xtreamer HTTP engine. Xtreamer supports a number of commands, each of which can take zero or more arguments. The structure of a Xtreamer tag is as follows:

<? command(argument1, argument2, ...) ?>

Each tag can contain only one command. Tags cannot span across lines. Briefly, here are some of the basic commands supported by the Xtreamer engine:

• set: Set a value for a variable that can be used later on in the page.
• print: Print out the value of a variable set by the Xtreamer engine or by you.
• loop: Begins a loop used to enumerate lists of items on your Jukebox like artists or playlists.
• include: Inserts the contents of another file into the current one. Useful for repeating code.

11.4.2 Setting and Printing Variables

Here is an example of how you can use these command tags to set and print a variable:

<? set(myvariable,thevalue) ?>
<? print(myvariable) ?>

These two commands set a variable named myvariable with the value thevalue, and then prints out that value. Go ahead, try it. Add the tags above to your index.html file and refresh your browser. You'll find that your page now says "Hello, World! thevalue".

In practice, you will find that setting and printing variables yourself is usually not very useful. You could simply write the value directly into the webpage. There are some situations where you want to set variables, and we'll discuss those below, but the more interesting use of the print command is with the preset variables the Xtreamer engine makes available for every page of your skin. There are variables of general utility and variables specific to your Jukebox and its contents. For example:

<? print(date) ?>
<? print(devfw) ?>

These two commands print out today's date and the firmware version on your Jukebox. See the reference section for a complete list of all the preset variables.

Finally, note that when printing variables that are part of a URL in your code, you should use the printu variant of the command, which prints variables in an encoded form that is safe for URLs.

11.4.3 Using Loops to Enumerate Jukebox Content

The most important function of Xtreamer tags is to enumerate your Jukebox contents using the loop command. By passing arguments to the loop command, you can enumerate different lists of Jukebox items such as artists, genres, playlists, and more.

Each loop command must be paired with endloop. The HTML code and commands inside the loop will be repeated for each item in the specified list. And for each item, Xtreamer sets item-specific variables that you can print. So to list the playlists on your Jukebox, you would use the following code:

<? loop(PLAYLISTS) ?>
<? print(name) ?>
<? endloop ?>

The set of variables available inside a loop depends on the type of loop. The reference section below provides a comprehensive list of all loop types and the item variables available in each.

11.4.4 Passing Command Arguments Through the URL

Setting variables is not the only way to pass arguments to the loop command. In fact, it is not even the most useful way. You'll find in the example skins that the more commonly used method is passing arguments to the loop through the URL used to call the page containing a loop. Consider a page containing the following code:

<? loop(from_url,from_url) ?>
<? print(name) ?>
<? endloop ?>

By specifying from_url as the arguments, you tell the loop command to take the arguments from the URL used to call the page. So, assuming you've put the above code into a page called loop.html, to list all tracks by Britney Spears you would use the following URL to call the page:

http://localhost:8045/loop.html?ltype=AUDIOBYARTIST&larg1=Britney+Spears

ltype specifies the loop type and larg1 refers to the first loop argument. For a loop that takes two arguments, just add another from_url to the loop command and add larg2=value to the URL. Using this technique, you can create a totally generalized track listing page that can enumerate a variety of different loop types simply by calling the page with different URLs. This is exactly what the tracklist.html page is in our example skins.

11.4.5 Modular Code using Include Files

The include command makes possible more complex skins by allowing you to insert Xtreamer code from one file into another. A typical use is creating page headers and footers that are common across multiple (or all) pages in a skin. For example, you can put your common header code into a file called header.inc and then include it into any other page using the command:

<? include(header.inc) ?>

Include files are technically no different from the files into which they are included, so you can name them anything. However, it maybe helpful to you to give them a different extension like .inc.

Include files can themselves contain Xtreamer command tags. For example, a header include file might contain a print command to display the date the top of your pages. For even more flexibility, you can set variables that will be available to files included into a page. Consider the following code:

<? set(itemname,Beef) ?>
<? include(menuitem.inc) ?>
<? set(itemname,Chicken) ?>
<? include(menuitem.inc) ?>

Assuming the menuitem.inc contains code that prints out the value of the itemname variable, you get the advantages of using a common module of code combined with some amount of adaptability.

There are a number of optimizations you should perform to make your skin pages load up faster in Xtreamer, take up less space, and download more quickly.

1. Empty the Garbage
   Remove scratch or temporary image and HTML files in your skin folder that aren't actually used in the final product.
   
   
2. Use CSS Stylesheets
   Intelligent use of stylesheets minimizes redundant formatting tags in your HTML pages. You should not have to use FONT tags in your HTML code. Using CSS stylesheets can improve the load times on your skin pages considerably and make the skin itself more compact.
   
   
3. Use Include Files
   Use include files to separate out common chunks of code that are used repeatedly in the pages of your skin. Obvious uses are for headers, footers, and navigation bars. Remember that include files can themselves contain Xtreamer command tags, so they are quite flexible. Try to include as much common code as possible in your include files to minimize the size of your skin. See the Default XP-style skin in Xtreamer for examples of how to use include files effectively.
   
   
4. Include Convenience Elements
   To make your skin play well with the rest of the Xtreamer skins, you should include several convenience elements. Most important is a form with a drop-down and button to dynamically switch skins. You can simply copy the form code from the index.html page of the Default and Barebones skins. In your skin you should also include on every page links to Red Chair resources. Use the HTML code below:
   
   <a href="http://www.redchairsoftware.com/">Red Chair Software</a>
<a href="http://www.redchairsoftware.com/notmad/support">Notmad Support</a>
<a href="http://www.redchairsoftware.com/clubred/notwebskins/">Skins Gallery</a>