Canvas implements a free-form graphical user-interface. Canvas UI is meant to be used in graphical application that require a user-interface that does not auto-format itself, such as many kinds of games. With canvas UI content creator can define absolute locations of the UI items and have features for advanced functionality, such as

image frame animations
moving objects
showing and hiding
anchoring items together
z-order
windowing (item groups)
graphics primitives for drawing lines, circles, arcs, rectangles, ellipses, etc

Canvas UI uses four UI items that have a lot of common functionality but also specialized features. The UI items are

Image
String
Graphics
Button
Tilemap
Prompt
Data

Unlike the form UI, the canvas UI does not use one-level item hierarchy, but there can be several “window”-like drawing spaces, called groups. Groups are used as containers for the UI items. They are rectangular, opaque, areas that can be placed anywhere on the screen. By default, if no groups are created, the UI still containts one group, which is the canvas UI itself. From implementation point-of-view the canvas UI creates a fullscreen group with the ID from the template method.

Identifier

In this UI type the the UI items are referenced using three parameters: ui, group and id. The ui parameter can be left unspecified when the referred UI item is in the same UI with the caller. The group parameter can be left unspecified when the referred UI item is in same UI group with the caller. In addition to the UI items the UI groups and UI itself can be referred with group parameter.

Alternatively its possible to refer to ui items using item parameter as follows: item="ui:group/id".

attributes

Param	Type	Meaning
id	string	Canvas Id (and default group Id)
width	int	Width of the UI.
height	int	Height of the UI.
smallfontheight	int	Height of the small font size.
mediumfontheight	int	Height of the medium font size.
largefontheight	int	Height of the large font size.

creation

Param	Type	Default	Meaning
type	string	none	must be ‘canvas"
id	string	auto	Canvas Id (also Id of the default item group)
style	string	“color”	color = flat color background image = image background tiled = tiled image background
img	string	none	URL to image that is used with “image” and “tiled” styles.
resource	string	none	Resource that is used with“image” and “tiled” styles.
uigroup	string	none	ui group Id
active	boolean	true	true = UI is displayed false = UI is just stored in ui group
fullscreen	bool	true	True for fullscreen UIs, false for normal UI size
bgcolor	3-byte hex / string	current	Canvas background color as hex decimal (RRGGBB) or a color preset. Works with style='color' parameter
fgcolor	3-byte hex / string	current	Canvas border color as hex decimal (RRGGBB) or a color preset. The canvas uses this color to fill the space around the canvas visible area if the device is using custom resolution.
defaultsize	boolean / string	false	Set this parameter to true, if the UI size should be one of the standard UI resolutions most suitable for the device or you can set a custom resolution using notation "widthxheight", i.e. "176x208".

Example(s)

<template type="canvas" id="canvastest" style="tiled">
   <parms> 
      <img>tile.png</img>
   </parms>
</template>

Anchoring UI items

Each UI item can be anchored to another UI tem. The programmer specified where this item is anchored to (anchor) and where this item is anchored at (reference). Offsets can also be specified. Default anchor is the top left of the group the object is added to and the default reference is this objects top left corner.

If an object is moved and it has another object anchored to it, the anchored object it moved with it. This way the objects can be grouped and moved together. The location of the reference/anchor is defined by: "vertical location"_"horizontal location". The possible combinations are seen in the following table:

	left	center	right
top	Top_left	top_center	top_right
center	center_left	center	center_right
bottom	bottom_left	bottom_center	bottom_right

The anchor and reference points are defined by three parameters reference, anchor and anchorid. the reference parameters tells the reference point of the item and the anchor parameter tells where the reference point is anchored. The anchorid parameter specifies to which item the anchored item is anchored to.

In addition to previous, its possible to specify all three parameters within the anchor parameter. This is just implemented there, because defining the anchoring for every item can be cumbersome. To enable this feature, the reference and anchorid parameters are left unspecified and the anchor parameter is given with notation

anchor='referencepoint/anchorpoint/anchorid'

Example(s)

<string id='item1' text='test' x="2" y="-2">
   <parms>
      <reference>top_left</reference>
      <anchor>center</anchor>
      <anchorid>another_item</anchorid>
   </parms>
</string>
<string id='item1' text='test' x="2" y="-2" anchor='top_left/center/another_item' />

Events defined by Canvas Items

These event hooks are defined for all the canvas UI items. They extend the set of events defined in Common Script Language.

on_show

This event takes place when a UI item is shown with show method or the item was initialized using visible=true flag. The event only happens if the UI item was not visible and the visibility state has changed, so the content cannot create this event for a visible UI item by calling show.

Example(s)

<hook name="on_show">
   <debug text="UI item $(this.id) was just shown." />
</hook>

on_hide

This event takes place when a UI item is hidden with hide method. The event only happens if the UI item was visible and the visibility state has changed, so the content cannot create this event for a hidden UI item by calling hide.

Example(s)

<hook name="on_delete">
   <debug text="UI item $(this.id) was just deleted." />
</hook>

on_selector_enter, on_selector_leave

These events takes place when the user moves the item selector or the selected item is changed with select method. When the selection is changed on_selector_leave event is created on the previous selected item and on_selector_enter event is created on the newly selected item.

In addition to previous item groups receive these events whenever the currently selected item"s item group changes.

Content can utilize these events for instance to notify the user of changed selection by changing the looks of the item.

Example(s)

<hook name="on_selector_enter">
   <debug text="UI item $(this.id) is selected." />
</hook>
<hook name="on_selector_leave">
   <debug text="UI item $(this.id) is no more selected." />
</hook>

on_select

This event takes place when user activates a UI item by moving the selector to it and pressing the activation key on the device. If the selection is locked to a UI item using the select method with lock=true parameter the content no longer receives on_select events. In that kind of situation, the content should hook the on_fire_down and on_fire_up events if it need to catch user pressing the activation key on the device.

Example(s)

<hook name="on_select">
   <debug text="UI item $(this.id) was activated by user." />
</hook>

on_fire_down, on_fire_up

This event notifies the currently selected UI item that user has pressed down or released the activation key on the device. Note that, on_fire_down and on_fire_up events occur before possible on_select event.

These events can be used to change the appearance of a UI item to something and back before the on_select event. In addition, if the selection is locked using lock=true parameter with the select method, the UI item does not receive the on_select events anymore, but these events still work.

Example(s)

<hook name="on_fire_up">
   <debug text="User released fire button." />
</hook>

<hook name="on_fire_down">
   <debug text="User pressed fire button." />
</hook>

on_left_down, on_left_up

These events are for detecting if the user has pressed the left arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses.

The on_left_down event occurs when user has pressed the key down and analogically the on_left_up occurs when the key is released.

Example(s)

<hook name="on_left_up">
   <debug text="User released left button." />
</hook>

<hook name="on_left_down">
   <debug text="User pressed left button." />
</hook>

on_right_down, on_right_up

These events are for detecting if the user has pressed the right arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses.

The on_right_down event occurs when user has pressed the key down and analogically the on_right_up occurs when the key is released.

Example(s)

<hook name="on_right_up">
   <debug text="User released right button." />
</hook>

<hook name="on_right_down">
   <debug text="User pressed right button." />
</hook>

on_down_down, on_down_up

These events are for detecting if the user has pressed the down arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses.

The on_down_down event occurs when user has pressed the key down and analogically the on_down_up occurs when the key is released.

Example(s)

<hook name="on_down_up">
   <debug text="User released down button." />
</hook>

<hook name="on_down_down">
   <debug text="User pressed down button." />
</hook>

on_up_down, on_up_up

These events are for detecting if the user has pressed the arrow up key on the client device. The events are created for the currently selected item and if only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses.

The on_up_down event occurs when user has pressed the key down and analogically the on_up_up occurs when the key is released.

Example(s)

<hook name="on_up_up">
   <debug text="User released up button." />
</hook>

<hook name="on_up_down">
   <debug text="User pressed up button." />
</hook>

on_game_a_down, on_game_a_up

These events are for detecting if the user has pressed the game_a key on the client device. The events are created for the currently selected item. There is no pre-requirement for using select.

The on_game_a_down event occurs when user has pressed the key down and analogically the on_game_a_up occurs when the key is released. Which key this is, depends on the MIDP implementation.

Example(s)

<hook name="on_game_b_up">
   <debug text="User released game_b button." />
</hook>

<hook name="on_game_b_down">
   <debug text="User pressed game_b button." />
</hook>

on_game_b_down, on_game_b_up

These events are for detecting if the user has pressed the game_b key on the client device. The events are created for the currently selected item. There is no pre-requirement for using select.

The on_game_b_down event occurs when user has pressed the key down and analogically the on_game_b_up occurs when the key is released. Which key this is, depends on the MIDP implementation.

Example(s)

<hook name="on_game_a_up">
   <debug text="User released game_a button." />
</hook>

<hook name="on_game_a_down">
   <debug text="User pressed game_a button." />
</hook>

on_game_c_down, on_game_c_up

These events are for detecting if the user has pressed the up game_c on the client device. The events are created for the currently selected item. There is no pre-requirement for using select.

The on_game_c_down event occurs when user has pressed the key down and analogically the on_game_c_up occurs when the key is released. Which key this is, depends on the MIDP implementation.

Example(s)

<hook name="on_game_c_up">
   <debug text="User released game_c button." />
</hook>

<hook name="on_game_c_down">
   <debug text="User pressed game_c button." />
</hook>

on_game_d_down, on_game_d_up

These events are for detecting if the user has pressed the up game_d on the client device. The events are created for the currently selected item. There is no pre-requirement for using select.

The on_game_d_down event occurs when user has pressed the key down and analogically the on_game_d_up occurs when the key is released. Which key this is, depends on the MIDP implementation.

Example(s)

<hook name="on_game_d_up">
   <debug text="User released game_d button." />
</hook>

<hook name="on_game_d_down">
   <debug text="User pressed game_d button." />
</hook>

on_pointer_down, on_pointer_up, on_pointer_dragged

These events are for catching events from a pointer device, such as mouse or touch screen. The event hooks must be placed at template level in the script. The pointer events update pointerx and pointery parameters for the canvas which tells the current location of the pointer.

The on_pointer_down event occurs when the pointer is activated by pressing mouse button down or touching the screen on a touch screen device. The on_pointer_dragged events occur when the pointer is moved while being activated, and lastly the on_pointer_up event takes place when the pointer becomes inactive again.

Example(s)

<hook name='on_pointer_down'>
   <debug text="pointer down at $(global.pointerx),  $(global.pointery)' />
</hook>

<hook name='on_pointer_dragged'>
   <debug text="pointer moved to $(global.pointerx),  $(global.pointery)' />
</hook>

<hook name='on_pointer_up'>
   <debug text="pointer up at $(global.pointerx),  $(global.pointery)' />
</hook>

on_focus_enter, on_focus_leave

Item group receives on_focus_enter event when it becomes the currently locked group when calling

 <select lock="true" />

If the lock is removed from the item group or the currently selected item group changes, the item group receives on_focus_leave event.

Example(s)

<hook name='on_focus_enter'>
   <debug text="item group $(this.id) was locked" />
</hook>

<hook name='on_focus_leave'>
   <debug text="item group $(this.id) is no more locked ' />
</hook>

Hooking the number key pad

In addition to the game keys, it is also possible to hook any of the keys in the number pad. In some cases the game keys might actually be mapped to the keys in the number key pad. Keep this in mind when designing the user interaction.

Unlike the game keys, these keys can be handled three different of the content. First, the client tries to handle the key for currently selected item. If the item does not have hook defined the key is sent to the selected item"s group. If the item group does not have a hook for the key the key is sent to the canvas template. So its possible to make these keys global by defining the hooks in template level.

The event hooks for the key pad are mapped as follows:

Key	Events
1	on_num1_down, on_num1_up
2	on_num2_down, on_num2_up
3	on_num3_down, on_num3_up
4	on_num4_down, on_num4_up
5	on_num5_down, on_num5_up
6	on_num6_down, on_num6_up
7	on_num7_down, on_num7_up
8	on_num8_down, on_num8_up
9	on_num9_down, on_num9_up
0	on_num0_down, on_num0_up
*	on_star_down, on_star_up
#	on_pound_down, on_pound_up
Soft key1	on_soft1_down, on_soft1_up
Soft key2	on_soft2_down, on_soft1_up
Clear	on_clear_down, on_clear_up
Hang up	on_hangup_down, on_hangup_up

Example(s)

<hook name="on_num1_down">
   <debug text="User pressed number 1 down." />
</hook>

Methods defined by Canvas UI

outside

This is a conditional statement, which checks if two items do not overlap. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
target	string	none	target item

Example(s)

<outside id="sprite1" target="area1">
   <move id="sprite1" x="10" y="10 />
</outside>

intersects

This is a conditional statement, which checks if two items overlap. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
target	string	none	target item

Example(s)

<intersects id="sprite1" target="area1">
   <move id="sprite1" x="10" y="10 />
</intersects>

inside

This is a conditional statement, which checks if the item defined by the group and id parameters is inside the item defined by the target parameter. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
target	string	none	target item

Example(s)

<inside id="sprite1" target="area1">
   <move id="sprite1" x="10" y="10 />
</inside>

move

Moves a UI item to specified location. The given coordinates are relative to the current anchor point. If there is no anchor item specified the coordinates are relative to the top-left corner of the item group, with the exception that if the moved item is an item group itself then the coordinates are relative to the top-left corner of the screen. In addition to the previous logic there are three ways of moving items: using absolute value, using delta values or both. The absolute values moves the item to the new given (x,y) coordinates relative to the anchor point. The delta-values move the object relative to the current coordinates. If both methods are used, the object is first moved according to the absolute and then according to the delta values.

Note: If there are items anchored to the moved item, anchored items automatically moves with the item.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
x	int	0	Absolute x-coordinate
y	int	0	Absolute y-coordinate
deltax	int	0	Relative x-vector
deltay	int	0	Relative y-vector

Example(s)

<move group="group1" id="item1" deltax="10" deltay="10" />
<move group="group1" x="20" y="20" />

setcolors

This method is used for changing the foreground and background color values of a UI item. It is a generic method for all UI item types, including item groups. The UI items may only use one of the color values or not using either one of them. In the latter case the method does nothing.

The fgcolor and bgcolor parameters may be either 3-byte hex decimal values or predefined color identifiers. In case of 3-byte hex decimal values the format is "rrggbb" where the "rr" means 8-bit red color component value, "gg" green component and "bb" the blue component.

In case of using the predefined color identifiers the system recognizes the following color strings: black, white, green, yellow, pink, blue, gray, darkgray, brown and red.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
fgcolor	3-byte hex / string	current	Item foreground color as hex decimal (RRGGBB) or a color preset.
bgcolor	3-byte hex / string	current	Item background color as hex decimal (RRGGBB) or a color preset.

Example(s)

select

Sets a given UI item as the selected item. The selected item is the one that has the “selector” rectangle drawn around its borders. Only items that have selectable attribute set to true can be set as the selected item. Usually user can browse through the selectable items using arrow keys. This method overrides the user input and jumps the selection to the given item.

In addition to the previous feature this method also has functionality of locking the selection to a certain UI item. When the selection is locked to a UI item user cannot move the selection away from the item and the selector rectangle is not drawn around the item. This is especially useful feature in situations where the user should for instance move a UI item, say “starship” image, since the locking also lets the selected item to receive the arrow key presses as events. The events are:

on_left_down & on_left_up
on_right_down & on_right_up
on_up_down & on_up_up
on_down_down & on_down_up

Locking an item group affects the content in such a way that only the items in the locked item group are selectable. When the lock is released with lock="false" parameter the items in all item groups are selectable again.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
lock	bool	false	set to true if selection is locked to the specified item. If the item is an item group the selection is restricted to the items in the item group.

Example(s)

<select group="group1" id="image1" />
<select id="sprite1" lock="true" />

show

Shows an UI item or item group with given group and Id information. If the referred item is not found the method does nothing. If the referred object is an item group the group is shown and the items inside it that have visibility flag set to true.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.

Example(s)

<show id="sprite1" />

hide

Hides an UI item or item group with given group and Id information. If the referred item is not found the method does nothing.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.

Example(s)

<hide id="sprite1" />

bringtofront

Brings a ui item to top of the z-order in a item group. If the referred item is an item group itself then it is made as the front item group. If the item (or item group) is not a "topmost" (creation parameter) item the item is still stays behind the "topmost" items.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.

Example(s)

<bringtofront id="sprite1" />

sendtoback

Sends a ui item to bottom of the z-order in a item group. If the referred item is an item group itself then it is made as the backmost item group. If the item (or item group) is a "topmost" (creation parameter) item the item is still stays top of the non-"topmost" items.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.

Example(s)

<sendtoback id="sprite1" />

allowuserinput

Enables or disables the user input. This may become handy in certain situations where the application wants to prevent the user from making any changes to the UI before the UI has completed some task.

The task could be for instance sending a message to the server and waiting for reply. In that case the application can disable the user input before sending the message and when the reply arrives or in case of network error the user input can be enabled again.

Parameters

Param	Type	Default	Meaning
ui	string	current	UI Id.
value	bool	true	true=user input enabled, false=user input disabled
type	string	“all”	Optional parameter for only disabling certain types of user input. Possible values are: “menu”=disables/enables menu. “keypad”=disables/enables keypad events “gamekeys”=disables/enables arrow keys, game\_\* keys and fire button “all”=disables/enables all input and resets individual input flags (default)

Example(s)

<allowuserinput value="false" />

setselectable

Changes the selectable flag of a UI item. If the selectable flag is set to true user can select the item with browsing through the selectable UI items.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
value	bool	true	The selectable state

Example(s)

<setselectable id="sprite1" value="true" />

anchoritem

(Re-)anchors item to another item using given anchor and reference points

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
anchor	string	“top\_left”	Anchor point at the destination item
reference	string	“top\_left”	Anchor point at this item
anchorid	string	none	Anchor item

Example(s)

<anchoritem id="sprite1" reference="bottom\_left" anchor="top\_right" anchor="sprite2" />

setselectorcolor

Sets the current selector box color.

_Parameters _

Param	Type	Default	Meaning
value	Color/string	“auto”	“auto” = automatic selector color (default). “transparent” = transparent selector. "previous" = previous selector color. = changes the color to given value.

Example(s)

<setselectorcolor value="transparent" />
<setselectorcolor value="red" />

beginchange

The changes to the UI are not committed. The beginchange and endchange methods make it possible to greatly improve the performance of the graphical application. Instead of drawing and updating each group and item in each changed region on the screen, only the information of areas that need to be updated are combined together as a one large update area. When the endchange is called the client only updates the one large area instead of multiple smaller areas (as it would have been normally).

Each update means that the client has to go through all the items to detect whether they intersect with the updated area or not. When there are a lot of UI items that constantly change the number of those checks can raise exponentially. In such cases its better just to update everything in the combined are once.

Note: If the content updates two UI items in the opposite corners of the item group all the items are updated in that item group, since the combined update area covers everything inside the rectangle that includes the to items.

Parameters

Param	Type	Default	Meaning
ui	string	current	UI Id.
fullupdate	bool	false	Set to true if the screen should be fully redrawn after call to endchange.

Example(s)

<beginchange />
    Lots of UI updates here
<endchange />

endchange

Changes to the UI are committed. The beginchange and endchange method makes it possible to greatly improve the performance of the graphical application. Instead of drawing and updating each group and item in each changed region on the screen, only the information of areas that need to be updated are combined together as a one large update area. When the endchange is called the client only updates the one large area instead of multiple smaller areas (as it would have been normally).

Each update means that the client has to go through all the items to detect wether they intersect with the updated area or not. When there are a lot of UI items that constantly change the number of those checks can raise exponentially. In such cases its better just to update everything in the combined are once.

Parameters

Param	Type	Default	Meaning
ui	string	current	UI Id.

Example(s)

<beginchange />
   Lots of UI updates here
<endchange />

hideloadingicon

Call this method if you want the UI to be responsible of notifying the user about network activity. Once this method is called the UI no longer shows the network activity icon at the top right corner of the UI.

Example(s)

<hideloadingicon />

overrideselector

Overrides default selector movement. Sometimes the default selector movement is not logical and its good to be able to override the default beviour for certain ui items. One can (re)define the overrides at creation or using method.

In both cases the overrides are defined ny four parameters "selleft","selright","selup" and "seldown". These parameters define the ID of the item that is selected when the selector is moved to one of the four directions. If one or more of the parameters is given value "auto" that disabled the override and returns default action for those directions. In addition, if the parameter is empty string ("") the direction is always disabled for the ui item.

Parameters

Param	Type	Default	Meaning
selleft	string	none	Id of the selected item when moving left or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction.
selright	string	none	Id of the selected item when moving right or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction.
selup	string	none	Id of the selected item when moving up or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction.
seldown	string	none	Id of the selected item when moving down or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction.

Example(s)

<overrideselector selleft='_' selright='img1' selup='auto' />_

moveselector

Moves selector to given direction.

Parameters

Param	Type	Default	Meaning
direction	string	none	"left" moves selector to left. "right" moves selector to right. "up" moves selector to up. "down" moves selector to down.

Example(s)

<moveselector direction='left' />_

Item Groups

A group is a special case of the UI items. It is a UI item that contains other UI items. A group cannot contain other groups, to keep the UI topology Just as a flat one level hierarchy. The z-order applies to item groups too, so the UIs can be made to look as the groups would be inside another group by making it smaller, placing it inside the other group"s area (or for instance anchoring it to the center of another group), and making it the topmost item group.

Item groups are always opaque rectangular areas. The background of the item group can be drawn with solid color, it can be an image, or a tiled image. The (x,y) coordinates are relative to the current anchor point (as with UI items), which is the top-left corner of the screen if no anchor point is specified.

Modal item groups

Modal item groups are a special case of item group. They remember the last UI focus as they are shown. Also, they do not give UI focus to any other item group but another modal item group. When modal item group is hidden or deleted, it returns the ui focus to the UI item that was last selected, before the modal item group was shown. This feature can be enabled with modal="true" creation parameter.

attributes

Param	Type	Meaning
id	string	Item group Id
visible	bool	Visibility flag
bgcolor	int	Current background color
width	int	Width of the item group
height	int	height of the item group
x	int	x-coordidate
y	int	y-coordinate

creation

Param	Type	Default	Meaning
id	string	auto	Item id
inherits	string	none	Item inherits the hooks of this item
visible	bool	true	Visible flag
anchor	string	none	Anchor point at the destination item
reference	string	none	Anchor point at this item
anchorid	string	none	Anchor item
bgcolor	3-byte hex / string	“white”	Background color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	canvas width	Item group width
height	int	canvas height	Item group height
style	string	“color”	“color” = bgcolor attribute used for solid color background “image” = centered background image “tiled” = tiled background image “transparent”= transparent background “rounded” = group has a round border
img	string	none	URL that points to image that is used as a background.
resource	string	none	Image resource that is used as a background. Optional to "img" parameter.
border	bool	false	Set to true if the item group's border should be drawn.
topmost	bool	false	Set to true if the item group should stay on top of non-topmost item groups.
modal	bool	false	Set to true if the item group is a modal item group which remembers the UI focus when it is hidden.

Example(s)

<group id="mygroup" x="20%" y="30%" width="60%" height="40%">
   <parms>
      <style>color</style>
      <bgcolor>black</bgcolor>
   </parms>
   <hook name="on\_show">
       ... some script here ...
   </hook>

   <image id="img1" x="0" y="0" resource="res1" />
</group>

scroll

Scrolls an item group horizontally and/or vertically by moving the UI items inside the item group. However, items that have been created using sticky="true" parameter, are not scrolled.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
deltax	int	0	Horizontal delta.
deltay	int	0	Vertical delta.

Example(s)

<scroll id="group1" deltax="5" />

resize

Resizes the item group horizontally and/or vertically.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
width	int	current	Item width
height	int	current	Item height
deltawidth	int	0	Change in width
deltaheight	int	0	Change in height

Example(s)

<resize id="group1" deltawidth="5" />

string

String is a UI item that has a rectangular area where a text string is rendered using given font, style and color. The size of the area can be set to automatic fit the text into it. If the string item uses static area size, the text that does not fit the area is clipped out. If only the width of the area is defined the text will automatically stretch the bounding box vertically to fit all the lines in the area. If only height is defined, the text has a static height bounding box but it automatically stretches horizontally according to the text size. And finally if neither width or height is defined, the height of the bounding box is the used font height and width equals to the text width.

The text is drawn with current fgcolor value and background with the current bgcolor. The bounding box can also be set as transparent, in which case only the text is drawn.

attributes

Param	Type	Meaning
id	string	Item Id
group	string	Item group
visible	bool	Visible flag
selectable	bool	Is item selectable by user
fgcolor	int	Text color
bgcolor	int	Background color for the item
width	int	Width of the item
height	int	Height of the item
x	int	X-coordinate relative to currently anchored item
y	int	Y-coordinate relative to currently anchored item
top	Int	Y-coordinate relative to item group.
left	int	X-coordinate relative to item group.
bottom	int	(y+width)-coordinate relative to item group.
right	int	(x+height)-coordinate relative to item group.
sticky	bool	True if the item is not scrollable
text	string	The text

creation

Param	Type	Default	Meaning
id	string	auto	Item Id
group	string	default	Item group
inherits	string	none	Item inherits the hooks of this item
selectable	bool	false	Item is selectable by user
visible	bool	true	Visible flag
anchor	string	none	Anchor point at the destination item
reference	string	none	Anchor point at this item
anchorid	string	none	Anchor item
fgcolor	3-byte hex / string	“black”	Text color
bgcolor	3-byte hex / string	“white”	Background color for the item
x	int	0	X-coordinate
y	int	0	Y-coordinate
sticky	bool	false	Set to true if the ui should not be scrolled via scroll.
width	int	text width	Width of the item
height	int	font height	Height of the item
text	string	none	The text string
face	string	“system”	Font face: “system”, “monospace” or “proportional”
size	string	"small"	Font size: “small”, “medium”, “large”
bold	bool	false	Flag for bold text
italic	bool	false	Flag for Italic text
plain	bool	false	Flag for plain text
underlined	bool	false	Flag for Underlined text
font	string	none	Alternatively to default MIDP fonts, you can use a bitmap font image resource. Set the resource id here or leavy unspecified for using the default fonts.
opaque	bool	false	Flag for opaque text
halign	string	“left”	Horizontal alignment of the text inside bounding box: “left”, “center”, “right”
valign	string	“top"	Vertical alignment of the text inside bounding box: “top”, “center”, “bottom”
align	string	"top/left"	Optional way to define the alignment. Using format "horizontal alignment/vertical alignment"
hpadding	int	0	Horizontal padding for the text. Amount of pixels at left and right borders not used by the text inside the bounding box.
border	bool	false	Set to true if the text bounding box needs to be drawn.
drawselector	bool	true	Set to false if the ui item handles its own selector visuals.
topmost	bool	false	Set to true if the item should stay on top of non-topmost items.
xoffset	int	0	Initial x-offset of the text inside it's bounding box.
yoffset	int	0	Initial y-offset of the text inside it's bounding box.
autowrap	bool	true	Set this to false if you do not want the text to lines to be wrapped at the bounding box border.

Example(s)

<string id="string1" x="50" y="50" face="monospace">
   <parms>
      <text>Hello world!</text>
   </parms>
</string>

<string id="string2" anchor="bottom\_center" reference="top\_center">
   <parms>
      <y>10</y>
      <face>monospace</face>
      <text>======</text>
   </parms>
</string>

settext

Changes the text string for the UI item.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
text	string	none	The text string

Example(s)

<settext id="string1" text="changed text" />

setstyle

Changes the font and style of the text.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
face	string	“system”	Font face: “system”, “monospace” or “proportional”
size	string	“medium”	Font size: “small”, “medium”, “large”
bold	bool	false	Flag for bold text
italic	bool	false	Flag for Italic text
plain	bool	false	Flag for plain text
underlined	bool	false	Flag for Underlined text
opaque	bool	false	Flag for opaque text
halign	string	“left”	Horizontal alignment of the text inside bounding box: “left”, “center”, “right”
valign	string	“top"	Vertical alignment of the text inside bounding box: “top”, “center”, “bottom”
align	string	"top/left"	Optional way to define the alignment. Using format "horizontal alignment/vertical alignment"
hpadding	int	0	Horizontal padding for the text. Amount of pixels at left and right borders not used by the text inside the bounding box.
border	bool	false	Set to true if the text bounding box needs to be drawn.
xoffset	int	current	Initial x-offset of the text inside it's bounding box.
yoffset	int	current	Initial y-offset of the text inside it's bounding box.

Example(s)

<setstyle id="string1" face="proportional" />

resize

Resizes the bounding box of the string item. If the width or height is set to -1 that means the bounding box will automatically calculate the width or height values according to the text size.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
width	int	current	Item width
height	int	current	Item height
deltawidth	int	0	Change in width
deltaheight	int	0	Change in height

Example(s)

<resize id="string1" width="100" height="10" />

scroll

Scrolls the text inside it's bounding box. If the limit of available text is reached on one of the direction the scrolling is not done, i.e the text cannot be scrolled out of view.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
xoffset	int	current	Text x-coordinate inside bounding box. Value 0 resets the text to original position.
yoffset	int	current	Text y-coordinate inside bounding box. Value 0 resets the text to original position.
deltax	int	0	Relative horizontal scroll amount in pixels.
deltay	int	0	Relative vertical scroll amount in pixels.

Example(s)

<scroll id="string1" deltax="10" />

append

Appends a string in the end of the text. This is handly especially when the text is very long and it is updated rapidly. It also implements a FiFo buffer that cuts text off the beginning while adding text to the end.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
text	string	none	The text string
max	int	0	Maximum size of the text after append.

Example(s)

<append id="string1" text="new text" max="100" />

insert

Inserts a string in the beginning of the text. This is handly especially when the text is very long and it is updated rapidly. It also implements a FiFo buffer that cuts text off the end while adding text to the beginning.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
text	string	none	The text string
max	int	0	Maximum size of the text after insertion.

Example(s)

<insert id="string1" text="new text" max="100" />

image

UI item that supports downloadable images. It can be set to download an image from internet or it can use a defined image resource with "resource:" prefix as the url parameter. Like the other UI items it can be placed anywhere in its group. One can specify static framewidth and frameheight parameters to use the image data as a storage of multiple frames of data. If the framewidth and frameheight are specified the image is shown as given size and it is possible to change the active visible area using setframe method, where the given value parameter corresponds to a image frame in the actually image data. This functionality can be used to create image frame animations by having all the frames of a "sprite" in one image and then changing the active frame with setframe method. This method also saves some memory and it is faster to download one large image than many smaller ones.

attributes

Param	Type	Meaning
id	string	Item Id
group	string	Item group
visible	bool	Visible flag
selectable	bool	Is item selectable by user
fgcolor	int	Text color
bgcolor	int	Background color for the item
width	int	Width of the item
height	int	Height of the item
x	int	X-coordinate relative to currently anchored item
y	int	Y-coordinate relative to currently anchored item
top	Int	Y-coordinate relative to item group.
left	int	X-coordinate relative to item group.
bottom	int	(y+width)-coordinate relative to item group.
right	int	(x+height)-coordinate relative to item group.
sticky	bool	True if the item is not scrollable
url	string	Image URL
frame	int	Current frame number.

creation

Param	Type	Default	Meaning
id	string	auto	Item Id
group	string	default	Item group
inherits	string	none	Item inherits the hooks of this item
selectable	bool	false	Item is selectable by user
visible	bool	true	Visible flag
anchor	string	none	Anchor point at the destination item
reference	string	none	Anchor point at this item
anchorid	string	none	Anchor item
fgcolor	3-byte hex / string	“black”	Text color
bgcolor	3-byte hex / string	“white”	Background color for the item
x	int	0	X-coordinate
y	int	0	Y-coordinate
sticky	bool	false	Set to true if the ui should not be scrolled via scroll.
url	string	none	URL for downloadable image.
resource	string	none	Image resource id. Alternate to URL parameter.
framewidth	int	none	Width of an image frame for sprite images
frameheight	int	none	Height of an image frame for sprite images
cache	string	"true"	Set to "false" if the image should not be cached but downloaded each time. Set to "update" if the data in cache only needs to be updated.
cropx	int	0	Crop rect for displaying a portion of a larger image resource.
cropy	int	0	Crop rect for displaying a portion of a larger image resource.
cropwidth	int	Image width	Crop rect for displaying a portion of a larger image resource.
cropheight	int	Image height	Crop rect for displaying a portion of a larger image resource.
drawselector	bool	true	Set to false if the ui item handles its own selector visuals.
topmost	bool	false	Set to true if the item should stay on top of non-topmost items.

Example(s)

<image id="logo" x="10" y="10" resource="res\_logo" />

<image id="logo2'>
   <parms>
      <anchor>center_right</anchor>
      <reference>center_left</reference>
      <anchorid>logo</anchorid>
      <url>logo2.png</url>
   </parms>
</image>

setimage

Sets new image data for the image item. It can either be a url to a network image or a image resource.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
url	string	none	URL to downloadable image.
resource	string	none	Reference to image resource (optional to url).
framewidth	int	none	Width of an image frame for sprite images
frameheight	int	none	Height of an image frame for sprite images
cache	string	"true"	Set to "false" if the image should not be cached but downloaded each time. Set to "update" if the data in cache only needs to be updated.
cropx	int	0	Crop rect for displaying a portion of a larger image resource.
cropy	int	0	Crop rect for displaying a portion of a larger image resource.
cropwidth	int	Image width	Crop rect for displaying a portion of a larger image resource.
cropheight	int	Image height	Crop rect for displaying a portion of a larger image resource.

Example(s)

<setimage id="logo" url="http://www.images.com/logo3.png" />

setframe

Sets an active frame of the sprite image. The sprite functionality can be activated by setting static framewidth and frameheight parameters for an image. The actual image is divided into frames so that it is possible to change the active image frame by changing image frame index. The first image is the one in the top left corner, the next is the one on the right and so forth. The 1st image frame index is 0 and the next frame index is 1 and so forth. The frames can be arranged in multiple rows and columns as well.

If the given frame index is outside the range of frames defined for the image, the index is the normalized into the range. I.e. if there is 5 frames (0…4) defined for an image and one tries to use index="6" parameter within the setframe method the frame index set for the image is actually ‘1" when after normalization.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
index	int	current	Absolute index to visible frame.
delta	int	0	Relative index to visible frame. i.e. delta=1 means next frame. delta=-1 means previous frame.

Example(s)

<setframe id="sprite1" delta="3"  />

transform

Applies given transformations to the image. Currently available transformations are image rotation and mirror.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
rotate	string	none	Rotation value. Valid values are: “clockwise” = rotates image 90 degrees clockwise “anticlockwise” = rotates image 90 degrees anticlockwise “deg0” = 0 degrees “deg90” = 90 degrees “deg180” = 180 degrees “deg270” = 270 degrees
origox	int	0	X-coordinate of the rotation center
origoy	int	0	X-coordinate of the rotation center
mirror	bool	false	True for mirrored image

Example(s)

<transform id="sprite1" rotate="deg90" mirror="true" />

graphics

Graphics is a UI item that consists of graphics elements. The elements are: line, rectangle, circle, ellipse and arc. These graphics elements can be drawn anywhere in the graphics item"s bounding box. The graphics item can have a solid color background or the background can be left transparent. Each graphics element can be drawn with a different color and they may be drawn filled.

ince version 2.26 of the client the graphics items can drawn using double buffering. This way the drawing of the graphics item becomes faster with the following limitations:

the graphics item cannot be transparent
resize, undo and forget do not work with double buffered graphics items

attributes

Param	Type	Meaning
id	string	Item Id
group	string	Item group
visible	bool	Visible flag
selectable	bool	Is item selectable by user
fgcolor	int	Text color
bgcolor	int	Background color of the item
width	int	Width of the item
height	int	Height of the item
x	int	X-coordinate relative to currently anchored item
y	int	Y-coordinate relative to currently anchored item
top	Int	Y-coordinate relative to item group.
left	int	X-coordinate relative to item group.
bottom	int	(y+width)-coordinate relative to item group.
right	int	(x+height)-coordinate relative to item group.
sticky	bool	True if the item is not scrollable

creation

Param	Type	Default	Meaning
id	string	auto	Item Id
group	string	default	Item group
inherits	string	none	Item inherits the hooks of this item
selectable	bool	false	Item is selectable by user
visible	bool	true	Visible flag
anchor	string	none	Anchor point at the destination item
reference	string	none	Anchor point at this item
anchorid	string	none	Anchor item
fgcolor	3-byte hex / string	“black”	Text color
bgcolor	3-byte hex / string	“white”	Background color of the item
x	int	0	X-coordinate
y	int	0	Y-coordinate
sticky	bool	false	Set to true if the ui should not be scrolled via scroll.
width	int	canvas width	Item width
height	int	canvas height	Item height
doublebuffer	bool	false	Set to true for double buffered graphics items.
drawselector	bool	true	Set to false if the ui item handles its own selector visuals.
topmost	bool	false	Set to true if the item should stay on top of non-topmost items.
autoscale	bool	false	Set to true if graphics item should autoscale its contents according to resizing.

Example(s)

<graphics id="redcircleonyellow" x="10" y="100">
   <parms>
      <width>50</width>
      <height>50</height>
   </parms>
   <clear color="yellow" />
   <circle x="50%" y="50%" width="100%" filled="true">
      <parms><color>red</color></parms>
   </circle>
</graphics>

resize

Resizes the graphics UI item. The graphics elements that are drawn using percentage values are resized with the graphics item. As with move method there are two ways of resizing: either giving new absolute width and height values, or changing the width and height with delta values, or using both.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
width	int	current	Item width
height	int	current	Item height
deltawidth	int	0	Change in width
deltaheight	int	0	Change in height

Example(s)

<resize id="redcircleonyellow" deltawidth="10" deltaheight="10" />

clear

Clears the graphics item from graphics elements and sets the background color. If the color parameter is left unspecified the background will be transparent.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Background color

Example(s)

<clear id="redcircleonyellow" />

<clear id="redcircleonyellow" color="blue" />

line

Adds a line to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	start x-coordinate
y	int	0	start y-coordinate
x2	int	0	start x-coordinate
y2	int	0	End y-coordinate

Example(s)

<line id="reccircleonyellow" x="0" y="0" x2="100%" y2="100%" />

<line id="reccircleonyellow" x="0" y="100%" x2="100%" y2="0" />

circle

Adds a circle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	0	Graph width
filled	bool	false	true = filled graph, false = border only

Example(s)

<circle id="redcircleonyellow" x="10" y="10" width="20">
   <parms>
      <filled>true</filled>
      <color>green</color>
   </parms>
</circle>

ellipse

Adds an ellipse to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	0	Graph width
height	int	0	Graph height
filled	bool	false	true = filled graph, false = border only

Example(s)

<ellipse id="redcircleonyellow" x="90%" y="10">
   <parms>
      <height>10</height>
      <width>20</width>
      <filled>true</filled>
      <color> black</color>
   </parms>
</ellipse>

arc

Adds an arc to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item's bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	0	Graph width
height	int	0	Graph height
filled	bool	false	true = filled graph, false = border only
sangle	int	0	Start angle 0..360, 0 = right most point of ellipse
eangle	int	360	Extent of the arc in degrees, a positive value means counter-clockwise rotation

Example(s)

<arc id="redcircleonyellow" x="90%" y="10 height="10" width="20">
   <parms>
      <sangle>90</sangle>
      <eangle>270</eangle>
      <filled>true</filled>
      <color> black</color>
   </parms>
</arc>

rect

Adds a rectangle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	0	Graph width
height	int	0	Graph height
filled	bool	false	true = filled graph, false = border only

Example(s)

<rect id="redcircleonyellow" x="90%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect>

roundrect

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate
y	int	0	Y-coordinate
width	int	0	Graph width
height	int	0	Graph height
filled	bool	false	true = filled graph, false = border only
corner	int	0	Size of the corner

Example(s)

<roundrect id="redcircleonyellow" x="90%" y="10 height="100" width="70" corner="15">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</roundrect>

triangle

Adds a triangle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	X-coordinate of first corner
y	int	0	Y-coordinate of first corner
x2	int	0	X-coordinate of second corner
y2	int	0	Y-coordinate of second corner
x3	int	0	X-coordinate of third corner
y3	int	0	Y-coordinate of third corner
filled	bool	false	true = filled graph, false = border only

Example(s)

<rect id="redcircleonyellow" x="90%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect>

undo

Discards the last drawing operation.

Example(s)

<rect id="redcircleonyellow" x="90%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect>
<rect id="redcircleonyellow" x="20%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect> 
<undo />

forget

Discards the first (oldest) drawing operation.

Example(s)

<rect id="redcircleonyellow" x="90%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect>
<rect id="redcircleonyellow" x="20%" y="10 height="10" width="20">
   <parms>
      <filled>false</filled>
      <color> black</color>
   </parms>
</rect> 
<forget />

lineto

Draws a line from ending point of the previous drawing operation to given coordinates. The ending coordinates are defined as (x+deltax, y+deltay).

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	Absolute X-coordinate
y	int	0	Absolute Y-coordinate
deltax	int	0	Relative X-coordinate
deltay	int	0	Relative Y-coordinate

Example(s)

<lineto deltax="50" deltay="50 />

<lineto deltax="-50" y="50 color="blue" />

moveto

Moves drawing pointer from ending point of the previous drawing operation to given coordinates. The ending coordinates are defined as (x+deltax, y+deltay).

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
color	3-byte hex / string	none	Drawing color
x	int	0	Absolute X-coordinate
y	int	0	Absolute Y-coordinate
deltax	int	0	Relative X-coordinate
deltay	int	0	Relative Y-coordinate

Example(s)

<moveto deltax="50" deltay="50 />
<moveto deltax="-50" y="50 color="blue" />

button

This UI item implements a functionality of a regular push button. It may be used as a trigger button, which means that the button will be pressed down until user releases the select button, or it can also be used as a toggle button (the button changes its up/down state when user selects it). In the latter case there is no functionality to “group” buttons as radio button groups, the content can implement this feature fairly easy though.

The button has a static color and shape and a given caption text. The text is centered and clipped to the button"s bounding box.

attributes

Param	Type	Meaning
id	string	Item Id
group	string	Item group
visible	bool	Visible flag
selectable	bool	Is item selectable by user
fgcolor	int	Text color
bgcolor	int	Background color of the item
width	int	Width of the item
height	int	Height of the item
x	int	X-coordinate relative to currently anchored item
y	int	Y-coordinate relative to currently anchored item
top	Int	Y-coordinate relative to item group.
left	int	X-coordinate relative to item group.
bottom	int	(y+width)-coordinate relative to item group.
right	int	(x+height)-coordinate relative to item group.
sticky	bool	True if the item is not scrollable
state	bool	Button state. true = down, false = up

creation

Param	Type	Default	Meaning
id	string	auto	Item Id
group	string	default	Item group
inherits	string	none	Item inherits the hooks of this item
selectable	bool	false	Item is selectable by user
visible	bool	true	Visible flag
anchor	string	none	Anchor point at the destination item
reference	string	none	Anchor point at this item
anchorid	string	none	Anchor item
fgcolor	3-byte hex / string	“909090”	Text color
fgcolorsel	3-byte hex / string	“black”	Text color of selected button
bgcolor	3-byte hex / string	“white”	Background color of the item
bdcolor	3-byte hex / string	“bedbde”	Border color
bdcolorsel	3-byte hex / string	“80a5ae”	Border color of selected button
bdcolordown	3-byte hex / string	“7aa0a5”	Border color of pushed down button
x	int	0	X-coordinate
y	int	0	Y-coordinate
sticky	bool	false	Set to true if the ui should not be scrolled via scroll.
width	int	group width	Item width
height	int	group height	Item height
size	string	"small"	Font size: “small”, “medium”, “large”
bold	bool	false	Flag for bold text
font	string	none	Alternatively to default MIDP fonts, you can use a bitmap font image resource. Set the resource id here or leavy unspecified for using the default fonts.
text	string	""	Button caption
toggle	bool	false	Button type: true = toggle button false = regular button
drawselector	bool	true	Set to false if the ui item handles its own selector visuals.
topmost	bool	false	Set to true if the item should stay on top of non-topmost items.

Example(s)

<button id="button1" x="5" y="60 text="enable" />

settext

Changes the caption of the button.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
text	string	current	Button caption

Example(s)

<settext id="button1" text="disable" />

togglestate

Changes the up/down state of the button. If the button was “up” it will change to “down” state and the other way around.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.

Example(s)

<togglestate id="button1" />

setstate

Sets the state of the button given by value parameter. If value is true the button is pressed down and if value false the button is released up.

Parameters

Param	Type	Default	Meaning
identifiers	params	current item	Item reference.
value	bool	false	true = button downfalse = button up

Example(s)

<setstate id="button1" value="true" />

tilemap

Tilemap is a UI item that is used for generating rectangular area that is divided into smaller sub-areas. The tilemap consists of equal-sized areas arranged into rows and columns. Each area can contain an image or it can be empty, exposing the UI items underneath. The tilemap can also have a background color, which makes it opaque if specified. Tilemap contains rows * columns cells and each cell is tilewidth wide and tileheight high. The full size of the tilemap is columns * tilewidth wide and rows * tileheight high.

The image data of the tilemap is defined with image resources. One can set the tilemap data using different methods, such as row (sets data for one row), column (sets data for one column) and setvalue (sets image for one tile) and fill (fills tilemap with a pattern of images).