Post 11 – Sandboxed Buttons

Now we’ll look at an example available in Elm ‘s online documentation called Buttons . This example is also the example in the image simulating the basic architecture of Elm in the first part of the previous article. Our example execution sequence will be make it work and then make it nice . And the extra CSS code to make the elements more visible we’ll leave it for last, when the components can already work.

Abstraction

We will have a div displaying an integer value, accompanied by 2 buttons + and - to perform the function of increasing / decreasing the displayed value.

Initially, we need to determine the output of the program. And in the module Browser , right at the top Elm recommends using Browser.sandbox to learn the basics of interaction. This program only requires the correct minimum set of input parameters, a Record { init, view, update } that we talked about in the introduction to the basic Elm Architecture .

So if we name the program Buttons and encapsulate it in a separate module , the Main program will be fixed like this:

Here the Model record type identifiers, the Message event message type, the Buttons record initializer, and the init , view , and update programs will all be defined in the module Buttons .

To create usage records for Browser.sandbox , we need to go through the configuration of this subroutine a bit.

So we will need a Record containing the programs init , view , update as above. In the recursion way of thinking, we will pause the Buttons initializer as above to define the sub-program first.

And to check the operation of the subroutines in the module , we will not be able to use elm reactor but will need to interact with elm repl .

Init

The first is init – the program that initializes the Model data record to use for the view to display the user interface. So we will need to define the Model record type first to use for init .

Since our program has only one up-to-date element, the integer value displayed between the + and - buttons, we will have a simple Model . And the init program to initialize the first data record is also unremarkable. No input parameters are required and the exact Model record is returned.

View

Next is view – a program to structure template HTML to build user interfaces. Here we also define the Message event message types to describe the meaning of user action. And with the expected interaction of two buttons to increase / decrease the value, we will have two types of messages, respectively, Increment and Decrement .

Here the id="app" and id="out" part I use as a selector for the CSS code after completing the operation logic.

Perhaps the view could have worked just fine. However, if you want to check the display results, you can write a main program right in the module Buttons and open the Buttons.elm file in the elm reactor .

We will still need to use elm repl so let’s open another command line window for elm reactor .

http://localhost:8000/src/Buttons.elm

Update

Finally update – this program will receive an event message Message and a Model record describing the data being displayed at the moment. Then update will parse the event message and generate a new Model record with the value increased or decreased by 1 unit.

Buttons

So all sub-program are working fine. Now we just need to finish the Buttons record definition and run the program in elm reactor .

http://localhost:8000/src/Main.elm

After trying to click on the + and - buttons, if you see that everything is working fine, you can press Ctrl+C to stop elm reactor and run the elm make command.

You can now append a <link href="style.css"> to the newly generated index.html file and add a bit of CSS code before opening this file directly in a web browser to test it out.

Oh… and that’s the sequence to create an element with Elm Architecture . On the other hand, Browser.sandbox will limit this element to not be able to interact with the external environment. So it’s safe to try creating a few element like drop-down lists or dropdown carousel to insert into the website you’ve built before.

To embed the newly created element into a web page that you have built before, you need to embed the button.js and style.css files in the template of the existing website. And add a pair of tags:

In case you want to create element that can interact with external components or send requests to query data to the server , then we have Browser.element . This program will require a few more elements in the input parameter to support data query operations from the server to be executed async . And so our next concern will be how to send HTTP request and update the results from async operations.

Elm Architecture in JS/jQuery