The sample app is a pixel painter. You can click to color a pixel, drag the mouse to draw, use the keyboard arrows to draw, and you can change the color with the four buttons. All that in less than 70 lines, with no HTML.
So how does the framework work ?
To give you an idea, I will explain the functions used in the pixel painter.
The loop at the beginning is only to initialize the data table used for the rendering. Through a data-binding function, every changes in the data will immediately be send to the view, as we will see later.
Then, the function append() is where we define the view.
First we define a local style tag, only available to the current app module and its children. O is a global object that contains functions to create all basic HTML tags, with some methods to handle events and bind data.
Then we define the table that will show the pixels. To do this we utilize chained functions:
- The first, O.table() initialize the table.
- The second, mousedown(target, function), defines a “mousedown” event listener that will set the boolean “draw” to true, allowing the user to draw by moving the mouse. The target parameter is the object on which targeted by “this” on the function “function”.
- Then addFor(start, end, inc, function) is a chained function that will execute a loop from start (optional) to end, incrementing by inc (optional), and append the return value of the function to the current object (in this case the table).
The function is an arrow function, so that it refers to the app object through “this”, and it returns a table row : O.tr()
- Then we loop a second time to create the cell O.td().
There we define a click event handler that will record the current position and also set a new color to the corresponding cell in the data table “painter”.
- We defines a mouseover event that change the data table “painter” color value if the draw boolean == true.
- Finally, and probably the most important part, we link the CSS property “background-color” of the view cell to the data cell color value. Now each change of the color value in the data will automatically and immediately change the color on the screen.
We could have done the same by changing the CSS directly in the event handlers, but the advantage of doing this data binding is that it’s a lot easier to directly save the “painter” table in a JSON object for other uses than extracting the color values of the View. This way we avoid mixing the View and the Model.
Once the table is initialized, what’s left to do is to add a few buttons to change the color. For this we use the B object which is a BootStrap extension of the O object
- B.row( …args ) appends its args to a BootStrap row. The function works this way: B.row ( “Object to append”, "Optional width in columns ", “Optional offset (negative number)”, “New Object to append”)
- Nothing new for the buttons.
- O or B.inputColor(target, propertyName) is a function that create a input color HTML object, and do a two way data-binding on its value on target.propertyName. So each change of propertyName will change the value of the input, and each change of the input value will change the value of propertyName.
Finally we had a two event listeners on “document”, to detect the keyboard input, and to detect the mouseup event to stop drawing (in the case where the mouse is outside the table when the user release the button)
That’s all for the app. I will update this post later to explain the current possibilities of the framework.