Creating a custom widget

You might want to create your own widget type. Here's a brief how-to on how-to do that.

Methods

Every widget has 3 drawing methods:

• DrawText for rendering text
• DrawSkin for rendering sprites
• DrawGL for rendering external textures (i.e. not part of the atlas)

And an update method

• UpdateWidget which is called whenever the root updates

There are also the mouse interaction methods:

• OnMouseOver for when the mouse is hovering the widget
• OnMouseCancel for when the mouse exits the widget
• OnMouseDrag for when the mouse is dragging the widget
• OnMouseDown for when the mouse is clicked over the widget
• OnMouseUp for when the mouse button is released over the widget

Building the widget

To create a widget, we will create some internal logic, overload some of the native methods and use the static draw helper.

First, we make our new widget class derives from OGWidget

#pragma strict

public class OGMyWidget extends OGWidget {

}

And let's say we want to switch between 2 strings when the mouse is hovering the widget. So we'll create 3 strings and override some mouse event methods

public var defaultString : String = "Hover me!";
public var hoveredString : String = "Yay!";

private var currentString : String = defaultString;

override function OnMouseOver () {
   currentString = hoveredString;
}

override function OnMouseCancel () {
   currentString = defaultString;
}

We should make sure that the root understands how to detect this widget, so we need to set a few persistent parameters. We'll set the mouse detection rect to be the same as the drawing rect.

override function UpdateWidget () {
   isSelectable = true;
   mouseRct = drawRct;
}

Now for the drawing methods. We'd like a sliced sprite as the background and the text to be displayed on top.

override function DrawSkin () {
   OGDrawHelper.DrawSlicedSprite ( drawRct, styles.basic.coordinates, styles.basic.border, drawDepth, clipTo );
}

override function DrawText () {
   OGDrawHelper.DrawLabel ( drawRct, currentString, styles.basic.text, drawDepth, clipTo );
}

Implementing default styles

If you want your widget to be part of the OpenGUI family and have adjustable default styles, you need to add an enum value and modify a few return methods in the OGSkin.js file.

• Add your widget type name to the OGWidgetType enum
• Add it to the the return methods in the OGSkin class