Objects

NextSurface provides several built-in implementations of Abstract objects. Each implementation extends the a base class adding properties and functions. Since JavaScript doesn't have the concept of subclass, the extension is implemented modifing a prototype object which is created from the base class. The majority of abstract objects are extension of Component class for building a rich user interface. Other abstract objects are extensions of LayoutManager and GestureRecognizer.

Components

Balloon

Balloon provides a component with a balloon shaped background.

Some examples:

var width = runtime.windowFrame.width * 0.6;
var height = runtime.windowFrame.height * 0.6;

var component = runtime.createComponent("balloon", new Rect(0, 0, width, height));

component.identifier = "some-balloon";
component.backgroundColor = new Color(0.4,0.4,0.4,1);
component.foregroundColor = new Color(1.0,1.0,1.0,1);
component.lineWidth = 10; // pixels
component.stroke = true;
component.fill = true;

runtime.rootComponent = component;
    

Bezier

Bezier provides a component for creating shapes using a Bezier path.

PropertyTypeRead-OnlyDescription
lineWidthNumbernoLine width
strokeBooleannoTrue means that the border is stroken with foreground color. False means the border is transparent
fillBooleannoTrue means that the shape is filled with background color. False means the shape is transparent
FunctionsInputOutputDescription
moveToPoint(p)PointMove current point to a given point
lineToPoint(p)PointAdd a line from current point to a given point
curveToPoint(p, q1, q2)Point
Point
Point
Add a curved line from current point to a given point. The line is defined by the final point and two control points
relativeMoveToPoint(p)PointMove current point to a given point using relative coordinates
relativeLineToPoint(p)PointAdd a line from current point to a given point using relative coordinates
relativeCurveToPoint(p, q1, q2)Point
Point
Point
Add a curved line from current point to a given point using relative coordinates. The line is defined by the final point and two control points
appendOvalInRect(rect)RectAppend a oval to current path. The oval is defined by the enclosing rectangle
appendRect(rect)RectAppend a rectangle to current path
appendRoundRect(rect, radiusX, radiusY)Rect
Number
Number
Append a rounded rectangle to current path with a given radius
close()Close current path

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("bezier", new Rect(0, 0, size, size));

component.identifier = "some-bezier";
component.backgroundColor = new Color(0,0,1,1);
component.foregroundColor = new Color(1,1,1,1);
component.lineWidth = 10; // pixels
component.lineToPoint(new Point(0.5, 1.0));
component.lineToPoint(new Point(1.0, 0.0));
component.lineToPoint(new Point(0.0, 0.0));
component.close();

runtime.rootComponent = component;
    

Button

Button provides a component which implements a button with optional image and text.

PropertyTypeRead-OnlyDescription
pressedBackgroundColorColornoContainer background color when button pressed
releasedBackgroundColorColornoContainer background color when button released
pressedForegroundColorColornoContainer foreground color when button pressed
releasedForegroundColorColornoContainer foreground color when button released
horizontalBooleannoOrientation of the component
valuePointnoValue of the component
pressedBooleannoTrue means the button is pressed. False means the button is released
fitBooleannoTrue means the image is scaled to fit the component. False means the image is centered in the component but doesn't use all space available
toggleBooleannoTrue means the button has two stable states, pressed and released. False means the button has only one stable state which is released, and pressed is a unstable state
styleStringnoStyle of the component. Valid values are rounded and squared
imageImagenoIcon of the button
textStringnoText of the button
fontNameStringnoFont name of the component. The font must be available among the system fonts
fontSizeNumbernoFont size of the component. The size represents a percentage of the height of the component
onDidChangeFunctionnoCallback invoked when value has changed
onButtonPressedFunctionnoCallback invoked when button is pressed
onButtonReleasedFunctionnoCallback invoked when button is released
CallbackInputOutputDescription
onDidChange(value)Value changed
onButtonPressed()Button pressed
onButtonReleased()Button released

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("button", new Rect(0, 0, size / 5, size / 5));

component.identifier = "some-button";
component.pressedBackgroundColor = new Color(1,0,0,1);
component.releasedBackgroundColor = new Color(0.5,0,0,1);
component.pressedForegroundColor = new Color(0,1,1,1);
component.releasedForegroundColor = new Color(0,0.5,0.5,1);
component.image = new Image("icon-draw.png");

component.onButtonPressed = function() {
    console.log("Button pressed");
};

component.onButtonReleased = function() {
    console.log("Button released");
};

runtime.rootComponent = component;
    

Canvas

Canvas provides a component for drawing simple shapes.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current content
paths[Path]yesCopy of internal list of paths
FunctionInputOutputDescription
addPath(path)PathAdd a path to the internal list of paths
removePath(path)PathRemove a path from the internal list of paths
clear()Remove everything from the canvas

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var component = runtime.createComponent("canvas", new Rect(0, 0, size, size));

component.identifier = "some-canvas";

component.lineColor = new Color(0,0,0,1);
component.lineWidth = 0.02;

var gestureRecognizer = runtime.createGestureRecognizer("generic");

gestureRecognizer.onDidAddCursor = function (cursor, canvasComponent) {
    if (!cursor.isTouch) {
        return;
    }

    var path = cursor.path;
    if (path != null) {
        var frame = canvasComponent.frame;
        var center = new Point(frame.x,frame.y);
        var scale = new Size(frame.width,frame.height);
        var rotation = canvasComponent.frameRotation;
        var strokeColor = canvasComponent.lineColor;
        var lineWidth = canvasComponent.lineWidth;
        path.attributes = new PathAttributes(center,scale,rotation,lineWidth,strokeColor);
        canvasComponent.addPath(path);
        canvasComponent.redraw();
    }
};

gestureRecognizer.onDidUpdateCursor = function (cursor, canvasComponent) {
    if (!cursor.isTouch) {
        return;
    }

    canvasComponent.redraw();
}

gestureRecognizer.onDidRemoveCursor = function (cursor, canvasComponent) {
    if (!cursor.isTouch) {
        return;
    }

    if (this.cursorCount == 0) {
        if (this.elapsedTime < 0.25) {
            var paths = canvasComponent.paths;
            canvasComponent.removePath(paths[paths.length - 1]);
        }
    }

    canvasComponent.redraw();
};

component.setGestureRecognizer(gestureRecognizer);

runtime.onApplicationStopping = function() {
    gestureRecognizer.invalidate();
};

runtime.rootComponent = component;
    

Capture

Capture provides a component which displays video captured with default camera.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current capture device
startedBooleanyesTrue means the device is capturing. False means device is not enabled
onCaptureCompletedFunctionnoCallback invoked when an image has been captured
FunctionsInputOutputDescription
loadData(data)DataLoad data and update content
start()Start capturing video
stop()Stop capturing video
captureImage()Capture a single frame from the device.
The frame is generated asyncronously and a callback is invoked when the image has been captured
CallbackInputOutputDescription
onCaptureCompleted()Image captured

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("capture", rect);

component.identifier = "some-capture";
component.backgroundColor = new Color(0.0,0.0,0.0,1);

runtime.rootComponent = component;

var data = runtime.createDefaultCaptureData();
component.loadData(data);
component.start();

runtime.onApplicationStopping = function() {
    component.stop();
};
    

ColorPicker

ColorPicker provides a component for selecting a color.

PropertyTypeRead-OnlyDescription
onDidSelectionChangeFunctionnoCallback invoked when the picker has changed value
onShowPickerFunctionnoCallback invoked when the picker has been shown
onHidePickerFunctionnoCallback invoked when the picker has been hidden
selectedColorColornoSelected color
popupPositionStringnoIndicate where to locate the popup. Valid values are left and right
FunctionsInputOutputDescription
showPicker()Show the color picker
hidePicker()Hide the color picker

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("colorpicker", new Rect(0, 0, size / 5, size / 5));

component.identifier = "some-colorpicker";
component.backgroundColor = new Color(0,0,0,1);
component.foregroundColor = new Color(0.2,0.2,0.2,1);
component.popupPosition = "right";

component.onShowPicker = function() {
    console.log("Show picker");
}

component.onHidePicker = function() {
    console.log("Hide picker");
}

component.onDidSelectionChange = function() {
    console.log("Selected color is " + toString(this.selectedColor));
}

function toString(color) {
    return color.red + ","  + color.green + "," + color.blue + "," + color.alpha;
}

component.showPicker();

runtime.rootComponent = component;
    

Frame

Frame provides a component which implements a configurable container.

PropertyTypeRead-OnlyDescription
onWillLoadComponentFunctionnoCallback invoked when the frame begins loading
onDidLoadComponentFunctionnoCallback invoked when the frame finishes loading
onShouldRemoveComponentFunctionnoCallback invoked when frame is ready to be removed
onDidAddComponentFunctionnoCallback invoked when frame has been added to a container
onWillRemoveComponentFunctionnoCallback invoked when frame is about to be removed from a container
onDidActivateComponentFunctionnoCallback invoked when frame has been activated
onDidDeactivateComponentFunctionnoCallback invoked when frame has been deactivated
onDidUpdatePositionFunctionnoCallback invoked when frame transformation has been updated
onDidChangePositionFunctionnoCallback invoked when frame transformation has been changed
onDidReceiveTimeoutFunctionnoCallback invoked when countdown reaches zero
onDoRefreshFunctionnoCallback invoked when frame is displayed
borderEnabledBooleannoTrue means that the frame has a border
showBorderBooleannoTrue means that the border is visible. False means the border is hidden
showPagesBooleannoTrue means that the overlay page is visible. False means the overlay page is hidden
activePageStringnoIdentifier os current overlay page
countdownNumbernoCurrent countdown
shadowEnabledBooleannoTrue means that the frame has a shadow
shadowColorColornoColor of the shadow
activeColorColornoColor of the border when component is active
stopCountdownWhenActiveBooleannoTrue means that the countdown stops when component is active
overlayComponentComponentnoComponent representing overlay
contentComponentComponentnoComponent representing content
drawBackgroundBooleannoTrue means that the frame has a background. False means that the frame is transparent
FunctionsInputOutputDescription
setNeedsPageRedraw()Signal that the page needs to be redrawn
pageForKey(key)StringPageReturn the page by a given identifier
setPageForKey(key, page)String
Page
Assign the page to a given identifier
startCountdown()Start the countdown
stopCountdown()Stop the countdown
pageImage()ImageCreate a snapshot of overlay page
contentImage()ImageCreate a snapshot of frame's content excluding overlay page
componentImage()ImageCreate a snapshot of frame's content
shouldRemoveComponent()Signal frame should be removed
findComponent(identifier)StringComponentFind a component by identifier among the list of children
addComponent(component)ComponentAppend a component at the end of the list of children
removeComponent(componentComponentRemove a component from the list of children
insertComponentAfter(component, otherComponent)Component
Component
Insert a component after a given component in the list of children
insertComponentBefore(component, otherComponent)Component
Component
Insert a component before a given component in the list of children
toFront()ComponentMove a component at the beginning of the list of children
toBack()ComponentMove a component at the end of the list of children
layoutComponents()Ask layout manager to position children
setLayoutManager(layoutManager)LayoutManagerAssociate a layout manager to the container
setConstraint(constraint, identifier)LayoutConstraint
String
Assign a layout constraint to a component.
Please note that layout manager must be set before creating a constraint
CallbackInputOutputDescription
onWillLoadComponent()Component has started loading
onDidLoadComponent()Component has finished loading
onShouldRemoveComponent()Component should be removed
onDidAddComponent()Component has been added
onWillRemoveComponent()Component is being removed
onDidActivateComponent()Component has been activated
onDidDeactivateComponent()Component has been deactivated
onDidChangeComponent()Component has changed
onDidUpdatePosition()Component transform updated
onDidChangePosition()Component transform changed
onDidReceiveTimeout()Component timeout occurred
onDoRefresh()Component has been refreshed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var mapComponent = runtime.createComponent("map", new Rect(0, 0, 1, 1));

mapComponent.dispatchEvents = true;

var frameComponent = runtime.createComponent("frame", new Rect(0, 0, size, size));

frameComponent.identifier = "some-frame";
frameComponent.showBorder = true;
frameComponent.borderEnabled = true;
frameComponent.drawBackground = true;
frameComponent.dispatchEvents = false;
frameComponent.activeColor = new Color(0.4,0.4,0.4,1);
frameComponent.backgroundColor = new Color(0.0,0.0,0.0,1);
frameComponent.contentComponent = mapComponent;

frameComponent.onDoRefresh = function() {
    console.log("onDoRefresh");
};

runtime.rootComponent = frameComponent;
    

Grid

Grid provides a component which implements a grid container. The children of a grid container are positioned in order to fit the space of the grid

Some examples:

var gridComponent = runtime.createComponent("grid", new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height));

function createCommand(command) {
    var component = runtime.createComponent("command", new Rect(0, 0, runtime.windowFrame.width / 5, runtime.windowFrame.width / 5));
    component.image = new Image(command.icon);
    component.identifier = command.label;
    return component;
}

var commands = [
    { "label": "up",          "icon": "icon-up.png" },
    { "label": "down",        "icon": "icon-down.png" },
    { "label": "left",        "icon": "icon-left.png" },
    { "label": "right",       "icon": "icon-right.png" },
    { "label": "left-up",     "icon": "icon-left-up.png" },
    { "label": "right-up",    "icon": "icon-right-up.png" },
    { "label": "left-down",   "icon": "icon-left-down.png" },
    { "label": "right-down",  "icon": "icon-right-down.png" },
    { "label": "begin",       "icon": "icon-begin.png" },
    { "label": "end",         "icon": "icon-end.png" },
    { "label": "zoom",        "icon": "icon-zoom.png" },
    { "label": "draw",        "icon": "icon-draw.png" },
    { "label": "email",       "icon": "icon-email.png" },
    { "label": "clear",       "icon": "icon-clear.png" },
    { "label": "close",       "icon": "icon-close.png" },
    { "label": "home",        "icon": "icon-home.png" },
    { "label": "capture",     "icon": "icon-capture.png" },
    { "label": "maximize",    "icon": "icon-maximize.png" },
    { "label": "minimize",    "icon": "icon-minimize.png" },
    { "label": "keys",        "icon": "icon-keys.png" },
    { "label": "minus",       "icon": "icon-minus.png" },
    { "label": "plus",        "icon": "icon-plus.png" },
    { "label": "play",        "icon": "icon-play.png" },
    { "label": "stop",        "icon": "icon-stop.png" },
    { "label": "pause",       "icon": "icon-pause.png" },
    { "label": "clear-text",  "icon": "icon-clear-text.png" }
];

for (var i = 0; i < commands.length; i++) {
    gridComponent.addComponent(createCommand(commands[i]));
}

gridComponent.layoutComponents();

runtime.rootComponent = gridComponent;
    

Image

Image provides a component which displays a image.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current content
imageImagenoImage representing current content
fitBooleannoTrue means the image is rescaled to fit the component. False means the image is centered in the component
FunctionsInputOutputDescription
loadData(data)DataLoad data and update content

Some examples:

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/zigzag-drawing.png");

// Check if runtime has a component type for a given URL
if (runtime.isComponentAvailableForURL(url)) {

  // Get component type for a given URL
  var type = runtime.componentTypeForURL(url);

  var component = runtime.createComponent(type, new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height));

  component.backgroundColor = new Color(0.0,0.0,0.0,1);

  runtime.rootComponent = component;

  // Load data asynchronously (UI toolkit won't freeze)
  runtime.createComponentDataFromURL(
      url,
      function (data) {
          component.loadData(data);
      }
  );
}
    

Joystick

Joystick provides a component which implements a joystick.

PropertyTypeRead-OnlyDescription
pressedBackgroundColorColornoContainer background color when joystick pressed
releasedBackgroundColorColornoContainer background color when joystick released
pressedForegroundColorColornoContainer foreground color when joystick pressed
releasedForegroundColorColornoContainer foreground color when joystick released
horizontalBooleannoOrientation of the component
valuePointnoValue of the component
styleStringnoStyle of the component. Valid values are planar and radial
onDidChangeFunctionnoCallback invoked when value has changed
CallbackInputOutputDescription
onDidChange(value)PointValue changed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("joystick", new Rect(0, 0, size / 5, size / 5));

component.identifier = "some-joystick";
component.pressedBackgroundColor = new Color(1,0,0,1);
component.releasedBackgroundColor = new Color(0.8,0,0,1);
component.pressedForegroundColor = new Color(1,1,1,1);
component.releasedForegroundColor = new Color(0.8,0.8,0.8,1);

component.onDidChange = function(point) {
    console.log("Point changed to " + point.x + "," + point.y);
};

runtime.rootComponent = component;
    

Keyboard

Keyboard provides a component which implements a keyboard.

PropertyTypeRead-OnlyDescription
onKeyDownFunctionnoCallback invoked when a key is pressed
onKeyUpFunctionnoCallback invoked when a key is released
CallbackInputOutputDescription
onKeyDown(keyboardEvent)KeyboardEventKey pressed
onKeyUp(keyboardEvent)KeyboardEventKey released

Keyboard keys mapping:

TextCodeKeyCode
ATextVK_A
BTextVK_B
CTextVK_C
DTextVK_D
ETextVK_E
FTextVK_F
GTextVK_G
HTextVK_H
ITextVK_I
JTextVK_J
KTextVK_K
LTextVK_L
MTextVK_M
NTextVK_N
OTextVK_O
PTextVK_P
QTextVK_Q
RTextVK_R
STextVK_S
TTextVK_T
UTextVK_U
VTextVK_V
WTextVK_W
XTextVK_X
YTextVK_Y
ZTextVK_Z
(TextVK_UNKNOWN
)TextVK_UNKNOWN
.TextVK_UNKNOWN
,TextVK_UNKNOWN
?TextVK_UNKNOWN
!TextVK_UNKNOWN
'TextVK_UNKNOWN
\"TextVK_UNKNOWN
_TextVK_UNKNOWN
&TextVK_UNKNOWN
TextVK_UNKNOWN
aTextVK_A
bTextVK_B
cTextVK_C
dTextVK_D
eTextVK_E
fTextVK_F
gTextVK_G
hTextVK_H
iTextVK_I
jTextVK_J
kTextVK_K
lTextVK_L
mTextVK_M
nTextVK_N
oTextVK_O
pTextVK_P
qTextVK_Q
rTextVK_R
sTextVK_S
tTextVK_T
uTextVK_U
vTextVK_V
wTextVK_W
xTextVK_X
yTextVK_Y
zTextVK_Z
/TextVK_DIVIDE
*TextVK_MULTIPLY
+TextVK_ADD
-TextVK_SUBTRACT
^TextVK_UNKNOWN
#TextVK_UNKNOWN
%TextVK_UNKNOWN
$TextVK_UNKNOWN
[TextVK_UNKNOWN
]TextVK_UNKNOWN
|TextVK_UNKNOWN
1TextVK_1
2TextVK_2
3TextVK_3
4TextVK_4
5TextVK_5
6TextVK_6
7TextVK_7
8TextVK_8
9TextVK_9
0TextVK_0
(TextVK_UNKNOWN
)TextVK_UNKNOWN
/TextVK_UNKNOWN
*TextVK_UNKNOWN
+TextVK_UNKNOWN
-TextVK_UNKNOWN
^TextVK_UNKNOWN
|TextVK_UNKNOWN
%TextVK_UNKNOWN
$TextVK_UNKNOWN
#TextVK_UNKNOWN
<TextVK_UNKNOWN
>TextVK_UNKNOWN
{TextVK_UNKNOWN
}TextVK_UNKNOWN
SPACESpaceVK_SPACE
BSBackspaceVK_BACK
RETURNReturnVK_RETURN
SWITCHSwitchVK_UNKNOWN

Some examples:

var containerComponent = runtime.createComponent("panel", new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height));

var keyboardComponent = runtime.createComponent("keyboard", new Rect(0, 0, 900, 300));

keyboardComponent.identifier = "keyboard";
keyboardComponent.backgroundColor = new Color(0.3,0.3,0.4,1);
keyboardComponent.foregroundColor = new Color(1.0,1.0,1.0,1);

var layoutManager = runtime.createLayoutManager();

containerComponent.setLayoutManager(layoutManager);

containerComponent.addComponent(keyboardComponent);

var constraint = new LayoutConstraint().withMargins("0%",null,null,"0%").withSize("80%","35%");

containerComponent.setConstraint(constraint, "keyboard");

containerComponent.layoutComponents();

runtime.onApplicationStopping = function() {
    layoutManager.invalidate();
};

keyboardComponent.onKeyDown = function(e) {
    console.log("Key pressed: " + e);
}

keyboardComponent.onKeyUp = function(e) {
    console.log("Key released: " + e);
}

runtime.rootComponent = containerComponent;
    

Map

Map provides a component which implements a geographic map.

PropertyTypeRead-OnlyDescription
onDidChangeGeometryFunctionnoCallback invoked when geometry has changed
mapZoomLevelNumbernoZoom level of map
mapScaleNumbernoScale of map
mapPositionPointnoPosition of map
mapRotationNumbernoRotation of map
FunctionsInputOutputDescription
addOverlayComponent(component)ComponentAdd component to overlay container
removeOverlayComponent(component)ComponentRemove component from overlay container
setOverlayConstraint(constraint, identifier)LayoutConstraint
String
Assign a layout constraint to component in overlay container
geoPositionToPoint(point)PointPointConvert a goegraphic location to a point in compoment coordinates
goHome()Reset position, scale, rotation, and zoom level to initial values
updateGeometry()Update geometry of the map
beginGesture(gestureEvent)GestureEventSend begin gesture event to map
updateGesture(gestureEvent)GestureEventSend update gesture event to map
endGesture(gestureEvent)GestureEventSend end gesture event to map
CallbackInputOutputDescription
onDidChangeGeometry()Geometry changed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("map", new Rect(0, 0, size, size));

component.identifier = "some-map";
component.mapZoomLevel = 2;
component.mapScale = 1;
component.mapPosition = new Point(0, -150);//TODO which unit?
component.mapRotation = 0;

component.updateGeometry();

runtime.rootComponent = component;
    

Pad

Pad provides a component which implements a pad.

PropertyTypeRead-OnlyDescription
pressedBackgroundColorColornoContainer background color when pad pressed
releasedBackgroundColorColornoContainer background color when pad released
pressedForegroundColorColornoContainer foreground color when pad pressed
releasedForegroundColorColornoContainer foreground color when pad released
horizontalBooleannoOrientation of the component
valuePointnoValue of the component
onDidChangeFunctionnoCallback invoked when value has changed
CallbackInputOutputDescription
onDidChange(value)PointValue changed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("pad", new Rect(0, 0, size / 5, size / 5));

component.identifier = "some-pad";
component.pressedBackgroundColor = new Color(1,0,0,1);
component.releasedBackgroundColor = new Color(0.8,0,0,1);
component.pressedForegroundColor = new Color(1,1,1,1);
component.releasedForegroundColor = new Color(0.8,0.8,0.8,1);

component.onDidChange = function(point) {
    console.log("Point changed to " + point.x + "," + point.y);
};

runtime.rootComponent = component;
    

Panel

Panel provides a component which implements a simple container.

PropertyTypeRead-OnlyDescription
drawBackgroundBooleannoTrue means that the panel has a background. False means the panel is transparent
FunctionsInputOutputDescription
findComponent(identifier)StringComponentFind a component by identifier among the list of children
addComponent(component)ComponentAppend a component at the end of the list of children
removeComponent(component)ComponentRemove a component from the list of children
insertComponentAfter(component, otherComponent)Component
Component
Insert a component after a given component in the list of children
insertComponentBefore(component, otherComponent)Component
Component
Insert a component before a given component in the list of children
toFront()ComponentMove a component at the beginning of the list of children
toBack()ComponentMove a component at the end of the list of children
layoutComponents()Ask layout manager to position children
setLayoutManager(layoutManager)LayoutManagerAssociate a layout manager to the container
setConstraint(constraint, identifier)LayoutConstraint
String
Assign a layout constraint to a component
Please note that layout manager must be set before creating a constraint

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var bezierComponent1 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent1.identifier = "bezier1";
bezierComponent1.backgroundColor = new Color(0,0,1,1);
bezierComponent1.foregroundColor = new Color(1,1,1,1);
bezierComponent1.lineWidth = 10; // pixels
bezierComponent1.lineToPoint(new Point(0.5, 1.0));
bezierComponent1.lineToPoint(new Point(1.0, 0.0));
bezierComponent1.lineToPoint(new Point(0.0, 0.0));
bezierComponent1.close();

var bezierComponent2 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent2.identifier = "bezier2";
bezierComponent2.backgroundColor = new Color(1,0,0,1);
bezierComponent2.foregroundColor = new Color(1,1,1,1);
bezierComponent2.lineWidth = 10; // pixels
bezierComponent2.lineToPoint(new Point(0.5, 1.0));
bezierComponent2.lineToPoint(new Point(1.0, 0.0));
bezierComponent2.lineToPoint(new Point(0.0, 0.0));
bezierComponent2.close();

var panelComponent = runtime.createComponent("panel", new Rect(0, 0, size, size));

panelComponent.identifier = "some-panel";

panelComponent.masksToBounds = true;
panelComponent.drawBackground = true;
panelComponent.backgroundColor = new Color(1.0,1.0,1.0,1.0);

var layoutManager = runtime.createLayoutManager();

panelComponent.setLayoutManager(layoutManager);

var constraint1 = new LayoutConstraint().withMargins("0%",null,null,"-25%").withSize("50%","100%");
var constraint2 = new LayoutConstraint().withMargins("0%","-25%",null,null).withSize("50%","100%");

panelComponent.setConstraint(constraint1, "bezier1");
panelComponent.setConstraint(constraint2, "bezier2");

panelComponent.addComponent(bezierComponent1);
panelComponent.addComponent(bezierComponent2);

panelComponent.layoutComponents();

runtime.onApplicationStopping = function() {
    layoutManager.invalidate();
};

runtime.rootComponent = panelComponent;
    

PDF

PDF provides a component which displays a PDF.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current content
pagePageyesCurrent page of PDF document
pageCountNumberyesNumber of pages in PDF document
FunctionsInputOutputDescription
loadData(data)DataLoad data and update content
nextPage()Jump to next page of PDF document
prevPage()Jump to previous page of PDF document

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("pdf", rect);

component.identifier = "some-document";
component.backgroundColor = new Color(0.0,0.0,0.0,1);

runtime.rootComponent = component;

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/Readme.pdf");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        console.log("Data loaded " + data.toString());
        component.loadData(data);
        rescale(component);
    }
);

function rescale(component) {
    var width = component.frameSize.width;
    var height = component.frameSize.height;
    var preferredSize = component.preferredSize;
    if (preferredSize.width > 0 && preferredSize.height > 0) {
        var ratio = preferredSize.height / preferredSize.width;
        if (width > runtime.windowFrame.width) {
            width = runtime.windowFrame.width;
        }
        height = width * ratio;
        if (height > runtime.windowFrame.height) {
            height = runtime.windowFrame.height;
            width = height / ratio;
        }
        component.frameSize = new Size(width, height);
    }
}
    

PencilPicker

PencilPicker provides a component for selecting a pencil.

PropertyTypeRead-OnlyDescription
onDidSelectionChangeFunctionnoCallback invoked when the picker has changed value
onShowPickerFunctionnoCallback invoked when the picker has been shown
onHidePickerFunctionnoCallback invoked when the picker has been hidden
selectedWidthNumbernoSelected width
popupPositionStringnoIndicate where to locate the popup. Valid values are left and right
FunctionsInputOutputDescription
showPicker()Show the pencil picker
hidePicker()Hide the pencil picker

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("pencilpicker", new Rect(0, 0, size / 5, size / 5));

component.identifier = "some-pencilpicker";
component.backgroundColor = new Color(0,0,0,1);
component.foregroundColor = new Color(0.2,0.2,0.2,1);
component.popupPosition = "right";

component.onShowPicker = function() {
    console.log("Show picker");
}

component.onHidePicker = function() {
    console.log("Hide picker");
}

component.onDidSelectionChange = function() {
    console.log("Selected width is " + this.selectedWidth);
}

component.showPicker();

runtime.rootComponent = component;
    

Player

Player provides a component which playbacks a video.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current video
playingyesTrue means the video is playing
FunctionsInputOutputDescription
loadData(data)DataLoad data and update content
play()Start playing video
stop()Stop playing video
showPrevFrame()Step to previous frame of the video
showNextFrame()Step to next frame of the video
showFirstFrame()Jump to the begin of the video
showLastFrame()Jump to the end of the video

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("player", rect);

component.identifier = "some-player";
component.backgroundColor = new Color(0.0,0.0,0.0,1);

runtime.rootComponent = component;

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/nextsurface.mp4");
//var url = new URL("https://nextbreakpoint.com/nextsurface.mp4");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        console.log("Data loaded " + data.toString());
        component.loadData(data);
        rescale(component);
        component.play();
    }
);

runtime.onApplicationStopping = function() {
    component.stop();
};

function rescale(component) {
    var width = component.frameSize.width;
    var height = component.frameSize.height;
    var preferredSize = component.preferredSize;
    if (preferredSize.width > 0 && preferredSize.height > 0) {
        var ratio = preferredSize.height / preferredSize.width;
        if (width > runtime.windowFrame.width) {
            width = runtime.windowFrame.width;
        }
        height = width * ratio;
        if (height > runtime.windowFrame.height) {
            height = runtime.windowFrame.height;
            width = height / ratio;
        }
        component.frameSize = new Size(width, height);
    }
}
    

Slider

Slider provides a component which implements a slider.

PropertyTypeRead-OnlyDescription
pressedBackgroundColorColornoContainer background color when slider pressed
releasedBackgroundColorColornoContainer background color when slider released
pressedForegroundColorColornoContainer foreground color when slider pressed
releasedForegroundColorColornoContainer foreground color when slider released
horizontalBooleannoOrientation ot the component
valueNumbernoValue of the component
angleNumbernoValue which represents the length of the arc segment of a curved slider
ratioNumbernoValue which represents the size of the arc segment of a curved slider. The size is expressed as percentage of the height of the component
styleStringnoStyle of the component. Valid values are straight, straight-and-thin, curved
textStringnoText of the slider
fontNameStringnoFont name of the component. The font must be available among the system fonts
fontSizeNumbernoFont size of the component. The size is expressed as percentage of the height of the component
minValueNumbernoMinimum value of slider
maxValueNumbernoMaximum value of slider
minSizeNumbernoSize of line of slider's knob when value is minimum. Must be a number between 0 and 1. Only for style straight-and-thin
maxSizeNumbernoSize of line of slider's knob when value is maximum. Must be a number between 0 and 1. Only for style straight-and-thin
minOpacityNumbernoOpacity of slider's knob when value is minimum. Must be a number between 0 and 1. Only for style straight-and-thin
maxOpacityNumbernoOpacity of slider's knob when value is maximum. Must be a number between 0 and 1. Only for style straight-and-thin
minBrightnessNumbernoBrightness of slider's knob when value is minimum. Must be a number between 0 and 1. Only for style straight-and-thin
maxBrightnessNumbernoBrightness of slider's knob when value is maximum. Must be a number between 0 and 1. Only for style straight-and-thin
onDidChangeFunctionnoCallback invoked when value has changed
CallbackInputOutputDescription
onDidChange(value)NumberValue changed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("slider", new Rect(0, 0, size / 2.5, size / 5));

component.identifier = "some-slider";
component.horizontal = true;
component.style = "straight-and-thin";
component.minValue = 0;
component.maxValue = 100;
component.pressedBackgroundColor = new Color(1,0,0,1);
component.releasedBackgroundColor = new Color(0.8,0,0,1);
component.pressedForegroundColor = new Color(1,1,1,1);
component.releasedForegroundColor = new Color(0.8,0.8,0.8,1);

component.onDidChange = function(value) {
    console.log("Value changed to " + value);
    this.text = Math.round(value) + "%";
};

runtime.rootComponent = component;

component.value = 50;
    

Switch

Switch provides a component which implements a switch.

PropertyTypeRead-OnlyDescription
pressedBackgroundColorColornoContainer background color when switch pressed
releasedBackgroundColorColornoContainer background color when switch released
pressedForegroundColorColornoContainer foreground color when switch pressed
releasedForegroundColorColornoContainer foreground color when switch released
horizontalBooleannoOrientation of the component
valueNumbernoValue of the component
onTextStringnoText for on state
offTextStringnoText for off state
onDidChangeFunctionnoCallback invoked when value has changed
CallbackInputOutputDescription
onDidChange(value)NumberValue changed

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("switch", new Rect(0, 0, size / 2.5, size / 5));

component.identifier = "some-switch";
component.onText = "ON";
component.offText = "OFF";
component.horizontal = true;
component.pressedBackgroundColor = new Color(1,0,0,1);
component.releasedBackgroundColor = new Color(0.8,0,0,1);
component.pressedForegroundColor = new Color(1,1,1,1);
component.releasedForegroundColor = new Color(0.8,0.8,0.8,1);

component.onDidChange = function(value) {
    console.log("Value changed to " + value);
};

runtime.rootComponent = component;
    

Text

Text provides a component which displays an editable text.

PropertyTypeRead-OnlyDescription
dataDatayesData representing current content
textStringnoString representing current content
textLengthNumberyesLength of current content
FunctionsInputOutputDescription
loadData(data)DataLoad data and update content
doKeyDown(keyboardEvent)KeyboardEventSend key down event to editor
doKeyUp(keyboardEvent)KeyboardEventSend key up event to editor
beginGesture(gestureEvent)GestureEventSend begin gesture event to editor
updateGesture(gestureEvent)GestureEventSend update gesture event to editor
endGesture(gestureEvent)GestureEventSend end gesture event to editor

Some examples:

var component = runtime.createComponent("text", new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height));

component.identifier = "some-text";
component.backgroundColor = new Color(0.0,0.0,0.0,1);
component.foregroundColor = new Color(1.0,1.0,1.0,1);

runtime.rootComponent = component;

component.loadData("Hello World !\n\nThis is NextSurface");
    

Web

Web provides a component which implements a simple web browser.

PropertyTypeRead-OnlyDescription
onCreateNewPageFunctionnoCallback invoked when browser wants to create a new page
zoomFactorNumbernoZoom factor which is applied to browser's page
dataDatayesData representing current page
webPageDatayesOpaque reference to current page
currentURLStringyesURL of current page
elementEditableBooleanyesTrue when the active element of the page is editable
FunctionsInputOutputDescription
loadData(data)DataLoad data and set new home page
doKeyDown(keyboardEvent)KeyboardEventSend key down event to browser
doKeyUp(keyboardEvent)KeyboardEventSend key up event to browser
addCursor(cursor)CursorNotify cursor was added to browser
updateCursor(cursor)CursorNotify cursor was updated to browser
removeCursor(cursor)CursorNotify cursor was removed to browser
beginGesture(gestureEvent)GestureEventSend begin gesture event to browser
updateGesture(gestureEvent)GestureEventSend update gesture event to browser
endGesture(gestureEvent)GestureEventSend end gesture event to browser
goBack()Navigate to previous page of browser's history
goForward()Navigate to next page of browser's history
goHome()Navigate to browser's home page
CallbackInputOutputDescription
onCreateNewPage(data)DataNew page requested

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width, runtime.windowFrame.height);

var component = runtime.createComponent("web", rect);

component.identifier = "some-web";

runtime.rootComponent = component;

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/hello.html");

url.writeString("<html><head><title>Welcome</title></head><body><p>Hello World !<br/><br/>This is <b>NextSurface</b></p></body></html>");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        console.log("Data loaded " + data.toString());
        component.loadData(data);
    }
);
    

GestureRecognizers

GenericGestureRecognier

GenericGestureRecognier provides a gesture recognizer which can be used to implement custom gestures.

Some examples:

var gestureRecognizer = runtime.createGestureRecognizer("generic");

gestureRecognizer.cursors = {};

gestureRecognizer.onDidAddCursor = function (cursor, component) {
    this.cursors[cursor.id] = cursor;
};

gestureRecognizer.onDidRemoveCursor = function (cursor, component) {
    delete this.cursors[cursor.id];
};

gestureRecognizer.onDidProcessGesture = function (component) {
    console.log("Cursors " + JSON.stringify(this.cursors));
};

component.setGestureRecognizer(gestureRecognizer);
    

LongTapGestureRecognier

LongTapGestureRecognier provides a gesture recognizer which responds to a prolonged tap gesture.

PropertyTypeRead-OnlyDescription
onDidBeginGestureFunctionnoCallback invoked when gesture begins. This event happens once for each gesture
onDidUpdateGestureFunctionnoCallback invoked when gesture changes. This event could happen many times for each gesture
onDidEndGestureFunctionnoCallback invoked when gesture ends. This event happens once for each gesture
CallbackInputOutputDescription
onDidBeginGesture(gestureEvent)GestureEvent
Component
Gesture started
onDidUpdateGesture(gestureEvent)GestureEvent
Component
Gesture updated
onDidEndGesture(gestureEvent)GestureEvent
Component
Gesture finshed

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width / 2, runtime.windowFrame.height / 2);

var component = runtime.createComponent("image", rect);

component.fit = true;
component.backgroundColor = new Color(0.0,0.0,0.0,1);

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/zigzag-drawing.png");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        component.loadData(data);
    }
);

var gestureRecognizer = runtime.createGestureRecognizer("longtap");

gestureRecognizer.onDidEndGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }

    var actualTransform = component.actualTransform;

    component.initialTransform = actualTransform;

    var x = actualTransform.x;
    var y = actualTransform.y;
    var sx = actualTransform.scaleX * 1.2;
    var sy = actualTransform.scaleY * 1.2;
    var rz = actualTransform.rotation;

    component.targetTransform = new Transform(x, y, sx, sy, rz, 0.2);
};

gestureRecognizer.onDidAddCursor = function (cursor, component) {
    if (cursor.isScroll) {
        this.isScroll = true;
    }
};

gestureRecognizer.onDidRemoveCursor = function (cursor, component) {
    if (this.cursorCount == 0) {
        this.isScroll = false;
    }
};

component.onChangeTransform = function() {
  if (component.initialTransform) {
      component.targetTransform = component.initialTransform;
      delete component.initialTransform;
  }
}

component.setGestureRecognizer(gestureRecognizer);

runtime.rootComponent = component;
    

SmartGestureRecognier

SmartGestureRecognier provides a gesture recognizer which responds to complex gestures performed with one or more cursors.

PropertyTypeRead-OnlyDescription
onDidBeginGestureFunctionnoCallback invoked when gesture begins. This event happens once for each gesture
onDidUpdateGestureFunctionnoCallback invoked when gesture changes. This event could happen many times for each gesture
onDidEndGestureFunctionnoCallback invoked when gesture ends. This event happens once for each gesture
CallbackInputOutputDescription
onDidBeginGesture(gestureEvent)GestureEvent
Component
Gesture started
onDidUpdateGesture(gestureEvent)GestureEvent
Component
Gesture updated
onDidEndGesture(gestureEvent)GestureEvent
Component
Gesture finshed

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width / 2, runtime.windowFrame.height / 2);

var component = runtime.createComponent("image", rect);

component.fit = true;
component.backgroundColor = new Color(0.0,0.0,0.0,1);

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/zigzag-drawing.png");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        component.loadData(data);
    }
);

var gestureRecognizer = runtime.createGestureRecognizer("smart");

gestureRecognizer.allowMove = true;
gestureRecognizer.allowScale = true;
gestureRecognizer.allowRotate = true;
gestureRecognizer.menuDisabled = false;

gestureRecognizer.onDidBeginGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }

    component.updateTransform();
};

gestureRecognizer.onDidUpdateGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }

    var rFrame = runtime.windowFrame;

    var n = event.count;

    var cx = event.centerX;
    var cy = event.centerY;
    var dx = event.translationX;
    var dy = event.translationY;
    var sx = event.scaleX;
    var sy = event.scaleY;
    var rz = event.rotation;

    if (!this.allowMove) {
        dx = 0;
        dy = 0;
    }
    if (!this.allowScale) {
        sx = 1;
        sy = 1;
    }
    if (!this.allowRotate) {
        rz = 0;
    }

    var actualTransform = component.actualTransform;

    var w = actualTransform.scaleX * sx;
    var h = actualTransform.scaleY * sy;
    var r = actualTransform.rotation + rz;

    var zoom = 3.0;

    if (w > h) {
        if (w > zoom * rFrame.width * 0.95) {
            w = zoom * rFrame.width * 0.95;
            h = w * (actualTransform.scaleY / actualTransform.scaleX);
            sx = w / actualTransform.scaleX;
            sy = h / actualTransform.scaleY;
        }
    } else {
        if (h > zoom * rFrame.height * 0.95) {
            h = zoom * rFrame.height * 0.95;
            w = h * (actualTransform.scaleX / actualTransform.scaleY);
            sx = w / actualTransform.scaleX;
            sy = h / actualTransform.scaleY;
        }
    }

    if (w < rFrame.width * 0.1) {
        w = rFrame.width * 0.1;
        h = w * (actualTransform.scaleY / actualTransform.scaleX);
        sx = w / actualTransform.scaleX;
        sy = h / actualTransform.scaleY;
    }

    var delta = 0.3;

    var c = new Point(cx, cy);
    var d = new Point(dx, dy);

    var p = new Point(actualTransform.x, actualTransform.y);

    p = component.convertPointFromContainer(p);

    var t = new Point(c.x - d.x, c.y - d.y);

    p = component.transformPoint(p, new Transform(t.x, t.y, sx, sy, rz, 0));

    var q = new Point(p.x + d.x, p.y + d.y);

    q = component.convertPointToContainer(q);

    var x = q.x;
    var y = q.y;

    if (x < -rFrame.width * 0.5 - w * delta) {
        x = -rFrame.width * 0.5 - w * delta;
    }

    if (y < -rFrame.height * 0.5 - h * delta) {
        y = -rFrame.height * 0.5 - h * delta;
    }

    if (x > rFrame.width * 0.5 + w * delta) {
        x = rFrame.width * 0.5 + w * delta;
    }

    if (y > rFrame.height * 0.5 + h * delta) {
        y = rFrame.height * 0.5 + h * delta;
    }

    component.targetTransform = new Transform(x, y, w, h, r, 0.5);
};

gestureRecognizer.onDidEndGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }
};

gestureRecognizer.onDidAddCursor = function (cursor, component) {
    if (cursor.isScroll) {
        this.isScroll = true;
    }
};

gestureRecognizer.onDidRemoveCursor = function (cursor, component) {
    if (this.cursorCount == 0) {
        this.isScroll = false;
    }
};

component.setGestureRecognizer(gestureRecognizer);

runtime.rootComponent = component;
    

TapGestureRecognier

TapGestureRecognier provides a gesture recognizer which responds to a tap gesture.

PropertyTypeRead-OnlyDescription
onDidBeginGestureFunctionnoCallback invoked when gesture begins. This event happens once for each gesture
onDidUpdateGestureFunctionnoCallback invoked when gesture changes. This event could happen many times for each gesture
onDidEndGestureFunctionnoCallback invoked when gesture ends. This event happens once for each gesture
CallbackInputOutputDescription
onDidBeginGesture(gestureEvent)GestureEvent
Component
Gesture started
onDidUpdateGesture(gestureEvent)GestureEvent
Component
Gesture updated
onDidEndGesture(gestureEvent)GestureEvent
Component
Gesture finshed

Some examples:

var rect = new Rect(0, 0, runtime.windowFrame.width / 2, runtime.windowFrame.height / 2);

var component = runtime.createComponent("image", rect);

component.fit = true;
component.backgroundColor = new Color(0.0,0.0,0.0,1);

var url = new URL("file://" + runtime.workspacePath + "/apps/docs/resources/zigzag-drawing.png");

runtime.createComponentDataFromURL(
    url,
    function (data) {
        component.loadData(data);
    }
);

var gestureRecognizer = runtime.createGestureRecognizer("tap");

gestureRecognizer.onDidBeginGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }

    var actualTransform = component.actualTransform;

    component.initialTransform = actualTransform;

    var x = actualTransform.x;
    var y = actualTransform.y;
    var sx = actualTransform.scaleX * 1.2;
    var sy = actualTransform.scaleY * 1.2;
    var rz = actualTransform.rotation;

    component.targetTransform = new Transform(x, y, sx, sy, rz, 0.5);
};

gestureRecognizer.onDidEndGesture = function (event, component) {
    if (this.isScroll) {
        return;
    }

    var actualTransform = component.initialTransform;

    component.targetTransform = actualTransform;
};


gestureRecognizer.onDidAddCursor = function (cursor, component) {
    if (cursor.isScroll) {
        this.isScroll = true;
    }
};

gestureRecognizer.onDidRemoveCursor = function (cursor, component) {
    if (this.cursorCount == 0) {
        this.isScroll = false;
    }
};

component.setGestureRecognizer(gestureRecognizer);

runtime.rootComponent = component;
    

LayoutManagers

GenericLayoutManager

GenericLayoutManager provides a layout manager which can be used to implement a custom layout.

PropertyTypeRead-OnlyDescription
onLayoutNeededFunctionnoCallback invoked when components layout is requested
CallbackInputOutputDescription
onLayoutNeeded(components)Component[]
Layout requested

BoxLayoutManager

BoxLayoutManager provides a layout manager which aligns components horizontally or vertically.

PropertyTypeRead-OnlyDescription
horizontalBooleannoTrue means the components are positioned on a row. False means the components are positioned on a column

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var bezierComponent1 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent1.identifier = "bezier1";
bezierComponent1.backgroundColor = new Color(0,0,1,1);
bezierComponent1.foregroundColor = new Color(1,1,1,1);
bezierComponent1.lineWidth = 10; // pixels
bezierComponent1.lineToPoint(new Point(0.5, 1.0));
bezierComponent1.lineToPoint(new Point(1.0, 0.0));
bezierComponent1.lineToPoint(new Point(0.0, 0.0));
bezierComponent1.close();

var bezierComponent2 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent2.identifier = "bezier2";
bezierComponent2.backgroundColor = new Color(1,0,0,1);
bezierComponent2.foregroundColor = new Color(1,1,1,1);
bezierComponent2.lineWidth = 10; // pixels
bezierComponent2.appendRect(new Rect(0, 0, 1, 1));
bezierComponent2.close();

var bezierComponent3 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent3.identifier = "bezier3";
bezierComponent3.backgroundColor = new Color(0,1,0,1);
bezierComponent3.foregroundColor = new Color(1,1,1,1);
bezierComponent3.lineWidth = 10; // pixels
bezierComponent3.appendOvalInRect(new Rect(0, 0, 1, 1));
bezierComponent3.close();

var bezierComponent4 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent4.identifier = "bezier4";
bezierComponent4.backgroundColor = new Color(1,1,0,1);
bezierComponent4.foregroundColor = new Color(1,1,1,1);
bezierComponent4.lineWidth = 10; // pixels
bezierComponent4.appendRoundRect(new Rect(0, 0, 1, 1), 0.1, 0.1);
bezierComponent4.close();

var panelComponent = runtime.createComponent("panel", new Rect(0, 0, size, size));

panelComponent.identifier = "some-panel";

panelComponent.masksToBounds = true;
panelComponent.drawBackground = true;
panelComponent.backgroundColor = new Color(1.0,1.0,1.0,1.0);

var layoutManager = runtime.createLayoutManager("box");

layoutManager.horizontal = true;

var constraint = new LayoutConstraint().withSize("25%","25%");

panelComponent.setLayoutManager(layoutManager);

panelComponent.setConstraint(constraint, "bezier1");
panelComponent.setConstraint(constraint, "bezier2");
panelComponent.setConstraint(constraint, "bezier3");
panelComponent.setConstraint(constraint, "bezier4");

panelComponent.addComponent(bezierComponent1);
panelComponent.addComponent(bezierComponent2);
panelComponent.addComponent(bezierComponent3);
panelComponent.addComponent(bezierComponent4);

panelComponent.layoutComponents();

runtime.onApplicationStopping = function() {
    layoutManager.invalidate();
};

runtime.rootComponent = panelComponent;
    

FlexLayoutManager

FlexLayoutManager provides a layout manager which positions components using layout constraints.

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var bezierComponent1 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent1.identifier = "bezier1";
bezierComponent1.backgroundColor = new Color(0,0,1,1);
bezierComponent1.foregroundColor = new Color(1,1,1,1);
bezierComponent1.lineWidth = 10; // pixels
bezierComponent1.lineToPoint(new Point(0.5, 1.0));
bezierComponent1.lineToPoint(new Point(1.0, 0.0));
bezierComponent1.lineToPoint(new Point(0.0, 0.0));
bezierComponent1.close();

var bezierComponent2 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent2.identifier = "bezier2";
bezierComponent2.backgroundColor = new Color(1,0,0,1);
bezierComponent2.foregroundColor = new Color(1,1,1,1);
bezierComponent2.lineWidth = 10; // pixels
bezierComponent2.lineToPoint(new Point(0.5, 1.0));
bezierComponent2.lineToPoint(new Point(1.0, 0.0));
bezierComponent2.lineToPoint(new Point(0.0, 0.0));
bezierComponent2.close();

var panelComponent = runtime.createComponent("panel", new Rect(0, 0, size, size));

panelComponent.identifier = "some-panel";

panelComponent.masksToBounds = true;
panelComponent.drawBackground = true;
panelComponent.backgroundColor = new Color(1.0,1.0,1.0,1.0);

var layoutManager = runtime.createLayoutManager("flex");

panelComponent.setLayoutManager(layoutManager);

var constraint1 = new LayoutConstraint().withMargins("0%",null,null,"-25%").withSize("50%","100%");
var constraint2 = new LayoutConstraint().withMargins("0%","-25%",null,null).withSize("50%","100%");

panelComponent.setConstraint(constraint1, "bezier1");
panelComponent.setConstraint(constraint2, "bezier2");

panelComponent.addComponent(bezierComponent1);
panelComponent.addComponent(bezierComponent2);

panelComponent.layoutComponents();

runtime.onApplicationStopping = function() {
    layoutManager.invalidate();
};

runtime.rootComponent = panelComponent;
    

GridLayoutManager

GridLayoutManager provides a layout manager which positions components using an adaptable grid.

Some examples:

var size = Math.min(runtime.windowFrame.width, runtime.windowFrame.height) * 0.7;

var bezierComponent1 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent1.identifier = "bezier1";
bezierComponent1.backgroundColor = new Color(0,0,1,1);
bezierComponent1.foregroundColor = new Color(1,1,1,1);
bezierComponent1.lineWidth = 10; // pixels
bezierComponent1.lineToPoint(new Point(0.5, 1.0));
bezierComponent1.lineToPoint(new Point(1.0, 0.0));
bezierComponent1.lineToPoint(new Point(0.0, 0.0));
bezierComponent1.close();

var bezierComponent2 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent2.identifier = "bezier2";
bezierComponent2.backgroundColor = new Color(1,0,0,1);
bezierComponent2.foregroundColor = new Color(1,1,1,1);
bezierComponent2.lineWidth = 10; // pixels
bezierComponent2.appendRect(new Rect(0, 0, 1, 1));
bezierComponent2.close();

var bezierComponent3 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent3.identifier = "bezier3";
bezierComponent3.backgroundColor = new Color(0,1,0,1);
bezierComponent3.foregroundColor = new Color(1,1,1,1);
bezierComponent3.lineWidth = 10; // pixels
bezierComponent3.appendOvalInRect(new Rect(0, 0, 1, 1));
bezierComponent3.close();

var bezierComponent4 = runtime.createComponent("bezier", new Rect(0, 0, 100, 100));

bezierComponent4.identifier = "bezier4";
bezierComponent4.backgroundColor = new Color(1,1,0,1);
bezierComponent4.foregroundColor = new Color(1,1,1,1);
bezierComponent4.lineWidth = 10; // pixels
bezierComponent4.appendRoundRect(new Rect(0, 0, 1, 1), 0.1, 0.1);
bezierComponent4.close();

var panelComponent = runtime.createComponent("panel", new Rect(0, 0, size, size));

panelComponent.identifier = "some-panel";

panelComponent.masksToBounds = true;
panelComponent.drawBackground = true;
panelComponent.backgroundColor = new Color(1.0,1.0,1.0,1.0);

var layoutManager = runtime.createLayoutManager("grid");

panelComponent.setLayoutManager(layoutManager);

panelComponent.addComponent(bezierComponent1);
panelComponent.addComponent(bezierComponent2);
panelComponent.addComponent(bezierComponent3);
panelComponent.addComponent(bezierComponent4);

panelComponent.layoutComponents();

runtime.onApplicationStopping = function() {
    layoutManager.invalidate();
};

runtime.rootComponent = panelComponent;
    

Are you looking for something else?


Follow NextSurface on Facebook