Hello, Cells

In the first mission, we learned that mxWeb is just thinly wrapped HTML and CSS. Yawn.

In this mission, we learn how to leverage the Matrix reactive engine to make applications dynamic. Effortlessly. No Flux-pattern required. Yay.

lesson objective

Achieving simple GUI dynamism by using simple, reactive Matrix Cells.

background

This mission starter code already includes a working, reactive example: a DOM clock updating "magically" as the CLJS clock time gets reset under user control. The "magic" is just mxWeb internals piping state change:

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

mxWeb is a hefty example of wrapping non-reactive things in what we call "glue code", so those things will play well with reactive app code. We do this simply because reactive systems are so easy to build, so reliable, and so flexible that we want to use reactivity everywhere.

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:

• be a button;
• the button label show how many times it has been clicked...
  • ...so it should start at zero;
• the counter should be DOM-disabled when the count gets to three;
• once disabled, the button label should show that it has maxxed out.

The source code for this mission panel is here.

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

Comments in the code will help you complete this mission.