Once you have set up an Olympe project you can start adding new coded bricks. This is done in two steps:
- Create a brick interface using DRAW
- Implement it with CODE
In this example we will create a simple function that takes as parameters a string
s and an integer
n and returns
s with a space inserted every
n characters and the number of chunks in
Open your project in DRAW. On the right-hand side, the marketplace provides you all the objects you can create. Select
Coded Function and drop it in your project. Give it a name (this tutorial will use
String Spacer) and open it.
You are provided with two buttons to create the function's inputs and outputs, respectively. Use
Add input to create two inputs:
- a first input named
- a second input
Add output to create two outputs:
spaced sof type
The interface of your brick is ready. You can generate the JS code skeletton using button
Generate brick code in the screen top right corner. You will be offered to download the JS file
StringSpacer.js. Store it in the
src/bricks folder generated by yeoman when initializing the project.
NB You may have to restart webpack for it to serve correctly your new file. Any further changes to that file will be automatically propagated to the browser.
StringSpacer.js in an editor. The files contains a single class
StringSpacer, which contains a single method
onUpdate. Implementing the brick consitst in implementing this method.
onUpdate takes as parameters the inputs you defined in DRAW,
n. It also takes as parameters the brick's output setters,
setChuncks. The method expects no
return statement as the brick's outputs are set using their respective setter functions.
Find the line
and replace it with the brick implementation:
Return in DRAW and click on
Run button in the screen top right corner. This opens a popup that lets you enter a value for each function input and displays the output values.