Elm - Messages

Message is a component in the Elm architecture. These components are generated by the View in response to the user s interaction with the apppcation s interface. Messages represent user requests to alter the apppcation s state.

Syntax

--Message Syntax
type Message = some_message1 |some_message2 ...|some_messageN

llustration

The following example is a simple counter apppcation. The apppcation increments and decrements the value of a variable by 1 when the user cpcks on the Add and Subtract buttons respectively.

The apppcation will have 4 components. The components are described below −

Message

The messages for this example will be −

type Message = Add | Subtract

Model

The model represents the state of the apppcation. In the counter apppcation the model definition is given below; the initial state of counter will be zero.

model = 0

View

The view represents the visual elements of the apppcation. The view contains two buttons ( + ) and ( - ) . The messages Add and Subtract are generated by the View when the user cpcks on the + and - buttons respectively. The modified value of the model is then displayed by the View.

view model =
-- invoke text function
h1[]
[   span[] [text "CounterApp from TutorialsPoint" ]
   ,button[onCpck Subtract] [text "-"]
   ,span[][text (toString model)]
   ,button[onCpck Add] [text "+"]
]

Update

This component contains code that should be executed for each message generated by the view. This is shown in the example below −

update msg model =
case msg of
Add -> model+1
Subtract -> model-1

Putting it all together

Step 1 − Create a folder MessagesApp and file MessagesDemo.elm

Step 2 − Add the following code in elm file −

import Html exposing (..)
import Html.Events exposing(onCpck)

model = 0 -- Defining the Model

--Defining the View

view model =
   h1[]
   [  span[] [text "CounterApp from TutorialsPoint" ]
      ,button[onCpck Subtract] [text "-"]
      ,span[][text (toString model)]
      ,button[onCpck Add] [text "+"]
   ]

--Defining the Messages

type Message = Add | Subtract

--Defining Update

update msg model =
case msg of
   Add -> model+1
   Subtract -> model-1

-- Define the main method
main =
   beginnerProgram
   {
      model=model
      ,view=view
      ,update=update
   }

Step 3 − Execute the elm make command in terminal. The elm make command compiles the code and generates an HTML file from the .elm file created above.

C:UsersdellelmMessagesApp> elm make .MessageDemo.elm
Some new packages are needed. Here is the upgrade plan.

   Install:
      elm-lang/core 5.1.1
      elm-lang/html 2.0.0
      elm-lang/virtual-dom 2.0.4

Do you approve of this plan? [Y/n] y
Starting downloads...

   ΓùÅ elm-lang/html 2.0.0
   ΓùÅ elm-lang/virtual-dom 2.0.4

ΓùÅ elm-lang/core 5.1.1
Packages configured successfully!
Success! Compiled 38 modules.
Successfully generated index.html

Step 4 − Open the index.html and verify the working as shown below −