Reflex exercises: DOM

Posted on September 28, 2017

If you haven’t done it already, I’d work through the Dynamic exercises, since these build from there.

None of these exercises will change the overall behavior of our application, but they will result in some visual changes.

You’ll probably want to copy pieces of your solutions from exercise to exercise as they progress.

The first change

We’re going to start displaying some of this information ourselves.

The input is going to become:

and the output is going to become an Event t Text which fires with the name of the product whenever a sale is made.

The shape of the solution will be:

This widget will be laid out on the page inside of a <table> element, which you need to take into account.

You have access to a function which might be handy to format Money values:

You can play with this in a browser by running:

> nix-shell
nix-shell> ./ex09.sh

from the exercises directory and then visit http://localhost:8080 in your browser (although there is currently a bug in jsaddle-warp effecting Firefox).

It should update the browser every time that you save your code while it is in a compilable state.

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but perhaps styled a little differently.

Hints

The row containing the “Buy” button might look something like this:

There is a solution in src/Ex09/Solution.hs, which you should look at when you’re done or if you give up.

The second change

We’re going to change the layout a little, by using the Bootstrap library from Twitter.

Instead of making that change directly, write two functions:

and refactor your code to make use of row.

For example, buyRow will now look like this:

Now change grid and row to make use of Bootstrap.

This is the change to grid:

The new version of buyRow would look like this if we hadn’t written row:

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but styled closer to what we had before.

Hints

There is a solution in src/Ex10/Solution.hs, which you should look at when you’re done or if you give up.

The third change

We’re going to write the widget that display information about the stock in the machine:

You have access to this function:

which acts like a radio button.

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but perhaps styled a little differently.

Hints

Remember that you still have row.

There is a solution in src/Ex11/Solution.hs, which you should look at when you’re done or if you give up.

The fourth change

The blog post covered working with checkboxes, so we will use them to write something like a radio button:

When your solution is working there should always be exactly one checkbox that is selected.

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but perhaps styled a little differently.

Hints

You can use getPostBuild to get hold of an Event you can use to sample dValue. This will be handy if you need an Event with the value of dValue at the moment the checkbox was laid on the page:

although are quite a few different ways to approach this problem.

What happens if we use sample . current $ dValue to get hold of the initial value?

There is a solution in src/Ex12/Solution.hs, which you should look at when you’re done or if you give up.

The fifth change

Now we’re going to construct a proper radio button:

and adapt our code to use it.

A radio button is an input element the following attributes:

  • the type is radio
  • there is a name attribute that has the same value for all buttons in the group
  • there is a checked attribute (which has no value) present if and only if the button is selected

We want to return an Event t a when this button is clicked.

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but perhaps styled a little differently.

Hints

This will use some of the tools we have for customizing elements.

There is a solution in src/Ex13/Solution.hs, which you should look at when you’re done or if you give up.

The sixth change

The time has come to tie it all together.

Use the pieces that we’ve built up to define:

This is the vending machine application.

For bonus points, go through and style it and really make it your own.

What it should look like

If you succeed, you should get something that behaves like this:

which should be similar to what we had before, but perhaps styled a little differently.

Hints

You can use mkStock to create your Dynamic t Stocks given your vend event:

You can display the stock information on the page using stockWidget:

although you’ll need to combine those selection Events to come up with an appropriate Dynamic t Text to feed it.

Everything else should already be there.

There is a solution in src/Ex14/Solution.hs, which you should look at when you’re done or if you give up.

We’re preparing educational materials about the reflex library, and using it to see what exciting things we can do with FRP.

> Dave Laing

Dave is a programmer working at the Queensland Functional Programming Lab.