| Skin Author's Guide to Adaptive User Interface Technology |    
|
| Skin Author's Guide to Adaptive User Interface Technology |
|
| C H A P T E R 2 |
|
Introducing Adaptive User Interface Elements |
The Java Wireless Client software provides a default adaptive user interface (skin) that can be customized to incorporate elements of your own design. This chapter provides information on the following topics:
The graphic components supported by adaptive user interface software are divided into the following two types:
If you customize your adaptive user interface in increments, as described in Chapter 1, define system elements before individual system widgets.
For detailed information about the individual properties of each system component and system widget, see Chapter 4. For information on how to customize system components and system widgets by setting properties in the XML adaptive user interface skin file, see Chapter 3.
When developing a skin that uses graphic components supported by adaptive user interface software, the designer begins by identifying the target devices and range of characteristics supported by the target devices. The designer must determine if the skin is applied to a single type of device or multiple types of devices with potentially different screen sizes and color capabilities. Designing a skin implemented on multiple types of devices is more complex than a skin implemented on a single type of device.
When designing a skin that is implemented on a single type of device, the designer can use any or all of the elements supported by the device. In this environment, the design of the skin is limited by the display capabilities of the device.
When designing a skin that is implemented across a range of devices, the designer must consider the following questions:
A comparison of existing phone screen interfaces shows a wide range of color schemes, with a tendency to use either bright colors or grays. Blues and greens are used frequently, because they display well on LCD screens. Drop shadows and gradations are also common.
The adaptive user interface default skin uses bright, saturated colors. These colors have a broader appeal than all gray, are more consumer oriented, and display well on LCD screens.
Many visual components supported by adaptive user interface software can have image backgrounds. These backgrounds can be any of the following types:
For more information on working with image backgrounds and other images, see Working With Graphic Image Files and Chapter 5.
The adaptive user interface images are sized to fit a median cell phone screen of 176 pixels wide and 210 pixels high.
The visual vocabulary for adaptive user interface software is straightforward:
An advanced user experience can be created by using a full-screen image with complex gradients. However, if you intend your skin to be portable across devices with different display sizes, designing a background that can tile to accommodate different dimensions is more appropriate.
The Java Wireless Client software provides support at the platform level for screen rotation on a user device. This makes it possible for users to easily rotate their screens, simply by pressing the button assigned to this function by the native code.
For example, on some platforms, the rotation function may be assigned to the F3 key. This is determined solely by the underlying platform and the adaptive user interface has no input into how this is mapped.
For the adaptive user interface skin designer, however, two considerations regarding screen rotation must be kept in mind when working with graphic images:
To customize the adaptive user interface default skin, the Java Wireless Client software provides two XML files, one for reference and one for modification, as shown here:
InstallDir/src/configuration/configuration_xml/share/chameleon
|
Note - The property settings presented in the skin_constants.xml file are for reference and are not meant to be modified. |
Unlike the skin_constants.xml file, of which only one version is provided, the skin.xml file is customized once for each platform you support. A default skin.xml file can be found in the following directories for the Java Wireless Client software supported platforms:
InstallDir/src/configuration/configuration_xml/linux_fb
InstallDir/src/configuration/configuration_xml/linux_qte
InstallDir/src/configuration/configuration_xml/javacall
The skin_constants.xml file provides a definition of every property setting used by the adaptive user interface. However, no values are assigned to the properties in this file. The actual values for each property are assigned in the file skin.xml.
By changing the values assigned to specific properties in the skin.xml file, it is possible to change the look and feel of the default skin. This is explained in greater detail in Assigning Value to an Adaptive User Interface Component.
The first adaptive user interface component defined in the skin_constants.xml file is the Screen component. It contains property definitions for 24 individual properties. One of those property definitions is SCREEN_COLOR_BG.
CODE EXAMPLE 2-1 shows the complete XML definition statement in the skin_constants.xml file for the SCREEN_COLOR_BG property.
____________________________________________________________
<constant Type="int"
Name="SCREEN_COLOR_BG"
Comment="The background color for a screen. In cases where there is
either no image background or the image could not be loaded, this
color is used as a solid fill for screen backgrounds./>
____________________________________________________________
Notice that no value is assigned to this property definition. The actual value is assigned in the skin.xml file. This is done by taking the property Name in the skin_constants.xml file and defining it as the Key in the skin.xml file. Once defined as the Key, a value is then assigned to that Key (0xFFFFFF), as shown in CODE EXAMPLE 2-2.
____________________________________________________________
Value="0xFFFFFF"/>
____________________________________________________________
As shown in CODE EXAMPLE 2-2, the property setting that controls the background color of the screen (SCREEN_COLOR_BG) is assigned a value equal to the hexidecimal notation for the color "white" (0xFFFFF). By using the property setting defined in the skin_constants.xml file and the value assigned it in the skin.xml file, the background color of the adaptive user interface screen is set to appear white.
In the skin.xml file, properties are separated into subcategories for easy identification and use. For example, the property shown in CODE EXAMPLE 2-2 is an integer property statement.
The Java Wireless Client software adaptive user interface defines six kinds of properties in the skin.xml file:
Understanding these six properties and how they are used makes it easy to customize the adaptive user interface. For more information, see Chapter 3.
To improve and simplify the process of customizing the adaptive user interface, the Java Wireless Client software provides the following two ways to update and customize your skin:
For step-by-step instructions for customizing your Adaptive User Interface, see Chapter 5. For more information on generating and displaying your customized skin, or rebuilding the Java Wireless Client software, see Chapter 6.
The purpose of the skin.bin file is to provide the skin designer with a flexible way to make changes to the look of the default skin and redisplay the skin, without rebuilding the full Java Wireless Client software. The skin designer makes changes to specific properties in the skin.xml file and then displays those changes by generating and displaying the updated skin.bin file.
For example, the background screen property SCREEN_COLOR_BG is defined in the skin.xml file as FFFFFF, or white. The screen designer can go into the skin.xml file, change this to some other color (for example, 00FFFF, or cyan) and quickly regenerate skin.bin to display the new background color. This process can be repeated as many times as the designer needs to verify the look of the new skin before installing it onto a device. For more information on making changes to the skin.xml file, see Chapter 3.
|
Note - If the content of an existing graphics image file is changed, new graphic files are added, or existing graphic files are removed, the Java Wireless Client software must be rebuilt. For more information, see Chapter 6. |
The skin.bin file is a binary file first generated by building the Java Wireless Client software. If graphic image files are defined in the skin.xml file to be ROMized, they are processed by the SkinRomizationTool along with other XML configuration files to produce the Java Wireless Client software binary implementation. During the build process, the skin.bin file is written to the following directory:
In the above path, output is the top-level directory you designate for the output of your Java Wireless Client software build. For more information about the SkinRomizationTool, see the Sun Java Wireless Client Tools Guide.
In a software development context, two primary people are responsible for updating a customized skin and generating the skin.bin file:
As the skin.bin file can be generated by doing a full build of the Java Wireless Client software or by running make using the run_skinromizer target, who generates the skin.bin file, and when it gets generated, is important to point out.
For the build engineer, whose duty is to manage the build operation, it is assumed that the Java Wireless Client software build environment is properly set up and the tools and skills for doing the builds are already well in hand. Therefore, the build engineer is not the target audience of this document.
The skin designer, whose job it is to define, update, and regenerate the Java Wireless Client software skin, is the target audience. Proper setup of the skin designer's make environment, as well as other tasks, are an important part of customizing and generating a new skin.
For information on how to work with graphic images, see Working With Graphic Image Files. For information on how to modify the skin.xml file to define new skin elements, see Chapter 3. For information on how to set up your make environment and redisplay a modified skin by generating the skin.bin file, see Chapter 6.
During the course of customizing your skin, it's useful to compare similarities and differences between the default skin provided by the Java Wireless Client software and the optional second skin. Comparing the two skins enables the visual designer to see how easily the same graphic image file name can be assigned to two different images, one assigned for each skin, to produce a different look for each skin when it is displayed.
|
1. Change to the skin directory for your platform.
For example, if your platform is win32_javacall, do the following:
$ cd InstallDir/midp/src/configuration/configuration_xml/javacall
2. Double-click on the icon for your skin file.
For example, double-click on skin.xml to display the default skin elements in a browser window. Or, use the file command to launch the default skin file, as shown below for the Mozilla browser.
FIGURE 2-1 Displaying the Default Skin File in a Browser Window
The skin elements displayed in the browser window correspond to the configurable settings defined in the default skin file skin.xml for your platform, as shown in FIGURE 2-2. To display the optional second skin, use the same URL path and substitute the optional second skin file, optional_skin.xml.
|
Note - If you redefine a configurable setting in the skin file, then redisplay the file in the browser window, you can quickly check and confirm any changes you make to the file. |
FIGURE 2-2 Displaying Skin File (skin.xml) Elements in a Browser Window
3. Repeat Steps 1 and 2 to display the optional skin file, skin_optional.xml, in a second browser window, as shown in FIGURE 2-3.
FIGURE 2-3 Displaying the Optional Skin File (skin_optional.xml) in a Browser
Notice the differences between the two skin files for the color property SCREEN_COLOR_TRAVERSE_IND. In the skin.xml file, the assigned setting is 0xFFCC33 (yellow). In the skin_optional.xml file, the assigned setting is 0x33623C (dark blue). In each skin file the property is the same, but the colors assigned to the property differ. This gives each skin a different look when displayed in the Java Wireless Client software emulator or on a device.
For more information about how the skin.xml file (or the skin_optional.xml file for the optional second skin) is set up and customized, see Chapter 3. For more information about the specific settings used in the skin.xml default skin file, see Chapter 4.
Working with graphics is an important part of customizing the Java Wireless Client software AUIT. The ability to substitute your own graphics for the images used in the default skin makes it easy to customize the skin to match the native look and feel of your own devices.
The Java Wireless Client software contains a number of graphic image files that make up the many separate pieces, which when displayed in the emulator or on a device, make up the full default skin. Modifying the contents of these image files, or replacing one or more image files with your own images, are two of the primary ways you can customize your own skin.
The following is the primary graphics image directory for the default Java Wireless Client software adaptive user interface:
InstallDir/midp/src/highlevelui/lcdlf/lfjava/resource/skin
The following directories also contain graphic image resources that can be modified to change the look of your skin but are not customized using the skin.xml file.
|
Note - These directories are provided for your information only. Working with the the resources found in these locations is not described in this guide. |
InstallDir/midp/src/ams/ota/reference/classes/com/sun/midp/
installer/resources
InstallDir/midp/src/ams/appmanager_ui_resources/share
InstallDir/midp/src/security/permission_dialog/reference/resource
The optional second skin has its own graphics image directories, which can also be modified or replaced, the same as with the primary default skin. The optional second skin graphics resource files are found in the following location:
InstallDir/midp/src/highlevelui/lcdlf/lfjava/resource_optional/skin
The following directories also contain graphic image resources that can be modified to change the look of your optional second skin but are not customized using the skin_optional.xml file.
|
Note - These directories are provided for your information only. Working with the the resources found in these locations is not described in this guide. |
InstallDir/midp/src/ams/ota/reference/classes/com/sun/midp/
installer/resources_optional
InstallDir/midp/src/ams/appmanager_ui_resources/share
installDir/midp/src/security/permission_dialog/reference/
resource_optional
Graphic images designed for the adaptive user interface must be in Portable Network Graphics (PNG) format. However, loading PNG format files into memory at runtime is generally a slow process. To increase the speed of loading, the Java Wireless Client software provides a utility for converting PNG images to RAW format, which is an uncompressed image in a supported platform's native color format. Storing images in RAW format allows for faster loading, because no decompression or conversion is needed.
To convert PNG files to RAW format, use the ImageToRawTool utility. For more information on the ImageToRawTool utility, see the Sun Java Wireless Client Tools Guide.
Each target platform represents image data in its own way. Therefore, the RAW format of an image is dependent upon the target platform. During the build process, when converting a PNG image into RAW format during the ROMization process, the SkinRomizationTool must know what RAW format to use. It does this by reading the format from the rawimage.xml file.
The rawimage.xml file can be customized and is found in the following directories, depending upon the platform:
InstallDir/src/configuration/configuration_xml/linux_fb
InstallDir/src/configuration/configuration_xml/linux_qte
InstallDir/src/configuration/configuration_xml/javacall
|
Note - The rawimage.xml file is in the same directory as the skin.xml file. |
For more information on the rawimage.xml file and how to specify the RAW format for specific target platforms, see the Sun Java Wireless Client Porting Guide.
Image files in PNG format can be ROMized as part of the Java Wireless Client software build process. ROMization is the process of converting image files into a C language file and then compiling this file along with other Java Wireless Client software source files. This makes the graphic images part of the Java Wireless Client software binary implementation.
ROMizing graphic images is done automatically at build time by the SkinRomizationTool. ROMizing graphic images provides for faster image loading at runtime but also increases the size of the Java Wireless Client binary footprint in memory.
For more information on the SkinRomizationTool, see the Sun Java Wireless Client Tools Guide.
ROMization of PNG image files is done automatically during the Java Wireless Client build process and depends on whether the Romized property of an image defined in the skin.xml file is set to true (ROMized) or false (not ROMized).
CODE EXAMPLE 2-3 shows a composite_image property definition in which the graphic files are not ROMized. Any graphic image file not ROMized is loaded directly from the Java Wireless Client software file system when the Java Wireless Client software is built.
____________________________________________________________
Romized="false"/>
____________________________________________________________
In CODE EXAMPLE 2-3, if Romized="true" is set, the SkinRomizationTool reads the corresponding graphic images and, if they are in PNG format, converts them into RAW format and ROMizes them. (The conversion of PNG graphic images to RAW format is done in memory, so no .raw files are created on the file system.) The SkinRomizationTool is run automatically, as part of the build process.
For more information on building the Java Wireless Client adaptive user interface, see Chapter 6. For more information on the SkinRomizationTool utility, see the Sun Java Wireless Client Tools Guide.
| Skin Author's Guide to Adaptive User Interface Technology | 05-2007 |
|
Copyright © 2007, Sun Microsystems, Inc. All rights reserved. SUN PROPRIETARY/CONFIDENTIAL.
Comparing Default and Optional Second Skins