Contents
Introduction
In this article, I will discuss how to use one of the many cool features about Windows Media Player skins: the ability to save any preference from within a skin and remember it every time the skin is used. In this article, I assume that you are familiar with how skins work. If you are not familiar with Windows Media Player skins, you can read the article Creating Skins for Windows Media Player 9 Series Overview first and then come back here for more advanced tricks.
 Back to the top
Choosing the Skin Color
The example described here lets the user pick a color for the skin. Once the user chooses a color, the skin will use that color every time the user selects this skin. This is just a small example of the flexibility of Windows Media Player. Once you are familiar with this technique, you can use it to do much more advanced things.
I made the example as simple as possible—just a single skin definition file (.wms) with no images or external script files. Here is the complete XML for the skin:
<theme>
<view
onload="jscript: var temp = theme.loadPreference('bgColor');
if (temp!='--') {view.backgroundColor = temp;}"
onclose="jscript: theme.savePreference('bgColor',backgroundColor);"
id="PreferenceView"
>
<text
id="captionText"
foregroundColor="black"
top="5"
left="5"
fontStyle="bold underline"
value="Click one of the colors below:"
/>
<text
id="blueText"
foregroundColor="#202060"
hoverBackgroundColor="#9090FF"
top="25"
left="5"
fontStyle="bold"
value="-Blue"
onclick="jscript:view.backgroundColor='#9090FF';
captionText.value='The backgroundColor has been set to blue';"
/>
<text
id="grayText"
foregroundColor="#202020"
hoverBackgroundColor="#909090"
top="45"
left="5"
fontStyle="bold"
value="-Gray"
onclick="jscript:view.backgroundColor='#909090';
captionText.value='The backgroundColor has been set to gray';"
/>
<text
id="greenText"
foregroundColor="#206020"
hoverBackgroundColor="#90FF90"
top="65"
left="5"
fontStyle="bold"
value="-Green"
onclick="jscript:view.backgroundColor='#90FF90';
captionText.value='The backgroundColor has been set to green';"
/>
</view>
</theme>
When you open this skin, the first thing it does is call the onload event for the view element. The view represents the main window for the skin, and is pretty similar to the <body> tag in HTML. The onload event is specified with the following code:
onload="jscript:var temp = theme.loadPreference('bgColor');
if (temp!='--') {view.backgroundColor = temp;}"
The "jscript:" prefix is a note to the Player indicating that the rest of the text in double quotation marks is JScript code. This prefix is ignored when the script is executed, so there are essentially two lines of code here. Note that I'm using single quotation marks within the script because XML does not allow double quotation marks to be used directly within an attribute value.
The first line of script creates a new variable named temp and tries to load a preference into it.
var temp = theme.loadPreference('bgColor');
If you aren't familiar with JScript syntax, Var is simply a variable that you can use to store data, and I have chosen to name it "temp" because I won't be using it for long.
loadPreference is a method on the global object called theme. loadPreference takes a single string specifying the name of the preference you want to load. You can call your preferences anything you want, but for this example I chose the name bgColor.
The second line of script determines whether the preference is loaded or not.
if (temp!='--') {view.backgroundColor = temp;}
When loadPreference fails, it returns the string "--" (two dashes). The first time you load the skin into the Player, there won't be any preference named bgColor, so the script will fail. In this case, nothing happens and the skin loads normally to the default color, which is white.
Once the skin loads, there are three text objects that you can click. When you click one of them, it sets the backgroundColor of the view to the specified color. Go ahead and try it, by loading the skin and clicking the "Blue" text. Note that the background of the skin changes to blue and you see the following text displayed across the top of the skin.
The backgroundColor has been set to blue.
Select whichever color you like, and then close the skin. When the skin closes, it first invokes the OnClose event. This is specified by the following code:
onclose="jscript: theme.savePreference('bgColor', view.backgroundColor);"
Again, you can ignore the jscript: at the beginning, so the line of script that executes is this:
theme.savePreference('bgColor', view.backgroundColor);
savePreference is another method on the theme object. It takes two parameters:
- A string specifying the name you would like to use for your preference. In this case, it's called bgColor.
- A string specifying the value you would like to save. In this example, it is using the backgroundColor attribute of the view object.
Now that you have closed the skin, it should have a preference saved. Go ahead and open the skin again. This time, when it gets to the onload event for the view, there is a preference saved and it is loaded into the backgroundColor attribute of the view. The result: the view is the same color as when you closed it!
This is a simple skin that doesn't do much, but it already has a pretty cool feature that you can apply to creating your own skins. The possibilities are endless: you could have color preferences, you could remember the size of a resizable skin, you could let the user choose a background image, and you could even let users move the buttons around in the skin if you're clever! The following samples demonstrate some other applications of this feature.
Back to the top
Saving the List of Most Recently Used (MRU) Files in a Skin
This is a simple skin that keeps track of the last three files played in the Player, and lets you play those files again by clicking them. It uses theme.savePreference and theme.loadPreference to maintain this list even after the Player is closed and reopened, and comments in the .wms and .js files tell you how each piece works.
To try this feature out, open MostRecentFiles.wms by double-clicking it. I added some very simple visual feedback to let you know what the Player is doing, and a link to bring up the Quick Access Panel so you can select a song from your Player library.
Play a few songs, and notice that they go into the list as you play them. Close the Player and reopen by double-clicking MostRecentFiles.wms again, and you'll see that the list has been preserved. For the sake of simplicity, a number of scenarios have been ignored in this sample. It's meant to be a jumping off point for your own ideas.
Back to the top
Revert++ Skin With User-selectable Album Art and Transparency
This sample is a full-fledged skin. In this case, I've added two cool new features for the Revert++ skin. One is the ability to show only the album art and not the visualization, which is a common request. The other is the ability for the user to specify that the entire skin become mostly transparent when it is not in use. This is handy for anyone who uses the Keep the Player on top of other windows option of Windows Media Player 10. You can see your work through the skin, but you can also still keep track of the currently playing song and enjoy the album art. And, of course, these settings are saved and restored using the savePreference and loadPreference functions on the theme object.
After extracting the skin, double-click Revert++.wmz to have the Player install the skin. This is a more complex skin, and a complete description of the code is beyond the scope of this article, but check out the functions SaveUserPreferences and LoadUserPreferences in the file named preferences.js.
Back to the top
For More Information
- For general information about Windows Media technologies, see the Windows Media Web page (http://www.microsoft.com/windows/windowsmedia/).
- To learn more about Windows Media Player 9 Series or Windows Media Player 10, see Windows Media Player Help. You can download Windows Media Player 9 Series or Windows Media Player 10 from the Windows Media Download Center (http://www.microsoft.com/windows/windowsmedia/download/).
- If you want to write visualizations or skins for Windows Media Player, see the Windows Media Player 9 Series Software Development Kit (SDK) or Windows Media Player 10 SDK. You can download either SDK from the Windows Media Downloads Web page (http://msdn.microsoft.com/library/default.asp?url=/downloads/list/winmedia.asp).
Back to the top
|
