Hello, Cells

In the first mission, we learned that mxWeb at bottom is just HTML and CSS.

Yawn. But in this mission, we see how mxWeb leverages the Matrix reactive engine to make dynamic applications easy, without much of a framework to learn. And especially without Flux-pattern libraries such as Redux or Vuex. Yay.

lesson objective

simple GUI dynamism by connecting mxWeb to Matrix reactive cells

background

This mission starter code already includes working, reactive examples. The examples show the DOM updating "magically" as the content of the clock changes.

The "magic" is just mxWeb internals piping changes:

• from MX proxy DIV and SPAN objects
• to the DOM.

mxWeb is a hefty example of wrapping non-reactive things in what we call "glue code", so they will play well with reactive app code.

Wrapping things ourselves is straightforward, and we will do so in a later mission.

mission requirement

To complete this mission, we need to add a classic "Hello, world" example provided by reactive GUI libraries: a counter widget that simply counts when clicked, or when some button is clicked.

This mission is of the simpler kind; it does not involve more than one widget. (That comes next.)

The counter should:

• show how many times it has been clicked... ** ...so it should start at zero;
• the font-size of the counter should be one plus the modulus of the count and three;
• the counter should be disabled when the count gets to seven.

The source code for this mission panel is here.

Our new code goes where we see the comment, "Your code here."

You will see a lot of extra code just to show off a bit, including snazzy reactive code, none of which will make a lot of sense yet. Please ignore, or explore if interested in where we are headed with reactive programming.

writing the button code

Some hints. In HTML, we would write the pseudo-code:

<button onclick=helper/find-and-set("dum-dum", "success", true)()>
   Accomplish Mission
</button>