UJML debugger skins capture the characteristics of a wide variety of devices. The skins we have included with the SDK are typical of many devices, but we cannot hope to capture all possible devices and configurations. 

In order to create a customized skin, you must complete the following steps:

• Create an appropriate background image.
• Create a skeleton skin properties file.
• Modify the skins.properties file to enable your skin.
• Point the debugger at the directory containing the customized skin.
• Modify key and screen locations in the skin's properties file to match the image.
• Modify the properties file to match other behaviors of the device.
• Create a background image.

Any image can be used as a background image for your skin. You can draw the device from scratch, use a screenshot from your desktop, take an image with a camera, get the image from the device manufacturer, or use any other method of creating an image. Save the image using any name in the directory where you want to keep your custom skins.

The heart of the skin creation process is the creation and modification of the skin's properties file. We have created some skeleton properties files in the SDK's conf directory. The properties file must use the .properties file extension. For example, you might name your skin webPhone.properties This file can be stored in the same directory as the skin image. 

The properties file should be modified to point at your skin's image. This is done by adding or modifying the line:

skin.image = {your image file name}

Within the directory containing the new skin there must be a skins.properties file. This file indicates which additional skins are available to the debugger. The conf directory contains a skins.properties file with the appropriate structure. 

To add your skin to the available skins you must add a line to the skins.properties file of the form:

webPhone = on

where the name (for example webPhone) is the same as the name of the .properties file (webPhone.properties) containing information about your skin.

The next step is to tell the debugger about your customized skin.

Figure 1. Preferences directory screen

The user must set the directory containing the skins.properties file. This is done within the 'Directories' tab of the Debugger's preferences window. The user enters the directory containing the necessary properties files. 

When returning to the selection window you will now see your new skin as one of the device alternatives. If you select your skin and restart the player you will see your skin.

You will now to need to define the locations of the screen display, all buttons and softkeys. 

When the player is running and the user presses F10 on the keyboard, all active skin locations (screen display areas, button locations, and softkeys) are highlighted with a blue rectangle. As the skin designer updates the locations in the properties file this display can be checked for the correctness of the locations. 

Skin locations are indicated in the properties file using the following syntax where the arguments are (x location, y location, width, height):

display.location = 41, 46, 120, 120

The display screen location is described as above. Buttons are indicated using the key {key name} where {key name} is part of F1, F2, POUND, STAR, FIRE, UP, DOWN, LEFT, RIGHT, GAME_A, GAME_B, GAME_C, GAME_D, or a letter or digit. If there is more than one button location that should be mapped to a single key, then the following syntax should be used:

key.{key name} = {RECTANGLE}[+{RECTANGLE}[+...]]

The device softkey locations should be indicated by skey.F1 or skey.F2

There are a number of other behaviors and properties that vary from one device to another. These are listed below: