<box>

The box element draws a rectangle on the device screen.

UJML Tag Syntax

<box>
    [<x>{integer-expr}</x>]
    [<y>{integer-expr}</y>]
    [<width>{integer-expr}</width>]
    [<height>{integer-expr}</height>]
    [<fg>{color-expr}</fg>]
    [<bg>{color-expr}</bg>]
    [<x-clip>{boolean-expr}</x-clip>]
    [<event>...</event>]
    [{visual-element}...]
</box>

Description

This is a visual element that draws a rectangle (box) on the screen of a supported device. See Visual Elements. You can specify the location, size, and color of the box. You can also tie an event to the box to capture user interaction. See Handling Events. The box may contain child visual element tags.

Figure 1. A box with a red foreground and a green background.

Contains

Element	Purpose	Default Value
x	Horizontal position (in pixels) of the box.	0
y	Vertical position (in pixels) of the box.	0
width	Width (in pixels) of the box.	0
height	Height (in pixels) of the box.	0
fg	The color of a one-pixel border around the box.	&_COLOR_BLACK;
bg	The fill color of the box.	&_COLOR_WHITE;
x-clip	Yields true if child elements are visually clipped within the box, otherwise false. Note: Not all platforms support clipping regions. There is no way to determine at run time if the device supports the x-clip element.	false
event	Relates a keystroke, button-push, or other device event to the box. See Handling Events.	None
0 to N child Visual Elements	Child elements of the box. Note: Child element z-order is determined by the order the elements are listed.	None

Is contained by

Element

display

box

image

label

multi-label

round-box

x-oval

Example

The following example shows how to display a box using variables for the box properties. It is part of the visualelements.ujml sample.

Copy Code

<box>
    <x><eval>mRectX</eval></x>
    <y><eval>mRectY</eval></y>
    <width><eval>mRectWidth</eval></width>
    <height><eval>mRectHeight</eval></height>
    <fg><eval>mForeColor</eval></fg>
    <bg><eval>makeColor(mBackColor, mOpacity)</eval></bg>
</box>

Figure 2. A box displayed by the visualelements.ujml sample.

The following example shows how to display a menu item consisting of a box containing a label. It responds to an onSelect event by calling a function using the current state index as an argument. It is part of the scrollmenu.ujms sample.

Copy Code

<box>
    <x><eval>mItemX</eval></x>
    <y><eval>mY</eval></y>
    <width><eval>mItemWidth[mCtr]</eval></width>
    <height><eval>mHeight</eval></height>
    <fg><eval>mColorBorder</eval></fg>
    <bg><eval>mBack</eval></bg>
    <x-clip>true</x-clip>
    <event name="onSelect">
        <script>chooseIndex(_state_index(0));</script>
    </event>
    <label>
        <text><eval>mCaption[mCtr]</eval></text>
        <x>&MENU_SPACING;</x>
        <y>&MENU_SPACING;</y>
        <fg><eval>mTxt</eval></fg>
        <size><eval>mFontSize</eval></size>
        <style><eval>mFontStyle</eval></style>
        <face><eval>mFontFace</eval></face>
    </label>
</box>