Coding events

You can get quite a long way with designing new skins using nothing but the graphics files and the predefined button and other control elements. However, if you want to really produce something new you have to write some code.

WMP skins currently only support JScript. This makes reasonable sense because JScript is available on non-Windows systems whereas VBScript is Windows-only.

You can use a line of JScript for each event handler within the skin definition files but for any realistic application you are going to need more than one line. For this reason it is better to find out how to use a separate code file as soon as possible.

You can specify a .JS file that contains the functions used by the skin within the VIEW tag. Most of the elements defined by tags support a standard set of event attributes – the “Ambient” events. To associate an event handler defined as a function in the script file all you have to do is assign it to the appropriate event attribute.

To demonstrate how this works first create another file called MyCode1.js containing the two functions:

function StartPlay(){
 player.URL='file://c:/tada.wav';
}

function StopPlay(){
 player.controls.stop();
}

The StartPlay function sets the Player object’s URL to a suitable audio file to play and the StopPlay accesses the Player object’s control collection to stop the playback.

At this point you might be wondering where the Player’s control collection is documented because it isn’t listed as an attribute in the <PLAYER> tag. The answer is that the player object is part of the WMP ActiveX control’s object hierarchy and you can look this up in the section “Windows Media Player Object Model” in the SDK help. Most of the Player object’s methods and properties are supported.

Now that we have our JScript file the next step is to create a skin definition file that uses it. Enter the following lines and save the result as Skin4.wms:

<THEME>
 <VIEW
    backgroundImage = "primary.bmp"
    clippingColor = "#FFFFFF"
    titleBar = "false"
    scriptFile = "mycode1.js">
  <BUTTONGROUP mappingImage = "map.bmp">
   <BUTTONELEMENT
     mappingColor = "#00FF00"
     upToolTip = "Play"
     onClick="JScript: StartPlay();" />
   <BUTTONELEMENT
     mappingColor = "#FF0000"
     upToolTip = "Stop"
     onClick = "JScript: StopPlay();" />
  </BUTTONGROUP>
 </VIEW>
</THEME>

The <VIEW> tag now has the attribute

scriptFile = "mycode1.js">

and the mycode.js file should be stored in the same directory as the skin definition file.

The other big change is that we are now using general button elements and these don’t have any default behaviour. As a result to make these buttons do something we have to set their onclick event attributes to the JScript code that handles the event.

In this case the functions StartPlay and StopPlay are in the JScript file referenced by the <VIEW> tag but you can just enter the JScript code following the colon “JScript:code”.

Also new is the use of  “upToolTip” attributes which simply provide  messages when the user hovers the mouse over the button. If you now open the skin you should find that you can play the audio file by clicking one button and stop it by clicking the other.

More skinning

Now that you have seen how XML, graphics and code fit together to make a skin there isn’t anything new to learn. Going beyond our basic two-button audio player is just a matter of reading through the help files and finding what you need in terms of tags, attributes and events.

However there are a few standard questions and standard problems that always occur and a brief guide can save you some time.

Video

So far we have seen how the skin can be used to define buttons and other display features but what about video display?

Any video that you play is displayed in a video window which can be controlled using the <VIDEO> tag. To see this in action change the file specified in the JScript code to be one that is a WMP video file and add:

<VIDEO
top = "10"
left = "80"
width = "180"
height = "180"/>

just after the <VIEW> tag. Now when you open the skin and click the play button the video window will appear. In the case of the Shopper Player skin this isn’t really satisfactory because the primary graphic isn’t large enough to accommodate a video window.

The <VIDEO> tag has lots of attributes that you can use to control its size, zoom factors and so on. It also has the onvideostart and onvideoend events that you can write JScript code for. (Code for this is in skin5.wms.)

The video window with a hole

<ASIN:B0030CMKFS@ALL>

<ASIN:0596101996>

<ASIN:1584505591>

<ASIN: 6130255136>

<ASIN:0750683953>