Using the following JSON-file as data-model bound as
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:
sbfs file with the following to create a single window, with a size of
600 units and the title
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.
window property defines and initiates the existence of a window with a 2D-Graphics context, inside which elements can be laid out for drawing.
Give the window a white background.
The window defines a simple box that can have formatting properties applied to it, like the
A line-comment begins with two slashes (
//) and ends on the next linebreak.
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
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.
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.
Add the time information to the list elements, and also calculate and display the duration of each event.
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
flow (horizontal direction).
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 (
this.name 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.
All events happening after 20 o'clock shall have a translucent purple background, and some padding is applied.
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.
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.