Chapter 4: Customization

This chapter discusses how to customize the look and feel of your application by creating your own skins. The Bananas Toolkit includes classes that allow you to easily create a custom graphical appearance, or skin, for your application. Figure 4-1 shows the class tree for the Bananas skin classes.

Figure 4-1. Bananas Toolkit classes used for skinning your application

Sample Code

The SkinSample.java sample code illustrates how to add a custom skin to a Bananas application. This sample includes three different skins, each packaged using a different technique. You can edit the launcher file to use one of the three skins (skin-charcoal, skin-rainbow, and skin-steel). SkinSample.java is derived from the basic Bananas sample program (BananasSample.java) and simply adds the skinning information. (Note that the sample uses a factory because it switches skins for demonstration purposes. Your application will probably not need to use a factory for skinning.)

Packaging the Images

Using the BSkin subclasses, you create the images for your skin and package them in one of three ways:

Place the image files in a directory (use the BDirSkin class)
Include the image files as a resource packaged with the application (BResSkin class)
Place the image files in a directory and then zip up the directory into a single zip file (BZipSkin class)

The easiest way to test new skins is to use the BDirSkin class. Once you’re satisfied with the results, you can use one of the other two packaging techniques.

Standard Elements

Using one of the BSkin subclasses, you can create your own graphics for the elements shown in Table 4-1.

Table 4-1 Standard Bananas skin elements

Element	Size in Pixels
bar.png	640 x 48
down.png	20 x 7
left.png	8 x 20
pagedown.png	14 x 26
pageup.png	14 x 26
right.png	8 x 20
up.png	20 x 7

If you want to use different sizes for the skin elements listed in Table 4-1, you’ll need to create your own BSkin subclass (not described here; use the standard BSkin subclasses as models for your work).

Loading Application-Specific Images for a Skin

You can also use the BSkin subclasses (BDirSkin, BResSkin, BZipSkin) to add application-specific user interface elements, such as icons, backgrounds, or any other PNG resource that you want to bundle in a skin package. This facility makes it easy to provide multiple presentations for a single application.

Here is the sample code that loads a background image directly from the skin into the below layer of the application:

BSkin skin = getSkin(); 
getBelow().setResource(skin.get 
                       ("background-main").getResource()); 
push(new MainMenuScreen(this), TRANSITION_NONE); 

You can use this same technique to load other application-specific elements from your skin.

Basic Steps

The basic steps for adding a custom skin to your application are as follows:

Create the image files for the skin elements, naming them appropriately.
Package the images using one of the three techniques (directory, resource, or zip file).
Construct the skin class and pass in your elements. The three constructors are as follows:

BDirSkin(BApplication app, java.lang.String skinDir) 
BResSkin(BApplication app, java.lang.String resPath) 
BZipSkin(BApplication app, java.lang.String zipFile) 

 
In your application’s init() method, call BApplication.setSkin() and specify the skin that contains your resources. 
 
Load other application-specific images, such as a background, into the skin.