A widget is composed of several rendering elements (UIElements). Rendering elements have a tree structure.

In addition, separate widgets can be retained as children.

Widgets with a background image, icon image, or text, as shown below, can be comprised of two rendering elements and a Label widget.

There are three standard rendering element UIElements: RootUIElement, UIPrimitive, and UISprite (Table 1).

Table 1 UIElement Types

UIElement	Base abstract class of a rendering element. One texture can be set to the UIElement.
RootUIElement	Root class of the UIElement tree structure. Only one is generated when generating an object of a widget. This can be retrieved from the Widget.RootUIElement property.
UISprite	Rendering element of a rectangle. Multiple rectangles can be included in a single UISprite.
UIPrimitive	Rendering element that is used to display polygons and lines.

UISprite is a rendering element that is used to display rectangles and is the simplest rendering element.

Multiple rectangles can be displayed with a single UISprite.

A UISpriteUnit represents one rectangle.

A UISpriteUnit can be used to specify the top left position, width, height, and the top, bottom, left, and right texture coordinates.

To create a UISprite object, set the maximum number of UISpriteUnits with the constructor.

ImageAsset image = new ImageAsset("/Application/img.png");

sprite = new UISprite(1);
sprite.ShaderType = ShaderType.TextureArgb;
sprite.Image = image;

UISpriteUnit unit = sprite.GetUnit(0);
unit.X = 0.0f;
unit.Y = 0.0f;
unit.Width  = image.Width;
unit.Height = image.Height;

this.RootUIElement.AddChildLast(sprite);

To describe the processing for a touch event, override the OnTouchEvent method.

To customize the hit determination of touch points and widgets, override the HitTest method.

Similarly, override the OnKeyEvent method to describe the processing for a key event, and override the OnMotionEvent method to describe the processing for a motion event.

If update processing is required for each frame, use the OnUpdate method.

This can be used to create custom animation for individual widgets. To create a general animation, it is recommended that the Effect class be used.

To describe update processing, override the OnUpdate method and describe the necessary processing. The OnUpdate method is called for each frame.

However, if the Visible property is set to False, the OnUpdate method is not executed.