The base class for all widgets.
id
a unique identifier to distinguish each widget from the other.
className
:String
. Class name of the widget, used for applying styles by class name.
def onResize: DomEventSignal[Widget, Int];
Signals that the widget's dimensions changed.
def onMouseEnter: DomEventSignal[Widget, Int];
Signals that the cursor entered the widget's region.
def onMouseOut: DomEventSignal[Widget, Int];
Signals that the cursor exited the widget's region.
def onMouseDown: DomEventSignal[Widget, MouseButtonPayload];
Signals that the mouse button has been pressed.
def onMouseUp: DomEventSignal[Widget, MouseButtonPayload];
Signals that the mouse button has been released.
def onMouseMove: DomEventSignal[Widget, MouseMovePayload];
Signals that the cursor moved over the widget.
def onTouchStart: DomEventSignal[Widget, Array[TouchPayload]];
Signals the start of a touch on devices with touch screens.
def onTouchEnd: DomEventSignal[Widget, Array[TouchPayload]];
Signals the end of a touch on devices with touch screens.
def onTouchMove: DomEventSignal[Widget, Array[TouchPayload]];
Signals the change of touch positions on devices with touch screens.
def onClick: DomEventSignal[Widget, Int];
Signals that a mouse click occurred.
handler this.style: SrdRef[StyleSet];
handler this.style = SrdRef[StyleSet];
This property allows updating the style of the widget. You can assign a StyleSet object to it, which will be useful in sharing styles between multiple instances of a widget. If you try to update the styles without setting a StyleSet upfront it will create a new StyleSet object for this widget and return it.
handler this.getDimensions(): Dimensions;
A method to get the widget's dimensions.
handler this.getBoundingRect(): Rectangle;
A method to get the widget's position and dimensions relative to the upper left corner of the viewport.
handler this.requestPointerLock();
Requests for locking the pointer to the specified widget. This results in hiding the mouse cursor and sending all mouse actions to this widget, which is useful for developing games.
handler this.requestFullScreen();
Requests to activate full screen mode for this widget. This will result in this widget being enlarged to full the entire screen.
handler this.scrollIntoView();
Requets the browser to be scrolled to the element on which the method is called.
This class represents a rectangle area that contains other widgets.
children
:Array[SrdRef[Widget]]
. The array of widgets contained in this class.
handler this.addChildren (count: Int, children: ...temp_ref[SrdRef[Widget]]);
A method to add a new child or more to this box.
parameters:
-
count
number of children we want to add. -
children
the children we want to add, which are widgets.
handler this.insertChild (index: Int, child: SrdRef[Widget]);
Inserts a child at the spefcified index.
parameters:
-
index
The index at which to insert the widget. -
child
the widget to be inserted.
handler this.removeChildren (count: Int, children: ...temp_ref[SrdRef[Widget]]);
A method to remove children from this box.
parameters:
-
count
number of children we want to remove. -
children
the children we want to remove, which are widgets.
handler this.removeAllChildren ();
Removes all children of this box.
This represents an area to be used for free drawing.
resourceId
:ArchInt
. a unique identifier to distinguish each canvas from the other.
drawing
:Drawing
. This mixin adds support for drawing operatios to this class. Visit the documentation ofDrawing
for details about available operations.
-
bitmapWidth
:SrdRef[Length]
. The width of the drawing area. -
bitmapHeight
:SrdRef[Length]
. The height of the drawing area.
A class that represents an image.
url
:String
. The URL of the image's source.
A class that represents a video.
sourceArray
:Array[VideoSource]
. The sources and types of the video.trackArray
:Array[VideoTrack]
. The tracks and subtitles of the video.controls
:bool
. The video have controls button or not.autoplay
:bool
. The video will be auto played or not.
A class that represents a video source.
src
:String
. The source of the video.videoType
:String
. The type of the video.
A class that represents a video track like subtitle.
src
:String
. The source of the track.kind
:String
. The kind of the track.srclang
:String
. The language of the track.label
:String
. The label of the track.
A class that represents a picture HTML element.
sourceArray
:Array[ImageSource]
. The sources and max width of the Picture.
handler this.setChild (child: temp_ref[SrdRef[Image]]);
Sets the child component of this Picture.
parameters:
child
the Image we want displayed inside the Picture.
A class that represents a Picture source.
src
:String
. The source of the Image.maxWidth
:String
. The max width of the Image.
A class for displaying static text.
Text();
Text(text: String);
Text(tag: String, text: String);
The third version of the initialization function allows the user to specify the HTML tag to use
to render the text. By default this widget uses span
, but with the third init function the user
can specify a different tag, like h1
for example.
-
text
:String
. The text of this component. -
targetId
:String
. The identifier of the object that is linked to this text, for example a text beside text input field that tell us that this text input is for username.
Displays a button.
text
:String
. The text we want to show on the button.
A text entry box.
-
text
:String
. The entered text. -
placeholder
:String
. A value that appears before the user enters anything, to clarify what to enter.
def onChanged: DomEventSignal[TextInput, Int];
Gets fired when the entered text changes.
def onKeyPress: DomEventSignal[TextInput, String];
Gets fired when a key is pressed.
def onKeyUp: DomEventSignal[TextInput, String];
Gets fired when we a keypress ends.
A user input field.
-
text
:String
. The entered value. -
inputType
:String
. The type of input values. -
disabled
:Bool
. Whether the input box is disabled. -
placeholder
:String
. A value that appears before the user enters anything, to clarify what to enter.
def onChanged: DomEventSignal[Input, Int];
Gets fired when the entered value changes.
def onKeyPress: DomEventSignal[Input, String];
Gets fired when a key is pressed.
def onKeyUp: DomEventSignal[Input, String];
Gets fired when we a keypress ends.
A widget that displays a multi-choice input.
items
:Map[String, String]
. The choices we want the user to choose from.
def onChanged: DomEventSignal[Select, Int];
Gets fired when the selected value is changed.
handler this.getSelectedValue(): String;
Returns the value of the currently selected item.
handler this.selectValue(newValue: String);
Changes the current selection.
A class that displays a hyperlink.
-
url
:String
. The address of the target page. -
child
:SrdRef[Widget]
. The widget contained in the hyperlink, like a text or an image. -
newTab
:Bool
. Determins if the address will be opened in a new tab or the current one.
handler this.setChild (child: temp_ref[SrdRef[Widget]]);
Sets the child component of this hyperlink.
parameters:
child
the widget we want displayed inside the hyperlink.
A class used to show an HTML or Markdown document.
DocView();
DocView(html: String);
The second version of the initialization function creates a new DocView and initializes it with the provided HTML text.
handler this.setHtml(html: String);
Sets an HTML document as the scene.
handler this.setMarkdown(md: String);
handler this.setMarkdown(md: String, linksInNewTab: Bool);
Sets a Markdown document as the scene. The second form allows specifying whether hyperlinks in the document opens in the same browser tab or a new one. The first form opens links in the same tab.
An area in which you can view another web page, i.e. an iframe.
url
:String
. The URL of the page to view.
handler this.postMessage(msgType: CharsPtr, msgBody: CharsPtr);
Posts an arbitrary message to the window of the loaded site.
class MouseMovePayload {
def posX: Float;
def posY: Float;
def deltaX: Float;
def deltaY: Float;
}
A class that holds mouse move payload information.
posX
cursor x coordinate.
posY
cursor y coordinate.
deltaX
the change in position on x axis.
deltaY
the change in position on y axis.
class MouseButtonPayload {
def button: Int;
def posX: Float;
def posY: Float;
}
A class that holds mouse button payload information.
button
the clicked button.
posX
cursor x coordinate.
posY
cursor y coordinate.
class TouchPayload {
def identifier: String;
def screenX: Float;
def screenY: Float;
def clientX: Float;
def clientY: Float;
def pageX: Float;
def pageY: Float;
def radiusX: Float;
def radiusY: Float;
def rotationAngle: Float;
def force: Float;
def changed: Bool;
}
This class carries information of a single touch in a touch event. A touch event has an array of this type representing all touches happening simultaneously.
identifier
A unique identifier to enable differentiating touchs from each other in consecutive
touch events.
screenX
The X coordinate of the touch relative to the screen.
screenY
The Y coordinate of the touch relative to the screen.
clientX
The X coordinate of the touch relative to the browser.
clientY
The Y coordinate of the touch relative to the browser.
pageX
The X coordinate of the touch relative to the document. This value takes into consideration
the scroll status of the page and gives the coordinate as if the entire page is visible on the
screen.
pageY
The Y coordinate of the touch relative to the document. This value takes into consideration
the scroll status of the page and gives the coordinate as if the entire page is visible on the
screen.
radiusX
The X radius of the ellipse that most closely circumscribes the area of contact with the
screen.
radiusY
The Y radius of the ellipse that most closely circumscribes the area of contact with the
screen.
rotatoinAngle
The angle (in degrees) that the ellipse described by radiusX and radiusY must be
rotated, clockwise, to most accurately cover the area of contact between the user and the surface.
force
The amount of pressure being applied to the surface by the user, as a float between 0.0
(no pressure) and 1.0 (maximum pressure).
changed
Specifies whether this touch has been changed or added in the current event.