9 Resources

Creating a Resource

To create a resource, use code similar to the following example in your build file:

<taskdef 
  classpath="editor.jar" 
  classname="com.sun.lwuit.tools.resourcebuilder.LWUITTask" 
  name="build" />
<build dest="src/myresourceFile .res">
  <image file="images/myImage.png" name=”imageName” />
</build>

You can add several additional types of resources to the build tag. These optional resource tags are explained in the remainder of this chapter.

Loading a Resource

To load a resource into your application, use code similar to this:

Resources res = Resources.open(“/myresourceFile.res”);
Image i = res.getImage(“imageName”);

System Font

Three basic parameters define a system font:

To create a system font, use the following code:

Font.createSystemFont(Font.FACE_SYSTEM, 
                      Font.STYLE_BOLD, 
                      Font.SIZE_MEDIUM);

To create a bold italic font style use code similar to the following:

Font.createSystemFont(Font.FACE_SYSTEM, 
                      Font.STYLE_BOLD | Font.STYLE_ITALIC,
                      Font.SIZE_MEDIUM);

Dynamic Fonts

Different platforms have different font support. For example, phones usually only support system and bitmap fonts while TVs usually support TrueType fonts but don't work well with bitmap fonts. LWUIT has support for defining fonts in resources that allow a resource to adapt for different devices. To support portability LWUIT allows specifying a loadable font if such a font is supported by the underlying system and allows bundling bitmaps for increased portability. As a fallback a system font is always defined, thus if the native font isn't supported or a developer isn't interested in using a bitmap font the system font fallback can always be used. It is possible to define such a font using the Ant task with the following syntax:

<build dest="src/myresourceFile.res">
     <font logicalName=”SansSerif” name=”myFont” size=”20” /> 
</build>

The following attributes are supported for the font Ant task:

Example: Adding a New Theme

This section describes how to add a new theme using the Resource Editor.

1. Select the theme tab on the left, and click the + button to open the New Theme window. From the Template combo box, select Blank.

2. The UI area on the right shows the Unselected tab by default. Click the Add button at the bottom of the UI area.
   Description of the illustration add.jpg
   
   

   The Add window opens.

   Select Form from the Component combo box at the top of the Add window.

   • In the Background tab uncheck Derive. From the Type dropdown, choose GRADIENT_RADIAL.

   • Type ff into the left gradient color (to select a blue to black radial gradient).

   • Type 2 into the gradient Size spinner to double the size of the gradient.

   
   Description of the illustration gradient_radial.jpg
   
   

   Click OK to save your changes.

3. Click the Add button again and select Title from the Component combo box.

   • Select the Background tab.

     Uncheck Derive.

     In the Type combo box select GRADIENT_LINEAR_VERTICAL.

     In the Gradient input field on the right, type 6363ff to select a light blue color.

   • Select the Color Tab.

     Uncheck the Derive Foreground checkbox

     Type ffffff into theForeground field.

   • Select the Alignment tab.

     Uncheck the Derive checkbox and make sure Left is selected in the Alignment combo box.

   • Select the Padding tab.

     Uncheck the Derive checkbox

     Type 10 in the Left and Right fields, and type 5 in the Top and Bottom fields.

   • Select the Font tab.

     Uncheck the Derive Font check box.

     Select BOLD in the center combo box and LARGE in the combo box on the right.

   These steps will create a left-aligned spaced large title that uses white bold text on a vertical gradient background.

4. In the UI area Unselected tab, double-click the [Default Style] selector to open the Edit window.

   • Select the Color tab.

   • Uncheck Derive Foreground and type in ffffff to make the default text color white.

   • Uncheck Derive Transparency and type in 0 to make components transparent by default.

5. In the UI area choose the Selected tab and double-click the [Default Style] entry.

   1. Select the Color tab.

      • Uncheck Derive Foreground.

      • Type in ff to make the foreground blue

      • Uncheck Derive Transparency

        Type in 200 to make the selection color blend nicely. Click OK.

6. Click the Border Wizard button on the top of the UI area.

   Make these changed on the Create Image tab:

   • In the Width and Height spinners, type 200.

   • In the Thickness spinner, type 4.

   • In the Arc Width and Arc Height fields, type 30.

   • In Color A and Color D fields, type in ffffff.

     In Color B and Color C fields, type in 9f9f9f.

     This creates a reverse border gradient which strengthens a sense of depth.

   • In the opacity spinner type 130 to make the image translucent.

   Select the Cut Image tab.

   • Type 100 in the Top spinner, 90 in the Bottom spinner.

   • Type 25 in the Left and Right spinners.

   Select the Apply To tab.

1. • In the Component field, type Content Pane.

   • In the Style combo box, choose Unselected.

   • Click the Add button on the Right. This populates the Applies To area.

   • Click the Generate button at the bottom, and close the wizard.

2. Click the Unselected tab.

   Double-click the ContentPane style entry.

   Select the Padding tab.

   • Uncheck Derive.

   • Input 5 in Top, Bottom, Left and Right spinners.

   Select the Margin tab.

   • Uncheck Derive.

   • Input 14 in Top, Bottom, Left and Right spinners.

   This will provide some spacing around the border to accentuate its effect.

Figure 9-5 shows the final result.

Figure 9-5 New Theme

Description of "Figure 9-5 New Theme"

To gain a deeper understanding of themes add a theme from a template and review its settings. In the Themes tab on the left, click + to add a new theme. From the template combo box, choose Wood and click OK. For example, view the Transitions.

Figure 9-6 Wood Theme Default

Description of "Figure 9-6 Wood Theme Default "

You can gain deeper understanding of the selector concepts from Chapter 7 and Chapter 8.

Modifying Theme Entries

A theme entry is comprised of a UIID and the attributes modified for the specific UIID. The hardest part in building a theme is understanding the component names for the entries within the UI.

When pointing at the UI preview on the right, a tooltip pops up indicating the UIID of the component you are pointing at, however, this might not work as expected for list renderers (who are no longer there) or for components that are underneath other components (for example. a container that has components on top of it).

When adding a new entry (using the Add button at the bottom of the screen) the combo box at the top highlights in bold the UIIDs that are present in the current screen. This allows discovery via trial and error.

Figure 9-7 Component UIIDs

Description of "Figure 9-7 Component UIIDs"

Notice that every attribute within this dialog has a Derive check box associated with it. The default behavior of adding a new theme entry is to derive from the base style. You need to explicitly indicate that you are interested in modifying a specific attribute. This allows the theme to remain efficient by reducing the amount of "noise" within the theme and also allows inheritance to work properly.

LWUIT style inheritance is built in stages:

• LWUIT has constant "sensible defaults" for some component behaviors (for example, Buttons have a border style by default).

• Every style type has the [Default Style] global scope where you can define your own defaults for components (although this won't replace LWUIT's builtin defaults such as the button borders).

• Individual styles can use the Derive tab to define explicit inheritance hierarchy from a specific style UIID to reuse definitions made for one component. This is very useful when you have multiple style types because the Selected, Pressed and Disabled component styles can derive from the Unselected style of a component.

Data

Data is generally designed for developers and shouldn't be used by designers.

An arbitrary file can be placed within this section and it can be accessed by developers in runtime. This section has no effect on the rest of the functionality even if the data file is an image or font.

Customizing the Preview

The preview showing the LWUIT Demo allows for easy customization of a MIDlet. This capability is not limited to the LWUIT Demo. The Resource Editor supports plugging in your own MIDlet so you can test your theme on the fly.You can install your own MIDlet into the Resource Editor preview panel. In the Resource Editor menu bar, select Application > Pick Application MIDlet and select your MIDlet's JAR file.

Figure 9-8 LWUIT Browser Demo With

Description of "Figure 9-8 LWUIT Browser Demo With"

There are, however, several restrictions and limitations in this feature:

Since the MIDlet is executed in Java SE it can't leverage javax.microedition APIs. While the APIs are present they are implemented in stub form. For example, if you use RMS, GCF, and so forth, they will return null for all queries and do nothing in all operations. Additionally, invoking features such as theming won't work.

If there is a failure in the MIDlet the Resource Editor will silently load the LWUIT Demo in the preview and use it instead. To debug the failure, execute the Resource Editor from command line using java -jar ResourceEditor.jar. When entering the theme option you can see the stack trace of the exception that caused the failure.

It is critical that you DO NOT obfuscate the MIDlet meant for the Resource Editor's preview feature since the Resource Editor must replace the LWUIT instance used within the MIDlet with its own!

Some developers use a preprocessor to create a custom version of their MIDlet for use within this feature. This allows them to avoid functionality that won't work properly in the tool and still give designers the ability to view the entire application for customization.

Known Issues

There is currently a known issue in some operating systems which causes the Resource Editor to fail in some cases when using the Aero theme. This issue stems from Java SE's look and feel implementation and the only workaround is to change the application look and feel using the Look And Feel menu option.