It's Just HTML and CSS

lesson objective

mxWeb is just thinly wrapped HTML/CSS.

background

mxWeb syntax parallels HTML syntax.

• HTML tags such as DIV and SPAN are mxWeb functions div and span;
• mxWeb tag function signatures mirror HTML tag syntax:
  • HTML: <tag attributes*> content* </tag>
  • mxWeb: (tag [{HTML-attributes*} [{custom-attributes*}]] content*)

If you do not like mentally parsing Bauckus-Naur, the square brackets above translate to all these being legal:

• (span "Hi, Mom!")
• (span {:style "color:red"} "Hi, Mom!")
• (span {} {:birthday "March 4, 1953"} "Hi, Mom!")
• ...but not (span {} {:style "color:red"} "Hi, Mom!") because mxWeb will not pass the color along to the DOM;
• ...and not (span {:birthday "March 4, 1953"} "Hi, Mom!") because mxWeb will not know how to tell the DOM about Mom's birthday.

mission requirement

To complete this mission, you need to add one button to the "It's Just HTML" mission panel, with an onclick handler which will be provided.

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 for ideas.

writing the button code

Hint: In HTML, we would write the pseudo-code:

<button onclick=its-just-html-click-handler>
   Accomplish Mission
</button>

Another hint: A "hello, world" exercise might be to add a simpler bit of mxWeb DOM. Find "Your button code here" in the source and add:

(span "Hi, Mom")

A second warm-up exercise:

(span {:style "color:red;font-size:2em"
       :onclick (fn [e] (prn "onclick sees:" e))} "Hi, Mom!")

So now just translate the HTML in the first hint, emulating the warm-up exercises, and you will accomplish your first mission!

Tech notes for the reactive cognoscenti

1. The mxWeb programmer does not need to think about so-called "view functions", or dividing their view hierarchies up into reasonable sized chunks; mxWeb manages each DOM element separately. Even where we see a (div ...) with many children, behind the scenes mxWeb maintains each DOM node separately, so a change, say, to the disabled attribute of a child element in a large tree never requires any more code than directly altering that attribute of that DOM element.
2. Put differently, mxWeb does not involve VDOM. Instead, we instantiate long-lived proxy CLJS objects that stay around to manage their DOM counterparts. These proxy objects leverage the reactive power of Matrix to build efficient, dynamic web pages.