C H A P T E R 5 - Creating Your Own Skin

C H A P T E R 5

Creating Your Own Skin

This chapter provides a complete set of end-to-end steps used to creating your own customized skin. Start with the default Java Wireless Client software skin, then carry out the following general tasks to customize it for your own:

Modify or substitute graphic images.

Reassign values in the skin.xml file.

Rebuild or regenerate the customized skin.

Customizing the Default Skin

To customize the default Java Wireless Client software skin for your own look and feel, follow these steps:

1. Build the Java Wireless Client software for the first time and evaluate the look of the default skin.

To display the default skin, change directory to:

InstallDir/output/midp/bin/platform

output is the top-level directory you designate for the output of your SJWC software build and platform is the platform you are skinning for. For example, linux_fb, win32_javacall, or some other platform.)

Then, depending upon your platform, click or type the following to display the Java Wireless Client software emulator, as shown in FIGURE 5-1:

$ ./runPhoneME

Java Wireless Client software emulatorjava Wireless Client software emulator showing a list to install MIDlets.

FIGURE 5-1 Java Wireless Client Software Emulator

2. Select Install Application and then select Launch to display the MIDlet entry screen, as shown in FIGURE 5-2.

Emulator MIDlet entry screen.Java Wireless Client software emulator screen showing a form ready to receive input of a URL.

FIGURE 5-2 Emulator MIDlet Entry Screen

3. Enter a path to an HTML file containing one or more sample MIDlets and click Go To on the soft button menu to install your MIDlet, as shown in FIGURE 5-3.

If asked for confirmation to install the MIDlet, click Install on the soft button menu. If asked for confirmation to launch the MIDlet, click Yes on the soft button menu.

Emulator window showing installed MIDlet.Java Wireless Client software emulator screen showing an installed MIDLet with graphic elements visible.

FIGURE 5-3 Emulator Displaying Sample MIDlet

4. Working with a graphic designer and a skin designer, determine what changes need to be made to the existing Java Wireless Client default skin to modify it for your own customized look and feel.

This is step is highly important. Do not make changes to the default skin until you have fully evaluated the following:

What existing graphic image files need to be modified and what those modifications will be.

For more information about the graphic image trade-offs and the choices presented, see Chapter 2.

What existing graphic image files are to be replaced by new graphic image files and whether the names of the files will remain the same or be renamed.

To customize the Java Wireless Client default skin, you can modify the details of existing graphic images, substitute new graphic images for existing ones, or both. If you change or modify the images, you can retain the existing file names or assign new ones.

For more information about the graphic image directories used by the default skin (and the graphic image directories for the optional second skin), see Chapter 2.

If some or all graphic images will be maintained as .png files or converted to RAW format.

For more information about graphics and RAW format, see Chapter 2.

What settings in the skin.xml file are to be modified, for example, background colors or other settings that affect the display, but do not require specific graphic images.

You can customize the Java Wireless Client software default skin by assigning new values to the property settings in the skin.xml file. You can change only the property settings in this file, or you can modify this file in addition to adding or changing graphic images.

For more information on comparing graphic elements in the default skin with the same elements in the optional second skin, see Chapter 2.

For more information about the settings assigned in the skin.xml file, see Chapter 3 and Chapter 4.

If some or all graphic images will be ROMized and at what point in the development process those ROMized settings will be turned on (set to true).

For more information about ROMized images, see Chapter 2.

Note - Properly preparing graphic images for your customized skin requires the skills of a visual designer, using specialized tools. Detailed instructions for preparing your graphics are outside the scope of this document.

5. Once you modify existing graphic images and create substitute graphic images, convert your newly customized PNG files into RAW format or leave them as PNG.

For more information on converting PNG files to RAW format, see Chapter 2.

6. Remove graphic image files from the default skin and place your graphic images there instead.

For more information about the location of graphic image directories, see Chapter 2.

Note - If you change the names of graphic image files, you must update the file name in the skin.xml file. If you do not, the new graphics image files will not be found when your customized skin is regenerated. For more information on updating graphic elements in the skin.xml file, see Chapter 3.

7. Set the image property Value assignments in the skin.xml file to point to your new graphic files, and make other updates and changes to the file for your customized settings.

For example, you can assign a new color setting to an element of your customized skin by changing a color property in the skin.xml file. For example, the Value setting for the SCREEN_COLOR_TRAVERSE_IND is FFCC33 (yellow), as shown in CODE EXAMPLE 5-1.

CODE EXAMPLE 5-1 Color Value Assignment in the skin.xml File

____________________________________________________________

<integer

Key="SCREEN_COLOR_TRAVERSE_IND"

Value="0xFFCC33"

____________________________________________________________

To change this setting to a new color (for example, green, or 11CC33), simply change the setting to Value="11CC33" and when your new skin is generated, the newly assigned color will appear.

Besides changing color settings, you can also change the look of your customized skin by replacing one graphic image file assigned to a property setting for another. For example, the default skin property SCREEN_IMAGE_BG is defined in the skin_contants.xml file as "the image to use as a tile for the typical screen background."

To change the look of the default skin, you can create your own background tile image, such as my.graphic_bg, and assign it to the SCREEN_IMAGE_BG property using the Value setting, as shown in CODE EXAMPLE 5-2.

CODE EXAMPLE 5-2 Image Value Assignment in the skin.xml File

____________________________________________________________

<image

Key="SCREEN_IMAGE_BG"

Value="my.graphic_bg"

Romized="false"/>

____________________________________________________________

When the SCREEN_IMAGE_BG property is called during Java Wireless Client software skin generation process, the my.graphic_bg image file is loaded in place of the default image file that it replaced.

Do this for all the properties you want to modify for your customized skin. For more information on changing property settings in the skin.xml file, see Chapter 3.

Note - It is recommended that you set the skin.xml property Romized=false for all graphic images when you first customize a new skin. For more information, see Chapter 2.

8. Generate and display the new skin by doing one of the following:

a. If your graphic image files are set to Romized=false, run the following command to generate a new skin.bin file:

$ make run_skinromizer

If you are a skin designer running the make command on a specific platform (for example, linux_fb_gcc or win32_javacall), some setup might be needed before you can execute Step a. For more information, see Chapter 6.

Note - Generating a new skin.bin file is only one operation you might want to carry out. For example, to compare how differing property settings can give different looks to your skin, you might also want to generate the optional second skin. For more information on how to generate both the default and optional second skins using the make run_skinromizer command, see Chapter 6.

b. If your graphic image files are set to Romized=true, rebuild the full Java Wireless Client software source files.

For more information on building the full Java Wireless Client software and how to prepare your skin files to do so, see Chapter 6 and the Sun Java Wireless Client Build Guide.

9. Repeat steps 1-8 as many times as needed until you finalize your customized skin.