Thread: What you need to know to create a skin

Here's some information someone might find useful. Hopefully it's written in a natural enough way that non-coders can understand and work with this. Tidder was giving me a hard time about being too technical in my writings

There are a couple rather important things that should be taken into mind when designing and creating a skin. The first is that everything is CASE SENSITIVE!. I know this is a new concept to windows users, but being as this is cross platform I'm keeping everything standardized. Also there must be a Menu1.xml. This skin file does not have to be a menu per se, but it has to be something as it will be the first window shown when RevFE loads. Reference the Rev skin for an example of how to create a non-menu based skin.

There are a bare set of common controls required for RevFE to function as a media player. You can reference the included AudioPlayer.xml in the default skin set for most of these.

Listboxes:
There are two primary listboxes that RevFE is set up to use to provide media functionality. The first is playlistListBox. This is a single column listbox that will be populated on load with a list of the currently loaded playlists. You send a playlist to the MediaLibrary with this command:

Code:

MediaLibrary:playlist set !%LISTBOX-playlistListBox-ITEMTEXT%!

this will send the currently selected text to MediaLibrary and it will take care of loading that playlist into memory and getting it prepared to play.


This brings into play the second listbox required, which is currentPlaylistBox. This listbox is populated with a list of songs in the current playlist. Unlike the list of playlists, music is played by index, not text. Hence the command required to start a selected song playing is:

Code:

MediaEngine:media play !%LISTBOX-currentPlaylistBox-ITEMINDEX%!

Please note the ITEMINDEX as opposed to ITEMTEXT. These commands are usable on any listbox. This can either be a standalone button, or the cmd="" on the listbox itself. If it is a standalone button and you have nothing selected, nothing will happen!

There are a couple of variables which come into play at this point, which display information about the song currently being played. Below are two example labels (text display boxes). The first one displays current and total track time. The second one displays artist and title information. All these values are for the currently playing track.

Code:

<label>
	<properties name="trackTime2" text="%TT-CURRENTTIME%/%TT-TOTALTIME%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
	<geometry x="410" y="445" width="250" height="35" />
	<function cmd="" textvalues="%TT-CURRENTTIME%,%TT-TOTALTIME%" />
</label>
<label>
	<properties name="currentSongLabel2" text="%ID3-CURRENTARTIST% - %ID3-CURRENTTITLE%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
	<geometry x="10" y="410" width="500" height="35" />
	<function cmd="" textvalues="%ID3-CURRENTARTIST%,%ID3-CURRENTTITLE%" />
</label>

The text field denotes how the text will be displayed, and the textvalues field is a comma delimited list of variables used. if you have a variable in the text field, but not in textvalues, it will not be updated.

Once you have a playlist loaded, a song started, and you are watching the numbers tick down as the song plays you probably are going to want to be able to control this song, play/pause/stop, and move around the playlist. This is achieved through some MediaEngine commands:

Code:

MediaEngine:media pause

This will pause or unpause (as a toggle) the song.

Code:

MediaEngine:media stop

This will stop the current song from playing, and reset it to the beginning

Code:

MediaEngine:media prev

This will move back one song in the playlist

Code:

MediaEngine:media next

This will move forward one song in the playlist

If you assign these commands to buttons as such:

Code:

<button>
	<properties name="pauseButton" text="" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
	<geometry x="200" y="500" width="100" height="100" />
	<function cmd="MediaEngine:media pause" textvalues="" />
</button>

You can now easily control the flow of a song.


Let's assume you loaded a playlist slightly larger than your screen. You are going to need a way to scroll around this playlist (Or list of playlists in the case of the playlistmanagerwindow.xml). You can set up a button with the command

Code:

WindowName:window scroll-up !listboxname!

Let's assume your window is called AudioPlayer.xml as it is in the default skin, and your listbox is currentPlaylistBox. The following command would scroll the box up:

Code:

AudioPlayer:window scroll-up !currentPlaylistBox!

You also have scroll-down, page-up, and page-down which follow the same format:

Code:

AudioPlayer:window scroll-down !currentPlaylistBox!
AudioPlayer:window page-up !currentPlaylistBox!
AudioPlayer:window page-down !currentPlaylistBox!

That's enough about media, let's talk about window control. There are a couple of things you can do with windows. When RevFE first loads, you only have one window showing. To display other windows you must show them. Let's say you have a button on your menu to show the AudioPlayer. The command would be:

Code:

AudioPlayer:window show

Likewise, if you have a button on the audio player to hide itself (to go back to the main menu) it would be:

Code:

AudioPlayer:window hide

There is also a "back" feature, which will take you to the last-shown window:

Code:

WindowManager:window showlast

This is useful if your skin does not follow a linear layout, eg it does not have a main menu, but rather windows link to each other.

I will be working on, and soon will post some in depth documentation on commands and events for each included plugin.