Superimposed Behaviour & Formatting Script



Using the following JSON-file as data-model bound as myData:


Note: It is assumed that the data is parsed in such a way that type-information is added to the values contained within.

Assuming the following setup for the engine:



Step 1: Creation of window & drawing-context

Create a sbfs file with the following to create a single window, with a size of 800 by 600 units and the title My Window.


The obj-statement defines new virtual objects, whose lifetime is bound to the lexical scope they are defined in. In this case, an unnamed object is defined and then used as window.

The window property defines and initiates the existence of a window with a 2D-Graphics context, inside which elements can be laid out for drawing.

Step 1.5: Background-color and comments

Give the window a white background.


The window defines a simple box that can have formatting properties applied to it, like the background-property.

A line-comment begins with two slashes (//) and ends on the next linebreak.

Step 3: Data selectors

Make the window a simple vertical list, then add the elements from the events list (located in the myData data-source/model) to it.


Any box can have children-elements within it, which can be automatically laid out trough a layout-manager. A layout-manager is set trough the layout-property. Some layout-manager's may attach sub-properties to layout. In this case, the flexbox-layout is used, with the flow (direction) set to column (vertical).

The get-statement attaches any number of elements as children into the element the statement is located in. Following the statements symbol there is a selector which, in this case, takes all elements (*) within the element events, from the myData model, and trough the get-statement attaches these to the parent element.

The content-property accepts anything which can be drawn by the rendering system, in this case the member name from the current element (accesible trough this), and passes it along to the renderer, thus making the element eligible for taking part in layout and drawing.

Step 4: Virtual selectors

Add the time information to the list elements, and also calculate and display the duration of each event.


The content-property can accept a list of arbitrary elements (by using the list operator: [ ... ]), which are then threated as children to the current element.

Layout is again set to flexbox, but this time in row-flow (horizontal direction).

The for-statement selects elements from the virtual tree of elements constructed by the script, using the same selector syntax as the get-statement. Here the first child ( in this case) is selected and has the grow-property applied, which makes the element take up as much space as possible, thus pushing all other elements to the right.

Step 5: Conditions

All events happening after 20 o'clock shall have a translucent purple background, and some padding is applied.


The if-statement applies a set of rules whenever(!) the condition given to it evaluates to true. This statement is declarative and reactive; if the data-model changes the if-statement is re-evaluated. Here the condition is a simple check if the start of the event happens, relative to the day, after the 20-hour mark. If that is the case, the background of the element is translucent purple.

All elements except the first (eg: start, end & duration) are selected and have some padding applied to their left, so they are not sticking right up to each other.

Step 6: Events

Replacing the usage of this with a explicit name, that can be used anywhere in the lower lexical scopes.

A 'button' with an icon is added to each event, that deletes that event from the data-model.