UJML Colors

UJML colors are specified with an int value.

Visual elements in UJML allow you to specify their colors. You specify the foreground color of a visual element using an fg tag. Some visual elements also support a background color using a bg tag. See fg, bg. For example, the line element only supports a foreground color, while the box and label elements support both foreground and background colors.

Not all devices provide color displays or support color displays with the same number of colors. See Determining Device Context, Color Support. Devices without color support usually convert colors to a similar, gray-scale value.

Color literals

Color literals are specified as RGB triplet int values. Commonly, hexadecimal notation is used (using the characters '0x' followed by the hexadecimal number) for color literals. See Literals and Constants. This RGB triplet is formatted as 0xAARRGGBB where the leading two digits ('AA') correspond to the alpha opacity, the next two digits ('RR") are the red component, the next two digits ('GG') are the green component, and the last two digits ('BB') are the blue component.

Color examples

Color value	Description
0xFFFF0000	Opaque red
0xFF00FF00	Opaque green
0xFF0000FF	Opaque blue
0xFFFFFFFF	Opaque white
0xFF000000	Opaque black
0xFF777777	Opaque medium gray
0x7FFF0000	50% transparent red
0x00000000	Completely transparent

Predefined colors

UJML provides a set of predefined color entities that you can use in your code. See Color Entities. For example, &_COLOR_RED; refers to opaque red (0xFFFF0000) and &_COLOR_AQUA; refers to an opaque greenish-blue (0xFF00FFFF).

Figure 1. UJML color entities displayed by the colors.ujml sample.

Custom colors

You can create your own custom color literals using integers as described above. You can also calculate a color value using a mathematical expression.

Alpha opacity

Alpha opacity refers to the degree a color is 'transparent' and lets objects in the background show through. Lower alpha opacity values are more transparent and higher alpha opacity values are more opaque.

Not all devices support alpha opacity in colors. See Determining Device Context, Color Support.

Example

The following example shows how to display a round-box containing a label using UJML color entities for the background and foreground colors. It is part of the helloworld3.ujml sample.

Copy Code

<round-box>
    <x><eval>mPosX</eval></x>
    <y><eval>mPosY</eval></y>
    <width>
        <eval>mWidth</eval>
    </width>
    <height>
        <eval>mHeight</eval>
    </height>
    <fg>&_COLOR_AQUA;</fg>
    <bg>&_COLOR_BLUE;</bg>
    <x-arc-width>8</x-arc-width>
    <label>
        <text>&SALUTATION;</text>
        <x>&SPACING;</x>
        <y>&SPACING;</y>
        <fg>&_COLOR_YELLOW;</fg>
        <size>&_FONT_SIZE_LARGE;</size>
        <style>&_FONT_STYLE_ITALIC;</style>
        <face>&_FONT_FACE_SYSTEM;</face>
    </label>
</round-box>

The following example shows how to smoothly change the color of a box using a function that builds a color value from passed arguments. It is part of the colorchanger.ujml sample.

Copy Code

<ujml>
    <application>
        <state-variables>
            <state-var name="sFadeBox" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mColor1" type="int"/>
            <var name="mColor2" type="int"/>
        </variables>
        <functions>
            <function name="makeColor" type="int">
                <parameters>
                    <var name="opacity" type="int"/>
                    <var name="red" type="int"/>
                    <var name="green" type="int"/>
                    <var name="blue" type="int"/>
                </parameters>
                <return>
                    <eval>
                        (opacity * 16777216) +
                        (red * 65536) +
                        (green * 256) +
                        blue
                    </eval>
                </return>
            </function>
        </functions>
        <script>
            // Set initial color values
            mColor1 = 0xFF;
            mColor2 = 0;

            // Go.
            sFadeBox = true;
        </script>
        <display>
            <!-- If the user presses 'Back' unload the application. -->
            <fn>
                <text>Back</text>
                <event name="onSelect">
                    <accelerators>
                        <key>F1</key>
                    </accelerators>
                    <script>_unload();</script>
                </event>
            </fn>
        </display>
        <states>
            <state var="sFadeBox">
                <transition value="true">
                    <display>
                        <!-- Display the current colors, wait, then change colors. -->
                        <box>
                            <width>
                                <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval>
                            </width>
                            <height>
                                <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;)</eval>
                            </height>
                            <fg><eval>makeColor(0xFF, mColor1, 0x77, mColor2)</eval></fg>
                            <bg><eval>makeColor(0xFF, mColor2, 0x77, mColor1)</eval></bg>
                        </box>
                    </display>
                    <delay>25</delay>
                    <script>
                        mColor1--;
                        mColor2++;
                        if (mColor1 &_GTE; 0)
                        {
                            _clear_state(sFadeBox);
                            sFadeBox = true;
                        }
                    </script>
                </transition>
            </state>
        </states>
    </application>
</ujml>